Dark theme

Simounet · Apr 15, 2021 · 5a4486f · 5a4486f
1 parent 4556598
commit 5a4486f
Show file tree

Hide file tree

Showing 6 changed files with 323 additions and 29 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/images/brightness.svg b/images/brightness.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{$language}" class="no-js">
+<html lang="{$language}" class="{if="isset($_COOKIE['theme']) && $_COOKIE['theme'] === 'dark'"}dark-theme {/if}no-js">
 <head>
     <meta charset="UTF-8">
     <title>{$delimiter=' · '}{if="isset($currentFeed)"}{$currentFeed->getName()}{$delimiter}{/if}{if="isset($currentFolder)"}{$currentFolder->getName()}{$delimiter}{/if}LeedVibes</title>
@@ -65,6 +65,9 @@ <h3>{function="_t('YOU_MUST_BE_LOGGED')"}</h3>
                         <use xlink:href="#svg-settings" />
                     </svg>
                 </a>
+                <button class="settings-item js-brightness-toggle">
+                    <img src="images/brightness.svg?#brightness_medium">
+                </button>
                 <a href="./?action=favorites" data-link="favorites" class="settings-item">
                     <svg
                         width="15"
@@ -236,8 +239,13 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                 </div>
             </div>
         </main>
-        <section class="shortcuts js-shortcuts">
-            <ul class="shortcuts-list">
+        <section class="popin hidden js-popin">
+            <ul class="brightness-list js-brightness-list">
+                <li class="brightness-item"><button class="brightness-button js-theme-toggle-set" data-theme="light"><img src="images/brightness.svg?#brightness_high" alt="" class="brightness-img"> Clair</button></li>
+                <li class="brightness-item"><button class="brightness-button js-theme-toggle-set" data-theme="dark"><img src="images/brightness.svg?#brightness_low" alt="" class="brightness-img"> Sombre</button></li>
+                <li class="brightness-item"><button class="brightness-button js-theme-toggle-set" data-theme="auto"><img src="images/brightness.svg?#brightness_auto" alt="" class="brightness-img"> Auto</button></li>
+            </ul>
+            <ul class="shortcuts-list js-shortcuts-list">
                 <li class="shortcut"><span class="shortcut-key">M</span> <span class="shortcut-text">Mark the current folder as read</span></li>
                 <li class="shortcut"><span class="shortcut-key">X</span> <span class="shortcut-text">Mark the current article as read</span></li>
                 <li class="shortcut"><span class="shortcut-key">F</span> <span class="shortcut-text">Mark the current article as favorited / unfavorited</span></li>

diff --git a/js/script.js b/js/script.js
@@ -12,10 +12,95 @@ function _t (key, args) {
     return value;
 }
 
+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].trim() === '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();
+            });
+        }
+    };
+    preferedColorScheme.init();
+    const themeButtonLow = document.querySelector('.js-theme-toggle-set[data-theme="light"]');
+    themeButtonLow.addEventListener('click', () => {
+        themeDom.removeClass(rootEl);
+        themeCookie.setCookie(false);
+    });
+    const themeButtonHigh = document.querySelector('.js-theme-toggle-set[data-theme="dark"]');
+    themeButtonHigh.addEventListener('click', () => {
+        themeDom.addClass(rootEl);
+        themeCookie.setCookie(true);
+    });
+    const themeButtonAuto = document.querySelector('.js-theme-toggle-set[data-theme="auto"]');
+    themeButtonAuto.addEventListener('click', () => {
+        themeCookie.removeCookie();
+        preferedColorScheme.choose();
+    });
+}
+
 $(function () {
     'use strict';
 
     anonymousState = $('[data-anonymous-state]').data('anonymous-state');
+    darkTheme();
 
     $('.wrapper').on('click keypress', '.js-event', function (event) {
         if (event.type === 'click' || event.which === 13) {
@@ -70,17 +155,57 @@ $(function () {
         markAsRead(button);
     });
 
-    const shortcutsContainer = $('.js-shortcuts');
+    const popin = {
+        el: document.querySelector('.js-popin'),
+        previousFocusedEl: null,
+
+        brightnessClass: 'js-brightness-list',
+        shortcutsClass: 'js-shortcuts-list',
+
+        show: function (name) {
+            Mousetrap.bind('esc', () => { this.close(); });
+            const isShortcuts = name === this.shortcutsClass;
+            this.previousFocusedEl = document.activeElement;
+            this.el.querySelector('.js-brightness-list').classList[isShortcuts ? 'add' : 'remove']('hidden');
+            this.el.querySelector('.js-shortcuts-list').classList[isShortcuts ? 'remove' : 'add']('hidden');
+            this.el.classList.remove('hidden');
+            this.el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
+        },
+
+        close: function () {
+            this.el.classList.add('hidden');
+            this.previousFocusedEl.focus();
+        },
+
+        showShortcuts: function () {
+            this.show(this.shortcutsClass);
+        },
+
+        toggleShortcuts: function () {
+            this.el.querySelector('.js-brightness-list').classList.add('hidden');
+            this.el.querySelector('.js-shortcuts-list').classList.remove('hidden');
+            this.el.classList.toggle('hidden');
+        },
+
+        showBrightness: function () {
+            this.show(this.brightnessClass);
+        },
+
+        init: function () {
+            this.el.addEventListener('click', this.close.bind(this));
+        }
+    };
+    popin.init();
+
     $('.js-shortcuts-toggle').on('click', function () {
-        shortcutsContainer.show();
+        popin.showShortcuts();
     });
-    shortcutsContainer.on('click', function () {
-        $(this).hide();
+    $('.js-brightness-toggle').on('click', function () {
+        popin.showBrightness();
     });
 
     pushIdsDisplayed($('.js-event'));
 
-
     const userAction = new UserActionObject();
     Mousetrap.bind('j', function () { userAction.moveForward(); });
     Mousetrap.bind('k', function () { userAction.moveBackward(); });
@@ -90,7 +215,7 @@ $(function () {
     Mousetrap.bind('g f', function () { window.location.href = $('[data-link="favorites"]')[0].href; });
     Mousetrap.bind('g s', function () { window.location.href = $('[data-link="settings"]')[0].href; });
     Mousetrap.bind('r', function () { refreshEvents(syncCode); });
-    Mousetrap.bind('?', function () { userAction.toggleHelp(shortcutsContainer); });
+    Mousetrap.bind('?', function () { popin.toggleShortcuts(); });
 
     Mousetrap.bind('m', function () {
         const button = $('.selected').find('.js-mark-as-read');
@@ -203,10 +328,6 @@ UserActionObject.prototype = {
             return false;
         }
         this.focusedEl.find(selector).first().click();
-    },
-
-    toggleHelp: function (el) {
-        el.toggle();
     }
 };