From 582adec6a4352715333449fa572a7e6530d781c7 Mon Sep 17 00:00:00 2001
From: Sumner Evans
Date: Thu, 16 Apr 2020 15:49:09 -0600
Subject: [PATCH] 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 %}
+