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 %} +