Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme-engine): centralize CSS variables and add reactive light/dark mode support

Browse Source
This commit is contained in:
Daniel S
2026-08-08 18:56:26 +02:00
parent be3a8a82ab
commit c51629b229
5 changed files with 175 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/layouts/Layout.astro
View File

@@ -8,13 +8,20 @@ import '@fontsource/space-grotesk/400.css';
import '@fontsource/space-grotesk/500.css';
import '@fontsource/space-grotesk/600.css';
import '@fontsource/space-grotesk/700.css';
import '../styles/glassmorphism.css';
import { loadWaasConfigs } from '../utils/configLoader';
import { THEME_PRESETS } from '../utils/themePresets';
interface Props {
title: string;
description?: string;
}
const { title, description = "Professionelles Webdesign & moderne Websites für Kleinbetriebe, Handwerker und Selbstständige. N&D i-t SOLUTIONS erstellt Ihre Homepage bezahlbar und schnell." } = Astro.props;
const { siteConfig, themeConfig } = loadWaasConfigs();
const activePreset = THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark;
const colors = activePreset.colors;
const { title, description = "Professionelles Webdesign & moderne Websites." } = Astro.props;
---
<!doctype html>
@@ -26,19 +33,44 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title>
<!-- Inline script to set dark/light mode before page renders -->
<style is:global define:vars={{
themeBg: colors.bg,
themeCardBg: colors.cardBg,
themeText: colors.text,
themeAccent: colors.accent,
themeBorder: colors.border
}}>
:root {
--theme-bg: var(--themeBg);
--theme-card-bg: var(--themeCardBg);
--theme-text: var(--themeText);
--theme-accent: var(--themeAccent);
--theme-border: var(--themeBorder);
}
html.light {
--theme-bg: #F8FAFC;
--theme-card-bg: rgba(255, 255, 255, 0.7);
--theme-text: #0F172A;
--theme-border: rgba(0, 0, 0, 0.1);
}
</style>
<!-- Inline theme initialization to prevent FOUC -->
<script is:inline>
(function() {
const theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
if (theme === 'light') {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
}
})();
</script>
</head>
<body class="bg-slate-50 dark:bg-brand-darkBg text-slate-800 dark:text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
<body class="font-sans transition-colors duration-500 antialiased">
<slot />
</body>
</html>