Besides just wrapping native browser features for reactivity, UUse also provides some composables with extra conventions to make adding common site features easier. For instance, the use dark composable makes it easier to add dark modes to your site. All right, click on the start link below next to use dark and let's see how it works. composable will return a computed prompt.
that lets us know whether dark mode is enabled or not. Let's print that to the page to see the result. Okay, mine says true because that's my preference set for the operating system. If I open up my system preferences and change my preference to light, you can see that the printout changes to false.
Awesome. I'll just change that back now. So, by default, use dark will use the user system preference. However, let's say you also want to let the user choose a specific mode for your site, independent of their system preference.
Well, you can do that, too. First, you need to provide a UI element to toggle the setting. Let's use a button. Then, we can import the utility composable useToggle from view use.
This composable takes a boolean value, and then returns a function to toggle that boolean. Lastly, we'll just need to call toggleDark whenever we click the button. Sweet. Let's open up our app preview in its own tab.
And then when I click the button, isDark toggles back and forth between true and false. Awesome. Now if I end with dark mode set to false and then refresh the page, the state of isDark persists to false. That's because useDark actually stores your site-specific preferences in local storage.
Next, if I toggle my dark mode back to the same value as my system preference, you'll see in local storage that the value becomes auto. So view use can actually handle our system preference as well as a site specific preference for a dark mode with very little effort on our part. You might be thinking at this point though that the style of the app hasn't actually changed. I'm just getting a wide screen no matter which mode I choose.
Well, that's because view use leaves that part up to you. However, it does simplify the process by automatically adding a dark class to the HTML element whenever the dark mode is enabled. That means that all we need to do is to add some styles for the dark class. I'll give it a background of black and text color of white.
Oh, and also just a quick bonus design tip for you here. It's typically better to use a dark gray for your dark modes instead of straight black. So let's change that. Perfect.
Alright. Related to the use dark composable is the use color mode composable. Instead of returning a boolean though, it returns a string to identify the user's preferred color mode. Also, just like use dark, use color mode takes into account both system preferences and the preferences stored.
in local storage. In order to change the mode this time we're going to need to set the color mode to the desired string values instead of toggling a boolean. While this is just a bit more verbose it also opens up a number of other possibilities besides just light and dark. For instance we could also add a dim mode or maybe a cafe mode.
However if you do want to set some custom modes like this you need to remember to register them first with the Use Color Mode Modes option. Lastly, I'll just print out our color mode to the template so that we can see this in action. Sure enough, clicking between the different modes now changes the output printed out on the left. Cool.
Let's add some styles to make our new modes actually change out the app's color theme. Cool. If you'd prefer the theme to be applied via a custom attribute, on the HTML element instead of a class then you can do that as well with the attribute option. Then of course you need to update your selectors in the style section in order to take this into account.
Now if we go back over to the app and inspect the HTML element when we toggle through the different modes you can see that theme attribute update. This can be handy for working with different CSS frameworks that have different ways of describing their themes. Also, just as a note, you can also provide the same option to the use dark composable. Besides just wrapping native browser features for reactivity, UUse also provides some composables with extra conventions to make adding common site features easier.
For instance, the use dark composable makes it easier to add dark modes to your site. All right, click on the start link below next to use dark and let's see how it works. composable will return a computed prompt. that lets us know whether dark mode is enabled or not.
Let's print that to the page to see the result. Okay, mine says true because that's my preference set for the operating system. If I open up my system preferences and change my preference to light, you can see that the printout changes to false. Awesome.
I'll just change that back now. So, by default, use dark will use the user system preference. However, let's say you also want to let the user choose a specific mode for your site, independent of their system preference. Well, you can do that, too.
First, you need to provide a UI element to toggle the setting. Let's use a button. Then, we can import the utility composable useToggle from view use. This composable takes a boolean value, and then returns a function to toggle that boolean.
Lastly, we'll just need to call toggleDark whenever we click the button. Sweet. Let's open up our app preview in its own tab. And then when I click the button, isDark toggles back and forth between true and false.
Awesome. Now if I end with dark mode set to false and then refresh the page, the state of isDark persists to false. That's because useDark actually stores your site-specific preferences in local storage. Next, if I toggle my dark mode back to the same value as my system preference, you'll see in local storage that the value becomes auto.
So view use can actually handle our system preference as well as a site specific preference for a dark mode with very little effort on our part. You might be thinking at this point though that the style of the app hasn't actually changed. I'm just getting a wide screen no matter which mode I choose. Well, that's because view use leaves that part up to you.
However, it does simplify the process by automatically adding a dark class to the HTML element whenever the dark mode is enabled. That means that all we need to do is to add some styles for the dark class. I'll give it a background of black and text color of white. Oh, and also just a quick bonus design tip for you here.
It's typically better to use a dark gray for your dark modes instead of straight black. So let's change that. Perfect. Alright.
Related to the use dark composable is the use color mode composable. Instead of returning a boolean though, it returns a string to identify the user's preferred color mode. Also, just like use dark, use color mode takes into account both system preferences and the preferences stored. in local storage.
In order to change the mode this time we're going to need to set the color mode to the desired string values instead of toggling a boolean. While this is just a bit more verbose it also opens up a number of other possibilities besides just light and dark. For instance we could also add a dim mode or maybe a cafe mode. However if you do want to set some custom modes like this you need to remember to register them first with the Use Color Mode Modes option.
Lastly, I'll just print out our color mode to the template so that we can see this in action. Sure enough, clicking between the different modes now changes the output printed out on the left. Cool. Let's add some styles to make our new modes actually change out the app's color theme.
Cool. If you'd prefer the theme to be applied via a custom attribute, on the HTML element instead of a class then you can do that as well with the attribute option. Then of course you need to update your selectors in the style section in order to take this into account. Now if we go back over to the app and inspect the HTML element when we toggle through the different modes you can see that theme attribute update.
This can be handy for working with different CSS frameworks that have different ways of describing their themes. Also, just as a note, you can also provide the same option to the use dark composable.