Skip to content

[6.x] Fix inconsistent dark mode text colours#14830

Merged
jaygeorge merged 1 commit into
6.xfrom
storybook-dark-color-fixes
Jun 16, 2026
Merged

[6.x] Fix inconsistent dark mode text colours#14830
jaygeorge merged 1 commit into
6.xfrom
storybook-dark-color-fixes

Conversation

@jaygeorge

Copy link
Copy Markdown
Contributor

Description of the Problem

There are some inconsistent dark mode colors for alerts. This is evident when you explore rich content, as reported in #14829

https://ui.statamic.dev/?path=/docs/components-alert--docs&globals=theme:dark
image

What this PR Does

  • Fixes inconsistent dark mode text colours in the Alert component when using native HTML elements (h1–h6, p, code) versus the Heading and Description components.
    • Native elements inherited the alert's variant text colour, while Heading, Description, and code had their own defaults or per-variant overrides — often a shade lighter (e.g. success body emerald-300 vs code emerald-200, warning headings amber-300 vs native headings amber-200).
  • All rich content now inherits the alert's variant text colour via text-inherit!. Per-variant overrides for heading, description, and code text colours are removed; variant rules only set backgrounds for code elements.
  • Closes Alert component has slightly different text colors in dark mode #14829

How to Reproduce

  1. Go to https://ui.statamic.dev/?path=/docs/components-alert--docs&globals=theme:dark

@jaygeorge jaygeorge merged commit b800166 into 6.x Jun 16, 2026
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Alert component has slightly different text colors in dark mode

1 participant