timmybee/travel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Tim Basten
2026-03-06 02:16:45 +00:00
parent 5f0b4218ae
commit 236ba9558c
5 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/views/components/layouts/app.blade.php
View File

@@ -1,8 +1,9 @@
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data x-init="
const saved = localStorage.getItem('theme');
if (saved) { document.documentElement.setAttribute('data-bs-theme', saved); }
">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
x-data="{ theme: localStorage.getItem('theme') || 'light' }"
x-init="$watch('theme', val => { document.documentElement.setAttribute('data-bs-theme', val); localStorage.setItem('theme', val); }); 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">
@@ -43,16 +44,11 @@
<li class="nav-item me-2">
<button
class="btn btn-sm btn-outline-light"
x-on:click="
const current = document.documentElement.getAttribute('data-bs-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme', next);
localStorage.setItem('theme', next);
"
x-on:click="theme = theme === 'dark' ? 'light' : 'dark'"
title="Toggle dark/light mode"
>
<span x-show="document.documentElement.getAttribute('data-bs-theme') !== 'dark'">🌙</span>
<span x-show="document.documentElement.getAttribute('data-bs-theme') === 'dark'">☀️</span>
<span x-show="theme !== 'dark'">🌙</span>
<span x-show="theme === 'dark'">☀️</span>
</button>
</li>
@auth