search

system-ui / theme-ui

Build consistent, themeable React apps based on constraint-based design principles
https://theme-ui.com
MIT License
5.3k stars 673 forks source link

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

Closed alex-page closed 3 years ago

alex-page commented 5 years ago

As mentioned in https://github.com/system-ui/theme-ui/pull/235#discussion_r308298513 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">
jxnblk commented 5 years ago

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

lachlanjc commented 3 years ago

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 commented 3 years ago

Totally agreed!