From d1b1c540554cde2cb7c1094391b94be4a8f098c6 Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Thu, 2 Oct 2025 17:34:50 -0400 Subject: [PATCH 1/7] Add a dark mode to the default webskin --- webskins/_default_/pub/_default_.css | 103 +++++++++++++++++++-------- 1 file changed, 74 insertions(+), 29 deletions(-) diff --git a/webskins/_default_/pub/_default_.css b/webskins/_default_/pub/_default_.css index 78528a72..f6dfd79a 100644 --- a/webskins/_default_/pub/_default_.css +++ b/webskins/_default_/pub/_default_.css @@ -1,5 +1,51 @@ @charset "UTF-8"; +:root { + color-scheme: light dark; + --page-background-color: light-dark(#ffffff, #131314); + --page-color: light-dark(#000000, #fafafa); + + --page-title-background-color: light-dark(#aaaaaa, #3e3e3f); + + --wrapper-background-color: light-dark(#eeeeee, #1b1b1c); + --wrapper-border-color: light-dark(#cccccc, #464646); + --wrapper-box-shadow-color: light-dark(#666666, #29292a); + + --link-color: light-dark(#00008b, #4493f8); + + --main-link-visited-color: light-dark(#99008B, #b74cad); + + --menu-border-color: light-dark(#aaaaaa, #3e3e3f); + + --breadcrumb-border-color: light-dark(#aaaaaa, #3e3e3f); + + --submit-line-border-color: light-dark(#aaaaaa, #3e3e3f); + + --errorbar-background-color: light-dark(#900000, #5d0000); + --errorbar-color: light-dark(#ffffff, #dcdcdc); + + --successbar-background-color: light-dark(#009000, #005d00); + --successbar-color: light-dark(#ffffff, #dcdcdc); + + --banner-background-color: light-dark(#cccccc, #2a2a2b); + --banner-link-color: light-dark(#000000, #fafafa); + + --infobar-background-color: light-dark(#cccccc, #2a2a2b); + --infobar-color: light-dark(#333333, #dcdcdc); + + --infobar-input-background-color: light-dark(#ffffff, #0c0c0d); + --infobar-input-border-color: light-dark(#333333, #6b6b6c); + + --input-border-color: light-dark(#cccccc, #3e3e3f); + --input-background-color: light-dark(#ffffff, #0c0c0d); + --input-focus-box-shadow-color: light-dark(#aaaaaa, #6b6b6c); + + --table-border-color: light-dark(#cccccc, #3e3e3f); + --table-cell-background-color: light-dark(#cecece, #131314); + --table-even-row-background-color: light-dark(#dadada, #1e1e1f); + --table-header-background-color: light-dark(#a0a0a0, #29292a); +} + * { margin: 0; padding: 0; @@ -11,13 +57,13 @@ html { body { height: 100%; - background-color: #fff; - color: #000; + background-color: var(--page-background-color); + color: var(--page-color); font-family: Tahoma, sans-serif; } a, a:link, a:active, a:visited, a:focus { - color: #00008B; + color: var(--link-color); text-decoration: none; outline: none; } @@ -27,29 +73,27 @@ a:hover { } #main a:visited { - color: #99008B; + color: var(--main-link-visited-color); } #wrapper { - background-color: #eee; + background-color: var(--wrapper-background-color); min-height: 80%; overflow: hidden; margin: 0 auto; width: 900px; - border: 1px solid #ccc; + border: 1px solid var(--wrapper-border-color); border-top: none; - -moz-box-shadow: 0 0 1em #666; - -webkit-box-shadow: 0 0 1em #666; - box-shadow: 0 0 1em #666; + box-shadow: 0 0 1em var(--wrapper-box-shadow-color); } #banner_top { - background-color: #ccc; + background-color: var(--banner-background-color); } #banner_top a { - color: #000; + color: var(--banner-link-color); text-decoration: none; } @@ -58,7 +102,7 @@ h1 { padding: 0 0.9em 0 0.6em; width: 50px; text-align: center; - background-color: #aaa; + background-color: var(--page-title-background-color); font-weight: normal; font-style: italic; font-size: 100%; @@ -79,7 +123,7 @@ h1 { } #menu { - border-left: 2px solid #aaa; + border-left: 2px solid var(--menu-border-color); padding-left: 10px; position: absolute; margin-left: 700px; @@ -131,8 +175,8 @@ ul.nav li.subitem { position: relative; top: -30px; margin-left: 485px; - background-color: #ccc; - color: #333; + background-color: var(--infobar-background-color); + color: var(--infobar-color) padding: 0 6px 3px 0; } @@ -141,6 +185,7 @@ ul.nav li.subitem { } #infobar input { + background-color: var(--infobar-input-background-color); border: none; font-family: Tahoma, sans-serif; padding: 1px; @@ -150,7 +195,7 @@ ul.nav li.subitem { } #infobar input.submit { - border: 1px solid #333; + border: 1px solid var(--infobar-input-border-color); font-size: 12px; width: 60px; } @@ -171,14 +216,15 @@ ul.nav li.subitem { .successbar, .errorbar { width: 100%; - background-color: #900; + background-color: var(--errorbar-background-color); + color: var(--errorbar-color); padding: 5px 10px; font-weight: bold; - color: #fff; } .successbar { - background-color: #070; + background-color: var(--successbar-background-color); + color: var(--successbar-color); } h2 { @@ -204,16 +250,15 @@ h3 { } .sectionbody input, textarea, select { - border: 2px solid #ccc; + background-color: var(--input-background-color); + border: 2px solid var(--input-border-color); font-family: Tahoma, sans-serif; padding: 3px; font-size: 14px; } input:focus, textarea:focus, select:focus { - -moz-box-shadow: 0 0 0.4em #aaa; - -webkit-box-shadow: 0 0 0.4em #aaa; - box-shadow: 0 0 0.4em #aaa; + box-shadow: 0 0 0.4em var(--input-focus-box-shadow-color); outline: none; /* for webkit */ } @@ -224,7 +269,7 @@ textarea { div.submitline { margin: 1em; padding-top: 1em; - border-top: 1px solid #aaa; + border-top: 1px solid var(--submit-line-border-color); } .submitline input { @@ -263,7 +308,7 @@ input[type=number] { } table { - border: 1px solid #ccc; + border: 1px solid var(--table-border-color); border-spacing: 1px; } @@ -273,7 +318,7 @@ td, th { } thead td, th { - background-color: #a0a0a0; + background-color: var(--table-header-background-color); } th { @@ -281,11 +326,11 @@ th { } tbody td { - background-color: #cecece; + background-color: var(--table-cell-background-color); } tr.evenrow td { - background-color: #dadada; + background-color: var(--table-even-row-background-color); } .info { @@ -378,7 +423,7 @@ td.center { width: 670px; padding: 0 0 3px 1px; margin-bottom: 10px; - border-bottom: 1px solid #aaa; + border-bottom: 1px solid var(--breadcrumb-border-color); } #servers_js > div:first-child { From 5671519f9e1fc262343fc9a2749b05d6da0a1f7e Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Sat, 4 Oct 2025 22:52:23 -0400 Subject: [PATCH 2/7] use a media query instead of light-dark function We're using a media query with prefers-color-scheme instead of light-dark in order to support older browser versions --- webskins/_default_/pub/_default_.css | 114 +++++++++++++++++---------- 1 file changed, 74 insertions(+), 40 deletions(-) diff --git a/webskins/_default_/pub/_default_.css b/webskins/_default_/pub/_default_.css index f6dfd79a..2f7467ec 100644 --- a/webskins/_default_/pub/_default_.css +++ b/webskins/_default_/pub/_default_.css @@ -1,49 +1,83 @@ @charset "UTF-8"; :root { + /* color-scheme is needed for form controls that cannot be completely styled + * Browsers not supporting it will use the light colors for this controls. + * The affected controls are: + * + * - checkboxes when unchecked + * - radio buttons when not selected + * - dropdown menu of select + */ color-scheme: light dark; - --page-background-color: light-dark(#ffffff, #131314); - --page-color: light-dark(#000000, #fafafa); - --page-title-background-color: light-dark(#aaaaaa, #3e3e3f); + --banner-background-color: #cccccc; + --banner-link-color: #000000; + --breadcrumb-border-color: #aaaaaa; + --button-background-color: #cccccc; + --button-border-color: #aaaaaa; + --button-color: #000000; + --errorbar-background-color: #900000; + --errorbar-color: #ffffff; + --infobar-background-color: #cccccc; + --infobar-color: #333333; + --infobar-input-background-color: #ffffff; + --infobar-input-border-color: #333333; + --input-border-color: #cccccc; + --input-background-color: #ffffff; + --input-focus-box-shadow-color: #aaaaaa; + --link-color: #00008b; + --main-link-visited-color: #99008B; + --menu-border-color: #aaaaaa; + --page-background-color: #ffffff; + --page-color: #000000; + --page-title-background-color: #aaaaaa; + --submit-line-border-color: #aaaaaa; + --successbar-background-color: #009000; + --successbar-color: #ffffff; + --table-border-color: #cccccc; + --table-cell-background-color: #cecece; + --table-even-row-background-color: #dadada; + --table-header-background-color: #a0a0a0; + --wrapper-background-color: #eeeeee; + --wrapper-border-color: #cccccc; + --wrapper-box-shadow-color: #666666; +} - --wrapper-background-color: light-dark(#eeeeee, #1b1b1c); - --wrapper-border-color: light-dark(#cccccc, #464646); - --wrapper-box-shadow-color: light-dark(#666666, #29292a); - - --link-color: light-dark(#00008b, #4493f8); - - --main-link-visited-color: light-dark(#99008B, #b74cad); - - --menu-border-color: light-dark(#aaaaaa, #3e3e3f); - - --breadcrumb-border-color: light-dark(#aaaaaa, #3e3e3f); - - --submit-line-border-color: light-dark(#aaaaaa, #3e3e3f); - - --errorbar-background-color: light-dark(#900000, #5d0000); - --errorbar-color: light-dark(#ffffff, #dcdcdc); - - --successbar-background-color: light-dark(#009000, #005d00); - --successbar-color: light-dark(#ffffff, #dcdcdc); - - --banner-background-color: light-dark(#cccccc, #2a2a2b); - --banner-link-color: light-dark(#000000, #fafafa); - - --infobar-background-color: light-dark(#cccccc, #2a2a2b); - --infobar-color: light-dark(#333333, #dcdcdc); - - --infobar-input-background-color: light-dark(#ffffff, #0c0c0d); - --infobar-input-border-color: light-dark(#333333, #6b6b6c); - - --input-border-color: light-dark(#cccccc, #3e3e3f); - --input-background-color: light-dark(#ffffff, #0c0c0d); - --input-focus-box-shadow-color: light-dark(#aaaaaa, #6b6b6c); - - --table-border-color: light-dark(#cccccc, #3e3e3f); - --table-cell-background-color: light-dark(#cecece, #131314); - --table-even-row-background-color: light-dark(#dadada, #1e1e1f); - --table-header-background-color: light-dark(#a0a0a0, #29292a); +@media screen and (prefers-color-scheme: dark) { + :root { + --banner-background-color: #2a2a2b; + --banner-link-color: #fafafa; + --button-background-color: #2a2a2b; + --button-border-color: #3e3e3f; + --button-color: #fafafa; + --breadcrumb-border-color: #3e3e3f; + --errorbar-background-color: #5d0000; + --errorbar-color: #dcdcdc; + --infobar-background-color: #2a2a2b; + --infobar-color: #dcdcdc; + --infobar-input-background-color: #0c0c0d; + --infobar-input-border-color: #6b6b6c; + --input-border-color: #3e3e3f; + --input-background-color: #0c0c0d; + --input-focus-box-shadow-color: #6b6b6c; + --link-color: #4493f8; + --main-link-visited-color: #b74cad; + --menu-border-color: #3e3e3f; + --page-background-color: #131314; + --page-color: #fafafa; + --page-title-background-color: #3e3e3f; + --submit-line-border-color: #3e3e3f; + --successbar-background-color: #005d00; + --successbar-color: #dcdcdc; + --table-border-color: #3e3e3f; + --table-cell-background-color: #131314; + --table-even-row-background-color: #1e1e1f; + --table-header-background-color: #29292a; + --wrapper-background-color: #1b1b1c; + --wrapper-border-color: #464646; + --wrapper-box-shadow-color: #29292a; + } } * { From a6d94db800ed3d0e131fffcd80cce22496c40f1e Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Sat, 4 Oct 2025 23:16:52 -0400 Subject: [PATCH 3/7] Add missing button styling for both light and dark theme --- webskins/_default_/pub/_default_.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/webskins/_default_/pub/_default_.css b/webskins/_default_/pub/_default_.css index 2f7467ec..4b9ba84a 100644 --- a/webskins/_default_/pub/_default_.css +++ b/webskins/_default_/pub/_default_.css @@ -106,6 +106,16 @@ a:hover { text-decoration: underline; } +button, +input[type="button"], +input[type="submit"], +.sectionbody input[type="button"] { + background-color: var(--button-background-color); + border: 1px solid var(--button-border-color); + border-radius: 4px; + color: var(--button-color); +} + #main a:visited { color: var(--main-link-visited-color); } From 86959194c438ac53314cd60ee1d2e06a0021de69 Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Sat, 4 Oct 2025 23:35:22 -0400 Subject: [PATCH 4/7] Add dark mode support for jQuery UI components --- .../_default_/pub/selectize-0.12.1-dark.css | 32 +++++++++++++++++++ webskins/_default_/tmpl/BaseHeader.tmpl | 1 + 2 files changed, 33 insertions(+) create mode 100644 webskins/_default_/pub/selectize-0.12.1-dark.css diff --git a/webskins/_default_/pub/selectize-0.12.1-dark.css b/webskins/_default_/pub/selectize-0.12.1-dark.css new file mode 100644 index 00000000..7c3b136f --- /dev/null +++ b/webskins/_default_/pub/selectize-0.12.1-dark.css @@ -0,0 +1,32 @@ +:root { + --selectize-input-background-color: #ffffff; + --selectize-input-border-color: #cccccc; + --selectize-input-div-background-color: #eeeeee; + --selectize-input-div-color: #000000; +} + +@media screen and (prefers-color-scheme: dark) { + :root { + --selectize-input-background-color: #0c0c0d; + --selectize-input-border-color: #3e3e3f; + --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-control.multi .selectize-input > div { + background: var(--selectize-input-div-background-color); + color: var(--selectize-input-div-color); +} diff --git a/webskins/_default_/tmpl/BaseHeader.tmpl b/webskins/_default_/tmpl/BaseHeader.tmpl index 7d7b69b0..2c7c2e94 100644 --- a/webskins/_default_/tmpl/BaseHeader.tmpl +++ b/webskins/_default_/tmpl/BaseHeader.tmpl @@ -6,6 +6,7 @@ + From 6ce9543e65ce959f0697133047e5bf44b9bd8c6a Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Sat, 4 Oct 2025 23:35:57 -0400 Subject: [PATCH 5/7] Add missing CSS rule for input submit buttons in a .sectionbody --- webskins/_default_/pub/_default_.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webskins/_default_/pub/_default_.css b/webskins/_default_/pub/_default_.css index 4b9ba84a..e7a11ce8 100644 --- a/webskins/_default_/pub/_default_.css +++ b/webskins/_default_/pub/_default_.css @@ -109,7 +109,8 @@ a:hover { button, input[type="button"], input[type="submit"], -.sectionbody input[type="button"] { +.sectionbody input[type="button"], +.sectionbody input[type="submit"] { background-color: var(--button-background-color); border: 1px solid var(--button-border-color); border-radius: 4px; From 51ba58bd8a156d236d040394e00ca1ecb5f9ea38 Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Sun, 5 Oct 2025 23:13:42 -0400 Subject: [PATCH 6/7] Clarify selectize-znc-dark.css belongs to ZNC not Selectize's upstream - Rename the file to contain znc in it - Add a header mentioning that it is part of ZNC codebase --- .../_default_/pub/selectize-0.12.1-dark.css | 32 ------------------- webskins/_default_/pub/selectize-znc-dark.css | 5 +++ webskins/_default_/tmpl/BaseHeader.tmpl | 2 +- 3 files changed, 6 insertions(+), 33 deletions(-) delete mode 100644 webskins/_default_/pub/selectize-0.12.1-dark.css create mode 100644 webskins/_default_/pub/selectize-znc-dark.css diff --git a/webskins/_default_/pub/selectize-0.12.1-dark.css b/webskins/_default_/pub/selectize-0.12.1-dark.css deleted file mode 100644 index 7c3b136f..00000000 --- a/webskins/_default_/pub/selectize-0.12.1-dark.css +++ /dev/null @@ -1,32 +0,0 @@ -:root { - --selectize-input-background-color: #ffffff; - --selectize-input-border-color: #cccccc; - --selectize-input-div-background-color: #eeeeee; - --selectize-input-div-color: #000000; -} - -@media screen and (prefers-color-scheme: dark) { - :root { - --selectize-input-background-color: #0c0c0d; - --selectize-input-border-color: #3e3e3f; - --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-control.multi .selectize-input > div { - background: var(--selectize-input-div-background-color); - color: var(--selectize-input-div-color); -} diff --git a/webskins/_default_/pub/selectize-znc-dark.css b/webskins/_default_/pub/selectize-znc-dark.css new file mode 100644 index 00000000..79aa7372 --- /dev/null +++ b/webskins/_default_/pub/selectize-znc-dark.css @@ -0,0 +1,5 @@ +/* selectize-znc-dark.css + * + * This file is part of ZNC. It contains CSS rules that adds a dark theme to the + * upstream selectize project. + */ diff --git a/webskins/_default_/tmpl/BaseHeader.tmpl b/webskins/_default_/tmpl/BaseHeader.tmpl index 2c7c2e94..98165518 100644 --- a/webskins/_default_/tmpl/BaseHeader.tmpl +++ b/webskins/_default_/tmpl/BaseHeader.tmpl @@ -6,7 +6,7 @@ - + From e071c8fb02f5fca46ed819d51c2324e1b1926802 Mon Sep 17 00:00:00 2001 From: Danny Colin Date: Sun, 5 Oct 2025 23:18:27 -0400 Subject: [PATCH 7/7] Add dark mode for selectize --- webskins/_default_/pub/selectize-znc-dark.css | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/webskins/_default_/pub/selectize-znc-dark.css b/webskins/_default_/pub/selectize-znc-dark.css index 79aa7372..9b632252 100644 --- a/webskins/_default_/pub/selectize-znc-dark.css +++ b/webskins/_default_/pub/selectize-znc-dark.css @@ -3,3 +3,69 @@ * This file is part of ZNC. It contains CSS rules that adds a dark theme to the * 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); +}