{"id":26180195,"url":"https://github.com/webvpf/wn-darkbackend-plugin","last_synced_at":"2025-04-14T22:43:57.686Z","repository":{"id":46595688,"uuid":"240614152","full_name":"WebVPF/wn-darkbackend-plugin","owner":"WebVPF","description":"Dark Theme for Backend Winter CMS","archived":false,"fork":false,"pushed_at":"2024-02-28T17:37:22.000Z","size":155,"stargazers_count":9,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T19:47:26.327Z","etag":null,"topics":["wintercms","wintercms-plugin"],"latest_commit_sha":null,"homepage":"https://packagist.org/packages/webvpf/wn-darkbackend-plugin","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebVPF.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-14T23:09:45.000Z","updated_at":"2023-08-28T04:54:48.000Z","dependencies_parsed_at":"2024-02-28T18:53:15.795Z","dependency_job_id":null,"html_url":"https://github.com/WebVPF/wn-darkbackend-plugin","commit_stats":{"total_commits":184,"total_committers":6,"mean_commits":"30.666666666666668","dds":"0.44565217391304346","last_synced_commit":"06d6f8aad5598873921c06b32f8d8c2fe6509991"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebVPF%2Fwn-darkbackend-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebVPF%2Fwn-darkbackend-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebVPF%2Fwn-darkbackend-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebVPF%2Fwn-darkbackend-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebVPF","download_url":"https://codeload.github.com/WebVPF/wn-darkbackend-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975292,"owners_count":21192198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["wintercms","wintercms-plugin"],"created_at":"2025-03-11T21:54:50.338Z","updated_at":"2025-04-14T22:43:57.669Z","avatar_url":"https://github.com/WebVPF.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dark Backend\n\nPlugin for Winter CMS\n\nThis 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.\n\n![switch](https://user-images.githubusercontent.com/61043464/215638267-6c700e9d-cf2b-483b-adff-de563603b06b.jpg)\n\nSee [Plugin screenshot gallery](https://github.com/WebVPF/wn-darkbackend-plugin/issues/6)\n\n## Installation Сomposer:\n\n```bash\ncomposer require webvpf/wn-darkbackend-plugin\n```\n\n## Styles\n\nWhen 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.\n\n```css\nbody.dark .className {\n\n}\n```\n\n### CSS Variables\n\nThe plugin adds css variables to the backend:\n\n```css\n:root {\n    --drk-bg-color-a: #0d1117;\n    --drk-bg-color-b: #161b22;\n    --drk-bg-color-c: #1b222c;\n    --drk-bg-color-fancy: #183b4e;\n    --drk-bg-color-inset: #010409;\n    --drk-color-a: #c9d1d9;\n    --drk-color-b: #8b949e;\n    --drk-color-c: #757575;\n    --drk-color-danger: #f85149;\n    --drk-border-color: #30363d;\n    --drk-btn-bg-color: #21262d;\n    --drk-hover-bg-color-a: #1f242c;\n    --drk-hover-bg-color-b: #263850;\n    --drk-box-shadow: 0 8px 24px #010409;\n}\n```\n\nAn example of using css variables:\n\n```css\nbody.dark .myClassName {\n    background: var(--drk-bg-color-a);\n}\n```\n\n### Logo\n\nYou can upload your logo for backend customization in **Customize back-end**\n\nBackend --\u003e Settings --\u003e Customize back-end --\u003e Brand\n\nIf 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**\n\nBackend --\u003e Settings --\u003e Customize back-end --\u003e Styles\n\n```css\nbody.dark .wn-logo {\n    background-image: url(/storage/app/media/logo-backend-dark.png);\n}\nbody.dark .wn-logo-transparent {\n    background-image: url(/storage/app/media/logo-backend-dark.png) !important;\n}\n```\n\n![screen logo](https://user-images.githubusercontent.com/61043464/211161041-750dd82d-52ea-49a5-a96d-d8cfbbd43acc.jpg)\n\n## Events\n\nTurning dark mode on and off triggers `modeDarkEnabled` and `modeDarkDisabled` events. You can set listeners for these events:\n\n```js\ndocument.addEventListener('modeDarkEnabled', () =\u003e {\n    // code when dark mode is enabled\n});\n\ndocument.addEventListener('modeDarkDisabled', () =\u003e {\n    // code when dark mode is disabled\n});\n```\n\n## Translation for switch text\n\nWrite a comment here: https://github.com/WebVPF/wn-darkbackend-plugin/issues/1 where specify language code and translation for text **Dark Theme** in your language.\n\n### How to find out language code\n\nOpen backend home page and in page code look at the value of `lang` attribute for `\u003chtml\u003e` tag (e.g.: `lang=\"en\"`). This is your language code.\n\n---\n\nProtect your eyes!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebvpf%2Fwn-darkbackend-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebvpf%2Fwn-darkbackend-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebvpf%2Fwn-darkbackend-plugin/lists"}