Add dark theme

Fixes #69

.gitignore

@@ -35,6 +35,7 @@ eggs/
 
 lib/
 !src/newsreader/scss/lib
+!src/newsreader/js/lib
 
 lib64/
 parts/

src/newsreader/js/index.js

@@ -1,3 +1,4 @@
+import './lib/index.js';
 import './pages/homepage/index.js';
 import './pages/categories/index.js';
 import './pages/rules/index.js';

src/newsreader/js/lib/index.js

@@ -0,0 +1 @@
+import './theme.js';

src/newsreader/js/lib/theme.js

@@ -0,0 +1,76 @@
+function isCSSVariablesSupported() {
+  return window.CSS && window.CSS.supports('color', 'var(--fake-color');
+}
+
+function changeTheme(e) {
+  const currentPref = sessionStorage.getItem('t-dark');
+  const isDark = currentPref && currentPref === 'true' ? true : false;
+
+  if (isDark) {
+    document.documentElement.classList.remove('dark-theme');
+  } else {
+    document.documentElement.classList.add('dark-theme');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', !isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function prefersDarkTheme() {
+  try {
+    const currentPref = sessionStorage.getItem('t-dark');
+
+    if (currentPref && currentPref === 'true') {
+      return true;
+    } else if (
+      !currentPref &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (e) {
+    return false;
+  }
+}
+
+function toggleDarkTheme(isDark) {
+  if (isDark) {
+    document.documentElement.classList.add('dark-theme');
+  } else {
+    document.documentElement.classList.remove('dark-theme');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function initThemeSelector() {
+  const themeButton = document.getElementsByClassName('theme-switcher')[0];
+  const mqPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+  if (prefersDarkTheme()) {
+    toggleDarkTheme(true);
+  }
+
+  themeButton.addEventListener('click', changeTheme);
+
+  mqPrefersDarkTheme.addListener(mq => {
+    toggleDarkTheme(mq.matches);
+  });
+}
+
+function init() {
+  if (isCSSVariablesSupported()) {
+    initThemeSelector();
+  }
+}
+
+init();

src/newsreader/scss/components/body/_body.scss

@@ -3,7 +3,6 @@
   padding: 0;
 
   font-family: Rubik, sans-serif;
-  color: $font-color;
 }
 
 body {

src/newsreader/scss/components/card/_card.scss

@@ -7,7 +7,7 @@
 
   width: 50%;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   &__header {
     display: flex;
@@ -16,7 +16,7 @@
 
     padding: 15px 0;
 
-    border-bottom: 2px $gray solid;
+    border-bottom: 2px var(--lightest-accent-color) solid;
   }
 
   &__content {

src/newsreader/scss/components/category/_category.scss

@@ -36,6 +36,6 @@
   }
 
   &--selected, &:hover {
-    background-color: $gray;
+    background-color: var(--lighter-accent-color);
   }
 }

src/newsreader/scss/components/form/_form.scss

@@ -4,7 +4,7 @@
 
   width: 70%;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   &__section {
     &--last {

src/newsreader/scss/components/index.scss

@@ -3,6 +3,7 @@
 @import './main/index';
 @import './navbar/index';
 @import './loading-indicator/index';
+@import './theme-switcher/index';
 
 @import './modal/index';
 

src/newsreader/scss/components/modal/_modal.scss

@@ -20,7 +20,7 @@
 
     width: 60%;
 
-    background-color: $white;
+    background-color: var(--accent-color);
   }
 
   &__header {

src/newsreader/scss/components/navbar/_navbar.scss

@@ -1,6 +1,7 @@
 .nav {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   margin: 0 0 5px 0;
   padding: 10px 0;

src/newsreader/scss/components/post-message/_post-message.scss

@@ -7,8 +7,6 @@
   width: 60%;
   height: 80vh;
 
-  background-color: $white;
-
   &__message {
     font-size: 16px;
   }

src/newsreader/scss/components/post/_post.scss

@@ -11,7 +11,7 @@
 
   overflow-y: auto;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   cursor: initial;
 
@@ -33,7 +33,7 @@
 
   &__title {
     &--read {
-      color: $gainsboro;
+      color: var(--read-color);
     }
   }
 
@@ -55,7 +55,7 @@
   }
 
   &__rule, &__category {
-    background-color: $orange !important;
+    background-color: var(--lightest-accent-color) !important;
 
     & a {
       color: $black;

src/newsreader/scss/components/posts/_posts.scss

@@ -33,7 +33,7 @@
     }
 
     & .badge {
-      background-color: $orange;
+      background-color: var(--lightest-accent-color);
     }
 
     &:last-child {
@@ -48,7 +48,7 @@
     font-size: 16px;
 
     &--read {
-      color: darken($gainsboro, +10%);
+      color: var(--read-color);
     }
 
     &:hover {

src/newsreader/scss/components/rules/_rules.scss

@@ -14,11 +14,11 @@
 
     &:hover {
       cursor: pointer;
-      background-color: $gray;
+      background-color: var(--lighter-accent-color);
     }
 
     &--selected {
-      background-color: $gray;
+      background-color: var(--lighter-accent-color);
     }
   }
 

src/newsreader/scss/components/table/_table.scss

@@ -1,7 +1,7 @@
 .table {
   table-layout: fixed;
 
-  background-color: $white;
+  background-color: var(--background-color);
   width: 90%;
   padding: 20px;
 

src/newsreader/scss/components/theme-switcher/_theme-switcher.scss

@@ -0,0 +1,5 @@
+.theme-switcher {
+  &:hover {
+    cursor: pointer;
+  }
+}

src/newsreader/scss/components/theme-switcher/index.scss

@@ -0,0 +1 @@
+@import './theme-switcher';

src/newsreader/scss/elements/badge/_badge.scss

@@ -6,7 +6,7 @@
 
   text-align: center;
 
-  background-color: $gainsboro;
+  background-color: var(--lighter-accent-color);
 
   font-size: small;
 }

src/newsreader/scss/elements/checkbox/_checkbox.scss

@@ -14,7 +14,7 @@
 
     &:checked + .checkbox__label {
       .checkbox__box {
-        background-color: $checkbox-blue;
+        background-color: var(--lightest-accent-color);
       }
     }
   }
@@ -29,7 +29,7 @@
 
     height: 100%;
     width: 100%;
-    border: 2px solid darken($gainsboro, 10%);
+    border: 2px solid var(--lighter-accent-color);
     cursor: pointer;
   }
 }

src/newsreader/scss/elements/h1/_h1.scss

@@ -1,5 +1,5 @@
 .h1 {
-  color: $header-color;
+  color: var(--font-color);
   font-size: 20px;
 }
 

src/newsreader/scss/elements/h2/_h2.scss

@@ -1,5 +1,5 @@
 .h2 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h2 {

src/newsreader/scss/elements/h3/_h3.scss

@@ -1,5 +1,5 @@
 .h3 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h3 {

src/newsreader/scss/elements/h4/_h4.scss

@@ -1,5 +1,5 @@
 .h4 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h4 {

src/newsreader/scss/elements/h5/_h5.scss

@@ -1,5 +1,5 @@
 .h5 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h5 {

src/newsreader/scss/elements/input/_input.scss

@@ -1,10 +1,12 @@
 .input {
   @include text-padding;
 
-  border: 1px $gray solid;
+  color: var(--font-color);
+  background-color: var(--accent-color);
+  border: 1px var(--lighter-accent-color) solid;
 
   &:focus {
-    border: 1px $focus-blue solid;
+    border: 1px var(--lightest-accent-color) solid;
   }
 
   &[type="file"] {

src/newsreader/scss/elements/link/_link.scss

@@ -1,5 +1,5 @@
 .link {
-  color: darken($azureish-white, 30%);
+  color: var(--link-color);
   text-decoration: none;
 
   &:hover {

src/newsreader/scss/elements/small/_small.scss

@@ -1,5 +1,5 @@
 .small {
-  color: $nickel;
+  color: var(--font-color);
   font-size: small;
 }
 

src/newsreader/scss/lib/_css.gg.scss

@@ -1,10 +1,10 @@
 @import '~css.gg/icons-scss/icons';
 
 .gg-link {
-  color: initial;
+  color: var(--font-color);
 }
 
 .gg-pen {
+  color: var(--font-color);
   transform: rotate(-45deg) scale(var(--ggs, 0.8));
-  color: initial;
 }

src/newsreader/scss/partials/_colors.scss

@@ -8,9 +8,6 @@ $white: rgba(255, 255, 255, 1);
 $black: rgba(0, 0, 0, 1);
 $dark: rgba(0, 0, 0, 0.4);
 
-$font-color: rgba(48, 51, 53, 1);
-$header-color: rgba(100, 101, 102, 1);
-
 $reddit-orange: rgba(255, 69, 0, 1);
 $twitter-blue: rgba(29, 155, 240, 1);
 
@@ -26,3 +23,25 @@ $lavendal-pink: rgba(162, 155, 254, 1);
 
 $focus-blue: darken($azureish-white, +10%);
 $checkbox-blue: rgba(34, 170, 253, 1);
+
+// White theme
+$background-color: $white;
+
+$font-color: rgba(48, 51, 53, 1);
+$link-color: darken($azureish-white, 30%);
+$read-color: darken($gainsboro, 10%);
+
+$accent-color: $gainsboro;
+$lighter-accent-color: $gainsboro;
+$lightest-accent-color: $orange;
+
+// Dark theme
+$dark-background-color: rgba(29, 45, 80, 1);
+
+$dark-font-color: darken($gray, 10%);
+$dark-link-color: $link-color;
+$dark-read-color: darken($dark-font-color, 20%);
+
+$dark-accent-color: rgba(19, 59, 92, 1);
+$dark-lighter-accent-color: rgba(30, 95, 116, 1);
+$dark-lightest-accent-color: rgba(252, 218, 183, 1);

src/newsreader/scss/partials/_root.scss

@@ -0,0 +1,26 @@
+:root {
+  --background-color: #{$background-color};
+
+  --font-color: #{$font-color};
+  --link-color: #{$link-color};
+  --read-color: #{$read-color};
+
+  --accent-color: #{$accent-color};
+  --lighter-accent-color: #{$lighter-accent-color};
+  --lightest-accent-color: #{$lightest-accent-color};
+
+  &.dark-theme {
+    --background-color: #{$dark-background-color};
+
+    --font-color: #{$dark-font-color};
+    --link-color: #{$dark-link-color};
+    --read-color: #{$dark-read-color};
+
+    --accent-color: #{$dark-accent-color};
+    --lighter-accent-color: #{$dark-lighter-accent-color};
+    --lightest-accent-color: #{$dark-lightest-accent-color};
+  }
+
+  color: var(--font-color);
+  background-color: var(--background-color);
+}

src/newsreader/scss/partials/index.scss

@@ -1,2 +1,3 @@
 @import './colors';
 @import './fonts';
+@import './root';

src/newsreader/templates/base.html

@@ -27,6 +27,8 @@
           <li class="nav__item"><a href="{% url 'accounts:register' %}">Register</a></li>
         {% endif %}
       </ol>
+
+      <i class="theme-switcher gg-dark-mode"></i>
     </nav>
 
     {% if messages %}