From 45fcd3663ef57d549941d50bfd065f392a1e66ca Mon Sep 17 00:00:00 2001 From: Deimos Date: Mon, 22 Oct 2018 18:32:16 -0600 Subject: [PATCH] Split CSS themes into separate files --- tildes/scss/styles.scss | 8 +- tildes/scss/themes/_black.scss | 15 +++ tildes/scss/themes/_dark.scss | 15 +++ tildes/scss/themes/_light.scss | 14 +++ .../{_themes.scss => themes/_theme_base.scss} | 100 +++++------------- 5 files changed, 79 insertions(+), 73 deletions(-) create mode 100644 tildes/scss/themes/_black.scss create mode 100644 tildes/scss/themes/_dark.scss create mode 100644 tildes/scss/themes/_light.scss rename tildes/scss/{_themes.scss => themes/_theme_base.scss} (90%) diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index 2d04be8..78d5d9d 100644 --- a/tildes/scss/styles.scss +++ b/tildes/scss/styles.scss @@ -6,7 +6,6 @@ @import 'base'; @import 'layout'; -@import 'themes'; @import 'modules/btn'; @import 'modules/comment'; @@ -34,3 +33,10 @@ @import 'modules/time'; @import 'modules/toast'; @import 'modules/topic'; + +// 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/black'; +@import 'themes/dark'; +@import 'themes/light'; diff --git a/tildes/scss/themes/_black.scss b/tildes/scss/themes/_black.scss new file mode 100644 index 0000000..8f32768 --- /dev/null +++ b/tildes/scss/themes/_black.scss @@ -0,0 +1,15 @@ +$theme-black: ( + 'foreground-primary': #ccc, + 'foreground-secondary': #888, + 'foreground-highlight': #ddd, + 'foreground-middle': #aaa, + 'foreground-extreme': #fff, + 'background-primary': #000, + 'background-secondary': #222, + 'background-input': #000, + 'border-primary': #444, +); + +body.theme-black { + @include use-theme($theme-black); +} diff --git a/tildes/scss/themes/_dark.scss b/tildes/scss/themes/_dark.scss new file mode 100644 index 0000000..240941f --- /dev/null +++ b/tildes/scss/themes/_dark.scss @@ -0,0 +1,15 @@ +$theme-dark: ( + 'foreground-primary': $fg-light, + 'foreground-secondary': $fg-darkest, + 'foreground-highlight': $fg-lightest, + 'foreground-middle': #6e8186, + 'foreground-extreme': #fff, + 'background-primary': $bg-darkest, + 'background-secondary': $bg-dark, + 'background-input': #001f27, + 'border-primary': #33555e, +); + +body.theme-dark { + @include use-theme($theme-dark); +} diff --git a/tildes/scss/themes/_light.scss b/tildes/scss/themes/_light.scss new file mode 100644 index 0000000..e65a783 --- /dev/null +++ b/tildes/scss/themes/_light.scss @@ -0,0 +1,14 @@ +$theme-light: ( + 'foreground-primary': $fg-dark, + 'foreground-secondary': $fg-lightest, + 'foreground-highlight': $fg-darkest, + 'foreground-middle': #7c8e92, + 'background-primary': $bg-lightest, + 'background-secondary': $bg-light, + 'background-input': #fefbf1, + 'border-primary': #cbc5b6, +); + +body.theme-light { + @include use-theme($theme-light); +} diff --git a/tildes/scss/_themes.scss b/tildes/scss/themes/_theme_base.scss similarity index 90% rename from tildes/scss/_themes.scss rename to tildes/scss/themes/_theme_base.scss index ad921f4..f9768aa 100644 --- a/tildes/scss/_themes.scss +++ b/tildes/scss/themes/_theme_base.scss @@ -1,70 +1,21 @@ // Copyright (c) 2018 Tildes contributors // SPDX-License-Identifier: AGPL-3.0-or-later -// This file should only contain rules that need to differ between the +// This file should only contain rules that need to be affected by all the // different themes, defined inside the `use-theme` mixin below. // Note that all rules inside the mixin will be included in the compiled CSS // once for each theme, so they should be kept as minimal as possible. -// Each theme is defined by a SCSS map and a `body.theme-` selector. -// The `use-theme` mixin is called inside the body.theme and takes the theme's -// map as its only argument, applying each defined color available in the map. -// If a color variable is left undefined in a map, it will use the default's -// `$theme-base` for it instead. - -$theme-base: ( - 'foreground-primary': #333, - 'foreground-secondary': #999, - 'foreground-highlight': #222, - 'foreground-middle': #666, - 'foreground-extreme': #000, - 'background-primary': #fff, - 'background-secondary': #eee, - 'background-input': #f7f7f7, - 'border-primary': #ccc, - 'anchor-normal': $blue, - 'anchor-normal-hover': darken($blue, 5%), - 'anchor-normal-visited': $violet, -); - -$theme-white: $theme-base; - -$theme-light: map-merge($theme-base, ( - 'foreground-primary': $fg-dark, - 'foreground-secondary': $fg-lightest, - 'foreground-highlight': $fg-darkest, - 'foreground-middle': #7c8e92, - 'background-primary': $bg-lightest, - 'background-secondary': $bg-light, - 'background-input': #fefbf1, - 'border-primary': #cbc5b6, -)); - -$theme-dark: map-merge($theme-base, ( - 'foreground-primary': $fg-light, - 'foreground-secondary': $fg-darkest, - 'foreground-highlight': $fg-lightest, - 'foreground-middle': #6e8186, - 'foreground-extreme': #fff, - 'background-primary': $bg-darkest, - 'background-secondary': $bg-dark, - 'background-input': #001f27, - 'border-primary': #33555e, -)); - -$theme-black: map-merge($theme-base, ( - 'foreground-primary': #ccc, - 'foreground-secondary': #888, - 'foreground-highlight': #ddd, - 'foreground-middle': #aaa, - 'foreground-extreme': #fff, - 'background-primary': #000, - 'background-secondary': #222, - 'background-input': #000, - 'border-primary': #444, -)); +// Each theme should be defined in its own SCSS file, and consist of a SCSS map +// and a unique `body.theme-` selector. +// The `use-theme` mixin is called inside the body.theme- block and takes +// the theme's map as its only argument, applying each defined color available +// in the map. If a color variable is left undefined in the theme's map, it +// will fall back to the default value from `$theme-base` instead. @mixin use-theme($theme) { + $theme: init-theme($theme); + $foreground-primary: map-get($theme, 'foreground-primary'); $foreground-secondary: map-get($theme, 'foreground-secondary'); $foreground-highlight: map-get($theme, 'foreground-highlight'); @@ -700,21 +651,26 @@ $theme-black: map-merge($theme-base, ( } } -body { - @include use-theme($theme-white); +@function init-theme($theme-map) { + @return map-merge($theme-base, $theme-map); } -body.theme-light { - @include use-theme($theme-light); -} - -body.theme-dark { - @include use-theme($theme-dark); -} +$theme-base: ( + 'foreground-primary': #333, + 'foreground-secondary': #999, + 'foreground-highlight': #222, + 'foreground-middle': #666, + 'foreground-extreme': #000, + 'background-primary': #fff, + 'background-secondary': #eee, + 'background-input': #f7f7f7, + 'border-primary': #ccc, + 'anchor-normal': $blue, + 'anchor-normal-hover': darken($blue, 5%), + 'anchor-normal-visited': $violet, +); -body.theme-black { - @include use-theme($theme-black); +// define the default theme using the base values +body { + @include use-theme($theme-base); } - -// 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