# 暗黑模式 (Dark mode)

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

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

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

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

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

定义一个切换样式模式的方法，通过变更 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 这个文件中定义的样式变量就能启用暗黑模式。如果不引用则保持原来的样式模式。

← I18N 创建组件 →