Merge branch 'main' of github.com:TYPO3incubator/surfcamp-team6

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/Configuration/Sets/Career/settings.yaml

@@ -1,29 +1,23 @@
 ui:
-  theme: "light:only"
+  theme: "light"
   layout:
     radius: "5px"
     rotate: "3deg"
     pagebg: "light"
-    footerbg: "primary"
+    footerbg: "light"
     font:
-      text: "roboto"
-      heading: "roboto-slab"
+      text: "lato"
+      heading: "playpen-sans"
   light:
     color:
       primary: "#FFC27E"
       secondary: "#A6B067"
       light: "#F9FBEB"
-      primarytext: "var(--color-whitetext)"
-      secondarytext: "var(--color-blacktext)"
-      lighttext: "var(--color-whitetext)"
+      primarytext: "black"
+      secondarytext: "white"
+      lighttext: "black"
   dark:
     color:
-      primary: "rgb(205, 156, 19)"
-      secondary: "rgb(37, 37, 37)"
-      light: "rgb(29, 29, 29)"
-      primarytext: "black"
-      secondarytext: "var(--color-blacktext)"
-      lighttext: "var(--color-blacktext)"
 
 # DUMMYDATA
 #todo replace this values by backend ui input

local_packages/success/Resources/Private/Templates/_LandingPage/Content/SuccessFeatures.html

@@ -21,7 +21,7 @@
                         arguments="{headerLayout: data.header_layout, headerStyle: data.header_style, header: data.header, subheader: data.subheader, overline: data.overline}"/>
 
                     <f:for each="{data.tx_success_feature}" as="feature">
-                        <div class="mt-8 sm:flex">
+                        <div class="{f:if(condition: data.header, then: 'mt-8')} sm:flex">
                             <f:if condition="{feature.icon}">
                                 <f:then>
                                     <div class="background-primary rounded-full p-2 w-8 h-8 basis-8 shrink-0 mb-3 sm:mb-0 sm:mr-3 flex items-center justify-center">

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')}