Skip to content

Commit

Permalink
Enable dark mode when requested.
Browse files Browse the repository at this point in the history
  • Loading branch information
@schmonz
schmonz committed Nov 13, 2023
1 parent 013921d commit 5803dbe
Showing 1 changed file with 243 additions and 4 deletions.
247 changes: 243 additions & 4 deletions local.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
:root {
--link-color-dark: #ffa563;
--link-color-light: #005a9c;
--border-color-dark: #777;
--border-color-light: #999;
--secondary-background-color-dark: #111;
--secondary-background-color-light: #eee;
--secondary-border-color-dark: #555;
--secondary-border-color-light: #aaa;
}

body {
color: var(--main-text-color);
background: var(--main-background-color);
font-weight: 400;
}

/* Solarized Light */
pre.hl { color:#657b83; background-color:#fdf6e3; font-family:monospace;}
.hl.num { color:#dc322f; }
Expand All @@ -15,10 +32,6 @@ pre.hl { color:#657b83; background-color:#fdf6e3; font-family:monospace;}
.hl.kwc { color:#cb4b16; }
.hl.kwd { color:#586e75; }

:root {
--secondary-background-color-light: #eee;
}

tr:nth-of-type(odd) {
background-color: var(--main-background-color-light);
filter: brightness(85%);
Expand All @@ -28,3 +41,229 @@ tr:nth-of-type(even) {
background-color: var(--secondary-background-color-light);
filter: brightness(85%);
}

@media (prefers-color-scheme: dark) {
body {
font-weight: 350;
}

tr:nth-of-type(odd) {
background-color: var(--main-background-color-dark);
filter: brightness(115%);
}

tr:nth-of-type(even) {
background-color: var(--secondary-background-color-dark);
filter: brightness(115%);
}

img[src$=".png"], img[src$=".gif"], img[src$=".jpg"], img[class="invertible"] {
-webkit-filter: invert(100%);
filter: invert(100%);
}

/* Solarized Dark */
pre.hl { color:#839496; background-color:#002b36; font-family:monospace;}
.hl.num { color:#dc322f; }
.hl.esc { color:#6c71c4; }
.hl.str { color:#dc322f; }
.hl.pps { color:#dc322f; }
.hl.slc { color:#586e75; }
.hl.com { color:#586e75; }
.hl.ppc { color:#6c71c4; }
.hl.opt { color:#93a1a1; }
.hl.ipl { color:#6c71c4; }
.hl.lin { color:#268bd2; }
.hl.kwa { color:#cb4b16; }
.hl.kwb { color:#859900; }
.hl.kwc { color:#cb4b16; }
.hl.kwd { color:#93a1a1; }

html, html[data-theme="dark"] {
--link-color: var(--link-color-dark);
--main-background-color: black;
--main-text-color: white;
}

html[data-theme="light"] {
--link-color: var(--link-color-light);
--main-background-color: white;
--main-text-color: black;
}

a {
color: var(--link-color);
}

code, pre, code[data-theme="dark"], pre[data-theme="dark"] {
background: var(--secondary-background-color-dark);
}

code[data-theme="light"], pre[data-theme="light"] {
background: var(--secondary-background-color-light);
}

.pageheader, .pageheader[data-theme="dark"] {
background: var(--secondary-background-color-dark);
border-color: var(--border-color-dark);
}

.pageheader[data-theme="light"] {
background: var(--secondary-background-color-light);
border-color: var(--border-color-light);
}

.pageheader .actions ul li, .pageheader[data-theme="dark"] .actions[data-theme="dark"] ul li {
background: var(--main-background-color);
border-color: var(--border-color-dark);
}

.pageheader[data-theme="light"] .actions[data-theme="light"] ul li {
background: var(--main-background-color);
border-color: var(--border-color-light);
}

hr.poll[data-theme="light"] {
color: var(--main-background-color);
background: var(--secondary-background-color-light);
border-color: var(--main-text-color);
}

hr.poll, hr.poll[data-theme="dark"] {
color: var(--main-background-color);
background: var(--secondary-background-color-dark);
border-color: var(--main-text-color);
}

div.poll[data-theme="light"] {
border-color: var(--secondary-border-color-light);
}

div.poll, div.poll[data-theme="dark"] {
border-color: var(--secondary-border-color-dark);
}

div.progress[data-theme="light"] {
border-color: #888;
background: var(--secondary-background-color-light);
color: var(--main-text-color) !important;
}

div.progress, div.progress[data-theme="dark"] {
border-color: #777;
background: var(--secondary-background-color-dark);
color: var(--main-text-color) !important;
}

div.progress-done[data-theme="light"] {
background: #ea6 !important;
color: var(--main-text-color) !important;
}

div.progress-done, div.progress-done[data-theme="dark"] {
background: #159 !important;
color: var(--main-text-color) !important;
}

.popup[data-theme="light"] {
border-color: #366;
color: #366;
}

.popup, .popup[data-theme="dark"] {
border-color: #c99;
color: #c99;
}

.popup:hover .balloon[data-theme="light"],
.popup:focus .balloon[data-theme="light"] {
background-color: #dee;
color: var(--main-text-color);
}

.popup:hover .balloon, .popup:hover .balloon[data-theme="dark"],
.popup:focus .balloon, .popup:focus .balloon[data-theme="dark"] {
background-color: #211;
color: var(--main-text-color);
}

input#searchbox[data-theme="light"] {
background-color: #fff;
color: #000;
}

input#searchbox, input#searchbox[data-theme="dark"] {
background-color: #000;
color: #fff;
}

fieldset {
border-color: var(--main-text-color);
}

.pagecloud[data-theme="light"] {
border-color: #aaa;
background: #eee;
color: var(--main-text-color) !important;
}

.pagecloud, .pagecloud[data-theme="dark"] {
border-color: #555;
background: #111;
color: var(--main-text-color) !important;
}

.error {
color: #3FF;
}

.blogform, #blogform, .blogform[data-theme="dark"], #blogform[data-theme="dark"] {
background: var(--secondary-background-color-dark);
color: var(--main-text-color) !important;
}

.blogform[data-theme="light"], #blogform[data-theme="light"] {
background: var(--secondary-background-color-light);
color: var(--main-text-color) !important;
}

hr, hr[data-theme="dark"] {
background-color: var(--border-color-dark);
}

hr[data-theme="light"] {
background-color: var(--border-color-light);
}

#pageinfo, #pageinfo[data-theme="dark"] {
border-color: var(--border-color-dark);
}

#pageinfo[data-theme="light"] {
border-color: var(--border-color-light);
}

.infobox, .infobox[data-theme="dark"] {
border-color: var(--secondary-border-color-dark);
background: var(--main-background-color);
color: var(--main-text-color) !important;
}

.infobox[data-theme="light"] {
border-color: var(--secondary-border-color-light);
background: var(--main-background-color);
color: var(--main-text-color) !important;
}

.notebox, .notebox[data-theme="dark"] {
border-color: var(--secondary-border-color-dark);
background: var(--main-background-color);
color: var(--main-text-color) !important;
}

.notebox[data-theme="light"] {
border-color: var(--secondary-border-color-light);
background: var(--main-background-color);
color: var(--main-text-color) !important;
}
}

0 comments on commit 5803dbe

Please sign in to comment.