# Dark Mode

The file "/lib/UIExtension.dark-variable.css" defines the style variables involved in the dark mode. To switch to the dark mode, you need to load both "/lib/UIExtension.css" and "/lib/UIExtension.dark-variable.css" files and then reference the style variables defined in "/lib/UIExtension.dark-variable.css" within "/lib/UIExtension.css" to achieve the desired effect. The specific steps are as follows:

Add /lib/UIExtension.css to the <head> tag of the HTML page:

<link rel="stylesheet" type="text/css" href="./lib/UIExtension.css">

Add /lib/UIExtension.dark-variable.css to the <head> tag of the HTML page:

<link id="dark-variable-css" rel="stylesheet" type="text/css" href="./lib/UIExtension.dark-variable.css">

Define a method for switching between style modes by changing the "rel" attribute value of the link tag to enable or disable the referenced styles in the browser.

function toggleDarkTheme () {
    let eCssLink = document.getElementById('dark-variable-css');
    let rel = eCssLink.getAttribute('rel');
    let STYLESHEET = 'stylesheet';
    eCssLink.setAttribute('rel', rel === STYLESHEET ? STYLESHEET + '-template' : STYLESHEET)
}

Note: There are many methods for switching between style modes. Simply referencing the style variables defined in the /lib/UIExtension.dark-variable.css file will enable dark mode. If not referenced, the original style mode will be maintained.

← I18N Create a Component →