Color modes for variants

[jordie23]

Hey there,

Still getting started with theme-ui, so apologies if this comes off as noobish.

Is there a way to use "color modes" in variants? Currently I'm building a dark and light mode themed site, but you can't just invert colours between the themes, there are differences. Take a 'card' for example, in a light mode you use box shadows to display elevation while in dark mode you use background colours.

Question is, is there a way to do this with variants?

cards: {
  primary: {
    fontFamily: 'heading',
    color: 'onBackground',
    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 6px 12px',
    modes: {
      dark: {
        backgroundColor: 'surface1',
        color: 'onSurface',
        boxShadow: 'none',
      },
    },
  },
},

At the moment I'm just using ternaries on the components themselves, switching between variants:

cards: {
  primary: {
    fontFamily: 'heading',
    color: 'onBackground',
    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 6px 12px',
  },
  primaryDark: {
    fontFamily: 'heading',
    backgroundColor: 'surface1',
    color: 'onSurface',
    boxShadow: 'none',
  },
},

This becomes annoying when there's a lot of shared values.

Am I doing something wrong in how I'm thinking about this? Should I be using a different approach to do this sort of thing?

Also is there anything on the horizon that'd implement color modes for variants or another type of solution?

[jordie23]

If anyone has another way they are doing this, I'd love to know.

[lachlanjc]

I'd love this to be easier, but one trick I use is colors that describe the layers, which change depending on the mode, like this: https://github.com/hackclub/theme/blob/main/packages/theme/src/index.ts#L38