summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDavid Robillard <d@drobilla.net>2022-07-05 15:23:29 -0400
committerDavid Robillard <d@drobilla.net>2022-07-13 15:03:51 -0400
commit41b9ded90fa0f6007fbc7432e49aa698136b4610 (patch)
tree63661217f013c8c8f1b7c38e4239b844c92a76dd
parent8027bbee63e82502b4fa541980239bff80c0dc4c (diff)
downloadlv2site-41b9ded90fa0f6007fbc7432e49aa698136b4610.tar.xz
Add dark mode style
-rw-r--r--themes/lv2/static/css/main.css353
1 files changed, 352 insertions, 1 deletions
diff --git a/themes/lv2/static/css/main.css b/themes/lv2/static/css/main.css
index 07ac922..9378a6e 100644
--- a/themes/lv2/static/css/main.css
+++ b/themes/lv2/static/css/main.css
@@ -1,8 +1,11 @@
/* Generic page style */
-body {
+html {
background: #FFF;
color: #222;
+}
+
+body {
font-style: normal;
line-height: 1.6em;
margin-left: auto;
@@ -497,3 +500,351 @@ header a#page-title {
.highlight .p {
color: #444;
}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+ html {
+ background: #222;
+ color: #DDD;
+ }
+
+ a {
+ color: #B4C342;
+ }
+
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ color: #DDD;
+ }
+
+ h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
+ color: #DDD;
+ }
+
+ h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
+ color: #DDD;
+ }
+
+ th {
+ background-color: #282828;
+ }
+
+ td, th {
+ border: 1px solid #383838;
+ }
+
+ time, #sitename {
+ color: #AAA;
+ }
+
+ blockquote {
+ color: #DDD;
+ }
+
+ .postmeta {
+ color: #AAA;
+ }
+
+ hr {
+ border-top: 1px solid #444;
+ }
+
+ nav {
+ border-bottom-color: #666;
+ }
+
+ header a#page-title {
+ color: #DDD;
+ }
+
+ .highlight {
+ color: #BBB;
+ border: solid 1px #444;
+ }
+
+ /* Pygments Style */
+
+ .highlight .n {
+ color: #BBB;
+ }
+
+ .highlight .c {
+ color: #6C71C4;
+ font-style: italic;
+ }
+
+ .highlight .err {
+ border: 1px solid #FF6E64;
+ }
+
+ .highlight .k {
+ color: #93A1A1;
+ }
+
+ .highlight .o {
+ color: #93A1A1;
+ }
+
+ .highlight .cm {
+ color: #6C71C4;
+ font-style: italic;
+ }
+
+ .highlight .cp {
+ color: #93A1A1;
+ }
+
+ .highlight .cpf {
+ color: #D33682;
+ }
+
+ .highlight .c1 {
+ color: #6C71C4;
+ font-style: italic;
+ }
+
+ .highlight .cs {
+ color: #6C71C4;
+ font-style: italic;
+ }
+
+ .highlight .gd {
+ color: #DC322F;
+ }
+
+ .highlight .ge {
+ font-style: italic;
+ }
+
+ .highlight .gr {
+ color: #FF6E64;
+ }
+
+ .highlight .gh {
+ color: #6C71C4;
+ font-weight: bold;
+ }
+
+ .highlight .gi {
+ color: #859900;
+ }
+
+ .highlight .go {
+ color: #666;
+ }
+
+ .highlight .gp {
+ color: #666;
+ font-weight: bold;
+ }
+
+ .highlight .gs {
+ font-weight: bold;
+ }
+
+ .highlight .gu {
+ color: #BBB;
+ font-weight: bold;
+ }
+
+ .highlight .gt {
+ color: #69B7F0;
+ }
+
+ .highlight .kc {
+ color: #93A1A1;
+ font-weight: bold;
+ }
+
+ .highlight .kd {
+ color: #93A1A1;
+ font-weight: bold;
+ }
+
+ .highlight .kn {
+ color: #93A1A1;
+ font-weight: bold;
+ }
+
+ .highlight .kp {
+ color: #93A1A1;
+ }
+
+ .highlight .kr {
+ color: #93A1A1;
+ font-weight: bold;
+ }
+
+ .highlight .kt {
+ color: #93A1A1;
+ }
+
+ .highlight .m {
+ color: #999;
+ }
+
+ .highlight .s {
+ color: #D33682;
+ }
+
+ .highlight .na {
+ color: #BBB;
+ }
+
+ .highlight .nb {
+ color: #6C71C4;
+ }
+
+ .highlight .nc {
+ color: #FFF;
+ }
+
+ .highlight .no {
+ color: #880;
+ }
+
+ .highlight .nd {
+ color: #A2F;
+ }
+
+ .highlight .ni {
+ color: #999;
+ font-weight: bold;
+ }
+
+ .highlight .ne {
+ color: #D2413A;
+ font-weight: bold;
+ }
+
+ .highlight .nf {
+ color: #FFF;
+ }
+
+ .highlight .nl {
+ color: #546E00;
+ }
+
+ .highlight .nn {
+ color: #BBB;
+ }
+
+ .highlight .nt {
+ color: #BBB;
+ }
+
+ .highlight .nv {
+ color: #DDD;
+ }
+
+ .highlight .ow {
+ color: #6C71C4;
+ }
+
+ .highlight .w {
+ color: #BBB;
+ }
+
+ .highlight .mb {
+ color: #D33682;
+ font-weight: bold;
+ }
+
+ .highlight .mf {
+ color: #D33682;
+ }
+
+ .highlight .mh {
+ color: #D33682;
+ font-weight: bold;
+ }
+
+ .highlight .mi {
+ color: #D33682;
+ }
+
+ .highlight .mo {
+ color: #D33682;
+ font-weight: bold;
+ }
+
+ .highlight .sb {
+ color: #D33682;
+ }
+
+ .highlight .sc {
+ color: #D33682;
+ }
+
+ .highlight .sd {
+ color: #6C71C4;
+ font-style: italic;
+ }
+
+ .highlight .s2 {
+ color: #D33682;
+ }
+
+ .highlight .se {
+ color: #D33682;
+ font-weight: bold;
+ }
+
+ .highlight .sh {
+ color: #D33682;
+ }
+
+ .highlight .si {
+ color: #D33682;
+ font-weight: bold;
+ }
+
+ .highlight .sx {
+ color: #D33682;
+ }
+
+ .highlight .sr {
+ color: #D33682;
+ font-weight: bold;
+ }
+
+ .highlight .s1 {
+ color: #D33682;
+ }
+
+ .highlight .ss {
+ color: #BBB;
+ font-weight: bold;
+ }
+
+ .highlight .bp {
+ color: #859900;
+ }
+
+ .highlight .vc {
+ color: #268BD2;
+ }
+
+ .highlight .vg {
+ color: #268BD2;
+ }
+
+ .highlight .vi {
+ color: #268BD2;
+ }
+
+ .highlight .il {
+ color: #FFF;
+ }
+
+ .highlight .p {
+ color: #BBB;
+ }
+}
+
+/* Hard black for dark mode on mobile (since it's likely to be an OLED screen) */
+@media only screen and (hover: none) and (pointer: coarse) and (prefers-color-scheme: dark) {
+ html {
+ background: #000;
+ color: #CCC;
+ }
+}