asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Allow toggling of dark scheme with a body class.

Browse source
This commit is contained in:
Miloslav Pavelka 2020-02-09 15:23:39 +01:00
parent 8e67f69297
commit 3f11cef46f
2 changed files with 140 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/css/_dark/dark-main.scss
View file

@ -6,8 +6,7 @@
* MIT Licensed * MIT Licensed
*/ */
@media (prefers-color-scheme: dark) { @mixin darkScheme() {
html {
/* framework */ /* framework */
--main-wrapper-bg: rgb(27, 27, 30); --main-wrapper-bg: rgb(27, 27, 30);
--topbar-wrapper-bg: rgb(39, 40, 43); --topbar-wrapper-bg: rgb(39, 40, 43);
@ -25,8 +24,8 @@
/* common color */ /* common color */
--text-color: rgb(175, 176, 177); --text-color: rgb(175, 176, 177);
--text-muted-color: rgb(107, 116, 124); --text-muted-color: rgb(107, 116, 124);
--link-color: rgb(138, 180, 248); --link-color: #3db5c2;
--link-underline-color: rgb(99, 131, 182); --link-underline-color: #3db5c2;
--main-border: rgb(63, 65, 68); --main-border: rgb(63, 65, 68);
--button-bg: rgb(39, 40, 33); --button-bg: rgb(39, 40, 33);
--blockquote-border: rgb(66, 66, 66); --blockquote-border: rgb(66, 66, 66);
@ -56,5 +55,16 @@
/* archives */ /* archives */
--timeline-node-bg: rgb(150, 152, 156); --timeline-node-bg: rgb(150, 152, 156);
}
@media (prefers-color-scheme: dark) {
body:not(.color-scheme-light) {
@include darkScheme();
}
}
@media not (prefers-color-scheme: dark) {
body.color-scheme-dark {
@include darkScheme();
} }
} }

18
assets/css/_dark/dark-syntax.scss
View file

@ -6,8 +6,8 @@
* MIT Licensed * MIT Licensed
*/ */
@media (prefers-color-scheme: dark) { @mixin darkSchemeHighlight() {
html {
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */ /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
--highlight-pre-bg: #272822; --highlight-pre-bg: #272822;
--highlight-hll-bg: #272822; --highlight-hll-bg: #272822;
@ -76,7 +76,6 @@
/* My styles */ /* My styles */
--highlight-lineno: #6c6c6d; --highlight-lineno: #6c6c6d;
--highlight-lineno-border: #3c4042; --highlight-lineno-border: #3c4042;
}
pre { pre {
color: #818c96; /* override Bootstrap */ color: #818c96; /* override Bootstrap */
@ -85,5 +84,16 @@
kbd { kbd {
background-color: black; background-color: black;
} }
}
@media (prefers-color-scheme: dark) {
body:not(.color-scheme-light) {
@include darkSchemeHighlight();
}
}
@media not (prefers-color-scheme: dark) {
body.color-scheme-dark {
@include darkSchemeHighlight();
}
} }