Merge pull request #50 from TYPO3incubator/feature/theme-toggle-button

Feature/theme toggle button

assets/js/theme-settings.js

@@ -1,30 +1,79 @@
+const Theme = {
+  DARK: 'theme-dark',
+  LIGHT: 'theme-light'
+};
+
+const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
+const themeToggle = document.querySelector("[data-theme-toggle]");
+const onButton = themeToggle.querySelector('.on')
+const offButton = themeToggle.querySelector('.off')
+
+function getCurrentTheme() {
+  const storedTheme = localStorage.getItem("theme");
+  if (storedTheme !== null) {
+    return storedTheme;
+  }
+  return systemSettingDark.matches ? Theme.DARK : Theme.LIGHT;
+}
+
+let currentThemeSetting = getCurrentTheme();
+
+function applyTheme(theme) {
+  const el = document.querySelector('.theme-js');
+  el.classList.remove(Theme.DARK, Theme.LIGHT); // Remove both to ensure clean state
+  el.classList.add(theme);
+  updateToggleButtonState(theme)
+}
+
+function changeTheme(theme, saveToLocalStorage = true) {
+  if (theme === undefined) {
+    theme = currentThemeSetting === Theme.DARK ? Theme.LIGHT : Theme.DARK;
+  }
+
+  if (saveToLocalStorage) {
+    localStorage.setItem("theme", theme);
+  }
+
+  currentThemeSetting = theme;
+  applyTheme(theme);
+}
+
+themeToggle.addEventListener("click", function(e) {
+  e.preventDefault();
+  changeTheme();
+});
+
 function initTheme() {
+  applyTheme(currentThemeSetting);
   colorThemeWatcher();
-  let el = document.querySelector('.theme-js');
-  if (el.classList.contains('theme-system')) {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      toggleDarkTheme(true);
-    }
-  }
+  updateToggleButtonState(currentThemeSetting);
 }
 
 function colorThemeWatcher() {
-  try {
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-        toggleDarkTheme(e.matches ? true : false);
-      });
-  } catch {
-      console.warn('color theme watcher not supported');
-  }
+  systemSettingDark.addEventListener('change', e => {
+    if (localStorage.getItem("theme") == null) {
+      const newTheme = e.matches ? Theme.DARK : Theme.LIGHT;
+      changeTheme(newTheme, false);
+    }
+  });
 }
 
-function toggleDarkTheme(setting) {
-  let el = document.querySelector('.theme-js');
-  if (setting) {
-    el.classList.add('theme-dark');
+function updateToggleButtonState(theme) {
+  const onButton = document.querySelector('.on');
+  const offButton = document.querySelector('.off');
+  const themeToggleDot = document.querySelector('.themeToggler .dot')
+
+  if (theme === Theme.DARK) {
+    onButton.classList.remove('hidden');
+    offButton.classList.add('hidden');
+    themeToggle.checked = true;
+    themeToggleDot.style.transform = 'translateX(1.25rem)';
   } else {
-    el.classList.remove('theme-dark');
+    onButton.classList.add('hidden');
+    offButton.classList.remove('hidden');
+    themeToggle.checked = false;
+    themeToggleDot.style.transform = 'translateX(0)'
   }
 }
 
-initTheme();
+initTheme();

local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Footer.html

@@ -29,6 +29,28 @@
             </div>
         </f:if>
 
+        <f:if condition="{settings.ui.theme} == 'system'">
+            <label
+                for="themeToggler"
+                class="themeToggler relative inline-flex cursor-pointer select-none items-center mt-4"
+                >
+                <input
+                    data-theme-toggle
+                    type="checkbox"
+                    name="themeToggler"
+                    id="themeToggler"
+                    class="sr-only"
+                />
+                <span class="mr-2 flex h-6 w-12 items-center rounded-full bg-[#CCCCCE] dark:bg-dark-2 p-1 duration-200">
+                    <span class="h-5 w-5 rounded-full bg-white duration-200 dot"></span>
+                </span>
+                <span class="label flex items-center text-sm font-medium dark:text-[#fff]">
+                    <span class="on hidden pl-1">Dark</span>
+                    <span class="off hidden pl-1">Light</span>
+                </span>
+            </label>
+        </f:if>
+
         <div class="legal-footer grid md:grid-cols-2 gap-3 {f:if(condition: '{footer -> f:count()} != 0', then: 'mt-5')}">
             <span class="copyright flex">
                 &copy; {settings.info.owner.name} {f:format.date(format: '%Y', date:'now')}