filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

theme switch handled by the penguin ui

Browse Source
This commit is contained in:
Priec
2026-06-18 16:25:30 +02:00
parent 68381d558a
commit 1cd2b86b74
2 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
assets/views/partials/settings_dropdown.html
View File

@@ -33,21 +33,24 @@
<p class="mt-1 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
{{ t(key="settings-theme", lang=lang | default(value='sk')) }}
</p>
<div x-data="{ theme: currentTheme() }" @theme:changed.document="theme = $event.detail">
<button type="button" @click="setTheme('system')" role="menuitem"
class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
<span>{{ t(key="theme-system", lang=lang | default(value='sk')) }}</span>
<span x-show="theme === 'system'" class="text-primary dark:text-primary-dark">✓</span>
</button>
<button type="button" @click="setTheme('light')" role="menuitem"
class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
<span>{{ t(key="theme-light", lang=lang | default(value='sk')) }}</span>
<span x-show="theme === 'light'" class="text-primary dark:text-primary-dark">✓</span>
</button>
<button type="button" @click="setTheme('dark')" role="menuitem"
class="flex w-full items-center justify-between px-4 py-2 text-sm text-on-surface transition hover:bg-primary/5 hover:text-on-surface-strong focus-visible:bg-primary/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
<span>{{ t(key="theme-dark", lang=lang | default(value='sk')) }}</span>
<span x-show="theme === 'dark'" class="text-primary dark:text-primary-dark">✓</span>
</button>
{# Theme picker: Penguin UI's switch toggle (penguinui-components/toggle/default-toggle.html),
adapted from a standalone checkbox into a light/dark switch wired to our existing
setTheme()/currentTheme() helpers in base.html (which drive <html data-theme>). The `dark`
state initialises from the resolved theme — so a stored 'system' preference still reflects
the current appearance — and stays in sync via the theme:changed event the helpers dispatch.
Toggling writes an explicit light/dark choice (the old tri-state 'system' option is dropped,
matching Penguin's binary toggle). #}
<div class="px-4 py-2"
x-data="{
labels: { light: '{{ t(key='theme-light', lang=lang | default(value='sk')) }}', dark: '{{ t(key='theme-dark', lang=lang | default(value='sk')) }}' },
dark: document.documentElement.getAttribute('data-theme') === 'dark'
}"
@theme:changed.document="dark = document.documentElement.getAttribute('data-theme') === 'dark'">
<label for="themeToggle" class="inline-flex w-full cursor-pointer items-center justify-between gap-3">
<span class="text-sm font-medium text-on-surface dark:text-on-surface-dark" x-text="dark ? labels.dark : labels.light"></span>
<input id="themeToggle" type="checkbox" class="peer sr-only" role="switch"
:checked="dark" @change="setTheme($event.target.checked ? 'dark' : 'light')" />
<div class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-outline bg-surface-alt after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-on-surface after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:bg-on-primary peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-outline-strong peer-focus:peer-checked:outline-primary peer-active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:after:bg-on-surface-dark dark:peer-checked:bg-primary-dark dark:peer-checked:after:bg-on-primary-dark dark:peer-focus:outline-outline-dark-strong dark:peer-focus:peer-checked:outline-primary-dark" aria-hidden="true"></div>
</label>
</div>
</div>