ben
f65c816464
Keep the Flux light/dark/system toggle; persist system explicitly so the app default can stay dark.
47 lines
1.7 KiB
PHP
47 lines
1.7 KiB
PHP
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>
|
|
{{ filled($title ?? null) ? $title.' — '.config('app.name', 'AndyTranscribe') : config('app.name', 'AndyTranscribe') }}
|
|
</title>
|
|
|
|
<link rel="icon" href="/favicon.ico" sizes="any">
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<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'])
|
|
{{-- 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>
|