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() {