Theme picker

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

@@ -53,26 +53,64 @@ function darkTheme() {
       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;
     },
   };
-  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 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 = () => {

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,7 +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: "Changer le thème"
+        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
@@ -275,6 +277,9 @@ entry:
             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/themes/material/Entry/entry.html.twig

@@ -98,10 +98,30 @@
         </li>
 
         <li class="bold">
-            <a class="waves-effect collapsible-header js-theme-toggle">
+            <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')

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

@@ -117,18 +117,30 @@
                         <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>
                         <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>