Add dark mode support for jQuery UI components

This commit is contained in:
Danny Colin
2025-10-04 23:35:22 -04:00
parent a6d94db800
commit 86959194c4
2 changed files with 33 additions and 0 deletions

View File

@@ -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);
}

View File

@@ -6,6 +6,7 @@
<? AddRow JSLoop HREF=/pub/selectize-standalone-0.12.1.min.js ?>
<? AddRow CSSLoop HREF=/pub/jquery-ui-sortable.1.11.4.min.css ?>
<? AddRow CSSLoop HREF=/pub/selectize-0.12.1.css ?>
<? AddRow CSSLoop HREF=/pub/selectize-0.12.1-dark.css ?>
<html lang="en">
<head>
<meta charset="UTF-8" />