setTheme

The setTheme function applies 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.

Usage

Import the function:

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

Example:

// Set the entire page to dark mode
setTheme('dark');

// 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);

API

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.

getTheme

getColorFromImage