🐛 Fix: dark mode switch button appears dark in light mode#1203
🐛 Fix: dark mode switch button appears dark in light mode#1203Copilot wants to merge 1 commit intofix/dark-mode-toggle-button-light-modefrom
Conversation
kubestellar-prow
bot
added
dco-signoff: no
|
Thanks for your pull request. Before we can look at it, you'll need to add a 'DCO signoff' to your commits. 📝 Please follow instructions in the contributing guide to update your commits with the DCO Full details of the Developer Certificate of Origin can be found at developercertificate.org. The list of commits missing DCO signoff:
DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
|
[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. |
|
Hi @Copilot. Thanks for your PR. I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with Once the patch is verified, the new status will be reflected by the I understand the commands that are listed here. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
kubestellar-prow
bot
added
needs-ok-to-test
kubestellar-prow
bot
deleted the branch
fix/dark-mode-toggle-button-light-mode
Pre-mount placeholder for
ThemeToggleusedbg-gray-200which renders as dark gray in light mode, causing a visible flash before hydration.SidebarFootersimilarly lacked theme-aware inline styles for the pre-mount state.📝 Summary of Changes
ThemeTogglepre-mount placeholder:bg-gray-200→bg-white border border-gray-200to match mounted light-mode appearanceSidebarFooterfull variant: replacedbg-white dark:bg-blackTailwind dark classes with JS-driven inline styles (backgroundColor,borderTopColor) to avoid hydration mismatch before theme resolvesChanges Made
ThemeTogglepre-mount placeholder styling to prevent dark flash in light modeSidebarFooterbackground/border to use inline styles for theme-correct SSR renderingclassNametemplate literal reformatting noiseChecklist
Please ensure the following before submitting your PR:
Screenshots or Logs (if applicable)
👀 Reviewer Notes
The inline-style approach for
SidebarFooteris a deliberate tradeoff: it prevents the pre-mount dark flash but means users with a dark-mode preference will see a brief light flash before hydration. Root cause is thathtml.darkisn't reliably set before first paint — a blocking<script>in<head>to apply the dark class before hydration would fix this at the source and allow Tailwinddark:classes everywhere. Worth a follow-up.🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.