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

src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml

@@ -34,6 +34,7 @@ menu:
         site_credentials: Accès aux sites
         ignore_origin_instance_rules: "Règles globales d'omission d'origine"
         quickstart: "Pour bien débuter"
+        theme_toggle: "Changer le thème"
     top:
         add_new_entry: Sauvegarder un nouvel article
         search: Rechercher
@@ -273,6 +274,7 @@ entry:
             delete_public_link: Supprimer le lien public
             export: Exporter
             print: Imprimer
+            theme_toggle: Changer le thème
             problem:
                 label: Un problème ?
                 description: Est-ce que cet article s’affiche mal ?

src/Wallabag/CoreBundle/Resources/views/base.html.twig

@@ -4,7 +4,7 @@
 <!--[if lte IE 7]><html class="no-js ie7 ie67 ie678"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
 <!--[if IE 8]><html class="no-js ie8 ie678"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
 <!--[if gt IE 8]><html class="no-js"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
-<html{% if lang is not empty %} lang="{{ lang }}"{% endif %}>
+<html{% if lang is not empty %} class="{{ theme_class() }}" lang="{{ lang }}"{% endif %}>
     <head>
         {% block head %}
             <meta name="viewport" content="initial-scale=1.0">

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig

@@ -97,6 +97,12 @@
             <div class="collapsible-body"></div>
         </li>
 
+        <li class="bold">
+            <a class="waves-effect collapsible-header js-theme-toggle">
+                <i class="material-icons small">brightness_medium</i>
+                <span>{{ 'entry.view.left_menu.theme_toggle'|trans }}</span>
+            </a>
+        </li>
         {% if craue_setting('share_public')
            or craue_setting('share_twitter')
            or craue_setting('share_shaarli')

src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig

@@ -117,6 +117,13 @@
                         <li><a href="{{ path('site_credentials_index') }}"><i class="material-icons">vpn_key</i> {{ 'menu.left.site_credentials'|trans }}</a></li>
                     {% endif %}
                     <li class="divider"></li>
+                    <li>
+                        <a class="waves-effect js-theme-toggle">
+                            <i class="material-icons small">brightness_medium</i>
+                            <span>{{ 'menu.left.theme_toggle'|trans }}</span>
+                        </a>
+                    </li>
+                    <li class="divider"></li>
                     {% if is_granted('ROLE_SUPER_ADMIN') %}
                         <li><a href="{{ path('user_index') }}"><i class="material-icons">people</i>{{ 'menu.left.users_management'|trans }}</a></li>
                         <li><a href="{{ path('craue_config_settings_modify') }}"><i class="material-icons">settings</i> {{ 'menu.left.internal_settings'|trans }}</a></li>

src/Wallabag/CoreBundle/Twig/WallabagExtension.php

@@ -51,6 +51,7 @@ class WallabagExtension extends AbstractExtension implements GlobalsInterface
             new TwigFunction('count_tags', [$this, 'countTags']),
             new TwigFunction('display_stats', [$this, 'displayStats']),
             new TwigFunction('asset_file_exists', [$this, 'assetFileExists']),
+            new TwigFunction('theme_class', [$this, 'themeClass']),
         ];
     }
 
@@ -171,6 +172,11 @@ class WallabagExtension extends AbstractExtension implements GlobalsInterface
         return file_exists(realpath($this->rootDir . '/../web/' . $name));
     }
 
+    public function themeClass()
+    {
+        return isset($_COOKIE['theme']) && 'dark' === $_COOKIE['theme'] ? 'dark-theme' : '';
+    }
+
     public function getName()
     {
         return 'wallabag_extension';