setColorScheme

The setColorScheme function is used to set the color scheme for the current page or a specific element based on a provided hexadecimal color value. This function affects all mdui components on the page. For more information, refer to the Dynamic Color section.

Usage

Import the function:

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

Example:

setColorScheme('#ff0000');

API

setColorScheme(color: string, options: Options): void;

Options

Property Type Default
target string | HTMLElement | JQ<HTMLElement> document.documentElement

The element to which the color scheme should be applied. The value can be a CSS selector, a DOM element, or a JQ object. If this parameter is set, the color scheme will only take effect within the specified element.

The default value is document.documentElement, which refers to the <html> element and affects the entire page.

customColors CustomColor[] -
An array of custom colors. For usage, please refer to the Dynamic Color section.

CustomColor

Property Type Default
name string -
The name of the custom color.
value string -
The hexadecimal value of the custom color, such as #f82506.
MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
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
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons