Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS custom properties set color modes via a class selector #257

Closed
alex-page opened this issue Jul 31, 2019 · 3 comments
Closed

CSS custom properties set color modes via a class selector #257

alex-page opened this issue Jul 31, 2019 · 3 comments

Comments

@alex-page
Copy link
Contributor

alex-page commented Jul 31, 2019 •
edited

As mentioned in #235 (comment) it would be nice to have a way to set color modes via a css class.

colors: {
    default: {
        text: '#000',
        background: '#fff',
        primary: '#07c',
        secondary: '#05a',
        accent: '#609',
        muted: '#f6f6f6',
    },
    dark: { ... },
    extraDark: { ... },
    pink: { ... }
},
<body>
<body class="dark">
<body class="pink">
<body class="extra-dark">
@alex-page alex-page mentioned this issue Jul 31, 2019
Merged
@jxnblk
Copy link
Member

jxnblk commented Jul 31, 2019

It's worth noting that the core package and Gatsby plugin use a prefixed class selector during hydration, e.g. .theme-ui-dark

@lachlanjc
Copy link
Member

To me, this counteracts the philosophy of React—React never reads from the DOM to change its state, you change the state on React’s end, it renders to the VDOM then the DOM is updated. While I think adding functionality to automatically use color modes like #1144 & respecting prefers-color-scheme in realtime totally make sense, & #979/#982 make Theme UI colors more available in vanilla CSS, I don’t think this is a feature we should support.

@hasparus

@hasparus
Copy link
Member

Totally agreed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jxnblk @lachlanjc @hasparus @alex-page