Basic dark theme handling

app/Resources/static/themes/material/css/dark_theme.scss

@@ -0,0 +1,73 @@
+.dark-theme {
+  body,
+  main #content,
+  #article,
+  .card,
+  .card-panel,
+  .card .card-reveal,
+  .card-stacked .preview:not(.preview--default),
+  .card .preview:not(.preview--default),
+  .collapsible-header,
+  .collection .collection-item,
+  .dropdown-content,
+  .nav-panel-add,
+  .nav-panel-search,
+  .side-nav,
+  .side-nav .collapsible-body,
+  .side-nav.fixed .collapsible-body,
+  .tabs {
+    background-color: black;
+  }
+
+  .dropdown-content li:hover,
+  .dropdown-content li.active,
+  .dropdown-content li.selected {
+    background-color: #575757;
+  }
+
+  main #content,
+  #article article,
+  #article article h1,
+  #article article h2,
+  #article article h3,
+  #article article h4,
+  #article article h5,
+  #article article h6,
+  .results a,
+  .side-nav li > a,
+  .side-nav li > a > i.material-icons {
+    color: #dfdfdf;
+  }
+
+  .grey-text.text-darken-4 {
+    color: #dfdfdf !important;
+  }
+
+  .side-nav li.active,
+  .side-nav li:not(.logo) > a:hover,
+  .side-nav .collapsible-header:hover,
+  .side-nav.fixed .collapsible-header:hover {
+    background-color: #333;
+  }
+
+  #article {
+    box-shadow: 0 0 10px #575757;
+  }
+
+  nav,
+  .card,
+  .side-nav {
+    box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.4), 0 1px 5px 0 rgba(255, 255, 255, 0.4), 0 3px 1px -2px rgba(255, 255, 255, 0.4);
+  }
+
+  .logo img,
+  .preview.preview--default,
+  .typo-logo {
+    filter: invert(100%);
+  }
+
+  .border-bottom,
+  .collapsible {
+    border-color: #222;
+  }
+}

app/Resources/static/themes/material/css/index.scss

@@ -9,6 +9,7 @@
 @import 'nav';
 @import 'sidenav';
 @import 'various';
+@import 'dark_theme';
 
 /* Tools */
 @import 'fonts';

app/Resources/static/themes/material/css/media_queries.scss

@@ -15,7 +15,7 @@
 }
 
 @media screen and (min-width: 993px) {
-  body.entry main #content {
+  main #content {
     padding-left: 70px;
   }
 }

app/Resources/static/themes/material/css/nav.scss

@@ -71,7 +71,6 @@ nav {
   }
 
   .input-field input:focus {
-    background-color: #fff;
     border: 0;
     box-shadow: none;
     color: #444;
@@ -108,6 +107,11 @@ nav {
   }
 }
 
+.nav-panel-add,
+.nav-panel-search {
+  background-color: white;
+}
+
 .nav-form-button {
   padding: 0;
   background-color: transparent;

app/Resources/static/themes/material/index.js

@@ -19,6 +19,62 @@ import './css/index.scss';
 
 const mobileMaxWidth = 993;
 
+function darkTheme() {
+  const rootEl = document.querySelector('html');
+  const themeDom = {
+    darkClass: 'dark-theme',
+
+    toggleClass(el) {
+      return el.classList.toggle(this.darkClass);
+    },
+
+    addClass(el) {
+      return el.classList.add(this.darkClass);
+    },
+
+    removeClass(el) {
+      return el.classList.remove(this.darkClass);
+    },
+  };
+  const themeCookie = {
+    values: {
+      light: 'light',
+      dark: 'dark',
+    },
+
+    name: 'theme',
+
+    getValue(isDarkTheme) {
+      return isDarkTheme ? this.values.dark : this.values.light;
+    },
+
+    setCookie(isDarkTheme) {
+      const value = this.getValue(isDarkTheme);
+      document.cookie = `${this.name}=${value};samesite=Lax;path=/;max-age=31536000`;
+    },
+
+    exists() {
+      return document.cookie.split(';').map((cookie) => cookie.split('=')).filter((cookie) => cookie[0] === 'theme').length;
+    },
+  };
+  if (themeCookie.exists() === 0 && typeof window.matchMedia === 'function') {
+    const isPreferedColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+    if (isPreferedColorSchemeDark) {
+      themeDom.addClass(rootEl);
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(
+      (e) => themeDom[e.matches ? 'addClass' : 'removeClass'](rootEl),
+    );
+  }
+  const themeButton = document.querySelector('.js-theme-toggle');
+  if (themeButton) {
+    themeButton.addEventListener('click', () => {
+      const isDarkTheme = themeDom.toggleClass(rootEl);
+      themeCookie.setCookie(isDarkTheme);
+    });
+  }
+}
+
 const stickyNav = () => {
   const nav = $('.js-entry-nav-top');
   $('[data-toggle="actions"]').click(() => {
@@ -52,6 +108,7 @@ const articleScroll = () => {
 $(document).ready(() => {
   // sideNav
   $('.button-collapse').sideNav();
+  darkTheme();
   $('select').material_select();
   $('.collapsible').collapsible({
     accordion: false,
@@ -76,7 +133,6 @@ $(document).ready(() => {
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);
     $(toShow).show(100);
-    $('.nav-panels').css('background', 'white');
     $(toFocus).focus();
   };
 
@@ -109,7 +165,6 @@ $(document).ready(() => {
   $('.close').on('click', (e) => {
     $(e.target).parent('.nav-panel-item').hide(100);
     $('.nav-panel-actions').show(100);
-    $('.nav-panels').css('background', 'transparent');
     return false;
   });