开发适配

如果你开发的页面均使用FastAdmin组件且符合FastAdmin开发规范，基本上无需改动即可适配深色模式。

如果你的自定义页面使用了自定义CSS或个性化CSS样式，此时需要你按以下文档进行适配深色模式。

准备工作

首先插件内预置了几个暗色主题的颜色，我们在编写CSS时可以使用相应的变量，也可以自行使用深色系颜色。
其中内置的颜色如下：

全局页面适配

如果你在多个页面使用了自定义CSS或个性化CSS样式，此时建议你采用全局适配的方法进行适配暗色模式。
可以采用以下三种方法：

1、在页面引入CSS文件

在页面中编写引入CSS文件的代码，如：

<link rel="stylesheet" href="__CDN__/assets/addons/example/css/dark.css" data-render="darktheme" />

其中data-render="darktheme"是必选项。
其次CSS文件中代码的编写必须是body.darktheme 前缀，如：

body.darktheme .testdiv {
        background: var(--bgcolor);
        color: var(--fontcolor);
}

2、使用Hook引入CSS文件

如果你不想每个HTML视图文件去引入CSS文件，可以尝试使用Hook的方法进行引入，我们需要添加以下Hook，如：

public function darkthemeCustomcss(&$content)
{
    $request = request();
    // 判断当前页面是否位于example页面
    if (strtolower($request->controller()) == 'example') {
        return "__CDN__/assets/addons/example/css/dark.css";
    }
    return '';
}

其中Hook的darkthemeCustomfile方法必须返回CSS文件路径，注意可以返回空字符串，但不能返回false。

3、使用Hook引入CSS样式

如果你不希望采用引入CSS文件的名称来实现多页面样式，可以尝试使用以下的方法来引入，如：

public function darkthemeCustomcss(&$content)
{
    $request = request();
    // 判断当前页面是否位于example页面
    if (strtolower($request->controller()) == 'example') {
        return "body.darktheme .testdiv {
                    background: var(--bgcolor);
                    color: var(--fontcolor);
        }";
    }
    return '';
}

方法2和方法3的Hook名称相同，只不过方法2返回的CSS文件，方法3直接返回了CSS样式

局部页面适配

局部适配仅需在视图页面添加CSS进行适配即可，例如在视图页面添加以下代码：

<style data-render="darktheme">
    body.darktheme .testdiv {
            background: var(--bgcolor);
            color: var(--fontcolor);
   }
</style>

其中style标签的data-render="darktheme"是必选项，其次样式中body.darktheme 前缀也是必选项。只有同时拥有上述属性和前缀，才会自适应暗色主题插件。