Fix Bootstrap light/dark theming across all layouts
All checks were successful
linter / quality (pull_request) Successful in 1m52s
security / Dependency Audit (pull_request) Successful in 1m27s
security / Static Analysis (pull_request) Successful in 1m44s
tests / ci (8.4) (pull_request) Successful in 1m40s
tests / ci (8.5) (pull_request) Successful in 1m49s

- Make dark mode toggle reactive using Alpine x-data theme property
- Apply saved theme on page load via data-bs-theme attribute binding
- Remove hardcoded bg-light classes that broke dark mode styling
- Fix duplicate/broken Bootstrap bundle import in app.js
This commit is contained in:
2026-03-06 02:16:45 +00:00
parent 5f0b4218ae
commit 236ba9558c
5 changed files with 17 additions and 18 deletions

View File

@@ -1,5 +1,9 @@
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
x-data="{ theme: localStorage.getItem('theme') || 'light' }"
x-init="document.documentElement.setAttribute('data-bs-theme', theme);"
:data-bs-theme="theme"
>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,7 +12,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body class="bg-light">
<body>
{{ $slot }}
@livewireScripts
</body>