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

Added themeing options

Browse source 
Added THEME_COLOR, THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE, and THEME_COLOR_ENABLE_USER_OVERRIDE options
This commit is contained in:
Sumner Evans 2020-04-15 16:55:28 -06:00
parent 9b3495da5d
commit 904484e2b4
No known key found for this signature in database
GPG key ID: 8904527AB50022FD
4 changed files with 239 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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