feat(nuxt-ui): color mode aware token resolution via data-theme#598
Merged
Conversation
Adds opt-in theme-aware resolution for Tailwind v4 + Nuxt UI semantic tokens (bg-inverted, text-default, etc) in OG components. Static data-theme="light|dark" on the root element resolves tokens for that theme; a dynamic :data-theme="colorMode" binding emits paired bg-[#..] dark:bg-[#..] arbitrary classes so the runtime swaps based on the colorMode prop. Templates without data-theme keep the existing dark-mode default, so the change is non-breaking.
commit: |
harlan-zw
changed the title
data-theme
harlan-zw
changed the title
data-themedata-theme
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
1 participant
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.
🔗 Linked issue
N/A
❓ Type of change
📚 Description
OG components using Tailwind v4 + Nuxt UI semantic tokens (
bg-inverted,text-default,border-accented, ...) previously always resolved to dark-mode values, with no way to opt into light mode or per-image theme switching.This PR adds opt-in theme-aware resolution driven by
data-themeon the component root:data-theme="light"/data-theme="dark"resolves tokens for that theme at build time.:data-theme="colorMode"binding triggers a dual-pass build that emits paired arbitrary classes (e.g.bg-[#fff] dark:bg-[#0a0a0a]); the existingstyleDirectivesruntime then swaps based on thecolorModeprop you pass todefineOgImage.data-themekeep the existing dark-mode default, so this is fully non-breaking.Includes docs in the styling guide + color-mode integration page, plus e2e snapshot tests covering static light, static dark, and dynamic-binding paired output.