🐛 Fix: dark mode switch button appears dark in light mode #1194
🐛 Fix: dark mode switch button appears dark in light mode #1194clubanderson merged 1 commit intomainfrom
Conversation
kubestellar-prow
bot
added
the
dco-signoff: no
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
✅ Deploy Preview for kubestellar-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request. Before your PR can be merged, please ensure: ✅ DCO Sign-off - All commits must be signed off with ✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), Getting Started with KubeStellar: Contributor Resources:
🌟 Help KubeStellar Grow - We Need Adopters! Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes: 📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction! A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack! |
kubestellar-prow
bot
added
the
size/M
The pre-mount placeholder for the ThemeToggle button used bg-gray-200 which appears as a dark gray in light mode. Changed to bg-white with a border to match the mounted button's light mode appearance and prevent visual flash on page load. Signed-off-by: btwshivam <shivam200446@gmail.com>
btwshivam
force-pushed
the
fix/dark-mode-toggle-button-light-mode
branch
from
5cac75a to
965b0fd
Compare
kubestellar-prow
bot
added
dco-signoff: yes
There was a problem hiding this comment.
Pull request overview
This PR addresses a visual mismatch on initial page load by updating the pre-mount placeholder styling for the docs theme toggle so it matches the light-mode appearance and avoids a dark-looking flash.
Changes:
- Updated
ThemeTogglepre-mount button styles frombg-gray-200tobg-whitewith border styling to match the mounted state. - Adjusted
SidebarFooterstyling for pre-mount and mounted renders (background/border now driven by inline styles rather than Tailwinddark:classes). - Minor formatting changes in
SidebarFooterJSX.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/docs/ThemeToggle.tsx |
Updates the SSR/pre-mount placeholder button styling to match the mounted light-mode toggle appearance. |
src/components/docs/SidebarFooter.tsx |
Refactors footer background/border styling (including SSR/pre-mount behavior), plus formatting changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
clubanderson
left a comment
clubanderson
left a comment
There was a problem hiding this comment.
1190 🐛 Fix: resolve hydration mismatch in RelatedProjects links oksaumya
clubanderson
left a comment
clubanderson
left a comment
There was a problem hiding this comment.
Review
Fixes the reported issue — the pre-mount placeholder no longer flashes dark in light mode. The inline-style approach for SidebarFooter background/border works correctly.
Notes:
- The pre-mount placeholder now assumes light mode (
bg-white). Users with dark mode preference will see a brief light flash before the theme resolves. This is an acceptable tradeoff. - Hardcoded hex colors (
#ffffff,#111827,#1f2937,#e5e7eb) match Tailwind palette but are less maintainable than Tailwind classes. - Unrelated reformatting of Moon/Sun className template literals adds noise to the diff.
Broader concern: This PR (and #1195) replace idiomatic Tailwind dark: classes with JS-driven inline styles to work around hydration timing. The root cause is that html.dark isn't reliably set before first paint. A blocking <script> in <head> to set the dark class before hydration would fix this at the source and let you keep using Tailwind dark: classes everywhere. Worth filing a follow-up issue for that.
/lgtm
|
LGTM label has been added. DetailsGit tree hash: d0ff6a28725502006acee28642a777724030c073 |
|
@copilot Please clean up this PR:
|
|
@clubanderson I've opened a new pull request, #1203, to work on those changes. Once the pull request is ready, I'll request review from you. |
kubestellar-prow
bot
deleted the
fix/dark-mode-toggle-button-light-mode
branch
|
🎉 Thank you for your contribution! Your PR has been successfully merged. 🌟 Help KubeStellar Grow - We Need Adopters! Our roadmap is driven entirely by adopter feedback - nothing else. Whether you're using KubeStellar yourself or know organizations that could benefit from multi-cluster Kubernetes, we need your help: 📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction! 🗣️ Spread the word - Tell colleagues, write blog posts, present at meetups 💬 Share feedback on Slack #kubestellar-dev Every adopter story helps us prioritize what matters most. Thank you for being part of the KubeStellar community! |
The pre-mount placeholder for the ThemeToggle button used bg-gray-200 which appears as a dark gray in light mode. Changed to bg-white with a border to match the mounted button's light mode appearance and prevent visual flash on page load.
📌 Fixes
Fixes #1192
📝 Summary of Changes
Changes Made
Checklist
Please ensure the following before submitting your PR:
Screenshots or Logs (if applicable)
👀 Reviewer Notes
Add any special notes for the reviewer here