Browse Source

Rework theme system a little more

Nothing too significant in here, but it rearranges some of the theme
initialization a little more, including making sure that each theme sets
a number of "essential" colors. It also moves the default theme out into
its own file, instead of having it at the bottom of _theme_base.scss for
no particular reason.
merge-requests/60/head
Deimos 6 years ago
parent
commit
541c69cc8a
  1. 1
      tildes/scss/styles.scss
  2. 15
      tildes/scss/themes/_black.scss
  3. 27
      tildes/scss/themes/_default.scss
  4. 4
      tildes/scss/themes/_solarized.scss
  5. 97
      tildes/scss/themes/_theme_base.scss

1
tildes/scss/styles.scss

@ -37,6 +37,7 @@
// Note: if you add a new theme, you may also want to add a new theme-color
// meta tag inside the base.jinja2 template, so mobile browsers can match
@import 'themes/theme_base';
@import 'themes/default';
@import 'themes/black';
@import 'themes/dracula';
@import 'themes/solarized';

15
tildes/scss/themes/_black.scss

@ -1,11 +1,20 @@
$theme-black: (
"alert": #cb4b16, // Solarized
"background-primary": #000,
"background-secondary": #222,
"error": red,
"foreground-primary": #ccc,
"foreground-secondary": #888,
"foreground-highlight": #ddd,
"background-primary": #000,
"background-secondary": #222,
"background-input": #000,
"border": #444,
"comment-label-exemplary": #268bd2, // Solarized
"comment-label-joke": #859900, // Solarized
"comment-label-noise": #b58900, // Solarized
"comment-label-offtopic": #2aa198, // Solarized
"comment-label-malice": #dc322f, // Solarized
"link": #268bd2, // Solarized
"link-visited": #6c71c4, // Solarized
"warning": #b58900, // Solarized
);
body.theme-black {

27
tildes/scss/themes/_default.scss

@ -0,0 +1,27 @@
// Contains the default Tildes theme
$default-theme: (
"alert": #cb4b16, // Solarized
"background-primary": #fff,
"background-secondary": #eee,
"border": #ccc,
"comment-label-exemplary": #268bd2, // Solarized
"comment-label-joke": #859900, // Solarized
"comment-label-noise": #b58900, // Solarized
"comment-label-offtopic": #2aa198, // Solarized
"comment-label-malice": #dc322f, // Solarized
"error": #f00,
"foreground-highlight": #222,
"foreground-primary": #333,
"foreground-secondary": #999,
"link": #268bd2, // Solarized
"link-visited": #6c71c4, // Solarized
"stripe-mine": #6c71c4, // Solarized
"topic-tag-nsfw": #dc322f, // Solarized
"warning": #b58900, // Solarized
);
// define the default theme using the base values
body {
@include use-theme($default-theme);
}

4
tildes/scss/themes/_solarized.scss

@ -43,10 +43,6 @@ $solarized-base: (
"error": $red,
"link": $blue,
"link-visited": $violet,
"stripe-mine": $violet,
"stripe-target": $yellow,
"topic-tag-nsfw": $red,
"topic-tag-spoiler": $yellow,
"warning": $yellow,
);

97
tildes/scss/themes/_theme_base.scss

@ -688,70 +688,77 @@
}
}
@function init-theme($theme-map) {
$theme: map-merge($theme-base, $theme-map);
@function map-get-fallback($map, $preferred-key, $fallback-key) {
// map-get that will fall back to a second key if the first isn't set
@if (map-has-key($map, $preferred-key)) {
@return map-get($map, $preferred-key);
}
@return map-get($map, $fallback-key);
}
@function init-theme($theme) {
// check to make sure the theme has all of the essential colors set
$essential-keys:
"alert"
"background-primary"
"background-secondary"
"comment-label-exemplary"
"comment-label-joke"
"comment-label-noise"
"comment-label-offtopic"
"comment-label-malice"
"error"
"foreground-primary"
"foreground-secondary"
"link"
"link-visited"
"warning"
;
@each $key in $essential-keys {
@if (not map-has-key($theme, $key)) {
@error "Missing essential key in theme: #{$key}";
}
}
// set $is-light as a bool for whether background-primary seems light or dark
$is-light: lightness(map-get($theme, "background-primary")) > 50;
// button: if not defined, use link color
$button: map-get($theme, "button");
$button: map-get($theme, "link") !default;
// colors that simply fall back to another if not defined
$background-input: map-get-fallback($theme, "background-input", "background-primary");
$border: map-get-fallback($theme, "border", "foreground-secondary");
$button: map-get-fallback($theme, "button", "link");
$button-used: map-get-fallback($theme, "button-used", "link-visited");
$foreground-highlight: map-get-fallback($theme, "foreground-highlight", "foreground-primary");
$stripe-mine: map-get-fallback($theme, "stripe-mine", "link-visited");
$stripe-target: map-get-fallback($theme, "stripe-target", "warning");
$topic-tag-nsfw: map-get-fallback($theme, "topic-tag-nsfw", "error");
$topic-tag-spoiler: map-get-fallback($theme, "topic-tag-spoiler", "warning");
// button-used: if not defined, use link-visited color
$button-used: map-get($theme, "button-used");
$button-used: map-get($theme, "link-visited") !default;
// foreground-extreme: if not defined, use white on a dark background and black on a light one
$foreground-extreme: map-get($theme, "foreground-extreme");
$foreground-extreme: if($is-light, #000, #fff) !default;
// foreground-middle: if not defined, mix foreground-primary and foreground-secondary
$foreground-middle: map-get($theme, "foreground-middle");
$foreground-middle: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-secondary")) !default;
// foreground-extreme: if not defined, use white on a dark background and black on a light one
$foreground-extreme: map-get($theme, "foreground-extreme");
$foreground-extreme: if($is-light, #000, #fff) !default;
// link-hover: if not defined, darken the link color slightly
$link-hover: map-get($theme, "link-hover");
$link-hover: darken(map-get($theme, "link"), 5%) !default;
// warning: if not defined, use alert color
$warning: map-get($theme, "warning");
$warning: map-get($theme, "alert") !default;
@return map-merge($theme, (
"background-input": $background-input,
"border": $border,
"button": $button,
"button-used": $button-used,
"foreground-extreme": $foreground-extreme,
"foreground-highlight": $foreground-highlight,
"foreground-middle": $foreground-middle,
"link-hover": $link-hover,
"warning": $warning,
"stripe-mine": $stripe-mine,
"stripe-target": $stripe-target,
"topic-tag-nsfw": $topic-tag-nsfw,
"topic-tag-spoiler": $topic-tag-spoiler,
));
}
$theme-base: (
"alert": #cb4b16, // Solarized
"background-input": #fff,
"background-primary": #fff,
"background-secondary": #eee,
"border": #ccc,
"comment-label-exemplary": #268bd2, // Solarized
"comment-label-joke": #859900, // Solarized
"comment-label-noise": #b58900, // Solarized
"comment-label-offtopic": #2aa198, // Solarized
"comment-label-malice": #dc322f, // Solarized
"error": #f00,
"foreground-highlight": #222,
"foreground-primary": #333,
"foreground-secondary": #999,
"link": #268bd2, // Solarized
"link-visited": #6c71c4, // Solarized
"stripe-mine": #6c71c4, // Solarized
"stripe-target": #b58900, // Solarized
"topic-tag-nsfw": #dc322f, // Solarized
"topic-tag-spoiler": #b58900, // Solarized
);
// define the default theme using the base values
body {
@include use-theme($theme-base);
}
Loading…
Cancel
Save