Browse Source

Split CSS themes into separate files

merge-requests/51/head
Deimos 6 years ago
parent
commit
45fcd3663e
  1. 8
      tildes/scss/styles.scss
  2. 15
      tildes/scss/themes/_black.scss
  3. 15
      tildes/scss/themes/_dark.scss
  4. 14
      tildes/scss/themes/_light.scss
  5. 100
      tildes/scss/themes/_theme_base.scss

8
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';

15
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);
}

15
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);
}

14
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);
}

100
tildes/scss/_themes.scss → tildes/scss/themes/_theme_base.scss

@ -1,70 +1,21 @@
// Copyright (c) 2018 Tildes contributors <code@tildes.net>
// 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-<abc>` 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-<name>` selector.
// The `use-theme` mixin is called inside the body.theme-<name> 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
Loading…
Cancel
Save