From 543ae58a37fb1a81aa71320bbffa026c1509daff Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Tue, 7 Apr 2020 00:22:07 -0600 Subject: [PATCH 01/17] Added support for dark mode detection --- static/stylesheet/style.less | 9 +++++++++ templates/partial/flex.html | 39 +++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less index bc18dce..dc677a1 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -288,6 +288,11 @@ main { color: @footer-text-color; font-size: 11px; } + + // Flex theme and Theme selection separator + span.theme-separator { + margin: 0 4px; + } } } @@ -556,6 +561,10 @@ ul.social { left: 25vw; overflow-x: hidden; + nav { + text-align: right; + } + article { &.single { diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 4447454..f5b8dea 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -1,3 +1,40 @@

{{ _('Built with %(pelican_url)s using %(flex_url)s theme', pelican_url='Pelican', - flex_url='Flex'|safe) }}

+ flex_url='Flex'|safe) }} + | + Switch to the + + dark + | + light + | + browser + + theme +

+ From 91aa9016e7106b4b08e7f0acc797181c87512b59 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Tue, 7 Apr 2020 21:36:38 -0600 Subject: [PATCH 02/17] Dark mode for Pygments --- templates/partial/flex.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/templates/partial/flex.html b/templates/partial/flex.html index f5b8dea..3099ec7 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -20,7 +20,17 @@ if (theme === 'browser') { theme = darkSchemeWatch.matches ? 'dark' : 'light'; } + const pygmentsTheme = theme === 'light' + ? '{{ PYGMENTS_STYLE }}' + : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}' console.log(`Switching theme to ${theme}.`) + + Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => { + if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) { + linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`; + } + }); + if (theme === 'dark') { document.body.classList.add('dark_theme'); document.body.classList.remove('light_theme'); From 6816d4800bc010eb66901ca125edfeda978a8050 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Tue, 7 Apr 2020 22:16:41 -0600 Subject: [PATCH 03/17] Add a couple comments --- templates/partial/flex.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 3099ec7..8843889 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -20,11 +20,13 @@ if (theme === 'browser') { theme = darkSchemeWatch.matches ? 'dark' : 'light'; } + console.log(`Switching theme to ${theme}.`) + + // Find the pygments CSS file and change it to the theme specified in the + // config. const pygmentsTheme = theme === 'light' ? '{{ PYGMENTS_STYLE }}' : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}' - console.log(`Switching theme to ${theme}.`) - Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => { if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) { linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`; @@ -32,11 +34,11 @@ }); if (theme === 'dark') { - document.body.classList.add('dark_theme'); - document.body.classList.remove('light_theme'); + document.body.classList.add('dark-theme'); + document.body.classList.remove('light-theme'); } else { - document.body.classList.add('light_theme'); - document.body.classList.remove('dark_theme'); + document.body.classList.add('light-theme'); + document.body.classList.remove('dark-theme'); } } From 5955f45a304595ee2e4354b332c73f0721af353e Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Wed, 8 Apr 2020 00:42:06 -0600 Subject: [PATCH 04/17] Improve the theme detection logic --- templates/partial/flex.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 8843889..3a963a1 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -16,8 +16,8 @@ const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)'); function detectThemeAndSwitchStyle() { - let theme = localStorage.getItem('themeOverride') || 'browser'; - if (theme === 'browser') { + let theme = localStorage.getItem('themeOverride'); + if (theme !== 'light' && theme !== 'dark') { theme = darkSchemeWatch.matches ? 'dark' : 'light'; } console.log(`Switching theme to ${theme}.`) From 02e1404e34dd6751cef5a6f6adaec9cd89cab2c5 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 9 Apr 2020 09:26:20 -0600 Subject: [PATCH 05/17] Make pygments style switching work when JS is off, but prefers-color-scheme is enabled --- templates/base.html | 7 ++++++- templates/partial/flex.html | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/templates/base.html b/templates/base.html index 28afc98..a6721fc 100644 --- a/templates/base.html +++ b/templates/base.html @@ -36,7 +36,12 @@ {% endif %} - + + diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 3a963a1..16dd454 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -22,8 +22,8 @@ } console.log(`Switching theme to ${theme}.`) - // Find the pygments CSS file and change it to the theme specified in the - // config. + // Find the pygments CSS files (there are two, one for each theme) and + // change them both to the theme specified by the user. const pygmentsTheme = theme === 'light' ? '{{ PYGMENTS_STYLE }}' : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}' From 927306ddb97c9e185fb4f3c144e2fbe449f47daf Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Tue, 14 Apr 2020 21:58:04 -0600 Subject: [PATCH 06/17] Undo changes that are included in other PRs --- static/stylesheet/style.less | 12 ++++++------ templates/partial/flex.html | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less index dc677a1..d273e66 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -134,6 +134,10 @@ main { border-right: @nav-border-color 1px solid; } + :first-child { + border-left: none; + } + :last-child { border-right: none; } @@ -290,8 +294,8 @@ main { } // Flex theme and Theme selection separator - span.theme-separator { - margin: 0 4px; + span.footer-separator { + margin: 0 6px; } } } @@ -561,10 +565,6 @@ ul.social { left: 25vw; overflow-x: hidden; - nav { - text-align: right; - } - article { &.single { diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 16dd454..9514d99 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -1,7 +1,7 @@

{{ _('Built with %(pelican_url)s using %(flex_url)s theme', pelican_url='Pelican', flex_url='Flex'|safe) }} - | + | Switch to the dark From 0d56e19d6adaaf6a996571fd87bc8990597d876f Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Tue, 14 Apr 2020 22:04:05 -0600 Subject: [PATCH 07/17] Default to monokai in dark theme and fixed defaulting mechanism in the JS --- templates/base.html | 2 +- templates/partial/flex.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/base.html b/templates/base.html index a6721fc..37c4c5b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -38,7 +38,7 @@ + href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE_DARK|default('monokai') }}.min.css"> diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 9514d99..80909e0 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -25,8 +25,8 @@ // Find the pygments CSS files (there are two, one for each theme) and // change them both to the theme specified by the user. const pygmentsTheme = theme === 'light' - ? '{{ PYGMENTS_STYLE }}' - : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}' + ? '{{ PYGMENTS_STYLE|default('github') }}' + : '{{ PYGMENTS_STYLE_DARK|default('monokai') }}' Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => { if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) { linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`; From 9b3495da5d3c22fab25c809f62962c7cca099c12 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Wed, 15 Apr 2020 00:31:15 -0600 Subject: [PATCH 08/17] Moved all of the styles in to Flex from my website --- static/stylesheet/dark-theme.less | 114 ++++++++++++++++++++++++++++++ static/stylesheet/style.less | 16 ++++- static/stylesheet/variables.less | 27 ++++++- templates/partial/flex.html | 9 +-- 4 files changed, 160 insertions(+), 6 deletions(-) create mode 100644 static/stylesheet/dark-theme.less diff --git a/static/stylesheet/dark-theme.less b/static/stylesheet/dark-theme.less new file mode 100644 index 0000000..ae16b4f --- /dev/null +++ b/static/stylesheet/dark-theme.less @@ -0,0 +1,114 @@ +// This stylesheet contains style overrides for the dark theme. +@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/style.less b/static/stylesheet/style.less index d273e66..75a11c7 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -293,7 +293,7 @@ main { font-size: 11px; } - // Flex theme and Theme selection separator + // Flex credits and theme selection separator span.footer-separator { margin: 0 6px; } @@ -694,3 +694,17 @@ 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/static/stylesheet/variables.less b/static/stylesheet/variables.less index 4978c55..02cfaed 100644 --- a/static/stylesheet/variables.less +++ b/static/stylesheet/variables.less @@ -6,6 +6,7 @@ @light-grey: #eeeeee; @med-grey: #999999; @dark-grey: #242121; +@solid-dark-grey: #222222; // Font family @sans: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Liberation Sans', 'DejaVu Sans', 'Verdana', 'Helvetica', 'Arial', sans-serif; @@ -13,7 +14,9 @@ // Body @body-bg: @white; +@body-bg-dark-theme: @grey; @text-color: @dark-grey; +@text-color-dark-theme: @light-grey; // Links @link-color: @orange; @@ -21,6 +24,7 @@ // Sidebar (aside) @sidebar-bg: @grey; +@sidebar-bg-dark-theme: @solid-dark-grey; @sidebar-text-color: @white; @sidebar-link-color: @white; @sidebar-link-hover-color: @light-grey; @@ -41,12 +45,15 @@ // Footer @footer-text-color: @med-grey; @footer-border-color: @light-grey; +@footer-border-color-dark-theme: @solid-dark-grey; -// Relativer posts +// Relative posts @rel-post-border-color: @light-grey; +@rel-post-border-color-dark-theme: @solid-dark-grey; // Nav @nav-border-color: @light-grey; +@nav-border-color-dark-theme: @solid-dark-grey; // Social buttons @@ -77,37 +84,55 @@ // Admonition colors @admonition-attention-color: #856404; +@admonition-attention-color-dark-theme: #fbda7a; @admonition-attention-bg-color: #fff3cd; +@admonition-attention-bg-color-dark-theme: #4a3900; @admonition-attention-icon: "\f071\00a0 "; @admonition-caution-color: @admonition-attention-color; +@admonition-caution-color-dark-theme: @admonition-attention-color-dark-theme; @admonition-caution-bg-color: @admonition-attention-bg-color; +@admonition-caution-bg-color-dark-theme: @admonition-attention-bg-color-dark-theme; @admonition-caution-icon: @admonition-attention-icon; @admonition-warning-color: @admonition-attention-color; +@admonition-warning-color-dark-theme: @admonition-attention-color-dark-theme; @admonition-warning-bg-color: @admonition-attention-bg-color; +@admonition-warning-bg-color-dark-theme: @admonition-attention-bg-color-dark-theme; @admonition-warning-icon: @admonition-attention-icon; @admonition-danger-color: #721c24; +@admonition-danger-color-dark-theme: #ebadb3; @admonition-danger-bg-color: #f8d7da; +@admonition-danger-bg-color-dark-theme: #28070a; @admonition-danger-icon: "\f06a\00a0 "; @admonition-error-color: @admonition-danger-color; +@admonition-error-color-dark-theme: @admonition-danger-color-dark-theme; @admonition-error-bg-color: @admonition-danger-bg-color; +@admonition-error-bg-color-dark-theme: @admonition-danger-bg-color-dark-theme; @admonition-error-icon: @admonition-danger-icon; @admonition-hint-color: #004085 ; +@admonition-hint-color-dark-theme: #7abaff; @admonition-hint-bg-color: #cce5ff; +@admonition-hint-bg-color-dark-theme: #001933; @admonition-hint-icon: "\f0eb\00a0 "; @admonition-tip-color: @admonition-hint-color; +@admonition-tip-color-dark-theme: @admonition-hint-color-dark-theme; @admonition-tip-bg-color: @admonition-hint-bg-color; +@admonition-tip-bg-color-dark-theme: @admonition-hint-bg-color-dark-theme; @admonition-tip-icon: @admonition-hint-icon; @admonition-important-color: #155724; +@admonition-important-color-dark-theme: #a8eab7; @admonition-important-bg-color: #d4edda; +@admonition-important-bg-color-dark-theme: #122b18; @admonition-important-icon: "\f05a\00a0 "; @admonition-note-color: @admonition-important-color; +@admonition-note-color-dark-theme: @admonition-important-color-dark-theme; @admonition-note-bg-color: @admonition-important-bg-color; +@admonition-note-bg-color-dark-theme: @admonition-important-bg-color-dark-theme; @admonition-note-icon: @admonition-important-icon; diff --git a/templates/partial/flex.html b/templates/partial/flex.html index 80909e0..c881e3b 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -33,12 +33,13 @@ } }); + const htmlElement = document.getElementsByTagName('html')[0]; if (theme === 'dark') { - document.body.classList.add('dark-theme'); - document.body.classList.remove('light-theme'); + htmlElement.classList.add('dark-theme'); + htmlElement.classList.remove('light-theme'); } else { - document.body.classList.add('light-theme'); - document.body.classList.remove('dark-theme'); + htmlElement.classList.add('light-theme'); + htmlElement.classList.remove('dark-theme'); } } From 904484e2b44a12fc8f181b3e53be261e256aa139 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Wed, 15 Apr 2020 16:55:28 -0600 Subject: [PATCH 09/17] Added themeing options Added THEME_COLOR, THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE, and THEME_COLOR_ENABLE_USER_OVERRIDE options --- gulpfile.js | 5 +- static/stylesheet/dark-theme.less | 232 +++++++++++++++++------------- templates/base.html | 56 +++++++- templates/partial/flex.html | 93 +++++++----- 4 files changed, 239 insertions(+), 147 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index b7e671c..c8e2d42 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,7 +4,10 @@ var gulp = require('gulp'), minify = require('gulp-cssnano'); gulp.task('less', function () { - return gulp.src('./static/stylesheet/style.less') + return gulp.src([ + './static/stylesheet/style.less', + './static/stylesheet/dark-theme.less', + ]) .pipe(less()) .pipe(minify()) .pipe(rename({ diff --git a/static/stylesheet/dark-theme.less b/static/stylesheet/dark-theme.less index ae16b4f..e5d852e 100644 --- a/static/stylesheet/dark-theme.less +++ b/static/stylesheet/dark-theme.less @@ -1,114 +1,144 @@ -// This stylesheet contains style overrides for the dark theme. +// +// 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"; -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; +html:not(.light-theme), html.dark-theme { + body { + background-color: @body-bg-dark-theme; + color: @text-color-dark-theme; } - nav, .translations { - a { - border-color: @nav-border-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; } } - article { - kbd { - background-color: #080808; - color: @light-grey; - } + div.related-posts { + border-color: @rel-post-border-color-dark-theme; + } - *:not(pre) > code { - background-color: #080808; - border-color: #000; + // Admonition + div.admonition.attention { + p, div { + color: @admonition-attention-color-dark-theme; + background-color: @admonition-attention-bg-color-dark-theme; } } - 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; + 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/templates/base.html b/templates/base.html index 37c4c5b..a93d8ca 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,7 +5,11 @@ {% endif %} - + @@ -28,6 +32,50 @@ {% endif %} + + + + + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %} + + {% endif %} + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or not THEME_COLOR or THEME_COLOR == "light" %} + + {% endif %} + {% if USE_TIPUE_SEARCH %} @@ -36,12 +84,6 @@ {% endif %} - - diff --git a/templates/partial/flex.html b/templates/partial/flex.html index c881e3b..c43198c 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -1,53 +1,70 @@ -

{{ _('Built with %(pelican_url)s using %(flex_url)s theme', - pelican_url='Pelican', - flex_url='Flex'|safe) }} +

+{{ + _('Built with %(pelican_url)s using %(flex_url)s theme', + pelican_url='Pelican', + flex_url='Flex'|safe) +}} +{% if THEME_COLOR_ENABLE_USER_OVERRIDE %} | Switch to the dark | light - | - browser + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %} + | + browser + + {% endif %} theme +{% endif %}

- + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %} + darkSchemeWatch.addListener(detectThemeAndSwitchStyle); + {% endif %} + +{% endif %} From ec1acb115a1c9fcbe40383213b37d0f4d3e05b13 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Wed, 15 Apr 2020 18:33:28 -0600 Subject: [PATCH 10/17] 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() { From 0d047f73271edbd9242c55645525df22b472c99f Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 16 Apr 2020 09:00:25 -0600 Subject: [PATCH 11/17] Address a few comments from from PR --- templates/base.html | 8 ++++---- templates/partial/flex.html | 7 ++----- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/templates/base.html b/templates/base.html index e880a61..5702021 100644 --- a/templates/base.html +++ b/templates/base.html @@ -32,13 +32,13 @@ {% endif %} - + {# DARK THEME STYLES #} {% 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 %} - + {# Enable dark mode when media query matches and .light-theme class does not exist on tag #} {% endif %} {% if THEME_COLOR_ENABLE_USER_OVERRIDE %} - + {# Enable dark mode when .dark-theme class exists on tag #} {% endif %} - + {# PYGMENTS STYLES #} {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %} | light + | + browser - {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %} - | - browser - - {% endif %} theme {% endif %}

From da942970cca97068359fd8fa07b73cdf262922bc Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 16 Apr 2020 10:41:43 -0600 Subject: [PATCH 12/17] Fixed issue with styling admonitions after #207 --- static/stylesheet/dark-theme-styles.less | 54 ++++++++---------------- 1 file changed, 18 insertions(+), 36 deletions(-) diff --git a/static/stylesheet/dark-theme-styles.less b/static/stylesheet/dark-theme-styles.less index e68976b..6eec205 100644 --- a/static/stylesheet/dark-theme-styles.less +++ b/static/stylesheet/dark-theme-styles.less @@ -57,64 +57,46 @@ div.related-posts { // Admonition div.admonition.attention { - p, div { - color: @admonition-attention-color-dark-theme; - background-color: @admonition-attention-bg-color-dark-theme; - } + 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; - } + 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; - } + 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; - } + 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; - } + 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; - } + 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; - } + 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; - } + 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; - } + color: @admonition-warning-color-dark-theme; + background-color: @admonition-warning-bg-color-dark-theme; } From b4ee01e2516640229024b4fc2653df5a6fc8b8db Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 16 Apr 2020 11:07:03 -0600 Subject: [PATCH 13/17] Added Isso dark mode styles --- static/stylesheet/dark-theme-styles.less | 43 ++++++++++++++++++++++++ static/stylesheet/variables.less | 1 + 2 files changed, 44 insertions(+) diff --git a/static/stylesheet/dark-theme-styles.less b/static/stylesheet/dark-theme-styles.less index 6eec205..9c25a8d 100644 --- a/static/stylesheet/dark-theme-styles.less +++ b/static/stylesheet/dark-theme-styles.less @@ -44,6 +44,49 @@ main { background-color: #080808; border-color: #000; } + + section#isso-thread { + div.textarea, + .auth-section p.input-wrapper input, + .notification-section input { + background: @very-dark-grey; + color: @light-grey; + } + + >h4 { + color: @light-grey; + } + + .isso-postbox > .form-wrapper .preview { + background: repeating-linear-gradient( + -45deg, + @solid-dark-grey, @solid-dark-grey 10px, + @very-dark-grey 10px, @very-dark-grey 20px + ); + } + + .isso-comment > div.text-wrapper { + > .isso-comment-header { + .author { + color: @light-grey; + } + + .spacer, a.permalink, .note, a.parent { + color: @med-grey; + + &:hover { + color: @light-grey; + } + } + } + + > .isso-comment-footer a:hover { + // Unfortunately, Isso uses a lot of !important in its styles, so I + // have to override that. + text-shadow: @dark-grey 0 0 1px !important; + } + } + } } footer { diff --git a/static/stylesheet/variables.less b/static/stylesheet/variables.less index 02cfaed..7cde418 100644 --- a/static/stylesheet/variables.less +++ b/static/stylesheet/variables.less @@ -7,6 +7,7 @@ @med-grey: #999999; @dark-grey: #242121; @solid-dark-grey: #222222; +@very-dark-grey: #1a1a1a; // Font family @sans: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Liberation Sans', 'DejaVu Sans', 'Verdana', 'Helvetica', 'Arial', sans-serif; From e854dcf9bb4fa75abfcc559da01559dca730bf2b Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 16 Apr 2020 11:24:39 -0600 Subject: [PATCH 14/17] Added tipue_search styles for dark mode --- static/stylesheet/dark-theme-styles.less | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/static/stylesheet/dark-theme-styles.less b/static/stylesheet/dark-theme-styles.less index 9c25a8d..b70d735 100644 --- a/static/stylesheet/dark-theme-styles.less +++ b/static/stylesheet/dark-theme-styles.less @@ -13,14 +13,18 @@ body { } hr { - color: @solid-dark-grey; background-color: @solid-dark-grey; + color: @solid-dark-grey; } aside { background-color: @sidebar-bg-dark-theme; color: @sidebar-text-color; + form.navbar-search input#tipue_search_input { + background-color: @very-dark-grey; + color: @light-grey; + } } main { @@ -40,11 +44,21 @@ main { color: @light-grey; } + blockquote, pre { + border-left: 8px solid #ffffff33; + } + *:not(pre) > code { background-color: #080808; border-color: #000; } + div#tipue_search_content .tipue_search_result { + span.tipue_search_content_bold { + color: white; + } + } + section#isso-thread { div.textarea, .auth-section p.input-wrapper input, From a18c4213548bbea7d4e8f15ecf416cb83173ef57 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 16 Apr 2020 13:48:24 -0600 Subject: [PATCH 15/17] Made the switch text translateable --- templates/partial/flex.html | 15 ++++++--------- translations/messages.pot | 7 ++++++- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/templates/partial/flex.html b/templates/partial/flex.html index f444ef3..be5ca05 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -6,15 +6,12 @@ }} {% if THEME_COLOR_ENABLE_USER_OVERRIDE %} | - Switch to the - - dark - | - light - | - browser - - theme + {{ + _('Switch to the %(dark_url)s | %(light_url)s | %(browser_url)s theme', + dark_url='dark', + light_url='light', + browser_url='browser'|safe) + }} {% endif %}

{% if THEME_COLOR_ENABLE_USER_OVERRIDE %} diff --git a/translations/messages.pot b/translations/messages.pot index ae67d05..2b6660d 100644 --- a/translations/messages.pot +++ b/translations/messages.pot @@ -87,11 +87,16 @@ msgstr "" msgid "Please enable JavaScript to view comments." msgstr "" -#: templates/partial/flex.html:1 +#: templates/partial/flex.html:3 #, python-format msgid "Built with %(pelican_url)s using %(flex_url)s theme" msgstr "" +#: templates/partial/flex.html:10 +#, python-format +msgid "Switch to the %(dark_url)s | %(light_url)s | %(browser_url)s theme" +msgstr "" + #: templates/partial/neighbors.html:5 msgid "Previous Post" msgstr "" From 582adec6a4352715333449fa572a7e6530d781c7 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Thu, 16 Apr 2020 15:49:09 -0600 Subject: [PATCH 16/17] Greatly simplified all of the logic; moved the JS to a separate file --- gulpfile.js | 21 +++++-- package.json | 3 +- static/dark_theme/dark_theme.js | 58 +++++++++++++++++++ static/dark_theme/dark_theme.min.js | 1 + static/stylesheet/dark-theme-has-class.less | 14 ----- .../stylesheet/dark-theme-not-overridden.less | 15 ----- ...dark-theme-styles.less => dark-theme.less} | 3 - static/stylesheet/dark-theme.min.css | 1 + static/stylesheet/style.less | 4 -- templates/base.html | 48 +++++++-------- templates/partial/flex.html | 58 ++----------------- 11 files changed, 105 insertions(+), 121 deletions(-) create mode 100644 static/dark_theme/dark_theme.js create mode 100644 static/dark_theme/dark_theme.min.js delete mode 100644 static/stylesheet/dark-theme-has-class.less delete mode 100644 static/stylesheet/dark-theme-not-overridden.less rename static/stylesheet/{dark-theme-styles.less => dark-theme.less} (96%) create mode 100644 static/stylesheet/dark-theme.min.css diff --git a/gulpfile.js b/gulpfile.js index ec2dbb8..e56ce77 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,22 +1,31 @@ var gulp = require('gulp'), less = require('gulp-less'), rename = require('gulp-rename'), - minify = require('gulp-cssnano'); + cssnano = require('gulp-cssnano'), + uglify = require('gulp-uglify'); gulp.task('less', function () { return gulp.src([ - './static/stylesheet/dark-theme-has-class.less', - './static/stylesheet/dark-theme-not-overridden.less', + './static/stylesheet/dark-theme.less', './static/stylesheet/style.less', ]) .pipe(less()) - .pipe(minify()) + .pipe(cssnano()) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('./static/stylesheet')); }); +gulp.task('uglify', function () { + return gulp.src('./static/dark_theme/dark_theme.js') + .pipe(uglify()) + .pipe(rename({ + extname: '.min.js' + })) + .pipe(gulp.dest('./static/dark_theme')); +}); + gulp.task('cp', function () { return gulp.src('./node_modules/font-awesome/**/*.{min.css,otf,eot,svg,ttf,woff,woff2}') .pipe(gulp.dest('./static/font-awesome')); @@ -24,7 +33,7 @@ gulp.task('cp', function () { gulp.task('pygments', function () { return gulp.src(['./static/pygments/*.css', '!./static/pygments/*min.css']) - .pipe(minify()) + .pipe(cssnano()) .pipe(rename({ extname: '.min.css' })) @@ -32,4 +41,4 @@ gulp.task('pygments', function () { }); -gulp.task('default', gulp.series(['less', 'cp', 'pygments'])); +gulp.task('default', gulp.series(['less', 'uglify', 'cp', 'pygments'])); diff --git a/package.json b/package.json index 68afb63..4d3eea5 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "gulp": "^4.0.1", "gulp-cssnano": "^2.1.3", "gulp-less": "^3.5.0", - "gulp-rename": "^1.3.0" + "gulp-rename": "^1.3.0", + "gulp-uglify": "^3.0.2" } } diff --git a/static/dark_theme/dark_theme.js b/static/dark_theme/dark_theme.js new file mode 100644 index 0000000..0b0162e --- /dev/null +++ b/static/dark_theme/dark_theme.js @@ -0,0 +1,58 @@ +function ThemeManager(options) { + var defaultTheme = options.defaultTheme; + var enableAutoDetectTheme = options.enableAutoDetectTheme.toLowerCase() === 'true'; + + var darkThemeMatch = window.matchMedia( + defaultTheme === 'light' ? + '(prefers-color-scheme: dark)' : + '(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)' + ); + + function setEnabledAndDisableMediaQuery(elementId, enabled) { + var element = document.getElementById(elementId); + element.disabled = !enabled; + element.media = ''; + } + + function detectThemeAndSwitchStyle() { + var theme = localStorage.getItem('themeOverride'); + if (theme !== 'light' && theme !== 'dark') { + if (theme === 'browser' || enableAutoDetectTheme) { + theme = darkThemeMatch.matches ? 'dark' : 'light'; + } else { + theme = defaultTheme; + } + } + + // (Dis|En)able the styles according to the user's desired theme. Get rid + // of the media queries, since we are handling it in JS. + setEnabledAndDisableMediaQuery('dark-theme-style', theme === 'dark'); + setEnabledAndDisableMediaQuery('pygments-dark-theme', theme === 'dark'); + setEnabledAndDisableMediaQuery('pygments-light-theme', theme === 'light'); + + if (theme === 'dark') { + document.body.classList.add('dark-theme'); + document.body.classList.remove('light-theme'); + } else { + document.body.classList.add('light-theme'); + document.body.classList.remove('dark-theme'); + } + } + + this.switch = function(themeOverride) { + localStorage.setItem('themeOverride', themeOverride); + detectThemeAndSwitchStyle(); + }; + + // If there's an override, then apply it, otherwise, don't incur the + // overhead of determining whether or not to switch themes. + var themeOverride = localStorage.getItem('themeOverride'); + if (themeOverride === 'light' || themeOverride === 'dark') { + detectThemeAndSwitchStyle(); + } + + // If theme auto-detection is enabled, then add a listenr on the matchMedia. + darkThemeMatch.addListener(detectThemeAndSwitchStyle); +} + +window.theme = new ThemeManager(document.getElementById('dark-theme-script').dataset); diff --git a/static/dark_theme/dark_theme.min.js b/static/dark_theme/dark_theme.min.js new file mode 100644 index 0000000..7433dd5 --- /dev/null +++ b/static/dark_theme/dark_theme.min.js @@ -0,0 +1 @@ +function ThemeManager(e){var t=e.defaultTheme,r="true"===e.enableAutoDetectTheme.toLowerCase(),a=window.matchMedia("light"===t?"(prefers-color-scheme: dark)":"(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)");function d(e,t){var r=document.getElementById(e);r.disabled=!t,r.media=""}function m(){var e=localStorage.getItem("themeOverride");"light"!==e&&"dark"!==e&&(e="browser"===e||r?a.matches?"dark":"light":t),d("dark-theme-style","dark"===e),d("pygments-dark-theme","dark"===e),d("pygments-light-theme","light"===e),"dark"===e?(document.body.classList.add("dark-theme"),document.body.classList.remove("light-theme")):(document.body.classList.add("light-theme"),document.body.classList.remove("dark-theme"))}this.switch=function(e){localStorage.setItem("themeOverride",e),m()};var o=localStorage.getItem("themeOverride");"light"!==o&&"dark"!==o||m(),a.addListener(m)}window.theme=new ThemeManager(document.getElementById("dark-theme-script").dataset); \ No newline at end of file diff --git a/static/stylesheet/dark-theme-has-class.less b/static/stylesheet/dark-theme-has-class.less deleted file mode 100644 index 6191a41..0000000 --- a/static/stylesheet/dark-theme-has-class.less +++ /dev/null @@ -1,14 +0,0 @@ -// -// 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 deleted file mode 100644 index 8492092..0000000 --- a/static/stylesheet/dark-theme-not-overridden.less +++ /dev/null @@ -1,15 +0,0 @@ -// -// 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.less similarity index 96% rename from static/stylesheet/dark-theme-styles.less rename to static/stylesheet/dark-theme.less index b70d735..49a4d59 100644 --- a/static/stylesheet/dark-theme-styles.less +++ b/static/stylesheet/dark-theme.less @@ -1,9 +1,6 @@ // // Dark Theme CSS styles. // -// Don't directly include this file, instead, use the `dark-theme-class` or -// `dark-theme-override` files. -// @import "variables.less"; diff --git a/static/stylesheet/dark-theme.min.css b/static/stylesheet/dark-theme.min.css new file mode 100644 index 0000000..9f2be03 --- /dev/null +++ b/static/stylesheet/dark-theme.min.css @@ -0,0 +1 @@ +body{background-color:#333;color:#eee}hr{color:#222}aside,hr{background-color:#222}aside{color:#fff}aside form.navbar-search input#tipue_search_input{background-color:#1a1a1a;color:#eee}main nav{border-bottom-color:#222}main .translations a,main nav a{border-color:#222}main article kbd{background-color:#080808;color:#eee}main article blockquote,main article pre{border-left:8px solid #ffffff33}main article :not(pre)>code{background-color:#080808;border-color:#000}main article div#tipue_search_content .tipue_search_result span.tipue_search_content_bold{color:#fff}main article section#isso-thread .auth-section p.input-wrapper input,main article section#isso-thread .notification-section input,main article section#isso-thread div.textarea{background:#1a1a1a;color:#eee}main article section#isso-thread>h4{color:#eee}main article section#isso-thread .isso-postbox>.form-wrapper .preview{background:repeating-linear-gradient(-45deg,#222,#222 10px,#1a1a1a 0,#1a1a1a 20px)}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .author{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink{color:#999}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink:hover{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-footer a:hover{text-shadow:#242121 0 0 1px!important}main footer{border-top-color:#222}div.related-posts{border-color:#222}div.admonition.attention,div.admonition.caution{color:#fbda7a;background-color:#4a3900}div.admonition.danger,div.admonition.error{color:#ebadb3;background-color:#28070a}div.admonition.hint{color:#7abaff;background-color:#001933}div.admonition.important,div.admonition.note{color:#a8eab7;background-color:#122b18}div.admonition.tip{color:#7abaff;background-color:#001933}div.admonition.warning{color:#fbda7a;background-color:#4a3900} \ No newline at end of file diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less index 5a07777..a7b8aa4 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -134,10 +134,6 @@ main { border-right: @nav-border-color 1px solid; } - :first-child { - border-left: none; - } - :last-child { border-right: none; } diff --git a/templates/base.html b/templates/base.html index 5702021..5bbb5f3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,11 +5,7 @@ {% endif %} - + @@ -33,40 +29,36 @@ {% endif %} {# DARK THEME STYLES #} - {% 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 %} - {# Enable dark mode when media query matches and .light-theme class does not exist on tag #} - - {% endif %} - {% if THEME_COLOR_ENABLE_USER_OVERRIDE %} - {# Enable dark mode when .dark-theme class exists on tag #} - + href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme.min.css"> {% endif %} {# PYGMENTS STYLES #} - {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %} - {% endif %} {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or not THEME_COLOR or THEME_COLOR == "light" %} - - + {% if GOOGLE_TAG_MANAGER %} {% include "partial/gtm_noscript.html" %} {% endif %} diff --git a/templates/partial/flex.html b/templates/partial/flex.html index be5ca05..02d1465 100644 --- a/templates/partial/flex.html +++ b/templates/partial/flex.html @@ -12,57 +12,11 @@ light_url='light', browser_url='browser'|safe) }} -{% endif %} -

-{% if THEME_COLOR_ENABLE_USER_OVERRIDE %} - {% endif %} +

From 8b3811fc254a2d7d9b747bd6dfc7579589788386 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Mon, 20 Apr 2020 09:15:27 -0600 Subject: [PATCH 17/17] Add dark mode to list of features --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4620ce4..7e7bac2 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ The minimalist [Pelican](http://blog.getpelican.com/) theme. - Minute read (via [plugin](https://github.com/getpelican/pelican-plugins/tree/master/post_stats)) (new in 2.0) - [Multiple Code Highlight Styles](https://github.com/alexandrevicenzi/Flex/wiki/Code-Highlight) - [Translation Support](https://github.com/alexandrevicenzi/Flex/wiki/Translations) (new in 2.0) +- [Dark Mode](https://github.com/alexandrevicenzi/Flex/wiki/Dark-Mode) ## Integrations