Merge pull request #4725 from wallabag/feat/dark-theme

Dark theme

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/css/sidenav.scss

@@ -11,6 +11,11 @@
     &.logo > a:hover {
       background: initial;
     }
+
+    & > a > i.material-icons.theme-toggle-icon {
+      float: none;
+      margin-left: 0;
+    }
   }
 
   a {

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

@@ -19,6 +19,100 @@ 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`;
+    },
+
+    removeCookie() {
+      document.cookie = `${this.name}=auto;samesite=Lax;path=/;max-age=0`;
+    },
+
+    exists() {
+      return document.cookie.split(';').map((cookie) => cookie.split('=')).filter((cookie) => cookie[0] === 'theme').length;
+    },
+  };
+  const preferedColorScheme = {
+    choose() {
+      if (this.isAvailable() && themeCookie.exists() === 0) {
+        const isPreferedColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+        if (themeCookie.exists() === 0) {
+          themeDom[isPreferedColorSchemeDark ? 'addClass' : 'removeClass'](rootEl);
+        }
+      }
+    },
+
+    isAvailable() {
+      return typeof window.matchMedia === 'function';
+    },
+
+    init() {
+      if (!this.isAvailable()) {
+        return false;
+      }
+      this.choose();
+      window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+        this.choose();
+      });
+      return true;
+    },
+  };
+  preferedColorScheme.init();
+  const lightThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="light"]');
+  [...lightThemeButtons].map((lightThemeButton) => {
+    lightThemeButton.addEventListener('click', () => {
+      themeDom.removeClass(rootEl);
+      themeCookie.setCookie(false);
+    });
+    return true;
+  });
+  const darkThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="dark"]');
+  [...darkThemeButtons].map((darkThemeButton) => {
+    darkThemeButton.addEventListener('click', () => {
+      themeDom.addClass(rootEl);
+      themeCookie.setCookie(true);
+    });
+    return true;
+  });
+  const autoThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="auto"]');
+  [...autoThemeButtons].map((autoThemeButton) => {
+    autoThemeButton.addEventListener('click', () => {
+      themeCookie.removeCookie();
+      preferedColorScheme.choose();
+    });
+    return true;
+  });
+}
+
 const stickyNav = () => {
   const nav = $('.js-entry-nav-top');
   $('[data-toggle="actions"]').click(() => {
@@ -52,6 +146,7 @@ const articleScroll = () => {
 $(document).ready(() => {
   // sideNav
   $('.button-collapse').sideNav();
+  darkTheme();
   $('select').material_select();
   $('.collapsible').collapsible({
     accordion: false,
@@ -76,7 +171,6 @@ $(document).ready(() => {
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);
     $(toShow).show(100);
-    $('.nav-panels').css('background', 'white');
     $(toFocus).focus();
   };
 
@@ -109,7 +203,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.en.yml

@@ -34,6 +34,9 @@ menu:
         site_credentials: Site credentials
         ignore_origin_instance_rules: 'Global ignore origin rules'
         quickstart: "Quickstart"
+        theme_toggle_light: "Light theme"
+        theme_toggle_dark: "Dark theme"
+        theme_toggle_auto: "Automatic theme"
     top:
         add_new_entry: Add a new entry
         search: Search
@@ -273,6 +276,10 @@ entry:
             delete_public_link: delete public link
             export: Export
             print: Print
+            theme_toggle: Theme toggle
+            theme_toggle_light: Light
+            theme_toggle_dark: Dark
+            theme_toggle_auto: Automatic
             problem:
                 label: Problems?
                 description: Does this article appear wrong?

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

@@ -34,6 +34,9 @@ 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_light: "Thème clair"
+        theme_toggle_dark: "Thème sombre"
+        theme_toggle_auto: "Thème automatique"
     top:
         add_new_entry: Sauvegarder un nouvel article
         search: Rechercher
@@ -273,6 +276,10 @@ entry:
             delete_public_link: Supprimer le lien public
             export: Exporter
             print: Imprimer
+            theme_toggle: Changer le thème
+            theme_toggle_light: "Clair"
+            theme_toggle_dark: "Sombre"
+            theme_toggle_auto: "Automatique"
             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,32 @@
             <div class="collapsible-body"></div>
         </li>
 
+        <li class="bold">
+            <a class="waves-effect collapsible-header">
+                <i class="material-icons small">brightness_medium</i>
+                <span>{{ 'entry.view.left_menu.theme_toggle'|trans }}</span>
+            </a>
+            <ul class="collapsible-body">
+                <li>
+                    <a href="#" class="js-theme-toggle" data-theme="light">
+                        <i class="theme-toggle-icon material-icons tiny">brightness_high</i>
+                        <span>{{ 'entry.view.left_menu.theme_toggle_light'|trans }}</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="js-theme-toggle" data-theme="dark">
+                        <i class="theme-toggle-icon material-icons tiny">brightness_low</i>
+                        <span>{{ 'entry.view.left_menu.theme_toggle_dark'|trans }}</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="js-theme-toggle" data-theme="auto">
+                        <i class="theme-toggle-icon material-icons tiny">brightness_auto</i>
+                        <span>{{ 'entry.view.left_menu.theme_toggle_auto'|trans }}</span>
+                    </a>
+                </li>
+            </ul>
+        </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

@@ -121,7 +121,26 @@
                         <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>
                         <li><a href="{{ path('ignore_origin_instance_rules_index') }}"><i class="material-icons">build</i> {{ 'menu.left.ignore_origin_instance_rules'|trans }}</a></li>
+                        <li class="divider"></li>
                     {% endif %}
+                    <li>
+                        <a href="#" class="js-theme-toggle" data-theme="light">
+                            <i class="theme-toggle-icon material-icons tiny">brightness_high</i>
+                            <span>{{ 'menu.left.theme_toggle_light'|trans }}</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="js-theme-toggle" data-theme="dark">
+                            <i class="theme-toggle-icon material-icons tiny">brightness_low</i>
+                            <span>{{ 'menu.left.theme_toggle_dark'|trans }}</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="js-theme-toggle" data-theme="auto">
+                            <i class="theme-toggle-icon material-icons tiny">brightness_auto</i>
+                            <span>{{ 'menu.left.theme_toggle_auto'|trans }}</span>
+                        </a>
+                    </li>
                     <li class="divider"></li>
                     <li><a href="{{ path('howto') }}"><i class="material-icons">live_help</i> {{ 'menu.left.howto'|trans }}</a></li>
                     <li><a href="{{ path('quickstart') }}"><i class="material-icons">assistant_photo</i> {{ 'menu.left.quickstart'|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';