schtobia/flex
1
0
Fork 0
Code Issues Pull requests Activity

Fixed some bugs with various settings combinations

Browse source
This commit is contained in:
Sumner Evans 2020-04-15 18:33:28 -06:00
parent 904484e2b4
commit ec1acb115a
No known key found for this signature in database
GPG key ID: 8904527AB50022FD
8 changed files with 177 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
gulpfile.js
View file

@ -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
View 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
View 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
View 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;
}
}

144
static/stylesheet/dark-theme.less
View file

@ -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;
}
}
}

14
static/stylesheet/style.less
View file

@ -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";
}

25
templates/base.html
View file

@ -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:
* the <html> tag has the .dark-theme class.
* THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE is true and the appropriate color scheme preference
is set in the browser and the <html> tag does not have the .light-theme class.
-->
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
{% endif %}
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %} {% 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"
{% 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 %}
{% 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 %} {% endif %}
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme.min.css">
<!-- <!-- 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 %}

4
templates/partial/flex.html
View file

@ -23,8 +23,12 @@
{% 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 %}
{% 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)'); const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
{% endif %} {% endif %}
{% endif %}
function detectThemeAndSwitchStyle() { function detectThemeAndSwitchStyle() {
let theme = localStorage.getItem('themeOverride'); let theme = localStorage.getItem('themeOverride');