# # 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:

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

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

2. 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">

3. 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.