Question 53112 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    It is possible to specify button colors for dark mode in the theme using the Theme UI library. In fact, the code snippet you have provided is a valid way to define a button color in the theme for both light and dark modes.

    The variants property allows you to define variants for a specific theme object. In this case, you are defining a primary button with a white color and black background for light mode. Then, you are defining a dark variant for the primary button that has a black color and white background for dark mode.

    To use this theme object in your UI components, you can use the sx prop provided by Theme UI. For example, to create a button using this theme object, you can do the following:

    import { Button } from 'theme-ui';

const MyButton = () => (
  <Button
    sx={{
      variant: 'primary',
    }}
  >
    Click me!
  </Button>
);
    Login or Signup to reply.
  3. 0

    You need to fully qualify the path to the variant:

    variant: "buttons.primary.variants.dark"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search