Skeleton provides two strategies for toggling light and dark mode. Choose your preference.
We recommend this approach for most users. Please note the Lightswitch component must be present on page load in order to operate. For best results, insert this in a fixed element that appears on every page.
Strategy: OS Preference
Skeleton provides a utility method to adjust the mode based on operating system preference. This replaces both the class strategy and Lightswitch component.
When adjusting your operating system setting, macOS is the only OS that does not require a browser refresh.
Build Your Own Component
Skeleton exposes all utility methods used within the Lightswitch component. Use these to construct your own!
Set Initial Classes
Import and add the following to your component. This will set the
.dark class on the root HTML element in
a highly performant manner. Please note that the CLI installer inserts
statically in the
html element of app.html and you should remove it when going this route.
Light mode is represented by
true, while dark mode is represented by