README

Winter CMS 插件

此插件为网站后端用户菜单添加了暗黑主题切换功能。现在您只需点击一下即可切换到后端的暗黑主题。

Composer 安装

composer require webvpf/wn-darkbackend-plugin

样式

当启用暗黑模式时，插件脚本会为 body 标签添加 dark 类。因此，要覆盖标准样式，您需要在选择器名称之前添加 body.dark。

body.dark .className {

}

CSS 变量

插件为后端添加了 CSS 变量

:root {
    --drk-bg-color-a: #0d1117;
    --drk-bg-color-b: #161b22;
    --drk-bg-color-c: #1b222c;
    --drk-bg-color-fancy: #183b4e;
    --drk-bg-color-inset: #010409;
    --drk-color-a: #c9d1d9;
    --drk-color-b: #8b949e;
    --drk-color-c: #757575;
    --drk-color-danger: #f85149;
    --drk-border-color: #30363d;
    --drk-btn-bg-color: #21262d;
    --drk-hover-bg-color-a: #1f242c;
    --drk-hover-bg-color-b: #263850;
    --drk-box-shadow: 0 8px 24px #010409;
}

使用 CSS 变量的示例

body.dark .myClassName {
    background: var(--drk-bg-color-a);
}

标志

您可以在 自定义后端 中上传您的标志来自定义后端。

后端 --> 设置 --> 自定义后端 --> 品牌

如果您的标志不适合暗黑主题，则可以在媒体中上传单独的暗黑主题标志，并在 自定义后端 中写入以下样式。

后端 --> 设置 --> 自定义后端 --> 样式

body.dark .wn-logo {
    background-image: url(/storage/app/media/logo-backend-dark.png);
}
body.dark .wn-logo-transparent {
    background-image: url(/storage/app/media/logo-backend-dark.png) !important;
}

事件

开启和关闭暗黑模式会触发 modeDarkEnabled 和 modeDarkDisabled 事件。您可以设置这些事件的监听器。

document.addEventListener('modeDarkEnabled', () => {
    // code when dark mode is enabled
});

document.addEventListener('modeDarkDisabled', () => {
    // code when dark mode is disabled
});

切换文本翻译

在此处添加注释：#1，其中指定语言代码和翻译您语言中的 暗黑主题 文本。

如何查找语言代码

打开后端主页，在页面代码中查看 <html> 标签的 lang 属性值（例如：lang="en"）。这就是您的语言代码。

保护您的眼睛！

webvpf / wn-darkbackend-plugin

维护者

详细信息

README

Composer 安装

样式

CSS 变量

标志

事件

切换文本翻译

如何查找语言代码