Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add light/dark mode toggle with header view transitions

Browse Source 
Add theme cycling (system/light/dark) with localStorage persistence
and FOUC prevention. Restructure CSS color tokens to respond to
data-theme attribute across all components. Redesign header as a
floating glass pill bar with smooth view transitions including
clip-reveal logo animation.
This commit is contained in:
Alexander Bocken
2026-03-01 16:15:36 +01:00
parent 3942a18b2b
commit fdbbca3942
82 changed files with 2317 additions and 1276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/faith/prayers/Prayer.svelte
+14 -6
View File
@@ -70,14 +70,22 @@
/* === LIGHT MODE === */
@media (prefers-color-scheme: light) {
.prayer-wrapper :global(v:lang(la)),
.prayer-wrapper.vernacular-primary :global(v:lang(de)),
.prayer-wrapper.vernacular-primary :global(v:lang(en)),
.prayer-wrapper.monolingual :global(v:not(:lang(la))),
.prayer-wrapper.no-latin :global(v:lang(de)),
.prayer-wrapper.no-latin :global(v:lang(en)) {
:global(:root:not([data-theme="dark"])) .prayer-wrapper :global(v:lang(la)),
:global(:root:not([data-theme="dark"])) .prayer-wrapper.vernacular-primary :global(v:lang(de)),
:global(:root:not([data-theme="dark"])) .prayer-wrapper.vernacular-primary :global(v:lang(en)),
:global(:root:not([data-theme="dark"])) .prayer-wrapper.monolingual :global(v:not(:lang(la))),
:global(:root:not([data-theme="dark"])) .prayer-wrapper.no-latin :global(v:lang(de)),
:global(:root:not([data-theme="dark"])) .prayer-wrapper.no-latin :global(v:lang(en)) {
color: black;
}
}
:global(:root[data-theme="light"]) .prayer-wrapper :global(v:lang(la)),
:global(:root[data-theme="light"]) .prayer-wrapper.vernacular-primary :global(v:lang(de)),
:global(:root[data-theme="light"]) .prayer-wrapper.vernacular-primary :global(v:lang(en)),
:global(:root[data-theme="light"]) .prayer-wrapper.monolingual :global(v:not(:lang(la))),
:global(:root[data-theme="light"]) .prayer-wrapper.no-latin :global(v:lang(de)),
:global(:root[data-theme="light"]) .prayer-wrapper.no-latin :global(v:lang(en)) {
color: black;
}
/* === INLINE / RUBRIC TEXT === */