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