feat: introduce a dark mode switcher as an emoji

strangebuzz · Dec 20, 2024 · f4a7593 · f4a7593
1 parent e788001
commit f4a7593
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 102 deletions.
diff --git a/assets/app.js b/assets/app.js
@@ -6,7 +6,6 @@
  */
 
 // vendors
-import './js/pico-minimal-theme-switcher.js';
 import './vendor/@picocss/pico/css/pico.min.css';
 
 // app
@@ -15,6 +14,6 @@ import './styles/app.css';
 
 // "optin" - No turbo forms unless you insist. Use data-turbo="true" to enable turbo on individual forms.
 // @see https://stackoverflow.com/a/76286583/633864
-Turbo.setFormMode('optin') // "on" | "off" | "optin"
+Turbo.config.forms.mode = 'optin' // "on" | "off" | "optin"
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')
diff --git a/assets/controllers/header_controller.js b/assets/controllers/header_controller.js
@@ -0,0 +1,55 @@
+import {Controller} from '@hotwired/stimulus';
+
+/**
+ * Stimulus version of Pico minimal-theme-switcher.js (see link below).
+ * In this version we don't hanlde the "auto" scheme.
+ *
+ * @see https://x4qtf8.csb.app/js/minimal-theme-switcher.js
+ */
+export default class extends Controller {
+    static targets = ["lightEmoji", "darkEmoji"];
+    scheme = "light";
+    rootAttribute = 'data-theme';
+    localStorageKey = "picoPreferredColorScheme";
+
+    connect() {
+        this.scheme = this.schemeFromLocalStorage();
+        this.applyScheme();
+    }
+
+    setDarkMode() {
+        this.setScheme( 'dark');
+        this.applyScheme();
+    }
+
+    setLightMode() {
+        this.setScheme( 'light');
+        this.applyScheme();
+    }
+
+    schemeFromLocalStorage() {
+        return window.localStorage?.getItem(this.localStorageKey) ?? this.scheme;
+    }
+
+    setScheme(scheme) {
+        this.scheme = scheme;
+        this.schemeToLocalStorage();
+    }
+
+    // Apply scheme
+    applyScheme() {
+        document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+        this.schemeToUi();
+    }
+
+    // Store scheme to local storage
+    schemeToLocalStorage() {
+        window.localStorage?.setItem(this.localStorageKey, this.scheme);
+    }
+
+    // Show/hide theme icons depending on the current scheme
+    schemeToUi() {
+        this.lightEmojiTarget.style.display = this.scheme === 'dark' ? 'none' : '';
+        this.darkEmojiTarget.style.display = this.scheme === 'dark' ? '' : 'none';
+    }
+}
diff --git a/assets/js/pico-minimal-theme-switcher.js b/assets/js/pico-minimal-theme-switcher.js
diff --git a/assets/styles/app.css b/assets/styles/app.css
@@ -14,10 +14,21 @@ hgroup > h1 > a {
     text-decoration: none;
 }
 
+/**
+ * Ligh and dark mode icons.
+ */
+header .theme-icon {
+    text-decoration: none;
+    font-size: 150%;
+    cursor: pointer;
+}
+
 footer div.github {
     text-align: right;
 }
 
+/* Symfony --------- */
+
 /**
  * Mark required fields in Symfony forms.
  *

diff --git a/src/Controller/ComposerAction.php b/src/Controller/ComposerAction.php
@@ -7,14 +7,14 @@
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Attribute\AsController;
-use Symfony\Component\HttpKernel\Attribute\Cache;
+// use Symfony\Component\HttpKernel\Attribute\Cache;
 use Symfony\Component\Routing\Attribute\Route;
 
 /**
  * @see ComposerActionTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+// #[Cache(maxage: 3600, public: true)]
 final class ComposerAction extends AbstractController
 {
     /**

diff --git a/src/Controller/FormAction.php b/src/Controller/FormAction.php
@@ -10,14 +10,14 @@
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Attribute\AsController;
-use Symfony\Component\HttpKernel\Attribute\Cache;
+// use Symfony\Component\HttpKernel\Attribute\Cache;
 use Symfony\Component\Routing\Attribute\Route;
 
 /**
  * @see FormActionTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+// #[Cache(maxage: 3600, public: true)]
 final class FormAction extends AbstractController
 {
     /**

diff --git a/src/Controller/HelloWorldAction.php b/src/Controller/HelloWorldAction.php
@@ -14,7 +14,7 @@
  * We use the two binds we have defined in config/services.yaml.
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+// #[Cache(maxage: 3600, public: true)]
 final class HelloWorldAction extends AbstractController
 {
     #[Route(path: '/hello-world', name: self::class)]

diff --git a/src/Controller/HomeAction.php b/src/Controller/HomeAction.php
@@ -7,14 +7,14 @@
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Attribute\AsController;
-use Symfony\Component\HttpKernel\Attribute\Cache;
+// use Symfony\Component\HttpKernel\Attribute\Cache;
 use Symfony\Component\Routing\Attribute\Route;
 
 /**
  * @see StaticActionTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+// #[Cache(maxage: 3600, public: true)]
 final class HomeAction extends AbstractController
 {
     /**

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -20,7 +20,7 @@
 
 <body>
 
-<header class="container">
+<header class="container" {{ stimulus_controller('header') }}>
     <div class="grid">
         <div>
             <hgroup>
@@ -53,19 +53,11 @@
                         </details>
                     </li>
                     <li>
-                        <details class="dropdown">
-                            <summary aria-haspopup="group-theme" role="button" class="secondary">
-                                Theme
-                            </summary>
-                            <ul role="group-theme">
-                                <li><a href="#" data-theme-switcher="auto">🚦Auto</a></li>
-                                <li><a href="#" data-theme-switcher="light">🌞 Light</a></li>
-                                <li><a href="#" data-theme-switcher="dark">🌘 Dark</a></li>
-                            </ul>
-                        </details>
+                        <a class="contrast" data-tooltip="{{ website }}" data-placement="bottom" href="{{ website }}" target="_blank"><img alt="GitHub" class="github-icon" src="{{ asset('icons/github.svg') }}" width="24" height="24"></a>
                     </li>
                     <li>
-                        <a data-tooltip="{{ website }}" href="{{ website }}" target="_blank"><img alt="GitHub" class="github-icon" src="{{ asset('icons/github.svg') }}" width="24" height="24"></a>
+                        <a class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🌞</a>
+                        <a class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom" >🌘 </a>
                     </li>
                 </ul>
             </nav>