Skip to content

Commit 79f60cf

Browse files
ryan-williamsclaude
andcommitted
Default to dark mode, add FOUC-prevention script
Change default theme from `system` to `dark`. Add inline `<script>` in `index.html` that reads `localStorage` and sets `data-theme` before React hydrates, preventing flash of wrong theme on load. Also update theme cycle order to dark → light → system. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 98e8f15 commit 79f60cf

File tree

3 files changed

+11
-2
lines changed

3 files changed

+11
-2
lines changed

www/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
8+
<script>
9+
(function() {
10+
var mode = localStorage.getItem('awair-theme') || 'dark'
11+
var theme = mode
12+
if (mode === 'system')
13+
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
14+
document.documentElement.setAttribute('data-theme', theme)
15+
})()
16+
</script>
817
<title>Awair Dashboard</title>
918

1019
<!-- OpenGraph tags -->

www/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ function AppContent() {
216216
key: 'theme',
217217
label: `Theme: ${theme === 'light' ? 'Light' : theme === 'dark' ? 'Dark' : 'System'}`,
218218
icon: theme === 'light' ? <MdLightMode /> : theme === 'dark' ? <MdDarkMode /> : <MdBrightnessAuto />,
219-
onClick: () => setTheme(theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'),
219+
onClick: () => setTheme(theme === 'dark' ? 'light' : theme === 'light' ? 'system' : 'dark'),
220220
},
221221
]} />
222222
<ShortcutsModal

www/src/contexts/ThemeContext.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
1313
export function ThemeProvider({ children }: { children: ReactNode }) {
1414
const [theme, setTheme] = useState<Theme>(() => {
1515
const stored = localStorage.getItem('awair-theme')
16-
return (stored as Theme) || 'system'
16+
return (stored as Theme) || 'dark'
1717
})
1818

1919
const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => {

0 commit comments

Comments
 (0)