Implement dark mode, bug report page, and schema dump

This commit is contained in:
2025-11-27 15:06:45 +08:00
parent 13bc6db529
commit 83602b1ed1
91 changed files with 1078 additions and 2291 deletions

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data="themeSwitcher()" x-init="init()" :class="{'dark': isDark}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,13 +14,13 @@
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<body class="font-sans antialiased bg-gray-50 text-slate-900 transition-colors duration-300 dark:bg-slate-900 dark:text-slate-100">
<div class="min-h-screen">
@include('layouts.navigation')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<header class="bg-white/80 shadow dark:bg-slate-800/80 backdrop-blur">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
@@ -28,9 +28,34 @@
@endif
<!-- Page Content -->
<main>
<main class="bg-gray-50 dark:bg-slate-900">
{{ $slot }}
</main>
</div>
<script>
function themeSwitcher() {
return {
isDark: false,
init() {
const stored = localStorage.getItem('theme');
if (stored) {
this.isDark = stored === 'dark';
} else {
this.isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
this.apply();
},
toggle() {
this.isDark = !this.isDark;
localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
this.apply();
},
apply() {
document.documentElement.classList.toggle('dark', this.isDark);
}
}
}
</script>
</body>
</html>