From ec1acb115a1c9fcbe40383213b37d0f4d3e05b13 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Wed, 15 Apr 2020 18:33:28 -0600 Subject: [PATCH] Fixed some bugs with various settings combinations --- gulpfile.js | 3 +- static/stylesheet/dark-theme-has-class.less | 14 ++ .../stylesheet/dark-theme-not-overridden.less | 15 ++ static/stylesheet/dark-theme-styles.less | 120 +++++++++++++++ static/stylesheet/dark-theme.less | 144 ------------------ static/stylesheet/style.less | 14 -- templates/base.html | 41 ++--- templates/partial/flex.html | 6 +- 8 files changed, 177 insertions(+), 180 deletions(-) create mode 100644 static/stylesheet/dark-theme-has-class.less create mode 100644 static/stylesheet/dark-theme-not-overridden.less create mode 100644 static/stylesheet/dark-theme-styles.less delete mode 100644 static/stylesheet/dark-theme.less diff --git a/gulpfile.js b/gulpfile.js index c8e2d42..ec2dbb8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,8 +5,9 @@ var gulp = require('gulp'), gulp.task('less', function () { return gulp.src([ + './static/stylesheet/dark-theme-has-class.less', + './static/stylesheet/dark-theme-not-overridden.less', './static/stylesheet/style.less', - './static/stylesheet/dark-theme.less', ]) .pipe(less()) .pipe(minify()) diff --git a/static/stylesheet/dark-theme-has-class.less b/static/stylesheet/dark-theme-has-class.less new file mode 100644 index 0000000..6191a41 --- /dev/null +++ b/static/stylesheet/dark-theme-has-class.less @@ -0,0 +1,14 @@ +// +// Dark Theme CSS that gets activated when the element has the +// .dark-theme class. +// +// To use this, add the .dark-theme class to the element, and add the +// following : +// +// +// + +html.dark-theme { + @import (multiple) "dark-theme-styles.less"; +} diff --git a/static/stylesheet/dark-theme-not-overridden.less b/static/stylesheet/dark-theme-not-overridden.less new file mode 100644 index 0000000..8492092 --- /dev/null +++ b/static/stylesheet/dark-theme-not-overridden.less @@ -0,0 +1,15 @@ +// +// Dark Theme CSS for use inside of a media query. This will apply the dark +// style except when overriden by a .light-theme class on the tag. +// +// To use this, add a like the following (change the media query how you +// want): +// +// +// + +html:not(.light-theme) { + @import (multiple) "dark-theme-styles.less"; +} diff --git a/static/stylesheet/dark-theme-styles.less b/static/stylesheet/dark-theme-styles.less new file mode 100644 index 0000000..e68976b --- /dev/null +++ b/static/stylesheet/dark-theme-styles.less @@ -0,0 +1,120 @@ +// +// Dark Theme CSS styles. +// +// Don't directly include this file, instead, use the `dark-theme-class` or +// `dark-theme-override` files. +// + +@import "variables.less"; + +body { + background-color: @body-bg-dark-theme; + color: @text-color-dark-theme; +} + +hr { + color: @solid-dark-grey; + background-color: @solid-dark-grey; +} + +aside { + background-color: @sidebar-bg-dark-theme; + color: @sidebar-text-color; + +} + +main { + nav { + border-bottom-color: @nav-border-color-dark-theme; + } + + nav, .translations { + a { + border-color: @nav-border-color-dark-theme; + } + } + + article { + kbd { + background-color: #080808; + color: @light-grey; + } + + *:not(pre) > code { + background-color: #080808; + border-color: #000; + } + } + + footer { + border-top-color: @footer-border-color-dark-theme; + } +} + +div.related-posts { + border-color: @rel-post-border-color-dark-theme; +} + +// Admonition +div.admonition.attention { + p, div { + color: @admonition-attention-color-dark-theme; + background-color: @admonition-attention-bg-color-dark-theme; + } +} + +div.admonition.caution { + p, div { + color: @admonition-caution-color-dark-theme; + background-color: @admonition-caution-bg-color-dark-theme; + } +} + +div.admonition.danger { + p, div { + color: @admonition-danger-color-dark-theme; + background-color: @admonition-danger-bg-color-dark-theme; + } +} + +div.admonition.error { + p, div { + color: @admonition-error-color-dark-theme; + background-color: @admonition-error-bg-color-dark-theme; + } +} + +div.admonition.hint { + p, div { + color: @admonition-hint-color-dark-theme; + background-color: @admonition-hint-bg-color-dark-theme; + } +} + +div.admonition.important { + p, div { + color: @admonition-important-color-dark-theme; + background-color: @admonition-important-bg-color-dark-theme; + } +} + +div.admonition.note { + p, div { + color: @admonition-note-color-dark-theme; + background-color: @admonition-note-bg-color-dark-theme; + } +} + +div.admonition.tip { + p, div { + color: @admonition-tip-color-dark-theme; + background-color: @admonition-tip-bg-color-dark-theme; + } +} + +div.admonition.warning { + p, div { + color: @admonition-warning-color-dark-theme; + background-color: @admonition-warning-bg-color-dark-theme; + } +} diff --git a/static/stylesheet/dark-theme.less b/static/stylesheet/dark-theme.less deleted file mode 100644 index e5d852e..0000000 --- a/static/stylesheet/dark-theme.less +++ /dev/null @@ -1,144 +0,0 @@ -// -// Dark Theme CSS. -// -// If you want to always use the dark theme, then you can use a like the -// following: -// -// -// -// If you want to enable only when the prefers-color-scheme is set to dark (and -// potentially no-preference), make sure that you add the appropriate media -// query to the . For example: -// -// -// -// or -// -// -// -// depending on whether you want to default to dark mode or not when the user -// hasn't set a preference. -// - -@import "variables.less"; - -html:not(.light-theme), html.dark-theme { - body { - background-color: @body-bg-dark-theme; - color: @text-color-dark-theme; - } - - hr { - color: @solid-dark-grey; - background-color: @solid-dark-grey; - } - - aside { - background-color: @sidebar-bg-dark-theme; - color: @sidebar-text-color; - - } - - main { - nav { - border-bottom-color: @nav-border-color-dark-theme; - } - - nav, .translations { - a { - border-color: @nav-border-color-dark-theme; - } - } - - article { - kbd { - background-color: #080808; - color: @light-grey; - } - - *:not(pre) > code { - background-color: #080808; - border-color: #000; - } - } - - footer { - border-top-color: @footer-border-color-dark-theme; - } - } - - div.related-posts { - border-color: @rel-post-border-color-dark-theme; - } - - // Admonition - div.admonition.attention { - p, div { - color: @admonition-attention-color-dark-theme; - background-color: @admonition-attention-bg-color-dark-theme; - } - } - - div.admonition.caution { - p, div { - color: @admonition-caution-color-dark-theme; - background-color: @admonition-caution-bg-color-dark-theme; - } - } - - div.admonition.danger { - p, div { - color: @admonition-danger-color-dark-theme; - background-color: @admonition-danger-bg-color-dark-theme; - } - } - - div.admonition.error { - p, div { - color: @admonition-error-color-dark-theme; - background-color: @admonition-error-bg-color-dark-theme; - } - } - - div.admonition.hint { - p, div { - color: @admonition-hint-color-dark-theme; - background-color: @admonition-hint-bg-color-dark-theme; - } - } - - div.admonition.important { - p, div { - color: @admonition-important-color-dark-theme; - background-color: @admonition-important-bg-color-dark-theme; - } - } - - div.admonition.note { - p, div { - color: @admonition-note-color-dark-theme; - background-color: @admonition-note-bg-color-dark-theme; - } - } - - div.admonition.tip { - p, div { - color: @admonition-tip-color-dark-theme; - background-color: @admonition-tip-bg-color-dark-theme; - } - } - - div.admonition.warning { - p, div { - color: @admonition-warning-color-dark-theme; - background-color: @admonition-warning-bg-color-dark-theme; - } - } -} diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less index 75a11c7..5a07777 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -694,17 +694,3 @@ div.admonition.warning { color: @admonition-warning-color; background-color: @admonition-warning-bg-color; } - -// -// Dark Theme -// - -@media (prefers-color-scheme: dark) { - html:not(.light-theme) { - @import (multiple) "dark-theme.less"; - } -} - -html.dark-theme { - @import (multiple) "dark-theme.less"; -} diff --git a/templates/base.html b/templates/base.html index a93d8ca..e880a61 100644 --- a/templates/base.html +++ b/templates/base.html @@ -32,27 +32,28 @@ {% endif %} - - + + {% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE and not THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR == "dark" %} + + {% endif %} + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %} + + + {% endif %} + {% if THEME_COLOR_ENABLE_USER_OVERRIDE %} + + + {% endif %} - + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %} {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %} - const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)'); + {% if THEME_COLOR|default("light") == "dark" %} + const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)'); + {% else %} + const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)'); + {% endif %} {% endif %} function detectThemeAndSwitchStyle() {