包简介

Dark Theme for Backend Winter CMS

README 文档

README

Plugin for Winter CMS

This plugin adds a dark theme switch to the user’s menu in backend of site. Now you can switch to dark theme for backend in one click.

See Plugin screenshot gallery

Installation Сomposer:

composer require webvpf/wn-darkbackend-plugin

Styles

When dark mode is enabled, the plugin script adds dark class for body tag. Therefore, to override the standard styles, you need to add body.dark before the selector name.

body.dark .className {

}

CSS Variables

The plugin adds css variables to the backend:

: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;
}

An example of using css variables:

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

Logo

You can upload your logo for backend customization in Customize back-end

Backend --> Settings --> Customize back-end --> Brand

If your logo is not suitable for the dark theme, then you can upload a separate dark theme logo to the media and write the following styles in Customize back-end

Backend --> Settings --> Customize back-end --> Styles

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

Events

Turning dark mode on and off triggers modeDarkEnabled and modeDarkDisabled events. You can set listeners for these events:

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

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

Translation for switch text

Write a comment here: #1 where specify language code and translation for text Dark Theme in your language.

How to find out language code

Open backend home page and in page code look at the value of lang attribute for <html> tag (e.g.: lang="en"). This is your language code.

Protect your eyes!

webvpf/wn-darkbackend-plugin 适用场景与选型建议

webvpf/wn-darkbackend-plugin 是一款基于 CSS 开发的 Composer 扩展包，目前已累计 399 次下载、GitHub Stars 达 9，最近一次更新时间为 2021 年 05 月 04 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「wintercms」「winter cms」「wintercms-plugin」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 webvpf/wn-darkbackend-plugin 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 webvpf/wn-darkbackend-plugin 我们能提供哪些服务？

定制开发 / 二次开发

基于 webvpf/wn-darkbackend-plugin 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发