![]() ![]() For dark mode, we'll set it to gray.800, and also provide the props. ![]() We can now notice that the text color is inverted and it doesn't play well on dark mode. We'll do _active, and change the background color to mode, where the first argument will be brand.700, yet another darker shade, and for the dark mode as well, brand.400. For the dark mode, we'll say brand.300, again, one shade darker. For light mode, it will be brand.600, just one shade darker. Let's overwrite the hover state and set the background color to mode. In the previous lesson, we talked about pseudo props and how we can use them to configure the style based on the component state. This looks cool, but nothing happens when we hover the button and press on it. If we try changing the theme, we can see that the background is the lighter or 200 shade of our brand color scale. We can see that the background turned green. Then we'll provide the props to the mold method. The second argument is the dark mode, so that would be brand.200. We can now set the background color to mode, where the first argument is the light mode and that would be brand.500. Let's convert the object into an arrow function and return the same object. We will need to provide the props to the mode method. Before we continue, we need to refactor our primary variant into an arrow function that accepts props as an argument. Let's import the mode method from Chakra UI/theme tools. We want to do the same for the button as well. If we check the checkbox on dark mode, we can see that it's color is a bit lighter than our brand 500, the 200 shade to be exact. We're talking about the dark mode and light mode. Chakra UI provides us with a mode method that we can use to define a color based on the currently active color mode. Next on our list is the brand background. We'll spread the brand ring in the primary variant. We'll place it in object and then get it back to the checkbox component. We're going to extract the focus part into its own variable at the top. Let's reuse the ring configuration from our checkbox because it applies to the button as well. We can see that the button changed and that the border-radius is sharp. To see our variant change, let's go to the details component, and instead of providing the color scheme, we'll remove that and provide our new variant, primary. Let's start by setting the border-radius to none, so rounded="none." Then we're going to enter the variants section, and we'll name our variant primary. We're going to enter the components section and make a new entry for our button component. We're going to create a primary variant for our button component that will set the background to the brand color, disable the border-radius and also use the branded color as the outline. Lazar Nikolov: In this lesson, we will learn how to create custom variants in Chakra UI. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |