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

Dark theme
2024-12-22 15:46:30 +00:00 · 2020-11-23 07:53:10 +01:00 · 2020-11-23 07:53:10 +01:00 · 1443bb1998
commit 1443bb1998
parent fc74b2b7a9 66d5042af5
18 changed files with 252 additions and 11 deletions
--- a/app/Resources/static/themes/material/css/dark_theme.scss
+++ b/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;
+  }
+}
--- a/app/Resources/static/themes/material/css/index.scss
+++ b/app/Resources/static/themes/material/css/index.scss
@ -9,6 +9,7 @@
@import 'nav';
@import 'sidenav';
@import 'various';
+@import 'dark_theme';

 /* Tools */
@import 'fonts';
--- a/app/Resources/static/themes/material/css/media_queries.scss
+++ b/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;
  }
 }
--- a/app/Resources/static/themes/material/css/nav.scss
+++ b/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;
--- a/app/Resources/static/themes/material/css/sidenav.scss
+++ b/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 {
--- a/app/Resources/static/themes/material/index.js
+++ b/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;
  });

--- a/src/Wallabag/CoreBundle/Resources/translations/messages.en.yml
+++ b/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?
--- a/src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml
+++ b/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 ?
--- a/src/Wallabag/CoreBundle/Resources/views/base.html.twig
+++ b/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">
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/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')
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/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>
--- a/src/Wallabag/CoreBundle/Twig/WallabagExtension.php
+++ b/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';
--- a/web/wallassets/baggy.js
+++ b/web/wallassets/baggy.js
--- a/web/wallassets/baggy.js.map
+++ b/web/wallassets/baggy.js.map
--- a/web/wallassets/material.css
+++ b/web/wallassets/material.css
--- a/web/wallassets/material.css.map
+++ b/web/wallassets/material.css.map
--- a/web/wallassets/material.js
+++ b/web/wallassets/material.js
--- a/web/wallassets/material.js.map
+++ b/web/wallassets/material.js.map