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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user