Dark UI for react-select

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">