Dark UI for react-select

Author: jc21

frontend/src/App.css

@@ -1,3 +1,14 @@
+:root {
+	color-scheme: light dark;
+}
+
+.light {
+	color-scheme: light;
+}
+.dark {
+	color-scheme: dark;
+}
+
 .modal-backdrop {
 	--tblr-backdrop-opacity: 0.8 !important;
 }
@@ -12,3 +23,45 @@
 .ml-1 {
 	margin-left: 0.25rem;
 }
+
+.react-select-container {
+	.react-select__control  {
+		color: var(--tblr-body-color);
+		background-color: var(--tblr-bg-forms);
+		border: var(--tblr-border-width) solid var(--tblr-border-color);
+
+		.react-select__input {
+			color: var(--tblr-body-color) !important;
+		}
+
+		.react-select__single-value {
+			color: var(--tblr-body-color);
+		}
+
+		.react-select__multi-value {
+			border: 1px solid var(--tblr-border-color);
+			background-color: var(--tblr-bg-surface-tertiary);
+			color: var(--tblr-secondary) !important;
+
+			.react-select__multi-value__label {
+				color: var(--tblr-secondary) !important;
+			}
+		}
+	}
+
+	.react-select__menu {
+		background-color: var(--tblr-bg-forms);
+
+		.react-select__option {
+			background: rgba(var(--tblr-primary-rgb), .04);
+			color: inherit !important;
+			&.react-select__option--is-focused {
+				background: rgba(var(--tblr-primary-rgb), .1);
+			}
+
+			&.react-select__option--is-focused.react-select__option--is-selected {
+				background: rgba(var(--tblr-primary-rgb), .2);
+			}
+		}
+	}
+}

frontend/src/components/Form/DNSProviderFields.tsx

@@ -46,6 +46,8 @@ export function DNSProviderFields() {
 							DNS Provider
 						</label>
 						<Select
+							className="react-select-container"
+							classNamePrefix="react-select"
 							name={field.name}
 							id="dnsProvider"
 							closeMenuOnSelect={true}

frontend/src/components/Form/DomainNamesField.tsx

@@ -91,6 +91,8 @@ export function DomainNamesField({
 						{intl.formatMessage({ id: label })}
 					</label>
 					<CreatableSelect
+						className="react-select-container"
+						classNamePrefix="react-select"
 						name={field.name}
 						id={id}
 						closeMenuOnSelect={true}

frontend/src/components/Form/SSLCertificateField.tsx

@@ -103,6 +103,8 @@ export function SSLCertificateField({
 					{isError ? <div className="invalid-feedback">{`${error}`}</div> : null}
 					{!isLoading && !isError ? (
 						<Select
+							className="react-select-container"
+							classNamePrefix="react-select"
 							defaultValue={options[0]}
 							options={options}
 							components={{ Option }}

frontend/src/components/Form/SSLOptionsFields.tsx

@@ -107,7 +107,7 @@ export function SSLOptionsFields() {
 
 					<Field name="letsencryptEmail">
 						{({ field }: any) => (
-							<div className="row mt-5">
+							<div className="mt-5">
 								<label htmlFor="letsencryptEmail" className="form-label">
 									Email Address for Let's Encrypt
 								</label>

frontend/src/components/LocalePicker.module.css

@@ -1,13 +1,6 @@
-.darkBtn {
-	color: var(--tblr-light) !important;
-	&:hover {
-		border: var(--tblr-btn-border-width) solid transparent !important;
-		background: color-mix(in srgb, var(--tblr-btn-hover-bg) 10%, transparent) !important;
-	}
-}
+.btn {
+	color: light-dark(var(--tblr-dark), var(--tblr-light)) !important;
 
-.lightBtn {
-	color: var(--tblr-dark) !important;
 	&:hover {
 		border: var(--tblr-btn-border-width) solid transparent !important;
 		background: color-mix(in srgb, var(--tblr-btn-hover-bg) 10%, transparent) !important;

frontend/src/components/LocalePicker.tsx

@@ -15,11 +15,8 @@ function LocalePicker() {
 		location.reload();
 	};
 
-	const classes = ["btn", "dropdown-toggle", "btn-sm"];
-	let cns = cn(...classes, "btn-ghost-light", styles.lightBtn);
-	if (getTheme() === "dark") {
-		cns = cn(...classes, "btn-ghost-dark", styles.darkBtn);
-	}
+	const classes = ["btn", "dropdown-toggle", "btn-sm", styles.btn];
+	const cns = cn(...classes, getTheme() === "dark" ? "btn-ghost-dark" : "btn-ghost-light");
 
 	return (
 		<div className="dropdown">

frontend/src/context/ThemeContext.tsx

@@ -40,6 +40,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
 
 	useEffect(() => {
 		document.body.dataset.theme = theme;
+		document.body.classList.remove(theme === Light ? Dark : Light);
+		document.body.classList.add(theme);
 		localStorage.setItem(StorageKey, theme);
 	}, [theme]);
 
@@ -53,7 +55,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
 
 	const getTheme = () => {
 		return theme;
-	}
+	};
 
 	document.documentElement.setAttribute("data-bs-theme", theme);
 	return <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, getTheme }}>{children}</ThemeContext.Provider>;