feat: add dark mode with system preference detection #854
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 11 commits
December 11, 2025 10:37
- Add Playwright for screenshot-based visual testing - Create e2e tests covering Plan, Grid, Raw, Stats tabs - Add test:e2e and test:e2e:update npm scripts - Add commit-msg hook to enforce commit message policy - Exclude e2e/ from vitest
Prepare codebase for dark mode by centralizing color definitions: - Remove duplicate $bg-color definition - Replace #fff/white with $white - Replace black with $gray-darkest
- Add $cte-color and $cte-border-color variables - Replace inline colors in Plan.vue with CSS classes - Make AnimatedEdge strokeColor prop optional - Convert Grid.vue style to SCSS with variable
Prepare for dark mode by using native CSS variables: - Add _css-variables.scss with --color-xxx definitions - Replace SCSS $variables with var(--color-xxx) in stylesheets - CSS custom properties can be changed at runtime for theming
- Add dark color palette to CSS custom properties - Create useTheme composable with localStorage persistence - Add system preference detection (prefers-color-scheme) - Add toggle button in navbar (sun/moon icons) - Sync with Bootstrap 5 dark mode (data-bs-theme) - Add Bootstrap overrides for dark mode styling - Style Tippy.js tooltips for dark mode - Add visual regression tests for dark mode
Lighten hljs-comment from #8a8a9a to #9a9aaa to meet the 4.5:1 contrast ratio requirement for normal text (now ~5.0:1).
Replace (window as any) with properly typed Window interface to satisfy TypeScript no-explicit-any rule.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Features
prefers-color-schemeon first visitTechnical details
_css-variables.scsswith light/dark palettesuseThemecomposable handles theme state and DOM updatesdata-bs-themeattributedark-mode.css(loaded after Bootstrap)Test plan