ae/nostyleplease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css(dark mode): fix #13, allow color palettes

Browse Source
This commit is contained in:
Hanwen Guo 2023-09-20 21:01:30 +08:00
parent 8158bccb77
commit 2252461742
1 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/css/main.scss
View File

@ -1,30 +1,50 @@
// -------------- THEME SWITCHER -------------- // // -------------- THEME SWITCHER -------------- //
@mixin dark-appearance { @mixin theme($--bg-color, $--primary-text-color, $--secondary-text-color, $--link-color, $--visited-link-color) {
filter: invert(1); background-color: $--bg-color;
img {
filter: invert(1);
&.ioda { filter: invert(0); } color: $--primary-text-color;
a {
color: $--link-color;
text-decoration: none;
&:visited { color: $--visited-link-color; }
&:hover { text-decoration: underline; }
} }
code:not(pre > code) {
background-color: $--primary-text-color;
color: $--bg-color;
}
figcaption { color: $--secondary-text-color; }
}
@mixin dark-appearance {
@include theme(#212121, #fafafa, #eeeeee, #0071bc, #a359e9);
}
@mixin light-appearance {
@include theme(#ffffff, #212121, #666666, #1e70bf, #921292);
} }
body[a="dark"] { @include dark-appearance; } body[a="dark"] { @include dark-appearance; }
body[a="light"] { @include light-appearance; }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body[a="auto"] { @include dark-appearance; } body[a="auto"] { @include dark-appearance; }
} }
// -------------------------------------------- //
// bg color is also needed in html in order to @media (prefers-color-scheme: light) {
// block body's background propagation body[a="auto"] { @include light-appearance; }
// see: https://stackoverflow.com/a/61265706 }
html, body { background: white; }
// -------------------------------------------- //
html { height: 100%; } html { height: 100%; }
body { body {
color: black;
font-family: monospace; font-family: monospace;
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
@ -79,9 +99,6 @@ table, th, td {
} }
code:not(pre > code) { code:not(pre > code) {
color: white;
background: black;
font-size: 80%;
padding: 0.1em 0.2em; padding: 0.1em 0.2em;
font-size: 90%; font-size: 90%;
} }