# # 暗黑模式 (Dark mode)

`"/lib/UIExtension.dark-variable.css"` 样式文件定义了暗黑模式中所涉及到的样式变量。要切换成暗黑模式，您需要同时加载 `"/lib/UIExtension.css"` 和 `"/lib/UIExtension.dark-variable.css"` 两个文件, 然后通过在 `"/lib/UIExtension.css"` 中引用 `"/lib/UIExtension.dark-variable.css"` 中定义的样式变量，来实现切换效果。具体步骤如下所示：

1. 在 HTML 页面的 `<head>` 标签下，添加 `"/lib/UIExtension.css"`:

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

2. 在 HTML 页面的 `<head>` 标签下，添加 `"/lib/UIExtension.dark-variable.css"`:

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

3. 定义一个切换样式模式的方法，通过变更 link 标签的 rel 属性值在浏览器中启用或者禁用被引用的样式。

    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)
    }

备注：切换样式模式的方法有很多。只需要引用 `/lib/UIExtension.dark-variable.css` 这个文件中定义的样式变量就能启用暗黑模式。如果不引用则保持原来的样式模式。