Add light theme support#20
Merged
Merged
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds light theme support across the app by introducing shared semantic-ish CSS variables, applying an early theme resolution in the document head (cookie > OS preference), and wiring a header toggle that persists the user’s choice.
Changes:
- Introduces theme CSS custom properties (dark defaults + light overrides) and maps existing monochrome utility classes for light mode.
- Adds an inline head script to resolve/apply theme before paint and updates
theme-color/color-scheme. - Updates UI components (visualizers, charts, Monaco editor) to consume the new theme tokens, plus adds a header theme toggle and editor theme switching.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | Adds theme CSS variables and light-mode overrides for legacy monochrome utility classes and icon swapping. |
| src/lib/highlight-colors.ts | Switches some highlight styles and defaults to CSS variables to support light mode. |
| src/layouts/Layout.astro | Sets initial theme attribute and adds inline head script to resolve/apply theme early and update theme-color. |
| src/components/MatrixVisualizer.tsx | Uses theme variables for cell/background/border/text styling. |
| src/components/Header.tsx | Adds theme toggle button and persists choice via cookie + emits a themechange event. |
| src/components/GraphVisualizer.tsx | Replaces hardcoded graph colors with theme variables. |
| src/components/ConceptVisualizer.tsx | Updates chart/viz colors to use theme variables and reformats some JSX. |
| src/components/ComplexityChart.tsx | Uses theme variable for label color and applies minor formatting changes. |
| src/components/CodePanel.tsx | Adds Monaco light theme + listens for theme changes to update Monaco theme. |
| src/components/ArrayVisualizer.tsx | Updates default index-row color to a theme variable. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
74
to
+80
| const highlight = highlights[index] | ||
| const isSorted = sorted.includes(index) | ||
| const color = highlight | ||
| ? highlightColors[highlight] | ||
| : isSorted | ||
| ? highlightColors.sorted | ||
| : '#333' | ||
| : 'var(--viz-faint)' |
Comment on lines
+52
to
+69
| <script is:inline> | ||
| const savedTheme = document.cookie | ||
| .split('; ') | ||
| .find((cookie) => cookie.startsWith('theme=')) | ||
| ?.split('=')[1] | ||
| const theme = | ||
| savedTheme === 'light' || savedTheme === 'dark' | ||
| ? savedTheme | ||
| : window.matchMedia('(prefers-color-scheme: light)').matches | ||
| ? 'light' | ||
| : 'dark' | ||
| document.documentElement.dataset.theme = theme | ||
| document.documentElement.style.colorScheme = theme | ||
| document.querySelector('meta[name="theme-color"]')?.setAttribute( | ||
| 'content', | ||
| theme === 'light' ? '#ffffff' : '#000000', | ||
| ) | ||
| </script> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The app currently only supports a dark palette, which can be uncomfortable in bright environments and ignores users who prefer a light system theme.
This adds a header theme toggle that defaults to the operating system preference. Manual choices are persisted in a one-year cookie, and a small inline head script applies the resolved theme before rendering to prevent an initial color flash.
The light palette covers the application chrome, controls, Monaco editor, charts, graphs, matrices, and algorithm visualizations while preserving the existing dark appearance.
Fixes: #17