Add input theming

.env

@@ -16,4 +16,7 @@
 # VITE_BG_COLOR_2=#f0f1f4
 # VITE_BG_COLOR_3=#dbdfe4
 # VITE_BG_COLOR_4=#d1d3d7
-# VITE_TEXT_COLOR_1=#000000
+# VITE_INPUT_BORDER_COLOR=#e7e7e7
+# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
+# VITE_TEXT_COLOR_1=#17191c
+# VITE_TEXT_COLOR_2=#61708b

src/Input.module.css

@@ -30,7 +30,7 @@
 .inputField {
   border-radius: 4px;
   transition: border-color 0.25s;
-  border: 1px solid #394049;
+  border: 1px solid var(--inputBorderColor);
 }
 
 .inputField input {
@@ -52,7 +52,7 @@
 
 .inputField input:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
-  color: #6f7882;
+  color: var(--textColor2);
 }
 
 .inputField label {
@@ -74,7 +74,7 @@
 }
 
 .inputField:focus-within {
-  border-color: #0086e6;
+  border-color: var(--inputBorderColorFocused);
 }
 
 .inputField input:focus {
@@ -93,7 +93,7 @@
 }
 
 .inputField input:focus + label {
-  color: #0086e6;
+  color: var(--inputBorderColorFocused);
 }
 
 .checkboxField {

src/index.css

@@ -30,6 +30,9 @@ limitations under the License.
   --bgColor4: #394049;
   --bgColor5: #8d97a5;
   --textColor1: #fff;
+  --textColor2: #6f7882;
+  --inputBorderColor: #394049;
+  --inputBorderColorFocused: #0086e6;
 }
 
 @font-face {

src/main.jsx

@@ -29,7 +29,17 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
   style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2);
   style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3);
   style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4);
+  style.setProperty("--bgColor5", import.meta.env.VITE_BG_COLOR_5);
   style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
+  style.setProperty("--textColor2", import.meta.env.VITE_TEXT_COLOR_2);
+  style.setProperty(
+    "--inputBorderColor",
+    import.meta.env.VITE_INPUT_BORDER_COLOR
+  );
+  style.setProperty(
+    "--inputBorderColorFocused",
+    import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED
+  );
 }
 
 const history = createBrowserHistory();