Skip to content

Latest commit

 

History

History
22 lines (16 loc) · 1020 Bytes

dark-mode.en-US.md

File metadata and controls

22 lines (16 loc) · 1020 Bytes
title description spline
Dark Mode
TDesign provides a dark mode to adapt to the display experience in the dark mode of the operating system. Click the switch in the upper right corner of the website to experience the dark mode of components.
design-mode

Usage

add theme-mode attribution for html to control the display of light/dark mode:

// dark mode
document.documentElement.setAttribute("theme-mode", "dark");
// light mode
document.documentElement.removeAttribute("theme-mode");

Implementation Solution

TDesign uses CSS Variables to implement all color-related Design Tokens. Currently, almost all modern browsers support this feature. We have implemented two sets of color palettes, light and dark, by default, for applying when switching the page theme.

Read the documentation if you have doubts about the browser compatibility of this solution.