Fixed theme flicker#118
Conversation
There was a problem hiding this comment.
Pull request overview
This PR addresses UI theme flicker by making the default theme selection CSS-driven (via prefers-color-scheme) and by persisting an explicit user theme override in a cookie so it can be applied during SSR.
Changes:
- Switch default theme variables to CSS
prefers-color-schemeto avoid initial JS-driven theme swapping. - Persist theme override via
theme-overridecookie and renderdata-theme-overrideon the server. - Move TopNav background color to a theme CSS variable (
--nav-bg) and update the theme toggle icon behavior accordingly.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| telescopetest-io/src/layouts/Layout.astro | Applies data-theme-override from cookie at render-time; defines light/dark theme variables and prefers-color-scheme defaults (including --nav-bg). |
| telescopetest-io/src/components/TopNav.astro | Updates nav background to var(--nav-bg); changes theme toggle UI and replaces localStorage persistence with cookie-based persistence. |
| telescopetest-io/astro.config.mjs | Forces server output to enable SSR cookie reading for theme override. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 4 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Removed theme flicker by switching default theme selection to use CSS.
Also moved theme-override attribute to be cookie-based so we can apply it on the server to avoid flicker when theme is overriden.
Moved nav bg style setting to a theme variable as well.
Closes #115
This PR were created with 🔵 AI-assistance from Gemini.