Christoph Brandau
25b98d7c4d
Adds comprehensive theme management across the application, allowing users to save their preferred color scheme (light/dark) or automatically follow the operating system's settings. This required updating state management in App.svelte to handle theme loading and applying changes dynamically via CSS variables. The styling layer was significantly updated with new CSS variables and rules for both dark and light modes, ensuring visual consistency across all components like dialogs, buttons, and sidebars. - Added logic to detect system color scheme preference - Implemented full support for persistent light/dark mode switching - Overhauled global CSS variables for improved theme adaptability
32 lines
886 B
TypeScript
32 lines
886 B
TypeScript
import { mount } from "svelte";
|
|
|
|
import App from "./App.svelte";
|
|
import "./app.css";
|
|
|
|
const THEME_KEY = "gitlite.theme.v1";
|
|
const target = document.getElementById("app");
|
|
|
|
if (!target) {
|
|
throw new Error("App target element was not found.");
|
|
}
|
|
|
|
try {
|
|
const storedTheme = localStorage.getItem(THEME_KEY);
|
|
const preference = storedTheme === "light" || storedTheme === "dark" || storedTheme === "system"
|
|
? storedTheme
|
|
: "system";
|
|
const resolved = preference === "system" && window.matchMedia("(prefers-color-scheme: light)").matches
|
|
? "light"
|
|
: preference === "system"
|
|
? "dark"
|
|
: preference;
|
|
document.documentElement.dataset.themePreference = preference;
|
|
document.documentElement.dataset.theme = resolved;
|
|
} catch {
|
|
// Storage is best-effort; the CSS system theme fallback still applies.
|
|
}
|
|
|
|
const app = mount(App, { target });
|
|
|
|
export default app;
|