Theme UI
Cycle Through Multiple Theme UI Color Modes
If you want to offer more than two color modes in your Theme UI-based site you can create a button that can activate all color modes. In this lesson we'll add two new color modes, for a total of four, and then use the useThemeUI hook to create an array of color modes to cycle through.
Instructor: [00:00] add more color modes. The first thing we'll need to do is open up the theme file, then we can add in a couple new color modes. Let's add in tomato and purple.
[00:12] It's time to open up the layout component. In addition to the useColorMode hook, theme-ui also offers the useThemeUI hook. We can invoke that and get the theme. Now, instead of alternating between light and dark, we'll need to be able to cycle through all the existing modes.
[00:29] First, we'll need to grab the initial color mode name from theme, then we can pull out the other names of the color palates from the color modes key.
[00:38] We'll create a new array with initial color mode name at the start. Let's go ahead and log that to make sure the output's correct.
[00:47] Now we need to determine what the index of the next color mode will be. We can start by grabbing the index of the current color mode. We can then add 1 to the current index.
[00:59] However, we'll need to also use the modular operator, so we don't walk out the back of our array. Now we can access all modes to get the new color mode.
[01:10] Lastly, we can clean up our old logic. Now, we have a color mode toggle that cycles through all possible color modes.