From f39efb3e6337229348b35fea6ce04708a1944e29 Mon Sep 17 00:00:00 2001
From: Jamie Curnow <jc@jc21.com>
Date: Mon, 22 Sep 2025 23:14:00 +1000
Subject: [PATCH] Dark UI for react-select

---
 frontend/src/App.css                          | 53 +++++++++++++++++++
 .../src/components/Form/DNSProviderFields.tsx |  2 +
 .../src/components/Form/DomainNamesField.tsx  |  2 +
 .../components/Form/SSLCertificateField.tsx   |  2 +
 .../src/components/Form/SSLOptionsFields.tsx  |  2 +-
 .../src/components/LocalePicker.module.css    | 11 +---
 frontend/src/components/LocalePicker.tsx      |  7 +--
 frontend/src/context/ThemeContext.tsx         |  4 +-
 8 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 59677e8c..0a410b28 100644
--- a/frontend/src/App.css
+++ b/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);
+			}
+		}
+	}
+}
diff --git a/frontend/src/components/Form/DNSProviderFields.tsx b/frontend/src/components/Form/DNSProviderFields.tsx
index 3ac36eaf..bb9eef55 100644
--- a/frontend/src/components/Form/DNSProviderFields.tsx
+++ b/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}
diff --git a/frontend/src/components/Form/DomainNamesField.tsx b/frontend/src/components/Form/DomainNamesField.tsx
index 54ded002..1b1452c2 100644
--- a/frontend/src/components/Form/DomainNamesField.tsx
+++ b/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}
diff --git a/frontend/src/components/Form/SSLCertificateField.tsx b/frontend/src/components/Form/SSLCertificateField.tsx
index d2b4f806..4ab74f2b 100644
--- a/frontend/src/components/Form/SSLCertificateField.tsx
+++ b/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 }}
diff --git a/frontend/src/components/Form/SSLOptionsFields.tsx b/frontend/src/components/Form/SSLOptionsFields.tsx
index 91b38dea..e8f4efdf 100644
--- a/frontend/src/components/Form/SSLOptionsFields.tsx
+++ b/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>
diff --git a/frontend/src/components/LocalePicker.module.css b/frontend/src/components/LocalePicker.module.css
index 2233d2f8..6f39e7fa 100644
--- a/frontend/src/components/LocalePicker.module.css
+++ b/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;
diff --git a/frontend/src/components/LocalePicker.tsx b/frontend/src/components/LocalePicker.tsx
index ee4890cf..7c3876d8 100644
--- a/frontend/src/components/LocalePicker.tsx
+++ b/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">
diff --git a/frontend/src/context/ThemeContext.tsx b/frontend/src/context/ThemeContext.tsx
index 648d9856..e01ad022 100644
--- a/frontend/src/context/ThemeContext.tsx
+++ b/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>;