The setTheme function is used to apply a specific theme to the current page or a designated element. The available themes are light, dark, and auto. For more information, please refer to the Dark Mode section.


Import the function:

import { setTheme } from 'mdui/functions/setTheme.js';


// Set the entire page to dark mode

// Set an element with class="element" to dark mode
setTheme('dark', '.element');

// Set a specified DOM element to dark mode
const element = document.querySelector('.element');
setTheme('dark', element);


setTheme(theme: 'light' | 'dark' | 'auto', target?: string | HTMLElement | JQ<HTMLElement>): void

The function accepts two parameters. The first parameter, specifies the theme to be applied. It can be light, dark, or auto.

The second parameter, is optional and determines the element to which the theme will be applied. The target can be a CSS selector, a DOM element, or a JQ object. If no target is provided, the function defaults to document.documentElement, the <html> element.

Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Dark Theme Dynamic Theme Typography Design Tokens
React Vue Angular
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint