Fixed some bugs with various settings combinations
This commit is contained in:
Sumner Evans
parent
904484e2b4
commit
ec1acb115a
8 changed files with 177 additions and 180 deletions
|
|
@ -5,8 +5,9 @@ var gulp = require('gulp'),
|
||||||
|
|
||||||
gulp.task('less', function () {
|
gulp.task('less', function () {
|
||||||
return gulp.src([
|
return gulp.src([
|
||||||
|
'./static/stylesheet/dark-theme-has-class.less',
|
||||||
|
'./static/stylesheet/dark-theme-not-overridden.less',
|
||||||
'./static/stylesheet/style.less',
|
'./static/stylesheet/style.less',
|
||||||
'./static/stylesheet/dark-theme.less',
|
|
||||||
])
|
])
|
||||||
.pipe(less())
|
.pipe(less())
|
||||||
.pipe(minify())
|
.pipe(minify())
|
||||||
|
|
|
||||||
14
static/stylesheet/dark-theme-has-class.less
Normal file
14
static/stylesheet/dark-theme-has-class.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
//
|
||||||
|
// Dark Theme CSS that gets activated when the <html> element has the
|
||||||
|
// .dark-theme class.
|
||||||
|
//
|
||||||
|
// To use this, add the .dark-theme class to the <html> element, and add the
|
||||||
|
// following <link>:
|
||||||
|
//
|
||||||
|
// <link rel="stylesheet" type="text/css"
|
||||||
|
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-class.min.css">
|
||||||
|
//
|
||||||
|
|
||||||
|
html.dark-theme {
|
||||||
|
@import (multiple) "dark-theme-styles.less";
|
||||||
|
}
|
||||||
15
static/stylesheet/dark-theme-not-overridden.less
Normal file
15
static/stylesheet/dark-theme-not-overridden.less
Normal file
|
|
@ -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 <html> tag.
|
||||||
|
//
|
||||||
|
// To use this, add a <link> like the following (change the media query how you
|
||||||
|
// want):
|
||||||
|
//
|
||||||
|
// <link rel="stylesheet" type="text/css"
|
||||||
|
// media="(prefers-color-scheme: dark)"
|
||||||
|
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-class.min.css">
|
||||||
|
//
|
||||||
|
|
||||||
|
html:not(.light-theme) {
|
||||||
|
@import (multiple) "dark-theme-styles.less";
|
||||||
|
}
|
||||||
120
static/stylesheet/dark-theme-styles.less
Normal file
120
static/stylesheet/dark-theme-styles.less
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
//
|
|
||||||
// Dark Theme CSS.
|
|
||||||
//
|
|
||||||
// If you want to always use the dark theme, then you can use a <link> like the
|
|
||||||
// following:
|
|
||||||
//
|
|
||||||
// <link rel="stylesheet" type="text/css"
|
|
||||||
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
|
|
||||||
//
|
|
||||||
// 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 <link>. For example:
|
|
||||||
//
|
|
||||||
// <link media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
|
|
||||||
// rel="stylesheet"
|
|
||||||
// type="text/css"
|
|
||||||
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
|
|
||||||
//
|
|
||||||
// or
|
|
||||||
//
|
|
||||||
// <link media="(prefers-color-scheme: dark)"
|
|
||||||
// rel="stylesheet"
|
|
||||||
// type="text/css"
|
|
||||||
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
|
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -694,17 +694,3 @@ div.admonition.warning {
|
||||||
color: @admonition-warning-color;
|
color: @admonition-warning-color;
|
||||||
background-color: @admonition-warning-bg-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";
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -32,27 +32,28 @@
|
||||||
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/style.min.css">
|
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/style.min.css">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!--
|
<!-- DARK THEME STYLES -->
|
||||||
DARK THEME STYLES
|
{% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE and not THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR == "dark" %}
|
||||||
The dark theme will be enabled if any of the following are true:
|
<link rel="stylesheet" type="text/css"
|
||||||
* the <html> tag has the .dark-theme class.
|
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
|
||||||
* THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE is true and the appropriate color scheme preference
|
{% endif %}
|
||||||
is set in the browser and the <html> tag does not have the .light-theme class.
|
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
|
||||||
-->
|
<!-- Enable dark mode when media query matches and .light-theme class does not exist on <html> tag -->
|
||||||
<link rel="stylesheet" type="text/css"
|
<link rel="stylesheet" type="text/css"
|
||||||
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
|
{% if THEME_COLOR|default("light") == "dark" %}
|
||||||
{% if THEME_COLOR|default("light") == "dark" %}
|
media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
|
||||||
media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
|
{% else %}
|
||||||
{% else %}
|
media="(prefers-color-scheme: dark)"
|
||||||
media="(prefers-color-scheme: dark)"
|
{% endif %}
|
||||||
{% endif %}
|
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme.min.css">
|
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
|
||||||
|
<!-- Enable dark mode when .dark-theme class exists on <html> tag -->
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-has-class.min.css">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<!--
|
<!-- PYGMENTS STYLES -->
|
||||||
PYGMENTS STYLES
|
|
||||||
|
|
||||||
-->
|
|
||||||
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %}
|
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %}
|
||||||
<link rel="stylesheet" type="text/css"
|
<link rel="stylesheet" type="text/css"
|
||||||
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
|
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,11 @@
|
||||||
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
|
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
|
||||||
<script>
|
<script>
|
||||||
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
|
{% 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 %}
|
{% endif %}
|
||||||
|
|
||||||
function detectThemeAndSwitchStyle() {
|
function detectThemeAndSwitchStyle() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue