evan/agent-evals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix light/dark/system theme switcher

Browse Source 
- Add darkMode: class to tailwind config for class-based dark mode
- Load saved theme from localStorage on mount and apply immediately
- Add media query listener for system theme changes in system mode
This commit is contained in:
Evan Reichard
2026-02-06 17:08:42 -05:00
parent c7a82c4de8
commit 114fa556eb
7 changed files with 62 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
frontend/node_modules frontend/node_modules
eval eval
data

1
frontend/dist/assets/index-CEN2dKUd.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

54
frontend/dist/assets/index-PGya2Dnr.js → frontend/dist/assets/index-DBLy_rVI.js vendored
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/assets/index-IEmHo4ub.css vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@@ -4,8 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eval Markdown Editor</title> <title>Eval Markdown Editor</title>
<script type="module" crossorigin src="/assets/index-PGya2Dnr.js"></script> <script type="module" crossorigin src="/assets/index-DBLy_rVI.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-IEmHo4ub.css"> <link rel="stylesheet" crossorigin href="/assets/index-CEN2dKUd.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

30
frontend/src/App.tsx
View File

@@ -24,11 +24,41 @@ function App() {
const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('system') const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('system')
const [content, setContent] = useState('') const [content, setContent] = useState('')
// Load theme from localStorage on mount and apply it
useEffect(() => {
const savedTheme = localStorage.getItem('theme')
if (savedTheme && ['light', 'dark', 'system'].includes(savedTheme)) {
setTheme(savedTheme as 'light' | 'dark' | 'system')
// Apply immediately so we don't show the default state first
applyTheme(savedTheme as 'light' | 'dark' | 'system')
}
}, [])
// Load files on mount
useEffect(() => { useEffect(() => {
loadFiles() loadFiles()
}, [])
// Apply theme when it changes
useEffect(() => {
applyTheme(theme) applyTheme(theme)
}, [theme]) }, [theme])
// Listen for system theme changes when in system mode
useEffect(() => {
if (theme !== 'system') return
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const handleSystemThemeChange = () => {
applyTheme('system')
}
mediaQuery.addEventListener('change', handleSystemThemeChange)
return () => {
mediaQuery.removeEventListener('change', handleSystemThemeChange)
}
}, [theme])
useEffect(() => { useEffect(() => {
if (currentFile) { if (currentFile) {
setContent(currentFile.content) setContent(currentFile.content)

1
frontend/tailwind.config.js
View File

@@ -3,6 +3,7 @@ export default {
"./index.html", "./index.html",
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
], ],
darkMode: 'class',
theme: { theme: {
extend: {}, extend: {},
}, },