Default the UI appearance to dark mode for new visitors.

Keep the Flux light/dark/system toggle; persist system explicitly so the app default can stay dark.
This commit is contained in:
ben
2026-08-12 22:12:52 +02:00
parent d60851bb53
commit f65c816464
+33 -1
View File
@@ -11,4 +11,36 @@
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
@fluxAppearance
{{-- Flux appearance with dark as the default (Flux ships with "system"). --}}
<style>
:root.dark {
color-scheme: dark;
}
</style>
<script>
window.Flux = {
applyAppearance (appearance) {
let applyDark = () => document.documentElement.classList.add('dark')
let applyLight = () => document.documentElement.classList.remove('dark')
if (appearance === 'system') {
let media = window.matchMedia('(prefers-color-scheme: dark)')
// Persist "system" explicitly so a missing key can mean "use app default (dark)".
window.localStorage.setItem('flux.appearance', 'system')
media.matches ? applyDark() : applyLight()
} else if (appearance === 'dark') {
window.localStorage.setItem('flux.appearance', 'dark')
applyDark()
} else if (appearance === 'light') {
window.localStorage.setItem('flux.appearance', 'light')
applyLight()
}
}
}
window.Flux.applyAppearance(window.localStorage.getItem('flux.appearance') || 'dark')
</script>