robbond/confidence-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(confidence-engine): add dark mode

Browse Source
This commit is contained in:
robbond
2026-09-08 11:04:49 +01:00
parent 24d9e466f6
commit 1c17452bee
5 changed files with 184 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+67 -1
View File
@@ -2,6 +2,72 @@
@tailwind components;
@tailwind utilities;
:root {
--ce-page: #f9fafb;
--ce-surface: #ffffff;
--ce-surface-muted: #f9fafb;
--ce-surface-elevated: #ffffff;
--ce-text: #111827;
--ce-text-muted: #6b7280;
--ce-border: #d1d5db;
--ce-teal: #0f766e;
--ce-teal-surface: #f0fdfa;
--ce-focus: #14b8a6;
--ce-skeleton: #e5e7eb;
}
html[data-theme="dark"] {
--ce-page: #172128;
--ce-surface: #202c34;
--ce-surface-muted: #1b262e;
--ce-surface-elevated: #293740;
--ce-text: #edf2f3;
--ce-text-muted: #b4c0c5;
--ce-border: #40515a;
--ce-teal: #62d3c5;
--ce-teal-surface: #203a3c;
--ce-focus: #78ded2;
--ce-skeleton: #3a4a53;
}
html[data-theme="dark"] body { background-color: var(--ce-page) !important; color: var(--ce-text) !important; }
html[data-theme="dark"] .app-chrome { background-color: var(--ce-surface-muted); border-color: var(--ce-border); }
html[data-theme="dark"] .theme-toggle { background-color: var(--ce-surface-elevated); border-color: var(--ce-border); color: var(--ce-text); }
html[data-theme="dark"] .theme-toggle:hover { background-color: #33444d; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-white"] { background-color: var(--ce-surface) !important; }
html[data-theme="dark"] [class*="bg-gray-50"],
html[data-theme="dark"] [class*="bg-gray-100"] { background-color: var(--ce-surface-muted) !important; }
html[data-theme="dark"] [class*="bg-gradient-to"] { background-image: none !important; background-color: var(--ce-surface) !important; }
html[data-theme="dark"] [class*="bg-teal-50"] { background-color: var(--ce-teal-surface) !important; }
html[data-theme="dark"] [class*="bg-amber-50"],
html[data-theme="dark"] [class*="bg-orange-50"],
html[data-theme="dark"] [class*="bg-yellow-50"] { background-color: #3a3324 !important; }
html[data-theme="dark"] [class*="bg-green-50"] { background-color: #20392f !important; }
html[data-theme="dark"] [class*="bg-blue-50"] { background-color: #243540 !important; }
html[data-theme="dark"] [class*="border-gray"],
html[data-theme="dark"] [class*="border-teal"],
html[data-theme="dark"] [class*="border-amber"],
html[data-theme="dark"] [class*="border-orange"],
html[data-theme="dark"] [class*="border-green"],
html[data-theme="dark"] [class*="border-blue"] { border-color: var(--ce-border) !important; }
html[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) { color: var(--ce-text) !important; }
html[data-theme="dark"] :is(.text-gray-500, .text-gray-400) { color: var(--ce-text-muted) !important; }
html[data-theme="dark"] :is(.text-teal-700, .text-teal-800) { color: var(--ce-teal) !important; }
html[data-theme="dark"] :is(.text-amber-700, .text-amber-800, .text-orange-700, .text-orange-800, .text-yellow-700, .text-yellow-800) { color: #f2c879 !important; }
html[data-theme="dark"] :is(.text-green-700, .text-green-800) { color: #8bd8a8 !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--ce-surface-elevated); color: var(--ce-text); border-color: var(--ce-border); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #94a3ab; }
html[data-theme="dark"] details { background-color: var(--ce-surface-muted) !important; }
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible { outline: 2px solid var(--ce-focus); outline-offset: 2px; }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
@@ -41,7 +107,7 @@
.cu-skeleton-line {
height: 16px;
border-radius: 8px;
background-color: #e5e7eb;
background-color: var(--ce-skeleton);
position: relative;
overflow: hidden;
}
app/layout.jsx
+12
View File
@@ -1,4 +1,5 @@
import "./globals.css";
import ThemeToggle from "@/components/theme-toggle";
export const metadata = {
title: "Confidence Engine",
@@ -9,6 +10,17 @@ export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="min-h-screen bg-gray-50 text-gray-900">
<script
dangerouslySetInnerHTML={{
__html: `try { const saved = localStorage.getItem('confidence-engine-theme'); const theme = saved === 'dark' || saved === 'light' ? saved : (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.dataset.theme = theme; document.documentElement.style.colorScheme = theme; } catch (_) {}`,
}}
/>
<header className="app-chrome border-b border-gray-200/80">
<div className="mx-auto flex max-w-[1600px] items-center justify-between px-6 py-3">
<span className="text-sm font-semibold tracking-wide text-teal-700">Confidence Engine</span>
<ThemeToggle />
</div>
</header>
{children}
</body>
</html>