Z User
b53b996dd7
- Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS. fix(theme): adapt custom styles to dark mode via design tokens - Add useEffect in App.tsx to set data-theme attribute on documentElement (also toggles html.dark class) so CSS rules can use [data-theme='dark'] selectors and Ant Design's darkAlgorithm can fully cascade. - Replace hardcoded rgba(0,0,0,*) colors in Dashboard.tsx with Ant Design tokens via theme.useToken(): - ProcessUsageWall: colorTextSecondary (was rgba 0.45), colorTextDisabled (was rgba 0.35), colorBorderSecondary (was rgba 0.06), colorFillQuaternary (was rgba 0.02 header bg), HIGH/MED/LOW usage colors now use colorError / colorWarning / colorSuccess tokens. - Statistic valueStyles and Progress trailColor also token-based. - Login.tsx: replace isDark ternary '#141414' / '#f5f5f5' with token.colorBgLayout (single source of truth, auto-adapts). - Logs.tsx: replace '#888' timestamp color with token.colorTextTertiary. - Sidebar.tsx: replace hardcoded rgba(5,5,5,0.06) logout divider border with var(--ant-color-border-secondary, ...) CSS variable fallback chain. - responsive.css: add dark variants for .app-bottom-nav box-shadow and .app-header-bar border so sticky surfaces stay readable in dark mode. - Delete dead hooks/useTheme.ts (never imported; the data-theme attribute is now set centrally by App.tsx). Tested: build PASS, lint 0 errors (42 pre-existing warnings unchanged), unit tests 16/16 PASS.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, we recommend enabling type-aware lint rules by installing oxlint-tsgolint and editing .oxlintrc.json:
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["react", "typescript", "oxc"],
"options": {
"typeAware": true
},
"rules": {
"react/rules-of-hooks": "error",
"react/only-export-components": ["warn", { "allowConstantExport": true }]
}
}
See the Oxlint rules documentation for the full list of rules and categories.