Merge pull request #317 from henryiii/dark-mode

Dark mode support

2 files changed, 137 insertions, 13 deletions

diff --git a/static/css/codeblock.css b/static/css/codeblock.css
index cf80033..4481eed 100644
--- a/static/css/codeblock.css
+++ b/static/css/codeblock.css
@@ -30,4 +30,4 @@ pre code.hljs {
 
 .highlight td:last-child pre code, .highlight pre code {
   white-space: pre;
-}
\ No newline at end of file
+}
diff --git a/static/css/main.css b/static/css/main.css
index 779581f..7f30a3f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -10,6 +10,12 @@ body {
   flex-flow: column;
   height: 100vh;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background: black;
+    color: white;
+  }
+}
 .container[role=main] {
   margin-bottom:50px;
   flex: 1 0 auto;
@@ -33,6 +39,12 @@ p a {
   /* text-decoration: underline */
   color: #008AFF;
 }
+@media (prefers-color-scheme: dark) {
+  p a {
+    color: #50afff;
+  }
+}
+
 h1,h2,h3,h4,h5,h6 {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 800;
@@ -40,6 +52,11 @@ h1,h2,h3,h4,h5,h6 {
 a {
   color: #008AFF;
 }
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #50afff;
+  }
+}
 a:hover,
 a:focus {
   color: #0085a1;
@@ -51,6 +68,11 @@ blockquote {
 blockquote p:first-child {
   margin-top: 0;
 }
+@media (prefers-color-scheme: dark) {
+  blockquote {
+    border-left: 5px solid #444;
+  }
+}
 hr.small {
   max-width: 100px;
   margin: 15px auto;
@@ -95,30 +117,27 @@ div.panel-body a.list-group-item.view-all {
   font-weight: 600;
 }
 
-::-moz-selection {
+::-moz-selection, ::selection {
   color: white;
   text-shadow: none;
   background: #0085a1;
 }
-::selection {
-  color: white;
-  text-shadow: none;
-  background: #0085a1;
-}
-img::selection {
-  color: white;
-  background: transparent;
-}
-img::-moz-selection {
+img::selection, img::-moz-selection {
   color: white;
   background: transparent;
 }
 
+
 img {
   display: block;
   margin: auto;
   max-width: 100%;
 }
+@media (prefers-color-scheme: dark) {
+figure:not(.dark) img, img.white {
+  background-color: white;
+}
+}
 
 .img-title {
   width: 100%;
@@ -141,6 +160,12 @@ img {
   border-bottom: 1px solid #EAEAEA;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+@media (prefers-color-scheme: dark) {
+  .navbar-custom {
+    background: #505050;
+    border-bottom: 1px solid #AAA;
+  }
+}
 
 .navbar-custom .nav li a {
   text-transform: uppercase;
@@ -154,6 +179,13 @@ img {
   color: #404040;
 }
 
+@media (prefers-color-scheme: dark) {
+  .navbar-custom .navbar-brand,
+  .navbar-custom .nav li a {
+    color: #b0b0b0;
+  }
+}
+
 .navbar-custom .navbar-brand:hover,
 .navbar-custom .navbar-brand:focus ,
 .navbar-custom .nav li a:hover,
@@ -161,6 +193,15 @@ img {
   color: #0085a1;
 }
 
+.navbar-custom .navbar-brand:hover,
+.navbar-custom .navbar-brand:focus ,
+.navbar-custom .nav li a:hover,
+.navbar-custom .nav li a:focus {
+  @media (prefers-color-scheme: dark) {
+    color: #b0e0ff;
+  }
+}
+
 .navbar-custom .navbar-brand-logo {
   padding-top: 0;
   -webkit-transition: padding .5s ease-in-out;
@@ -294,6 +335,17 @@ img {
     border-width: 0 1px 1px;
   }
 }
+@media (prefers-color-scheme: dark) {
+  .navbar-custom .nav .navlinks-container:hover {
+    background: #666;
+  }
+  .navbar-custom .nav .navlinks-container .navlinks-children a {
+    border: 1px solid #AAA;
+  }
+  .navbar-custom .nav .navlinks-container .navlinks-children a {
+    background: #444;
+  }
+}
 
 /* --- Footer --- */
 
@@ -307,6 +359,7 @@ footer {
 
 footer a {
   color: #404040;
+
 }
 
 footer .list-inline {
@@ -335,13 +388,22 @@ footer .theme-by {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  footer {
+    background: #444;
+    border-top: 1px #AAA solid;
+  }
+  footer a {
+    color: #AAA;
+  }
+}
+
 /* --- Post preview --- */
 
 .post-preview {
   padding: 20px 0;
   border-bottom: 1px solid #eee;
 }
-
 @media only screen and (min-width: 768px) {
   .post-preview {
     padding: 35px 0;
@@ -356,6 +418,11 @@ footer .theme-by {
   text-decoration: none;
   color: #404040;
 }
+@media (prefers-color-scheme: dark) {
+  .post-preview a {
+    color: #AAA;
+  }
+}
 
 .post-preview a:focus,
 .post-preview a:hover {
@@ -657,6 +724,13 @@ footer .theme-by {
   border: 1px solid #0085a1;
 }
 
+@media (prefers-color-scheme: dark) {
+.pager li a {
+  background: #444;
+  color: white;
+}
+}
+
 .pager {
   margin: 10px 0 0;
 }
@@ -686,9 +760,19 @@ table tr {
   margin: 0;
   padding: 0;
 }
+@media (prefers-color-scheme: dark) {
+}
 table tr:nth-child(2n) {
   background-color: #f8f8f8;
 }
+@media (prefers-color-scheme: dark) {
+table tr {
+  background-color: #181818;
+}
+table tr:nth-child(2n) {
+  background-color: #303030
+}
+}
 table tr th {
   font-weight: bold;
   border: 1px solid #cccccc;
@@ -815,3 +899,43 @@ h4.see-also {
  ul.share li:hover .fab {
   transform: scale(1.4)
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  code {
+    background-color: #222;
+    color: #fbb;
+  }
+  pre code {
+    color: #ccc;
+  }
+  .well {
+    background-color: #444;
+  }
+  .panel {
+    background-color: #222;
+  }
+  .list-group-item {
+    background-color: #333;
+  }
+
+  pre.chroma {
+    color: white;
+    background-color: #444;
+  }
+  pre.chroma .k {
+    color: #44AACC;
+  }
+  pre.chroma .kt {
+    color: #33CCCC;
+  }
+  pre.chroma .o {
+    color: #AAA;
+  }
+  pre.chroma .nb {
+    color: #00fee9;
+  }
+  pre.chroma .ow {
+    color: #CC0;
+  }
+}