Moved all of the styles in to Flex from my website
This commit is contained in:
Sumner Evans
parent
0d56e19d6a
commit
9b3495da5d
4 changed files with 160 additions and 6 deletions
114
static/stylesheet/dark-theme.less
Normal file
114
static/stylesheet/dark-theme.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue