Add theming support

src/Facepile.module.css

@@ -8,7 +8,7 @@
   width: 20px;
   height: 20px;
   border-radius: 20px;
-  background-color: #0dbd8b;
+  background-color: var(--primaryColor);
 }
 
 .facepile .avatar > * {

src/Home.module.css

@@ -7,14 +7,14 @@
   display: flex;
   cursor: pointer;
   text-decoration: none;
-  color: white;
+  color: var(--textColor1);
   align-items: center;
 }
 
 .roomListItem:hover {
   background-color: rgba(141, 151, 165, 0.2);
   border-radius: 8px;
-  color: white;
+  color: var(--textColor1);
 }
 
 .roomAvatar {

src/Input.module.css

@@ -39,8 +39,8 @@
   border: none;
   border-radius: 4px;
   padding: 8px 9px;
-  color: white;
-  background-color: #21262c;
+  color: var(--textColor1);
+  background-color: var(--bgColor2);
   flex: 1;
   min-width: 0;
 }
@@ -58,7 +58,7 @@
 .inputField label {
   transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
     top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
-  color: white;
+  color: var(--textColor1);
   background-color: transparent;
   font-size: 14px;
   position: absolute;
@@ -83,7 +83,7 @@
 
 .inputField input:focus + label,
 .inputField input:not(:placeholder-shown) + label {
-  background-color: #21262c;
+  background-color: var(--bgColor2);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
   font-size: 10px;
@@ -138,8 +138,8 @@
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox {
-  background: #0dbd8b;
-  border-color: #0dbd8b;
+  background: var(--primaryColor);
+  border-color: var(--primaryColor);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
@@ -152,7 +152,7 @@
   border-radius: 8px;
   font-size: 14px;
   color: #fff;
-  background-color: #0dbd8b;
+  background-color: var(--primaryColor);
   width: auto;
   padding: 7px 15px;
   cursor: pointer;

src/Layout.module.css

@@ -13,11 +13,11 @@
 }
 
 .modal {
-  color: white;
+  color: var(--textColor1);
   border-radius: 8px;
   padding: 25px 60px;
   max-width: 400px;
-  background-color: #21262c;
+  background-color: var(--bgColor2);
   flex: 1;
   margin-bottom: 20px;
 }

src/Room.module.css

@@ -38,7 +38,7 @@ limitations under the License.
   max-height: 225px;
   border-radius: 24px;
   overflow: hidden;
-  background-color: #444;
+  background-color: var(--bgColor3);
   margin: 40px 20px 20px 20px;
 }
 

src/RoomButton.module.css

@@ -93,7 +93,7 @@ limitations under the License.
   left: 50%;
   transform: translate(0, -100%);
   top: -5px;
-  background-color: #394049;
+  background-color: var(--bgColor4);
   border-radius: 8px;
   overflow: hidden;
 }
@@ -111,7 +111,7 @@ limitations under the License.
 }
 
 .dropdownContainer li:hover {
-  background-color: #8d97a5;
+  background-color: var(--bgColor5);
 }
 
 .dropdownActiveItem {

src/index.css

@@ -23,6 +23,13 @@ limitations under the License.
 :root {
   --inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
     U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
+  --primaryColor: #0dbd8b;
+  --bgColor1: #15191e;
+  --bgColor2: #21262c;
+  --bgColor3: #444;
+  --bgColor4: #394049;
+  --bgColor5: #8d97a5;
+  --textColor1: #fff;
 }
 
 @font-face {
@@ -106,8 +113,8 @@ limitations under the License.
 }
 
 body {
-  background-color: #15191e;
-  color: #fff;
+  background-color: var(--bgColor1);
+  color: var(--textColor1);
   margin: 0;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",

src/main.jsx

@@ -22,6 +22,16 @@ import App from "./App";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 
+if (import.meta.env.VITE_CUSTOM_THEME) {
+  const style = document.documentElement.style;
+  style.setProperty("--primaryColor", import.meta.env.VITE_PRIMARY_COLOR);
+  style.setProperty("--bgColor1", import.meta.env.VITE_BG_COLOR_1);
+  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("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
+}
+
 const history = createBrowserHistory();
 
 Sentry.init({