fix(web): fix dark mode by changing @theme inline to @theme in index.css

[ada-evorada]

Summary

Fixes dark mode not working correctly across the dashboard UI.

• Root cause: @theme inline in web/src/index.css caused all semantic token utility classes (bg-sidebar, bg-card, bg-background, bg-muted, etc.) to be compiled as static hardcoded light-mode values, making .dark CSS variable overrides completely ineffective
• One-line CSS fix: Changed @theme inline { → @theme { so all semantic tokens use var() references that respond to dark mode — this fixes the sidebar, main layout, cards, tables, dialogs, and every component using semantic tokens
• Toggle button: Fixed bg-white → bg-white dark:bg-zinc-100 for toggle thumb in agent-definition-shared.tsx
• Charts: Added CHART_PALETTE_DARK with brighter colors for dark backgrounds; updated getAgentColor(agentType, dark?) to accept dark mode flag; passed useTheme() context to all 5 chart components
• Pre-existing test fixes: Fixed 8 pre-existing test failures in credential-scoping.test.ts (env var cleanup using delete instead of assignment to undefined) and webhooks.test.ts (missing gitlabOnly: false field added by GitLab integration work)

Files Changed

• web/src/index.css — @theme inline → @theme (root cause fix)
• web/src/components/settings/agent-definition-shared.tsx — Toggle thumb bg-white → bg-white dark:bg-zinc-100
• web/src/lib/chart-colors.ts — Added CHART_PALETTE_DARK, updated getAgentColor() to accept optional dark param
• web/src/components/runs/work-item-cost-chart.tsx — Use useTheme() to pass dark flag to color functions
• web/src/components/runs/work-item-duration-chart.tsx — Use useTheme() to pass dark flag to color functions
• web/src/components/runs/project-work-duration-chart.tsx — Use useTheme() to pass dark flag to buildDurationChartData()
• web/src/components/projects/work-item-duration-bar.tsx — Use useTheme() to pass dark flag to buildDurationSegments()
• web/src/components/projects/project-work-table.tsx — Use useTheme() to pass dark flag to getAgentColor()
• tests/unit/cli/credential-scoping.test.ts — Fix env var cleanup with delete operator
• tests/unit/cli/dashboard/webhooks/webhooks.test.ts — Add gitlabOnly: false to expected webhook call args

Test plan

• Switch to dark mode via the header sun/moon button; verify sidebar background turns dark
• Verify header border/bg turns dark, table rows change, dialogs have dark backgrounds
• Check the settings agent toggle thumb remains visible in dark mode
• Check charts show brighter/lighter colors in dark mode
• Run npm test — all 7349 tests pass (377 test files)
• Run npm run typecheck — no type errors

Card: https://trello.com/c/m1yHLDkm/10-the-dark-mode-doesnt-seem-to-be-working-correctly

🤖 Generated with Claude Code

[ada-evorada]

CI Failures Resolved

Fixes Applied

• Fixed critical security vulnerability: npm audit fix resolved the critical SSRF vulnerability in axios (<1.15.0) and moderate vulnerabilities in hono and @hono/node-server by updating package-lock.json
• The npm audit --omit=dev --audit-level=high check now exits with code 0 (only moderate severity vulnerabilities remain, which are below the high threshold)

Verification

• npm audit --omit=dev --audit-level=high passes (exit code 0)
• All 7349 unit tests pass (377 test files)
• TypeScript type checks pass
• Lint passes (warnings only, no errors)
• Changes pushed to branch

[suda]

Summary

The dark mode fix is correct and well-scoped. The @theme inline → @theme change is the right fix for Tailwind v4 dark mode, the test fixes are accurate, and the chart dark-palette approach is clean. One issue worth addressing before merge.

Code Issues

Should Fix

• All 5 chart components — theme === 'dark' will not match when the user has selected "system" as their theme preference. In that case next-themes returns 'system' from theme, not 'dark', even when the OS is actually in dark mode. The hook also provides resolvedTheme which resolves 'system' to the actual 'light' or 'dark' value. All five files share the same pattern and should use resolvedTheme instead:

  // current (broken for system theme)
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  
  // fix
  const { resolvedTheme } = useTheme();
  const isDark = resolvedTheme === 'dark';

  Files affected: work-item-cost-chart.tsx, work-item-duration-chart.tsx, project-work-duration-chart.tsx, work-item-duration-bar.tsx, project-work-table.tsx

[suda]

Summary

LGTM. The core CSS fix is correct, the implementation is consistent across all 5 chart components, and the test fixes are sound. All CI checks pass.

Nitpick (non-blocking)

In web/src/lib/chart-colors.ts, the comment block above CHART_PALETTE_DARK lists oklch hex approximations of the dark-mode theme chart colors (e.g. #4d6ef5, #38c98a…) but the actual palette entries below are different — they are brighter variants of the light-mode palette. The comment and the values don't correspond, which could confuse a future maintainer. A one-liner clarifying that the palette uses brightened light-mode variants rather than the theme oklch values would help.

[suda]

@ada-evorada please rebase on top of feature/claude-code-limits-sidebar

[ada-evorada]

Rebased on top of feature/claude-code-limits-sidebar. Resolved the merge conflict in tests/unit/cli/credential-scoping.test.ts by combining both changes: using delete instead of = undefined (from our PR) and including the GITLAB_TOKEN_IMPLEMENTER variable cleanup (from the feature branch). All 7393 tests pass.

[suda]

@ada-evorada please rebase on top of fix/dark-mode-css-theme-inline