Themes
Metro UI supports out-of-the-box light and dark themes for components.
By default, the theme is set to light. To change the theme, add class .dark-side to the <html> tag for global or set this class to the <element> for local.
<!-- Global --><html class="dark-side"><!-- Local --><div class="dark-side"> <div data-role="calendar"></div></div>Theme according to the system
Section titled “Theme according to the system”You can use the prefers-color-scheme media feature to detect if the user has requested the system use a light or dark color theme.
To use this feature, add meta tag metroui:theme with content auto to the page <head>. Also, you can use values light and dark to set the specific theme.
<meta name="metroui:theme" content="auto">Theme switcher
Section titled “Theme switcher”Metro UI has a built-in theme switcher that allows you to switch between light and dark themes.
You can use component theme-switcher to add control to switch between light and dark themes.
This component automatically sets theme class .dark-side to the specified target element (by default, it is <html> element).
To use this component, add attribute data-role="theme-switcher" to the <input> element.
Switcher modes
Section titled “Switcher modes”You can use the data-mode attribute to set the theme switcher mode.
Switch
Section titled “Switch”<input type="checkbox" data-role="theme-switcher">Button
Section titled “Button”<input type="checkbox" data-role="theme-switcher" data-mode="button">