aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): light/dark theme toggle and light mode color support

Browse Source 
Add ThemeContext with localStorage persistence and FOUC-preventing
inline script. Add theme toggle button in sidebar. Update status
badges, toast notifications, live indicators, and approval cards
with dark: prefixed classes for proper light mode rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-26 16:33:29 -06:00
parent e2c5b6698c
commit 5cd12dec89
13 changed files with 245 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
ui/index.html
View File

@@ -14,6 +14,27 @@
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<script>
(() => {
const key = "paperclip.theme";
const darkThemeColor = "#18181b";
const lightThemeColor = "#ffffff";
try {
const stored = window.localStorage.getItem(key);
const theme = stored === "light" || stored === "dark" ? stored : "dark";
const isDark = theme === "dark";
document.documentElement.classList.toggle("dark", isDark);
document.documentElement.style.colorScheme = isDark ? "dark" : "light";
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
if (themeColorMeta) {
themeColorMeta.setAttribute("content", isDark ? darkThemeColor : lightThemeColor);
}
} catch {
document.documentElement.classList.add("dark");
document.documentElement.style.colorScheme = "dark";
}
})();
</script>
</head>
<body>
<div id="root"></div>