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.
composer require webvpf/wn-darkbackend-pluginWhen 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 {
}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);
}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;
}
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
});Write a comment here: #1 where specify language code and translation for text Dark Theme in your language.
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!