Search code examples
javascripttheme-ui

How to define button colors for dark mode in theme-ui theme config

I'm using theme-ui library to make my ui lib, however, I have a question. Is it possible to specify button colors for dark mode in theme? for example, do something like this?

...
primary: {
    color: 'white',
    bg: 'black',
    variants: {
      dark: {
        bg: 'white',
        color: 'black',
      },
    },
  },
...

if I do like this and use button in jsx then it is not affects (

<Button variant="primary">click me</Button>

I made a code sandbox to demonstrate this problem. What am I doing wrong?

Solution

  • So I found answer on my question after raised this issue. So my config was ok, the thing is Theme UI doesn't switch styles per color mode, just colors. So when I use on button styles colors like 'main', 'secondary' it will changed with theme switch. otherwise no.