fix(#164): eliminate white flash on History calendar in dark mode#165
Merged
Conversation
… History calendar white flash Carbon's compiled CSS from @carbon/styles emits dark skeleton token overrides only under the `.cds--g100` class selector. ThemeProvider sets data-theme="g100" on <html> but never adds the .cds--g100 class, so --cds-skeleton-background always resolved to the :root light default (#e8e8e8), producing a white flash on SkeletonPlaceholder / AccordionSkeleton in dark mode. Added --cds-skeleton-background: #393939 and --cds-skeleton-element: #525252 to the existing .cds--g100, [data-theme="g100"] block in carbon-tokens.css (Carbon's official g100 gray-80/gray-70 values). https://claude.ai/code/session_013NuK5HCyNX7zkeUMqGKwZp
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-090dfd003-165.westeurope.7.azurestaticapps.net |
The previous description said "defaults to g100 (dark)" which was wrong. The app actually respects the OS prefers-color-scheme on first visit (no saved preference) — dark OS → g100, light OS → g10. This is by design. https://claude.ai/code/session_013NuK5HCyNX7zkeUMqGKwZp
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
2 participants
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.
$(cat <<'EOF'
Summary
@carbon/stylesSCSS compilation emits dark skeleton token overrides only under the.cds--g100CSS class selectorThemeProvidersetsdata-theme="g100"on<html>but never adds the.cds--g100class--cds-skeleton-backgroundalways resolved to the:rootlight default (#e8e8e8), makingSkeletonPlaceholderandAccordionSkeletonrender bright/white in dark mode--cds-skeleton-background: #393939and--cds-skeleton-element: #525252to the existing.cds--g100, [data-theme="g100"]block incarbon-tokens.css(Carbon's official g100 gray-80/gray-70 values)Test plan
SkeletonPlaceholder) appears dark while loadingAccordionSkeleton) also appears dark when clicking a datenpm testpassesCloses #164
https://claude.ai/code/session_013NuK5HCyNX7zkeUMqGKwZp
EOF
)
Generated by Claude Code