Add dark mode style

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;
+  }
+}