PHPackages                             webvpf/wn-darkbackend-plugin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webvpf/wn-darkbackend-plugin

ActiveWinter-plugin[Utility & Helpers](/categories/utility)

webvpf/wn-darkbackend-plugin
============================

Dark Theme for Backend Winter CMS

v1.2.19(2y ago)93974[1 issues](https://github.com/WebVPF/wn-darkbackend-plugin/issues)MITCSS

Since May 4Pushed 2y ago2 watchersCompare

[ Source](https://github.com/WebVPF/wn-darkbackend-plugin)[ Packagist](https://packagist.org/packages/webvpf/wn-darkbackend-plugin)[ Docs](https://github.com/WebVPF/wn-darkbackend-plugin)[ RSS](/packages/webvpf-wn-darkbackend-plugin/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (48)Used By (0)

Dark Backend
============

[](#dark-backend)

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.

[![switch](https://user-images.githubusercontent.com/61043464/215638267-6c700e9d-cf2b-483b-adff-de563603b06b.jpg)](https://user-images.githubusercontent.com/61043464/215638267-6c700e9d-cf2b-483b-adff-de563603b06b.jpg)

See [Plugin screenshot gallery](https://github.com/WebVPF/wn-darkbackend-plugin/issues/6)

Installation Сomposer:
----------------------

[](#installation-сomposer)

```
composer require webvpf/wn-darkbackend-plugin
```

Styles
------

[](#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

[](#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

[](#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;
}
```

[![screen logo](https://user-images.githubusercontent.com/61043464/211161041-750dd82d-52ea-49a5-a96d-d8cfbbd43acc.jpg)](https://user-images.githubusercontent.com/61043464/211161041-750dd82d-52ea-49a5-a96d-d8cfbbd43acc.jpg)

Events
------

[](#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
---------------------------

[](#translation-for-switch-text)

Write a comment here: [\#1](https://github.com/WebVPF/wn-darkbackend-plugin/issues/1) where specify language code and translation for text **Dark Theme** in your language.

### How to find out language code

[](#how-to-find-out-language-code)

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

---

Protect your eyes!

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance18

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~20 days

Recently: every ~27 days

Total

47

Last Release

889d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7445b1b017644e642f1a2ac78bb6eb7565baaae3aebebe03e60e9549846f64da?d=identicon)[webvpf](/maintainers/webvpf)

---

Top Contributors

[![WebVPF](https://avatars.githubusercontent.com/u/61043464?v=4)](https://github.com/WebVPF "WebVPF (204 commits)")

---

Tags

wintercmswintercms-pluginwinter cmswintercmswintercms-plugin

### Embed Badge

![Health badge](/badges/webvpf-wn-darkbackend-plugin/health.svg)

```
[![Health](https://phpackages.com/badges/webvpf-wn-darkbackend-plugin/health.svg)](https://phpackages.com/packages/webvpf-wn-darkbackend-plugin)
```

###  Alternatives

[winter/wn-blog-plugin

Blog plugin for Winter CMS

2042.1k3](/packages/winter-wn-blog-plugin)[winter/wn-seo-plugin

Winter CMS plugin for managing SEO tags

106.3k](/packages/winter-wn-seo-plugin)[winter/wn-sitemap-plugin

Sitemap plugin for Winter CMS

1042.6k1](/packages/winter-wn-sitemap-plugin)[winter/wn-tailwindui-plugin

Provides a TailwindUI-based skin for the Winter CMS backend.

1812.8k](/packages/winter-wn-tailwindui-plugin)[winter/wn-notes-plugin

Easily add notes to any record in WinterCMS

121.4k](/packages/winter-wn-notes-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)