Mirror
/
tildes
mirror of https://gitlab.com/tildes/tildes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
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
e9faf6e472
commit
541c69cc8a
5 changed files with 92 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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);
}
Write Preview
Loading…
Cancel
Save