iarv/znc
1
0
Fork 0
mirror of https://github.com/znc/znc.git synced 2026-03-28 17:42:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode for selectize

Browse Source
This commit is contained in:
Danny Colin
2025-10-05 23:18:27 -04:00
parent 51ba58bd8a
commit e071c8fb02
1 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
webskins/_default_/pub/selectize-znc-dark.css
View File

@@ -3,3 +3,69 @@
* This file is part of ZNC. It contains CSS rules that adds a dark theme to the * This file is part of ZNC. It contains CSS rules that adds a dark theme to the
* upstream selectize project. * upstream selectize project.
*/ */
:root {
--selectize-dropdown-background-color: #ffffff;
--selectize-dropdown-border-color: #cccccc;
--selectize-dropdown-box-shadow-color: rgba(0, 0, 0, 0.1);
--selectize-dropdown-color: #000000;
--selectize-dropdown-content-active-background-color: #eeeeee;
--selectize-dropdown-content-active-color: #000000;
--selectize-input-background-color: #ffffff;
--selectize-input-border-color: #cccccc;
--selective-input-color: #000000;
--selectize-input-div-background-color: #eeeeee;
--selectize-input-div-color: #000000;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--selectize-dropdown-background-color: #0c0c0d;
--selectize-dropdown-border-color: #3e3e3f;
--selectize-dropdown-box-shadow-color: rgb(250, 250, 250, 0.1);
--selectize-dropdown-color: #fafafa;
--selectize-dropdown-content-active-background-color: #2a2a2b;
--selectize-dropdown-content-active-color: #fafafa;
--selectize-input-background-color: #0c0c0d;
--selectize-input-border-color: #3e3e3f;
--selective-input-color: #fafafa;
--selectize-input-div-background-color: #2a2a2b;
--selectize-input-div-color: #fafafa;
}
}
/* jQuery UI components */
.selectize-input,
.selectize-control.single
.selectize-input.input-active {
background: var(--selectize-input-background-color);
}
.selectize-input {
border: 1px solid var(--selectize-input-border-color);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: var(--selectize-input-color);
}
.selectize-dropdown {
background: var(--selectize-dropdown-background-color);
border: 1px solid var(--selectize-dropdown-border-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px var(--selectize-dropdown-box-shadow-color);
color: var(--selectize-dropdown-color);
}
.selectize-dropdown-content > .active {
background: var(--selectize-dropdown-content-active-background-color);
color: var(--selectize-dropdown-content-active-color);
}
.selectize-control.multi .selectize-input > div {
background: var(--selectize-input-div-background-color);
color: var(--selectize-input-div-color);
}