Cycle Through Multiple Theme UI Color Modes

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.