diff --git a/gui/package.json b/gui/package.json
index 80a78d5d34..afeeff9422 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -82,7 +82,7 @@
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "tailwind-gradient-mask-image": "^1.0.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.3.1",
     "vite": "^4.0.3"
   }
 }
diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index 0f58669a09..b537a06dc9 100644
--- a/gui/public/i18n/en/translation.ftl
+++ b/gui/public/i18n/en/translation.ftl
@@ -337,6 +337,7 @@ settings-general-interface-feedback_sound = Feedback sound
 settings-general-interface-feedback_sound-description = This option will play a sound when a reset is triggered
 settings-general-interface-feedback_sound-label = Feedback sound
 settings-general-interface-feedback_sound-volume = Feedback sound volume
+settings-general-interface-theme = Color theme
 settings-general-interface-lang = Select language
 settings-general-interface-lang-description = Change the default language you want to use.
 settings-general-interface-lang-placeholder = Select the language to use
diff --git a/gui/src/components/commons/BaseModal.tsx b/gui/src/components/commons/BaseModal.tsx
index ff6e1caf90..e2861ac19e 100644
--- a/gui/src/components/commons/BaseModal.tsx
+++ b/gui/src/components/commons/BaseModal.tsx
@@ -17,14 +17,16 @@ export function BaseModal({
       overlayClassName={
         props.overlayClassName ||
         classNames(
-          'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center items-center w-full h-full bg-background-90 bg-opacity-60 z-20'
+          'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center',
+          'items-center w-full h-full bg-background-90 bg-opacity-60 z-20'
         )
       }
       className={
         props.className ||
         classNames(
-          props.className as string,
-          'items-center focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent outline-none bg-background-60 p-6 rounded-lg text-white'
+          'items-center focus:ring-transparent focus:ring-offset-transparent',
+          'focus:outline-transparent outline-none bg-background-60 p-6 rounded-lg',
+          'text-background-10'
         )
       }
     >
diff --git a/gui/src/components/commons/Checkbox.tsx b/gui/src/components/commons/Checkbox.tsx
index 71a635d2a4..2727d0b824 100644
--- a/gui/src/components/commons/Checkbox.tsx
+++ b/gui/src/components/commons/Checkbox.tsx
@@ -44,7 +44,7 @@ export function CheckBox({
         <div
           className={classNames(
             {
-              'bg-background-60 rounded-lg text-white': outlined,
+              'bg-background-60 rounded-lg text-background-10': outlined,
               'text-background-30': !outlined,
             },
             'flex items-center gap-2 w-full'
diff --git a/gui/src/components/commons/Dropdown.tsx b/gui/src/components/commons/Dropdown.tsx
index 6aaa1d2e92..21a6e693c0 100644
--- a/gui/src/components/commons/Dropdown.tsx
+++ b/gui/src/components/commons/Dropdown.tsx
@@ -58,7 +58,7 @@ export function Dropdown({
           <div className="relative w-fit">
             <div
               className={classNames(
-                'min-h-[35px] text-white px-5 py-2.5 rounded-md focus:ring-4 text-center',
+                'min-h-[35px] text-background-10 px-5 py-2.5 rounded-md focus:ring-4 text-center',
                 'flex cursor-pointer',
                 variant == 'primary' &&
                   'bg-background-60 hover:bg-background-50',
@@ -109,11 +109,11 @@ export function Dropdown({
                   alignment === 'left' && 'left-0'
                 )}
               >
-                <ul className="py-1 text-sm text-gray-200 flex flex-col pr-2">
+                <ul className="py-1 text-sm text-background-20 flex flex-col pr-2">
                   {items.map((item) => (
                     <li
                       className={classNames(
-                        'py-2 px-4 hover:text-white min-w-max cursor-pointer',
+                        'py-2 px-4 hover:text-background-10 min-w-max cursor-pointer',
                         variant == 'primary' && 'hover:bg-background-50',
                         variant == 'secondary' && 'hover:bg-background-60'
                       )}
diff --git a/gui/src/components/commons/Radio.tsx b/gui/src/components/commons/Radio.tsx
index e71227a9f4..d88480cd11 100644
--- a/gui/src/components/commons/Radio.tsx
+++ b/gui/src/components/commons/Radio.tsx
@@ -35,14 +35,17 @@ export function Radio({
         >
           <input
             type="radio"
-            className="text-accent-background-30 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent"
+            className={classNames(
+              'text-accent-background-30 focus:ring-transparent',
+              'focus:ring-offset-transparent focus:outline-transparent'
+            )}
             name={name}
             ref={ref}
             onChange={onChange}
             value={value}
             checked={value == checked}
             {...props}
-          ></input>
+          />
           <div className="flex flex-col gap-2">
             <Typography bold>{label}</Typography>
             {desciption && (
diff --git a/gui/src/components/commons/ThemeSelector.tsx b/gui/src/components/commons/ThemeSelector.tsx
new file mode 100644
index 0000000000..52af2f2d93
--- /dev/null
+++ b/gui/src/components/commons/ThemeSelector.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { Control, Controller } from 'react-hook-form';
+
+export function ThemeSelector({
+  control,
+  name,
+  value,
+  // input props
+  disabled,
+  colors,
+  ...props
+}: {
+  control: Control<any>;
+  name: string;
+  colors: string | undefined;
+  value: string | number;
+} & React.HTMLProps<HTMLInputElement>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, ref, name, value: checked } }) => (
+        <input
+          type="radio"
+          className={classNames(
+            colors,
+            'focus:ring-transparent focus:ring-offset-transparent',
+            'focus:outline-transparent appearance-none border-4 border-solid',
+            'border-transparent checked:!border-accent-background-30 w-16 h-16'
+          )}
+          style={{
+            WebkitTextFillColor: 'transparent',
+          }}
+          name={name}
+          ref={ref}
+          onChange={onChange}
+          value={value}
+          checked={value == checked}
+          disabled={disabled}
+          {...props}
+        />
+      )}
+    />
+  );
+}
diff --git a/gui/src/components/commons/icon/CloseIcon.tsx b/gui/src/components/commons/icon/CloseIcon.tsx
index 4ecc38a7f3..dabfc08e46 100644
--- a/gui/src/components/commons/icon/CloseIcon.tsx
+++ b/gui/src/components/commons/icon/CloseIcon.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 export function CloseIcon({
   className,
   size = 35,
@@ -9,21 +11,13 @@ export function CloseIcon({
     <svg
       width={size}
       height={size}
-      className={className}
+      className={classNames('stroke-window-icon', className)}
       viewBox="0 0 31 29"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M19.3804 17.8804L12.619 11.119"
-        stroke="#C0A1D8"
-        strokeLinecap="round"
-      />
-      <path
-        d="M12.6196 17.8804L19.381 11.119"
-        stroke="#C0A1D8"
-        strokeLinecap="round"
-      />
+      <path d="M19.3804 17.8804L12.619 11.119" strokeLinecap="round" />
+      <path d="M12.6196 17.8804L19.381 11.119" strokeLinecap="round" />
     </svg>
   );
 }
diff --git a/gui/src/components/commons/icon/MaximiseIcon.tsx b/gui/src/components/commons/icon/MaximiseIcon.tsx
index e5bb192c91..56a54225d0 100644
--- a/gui/src/components/commons/icon/MaximiseIcon.tsx
+++ b/gui/src/components/commons/icon/MaximiseIcon.tsx
@@ -1,17 +1,16 @@
+import classNames from 'classnames';
+
 export function MaximiseIcon({ className }: { className?: string }) {
   return (
     <svg
       width="35"
       height="35"
-      className={className}
+      className={classNames('stroke-window-icon', className)}
       viewBox="0 0 31 29"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M18 11.5H14C13.1716 11.5 12.5 12.1716 12.5 13V17C12.5 17.8284 13.1716 18.5 14 18.5H18C18.8284 18.5 19.5 17.8284 19.5 17V13C19.5 12.1716 18.8284 11.5 18 11.5Z"
-        stroke="#C0A1D8"
-      />
+      <path d="M18 11.5H14C13.1716 11.5 12.5 12.1716 12.5 13V17C12.5 17.8284 13.1716 18.5 14 18.5H18C18.8284 18.5 19.5 17.8284 19.5 17V13C19.5 12.1716 18.8284 11.5 18 11.5Z" />
     </svg>
   );
 }
diff --git a/gui/src/components/commons/icon/MinimiseIcon.tsx b/gui/src/components/commons/icon/MinimiseIcon.tsx
index 9823a06193..7cee44d672 100644
--- a/gui/src/components/commons/icon/MinimiseIcon.tsx
+++ b/gui/src/components/commons/icon/MinimiseIcon.tsx
@@ -1,13 +1,15 @@
+import classNames from 'classnames';
+
 export function MinimiseIcon({ className }: { className?: string }) {
   return (
     <svg
       width="35"
       height="35"
-      className={className}
+      className={classNames('stroke-window-icon', className)}
       viewBox="0 0 31 29"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M20.5 15.5H10.5" stroke="#C0A1D8" strokeLinecap="round" />
+      <path d="M20.5 15.5H10.5" strokeLinecap="round" />
     </svg>
   );
 }
diff --git a/gui/src/components/commons/icon/ResetIcon.tsx b/gui/src/components/commons/icon/ResetIcon.tsx
index ba98310bb1..597f4ce839 100644
--- a/gui/src/components/commons/icon/ResetIcon.tsx
+++ b/gui/src/components/commons/icon/ResetIcon.tsx
@@ -4,19 +4,18 @@ export function FullResetIcon({ width = 33 }: { width?: number }) {
       width={width}
       height="29"
       viewBox="0 0 33 29"
+      className="stroke-background-10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M2.39801 3.061V11.524H10.861"
-        stroke="white"
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M5.93801 18.576C6.85461 21.1713 8.58991 23.3983 10.8824 24.9215C13.1749 26.4447 15.9003 27.1816 18.648 27.021C21.3957 26.8604 24.0168 25.8111 26.1162 24.0312C28.2157 22.2514 29.6797 19.8373 30.2878 17.153C30.8958 14.4686 30.6149 11.6593 29.4874 9.14845C28.3599 6.63762 26.4468 4.56127 24.0365 3.23233C21.6262 1.90339 18.8493 1.39384 16.1242 1.7805C13.3991 2.16715 10.8735 3.42904 8.92801 5.376L2.39301 11.523"
-        stroke="white"
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -31,19 +30,18 @@ export function YawResetIcon({ width = 33 }: { width?: number }) {
       width={width}
       height="29"
       viewBox="0 0 33 29"
+      className="stroke-background-10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M2.39804 3.04599V11.509H10.861"
-        stroke="white"
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M5.93804 18.561C6.85464 21.1563 8.58994 23.3833 10.8824 24.9065C13.1749 26.4297 15.9003 27.1666 18.648 27.006C21.3957 26.8454 24.0168 25.7961 26.1163 24.0162C28.2157 22.2363 29.6798 19.8223 30.2878 17.1379C30.8959 14.4536 30.615 11.6443 29.4874 9.13344C28.3599 6.6226 26.4468 4.54626 24.0365 3.21732C21.6262 1.88837 18.8493 1.37883 16.1242 1.76548C13.3991 2.15213 10.8735 3.41402 8.92804 5.36099L2.39304 11.508"
-        stroke="white"
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -62,19 +60,18 @@ export function MountingResetIcon({ width = 33 }: { width?: number }) {
       width={width}
       height="29"
       viewBox="0 0 33 29"
+      className="stroke-background-10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M2.39801 3.061V11.524H10.861"
-        stroke="white"
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M5.93801 18.576C6.85461 21.1713 8.58991 23.3983 10.8824 24.9215C13.1749 26.4447 15.9003 27.1816 18.648 27.021C21.3957 26.8604 24.0168 25.8111 26.1162 24.0312C28.2157 22.2514 29.6797 19.8373 30.2878 17.153C30.8958 14.4686 30.6149 11.6593 29.4874 9.14845C28.3599 6.63762 26.4468 4.56127 24.0365 3.23233C21.6262 1.90339 18.8493 1.39384 16.1242 1.7805C13.3991 2.16715 10.8735 3.42904 8.92801 5.376L2.39301 11.523"
-        stroke="white"
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/gui/src/components/commons/icon/VRCIcon.tsx b/gui/src/components/commons/icon/VRCIcon.tsx
index 4391f56d4e..8e471c6b69 100644
--- a/gui/src/components/commons/icon/VRCIcon.tsx
+++ b/gui/src/components/commons/icon/VRCIcon.tsx
@@ -3,12 +3,10 @@ export function VRCIcon({ width }: { width?: number }) {
     <svg
       viewBox="100 100 824 824"
       width={width ?? 'fit-content'}
+      className="fill-background-10"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M246.1 418.9h531.8c8.4 0 16 3.4 21.5 8.9s8.9 13.1 8.9 21.5v125.4c0 8.4-3.4 16-8.9 21.5-4.8 4.8-11.1 8-18.1 8.7v46.3c0 10.9-8.8 19-19.5 15.1-3.8-1.4-7.9-4.6-11.9-9.9L709.6 605H246.1c-8.4 0-16-3.4-21.5-8.9s-8.9-13.1-8.9-21.5V449.3c0-8.4 3.4-16 8.9-21.5s13.1-8.9 21.5-8.9zm523.8 174.8h8c5.2 0 10-2.1 13.5-5.6 3.5-3.5 5.6-8.2 5.6-13.5V449.3c0-5.2-2.1-10-5.6-13.5-3.5-3.5-8.2-5.6-13.5-5.6H246.1c-5.2 0-10 2.1-13.5 5.6-3.5 3.5-5.6 8.2-5.6 13.5v125.4c0 5.2 2.1 10 5.6 13.5 3.5 3.5 8.2 5.6 13.5 5.6h469.4c15.8 19.8 31.1 40 46.9 59.8 2.5 3.3 7.7 3.9 7.6-2.5v-57.4h-.1zm-132.3-67.1h23.9l-12-42.2-11.9 42.2zm110.8-74.2H460.6c-10.8 0-19.6 8.8-19.6 19.6v79.7c0 10.8 8.8 19.6 19.6 19.6h287.8c10.8 0 19.6-8.8 19.6-19.6V472c0-10.7-8.8-19.6-19.6-19.6zm-270.3 91.4c2.5 2.6 6.2 3.9 10.9 3.9 3.1 0 5.6-.5 7.4-1.5 1.8-1 3.2-2.2 4.1-3.7.9-1.5 1.5-3.1 1.9-4.7.3-1.7.5-3.3.6-4.7.2-2.1 1.1-3.6 2.8-4.4 1.7-.8 3.7-1.2 6.1-1.2 3.1 0 5.4.6 6.9 1.8 1.5 1.2 2.2 3.5 2.2 7 0 4.1-.8 7.9-2.4 11.3-1.6 3.4-3.9 6.3-6.8 8.6s-6.4 4.1-10.5 5.4c-4 1.3-8.4 1.9-13.2 1.9-4.3 0-8.4-.6-12.2-1.7-3.9-1.1-7.2-3-10.1-5.4-2.9-2.5-5.2-5.7-6.8-9.7-1.7-4-2.5-8.9-2.5-14.7v-38.4c0-5.8.8-10.7 2.5-14.7s4-7.2 6.9-9.7c2.9-2.5 6.3-4.3 10.1-5.4 3.9-1.1 7.9-1.7 12.2-1.7 4.8 0 9.2.6 13.2 1.9 4 1.2 7.5 3 10.4 5.2 2.9 2.2 5.1 5 6.7 8.3 1.6 3.3 2.4 6.9 2.4 10.8 0 3.6-.7 5.9-2.2 7.1-1.5 1.1-3.7 1.7-6.7 1.7-2.6 0-4.7-.4-6.3-1.2-1.7-.8-2.5-2.3-2.6-4.4-.1-1.1-.3-2.4-.6-3.9s-.9-3-1.9-4.5c-1-1.5-2.4-2.7-4.2-3.7-1.8-1-4.4-1.5-7.7-1.5-4.7 0-8.3 1.3-10.7 3.9-2.5 2.6-3.7 6.6-3.7 12v38.4c0 5.1 1.3 9.1 3.8 11.6zm122.7 13.1c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-39.5h-31v39.5c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-89.4c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v35.9h31v-35.9c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v89.4zm86 1.2c-.7.9-1.7 1.7-2.8 2.3-1.1.7-2.3 1.2-3.6 1.6-1.3.4-2.6.6-3.8.6-1.6 0-2.9-.3-3.9-.8-1.1-.6-1.8-1.5-2.1-2.8l-5.2-18.3h-31.5l-5.2 18.3c-.4 1.3-1.1 2.2-2.1 2.8-1.1.5-2.4.8-3.9.8-1.2 0-2.5-.2-3.8-.6-1.3-.4-2.5-.9-3.6-1.5s-2-1.4-2.8-2.3c-.7-.9-1.1-1.9-1.1-3 0-.2.1-.6.3-1.4l26.6-86.5c.6-2.1 2.1-3.6 4.3-4.6 2.2-1 4.6-1.4 7.2-1.4 2.7 0 5.1.5 7.3 1.4 2.2 1 3.6 2.5 4.3 4.6l26.6 86.5c.2.7.3 1.2.3 1.4-.4 1-.7 2-1.5 2.9zm65-82.5c-1 1.7-2.4 2.5-4.2 2.5h-20.1v78.8c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-78.8h-20.2c-1.8 0-3.2-.8-4.2-2.4-1-1.6-1.4-3.5-1.4-5.7 0-1.9.5-3.7 1.4-5.4.9-1.7 2.3-2.5 4.3-2.5h58.2c1.9 0 3.3.8 4.3 2.5.9 1.7 1.4 3.5 1.4 5.4-.2 2.1-.7 3.9-1.6 5.6zm-495.2-4.8 26.6 86.5c.7 2.1 2.2 3.6 4.3 4.6 2.2 1 4.6 1.4 7.2 1.4 2.7 0 5.1-.5 7.3-1.4 2.2-1 3.6-2.5 4.3-4.6l26.4-86.5c.2-.7.3-1.2.3-1.4 0-1.1-.4-2.1-1.1-3-.7-.9-1.7-1.7-2.8-2.3-1.1-.7-2.3-1.2-3.6-1.6-1.3-.4-2.6-.5-3.8-.5-1.6 0-2.9.3-3.9.8-1.1.5-1.8 1.5-2.1 2.8l-20.9 74.6-21-74.6c-.4-1.3-1.1-2.2-2.1-2.8-1.1-.6-2.4-.8-3.9-.8-1.2 0-2.5.2-3.8.5-1.3.4-2.5.9-3.6 1.5s-2 1.4-2.8 2.3c-.7.9-1.1 1.9-1.1 3-.2.3-.1.7.1 1.5zm86.9-3.3c0-1.5.5-2.8 1.6-3.9s2.5-1.7 4.2-1.7h27.2c4.5 0 8.7.5 12.7 1.4 3.9 1 7.4 2.5 10.4 4.7s5.3 5.1 7 8.8c1.7 3.7 2.5 8.3 2.5 13.8 0 7.9-1.7 14.1-5.2 18.5-3.4 4.4-7.7 7.5-12.9 9l18 33.4c.3.4.5.8.5 1.2.1.4.1.8.1 1 0 1.1-.3 2.2-1 3.4-.7 1.1-1.6 2.2-2.6 3-1.1.9-2.2 1.6-3.6 2.1-1.3.6-2.6.8-3.9.8-1.3 0-2.5-.4-3.5-1.1-1.1-.7-1.9-1.8-2.7-3.2l-19.5-38h-11.6v35.9c0 1.8-.9 3.2-2.8 4.2-1.8 1-3.9 1.4-6.2 1.4-2.2 0-4.2-.5-6.1-1.4-1.9-1-2.8-2.4-2.8-4.2v-89.1h.2zm17.9 10.2V507h15.1c4.5 0 8.1-1.1 10.7-3.2 2.7-2.2 4-5.9 4-11.3s-1.3-9.2-4-11.4c-2.7-2.2-6.2-3.3-10.7-3.3h-15.1v-.1z"
-        fill="#fff"
-      />
+      <path d="M246.1 418.9h531.8c8.4 0 16 3.4 21.5 8.9s8.9 13.1 8.9 21.5v125.4c0 8.4-3.4 16-8.9 21.5-4.8 4.8-11.1 8-18.1 8.7v46.3c0 10.9-8.8 19-19.5 15.1-3.8-1.4-7.9-4.6-11.9-9.9L709.6 605H246.1c-8.4 0-16-3.4-21.5-8.9s-8.9-13.1-8.9-21.5V449.3c0-8.4 3.4-16 8.9-21.5s13.1-8.9 21.5-8.9zm523.8 174.8h8c5.2 0 10-2.1 13.5-5.6 3.5-3.5 5.6-8.2 5.6-13.5V449.3c0-5.2-2.1-10-5.6-13.5-3.5-3.5-8.2-5.6-13.5-5.6H246.1c-5.2 0-10 2.1-13.5 5.6-3.5 3.5-5.6 8.2-5.6 13.5v125.4c0 5.2 2.1 10 5.6 13.5 3.5 3.5 8.2 5.6 13.5 5.6h469.4c15.8 19.8 31.1 40 46.9 59.8 2.5 3.3 7.7 3.9 7.6-2.5v-57.4h-.1zm-132.3-67.1h23.9l-12-42.2-11.9 42.2zm110.8-74.2H460.6c-10.8 0-19.6 8.8-19.6 19.6v79.7c0 10.8 8.8 19.6 19.6 19.6h287.8c10.8 0 19.6-8.8 19.6-19.6V472c0-10.7-8.8-19.6-19.6-19.6zm-270.3 91.4c2.5 2.6 6.2 3.9 10.9 3.9 3.1 0 5.6-.5 7.4-1.5 1.8-1 3.2-2.2 4.1-3.7.9-1.5 1.5-3.1 1.9-4.7.3-1.7.5-3.3.6-4.7.2-2.1 1.1-3.6 2.8-4.4 1.7-.8 3.7-1.2 6.1-1.2 3.1 0 5.4.6 6.9 1.8 1.5 1.2 2.2 3.5 2.2 7 0 4.1-.8 7.9-2.4 11.3-1.6 3.4-3.9 6.3-6.8 8.6s-6.4 4.1-10.5 5.4c-4 1.3-8.4 1.9-13.2 1.9-4.3 0-8.4-.6-12.2-1.7-3.9-1.1-7.2-3-10.1-5.4-2.9-2.5-5.2-5.7-6.8-9.7-1.7-4-2.5-8.9-2.5-14.7v-38.4c0-5.8.8-10.7 2.5-14.7s4-7.2 6.9-9.7c2.9-2.5 6.3-4.3 10.1-5.4 3.9-1.1 7.9-1.7 12.2-1.7 4.8 0 9.2.6 13.2 1.9 4 1.2 7.5 3 10.4 5.2 2.9 2.2 5.1 5 6.7 8.3 1.6 3.3 2.4 6.9 2.4 10.8 0 3.6-.7 5.9-2.2 7.1-1.5 1.1-3.7 1.7-6.7 1.7-2.6 0-4.7-.4-6.3-1.2-1.7-.8-2.5-2.3-2.6-4.4-.1-1.1-.3-2.4-.6-3.9s-.9-3-1.9-4.5c-1-1.5-2.4-2.7-4.2-3.7-1.8-1-4.4-1.5-7.7-1.5-4.7 0-8.3 1.3-10.7 3.9-2.5 2.6-3.7 6.6-3.7 12v38.4c0 5.1 1.3 9.1 3.8 11.6zm122.7 13.1c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-39.5h-31v39.5c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-89.4c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v35.9h31v-35.9c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v89.4zm86 1.2c-.7.9-1.7 1.7-2.8 2.3-1.1.7-2.3 1.2-3.6 1.6-1.3.4-2.6.6-3.8.6-1.6 0-2.9-.3-3.9-.8-1.1-.6-1.8-1.5-2.1-2.8l-5.2-18.3h-31.5l-5.2 18.3c-.4 1.3-1.1 2.2-2.1 2.8-1.1.5-2.4.8-3.9.8-1.2 0-2.5-.2-3.8-.6-1.3-.4-2.5-.9-3.6-1.5s-2-1.4-2.8-2.3c-.7-.9-1.1-1.9-1.1-3 0-.2.1-.6.3-1.4l26.6-86.5c.6-2.1 2.1-3.6 4.3-4.6 2.2-1 4.6-1.4 7.2-1.4 2.7 0 5.1.5 7.3 1.4 2.2 1 3.6 2.5 4.3 4.6l26.6 86.5c.2.7.3 1.2.3 1.4-.4 1-.7 2-1.5 2.9zm65-82.5c-1 1.7-2.4 2.5-4.2 2.5h-20.1v78.8c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-78.8h-20.2c-1.8 0-3.2-.8-4.2-2.4-1-1.6-1.4-3.5-1.4-5.7 0-1.9.5-3.7 1.4-5.4.9-1.7 2.3-2.5 4.3-2.5h58.2c1.9 0 3.3.8 4.3 2.5.9 1.7 1.4 3.5 1.4 5.4-.2 2.1-.7 3.9-1.6 5.6zm-495.2-4.8 26.6 86.5c.7 2.1 2.2 3.6 4.3 4.6 2.2 1 4.6 1.4 7.2 1.4 2.7 0 5.1-.5 7.3-1.4 2.2-1 3.6-2.5 4.3-4.6l26.4-86.5c.2-.7.3-1.2.3-1.4 0-1.1-.4-2.1-1.1-3-.7-.9-1.7-1.7-2.8-2.3-1.1-.7-2.3-1.2-3.6-1.6-1.3-.4-2.6-.5-3.8-.5-1.6 0-2.9.3-3.9.8-1.1.5-1.8 1.5-2.1 2.8l-20.9 74.6-21-74.6c-.4-1.3-1.1-2.2-2.1-2.8-1.1-.6-2.4-.8-3.9-.8-1.2 0-2.5.2-3.8.5-1.3.4-2.5.9-3.6 1.5s-2 1.4-2.8 2.3c-.7.9-1.1 1.9-1.1 3-.2.3-.1.7.1 1.5zm86.9-3.3c0-1.5.5-2.8 1.6-3.9s2.5-1.7 4.2-1.7h27.2c4.5 0 8.7.5 12.7 1.4 3.9 1 7.4 2.5 10.4 4.7s5.3 5.1 7 8.8c1.7 3.7 2.5 8.3 2.5 13.8 0 7.9-1.7 14.1-5.2 18.5-3.4 4.4-7.7 7.5-12.9 9l18 33.4c.3.4.5.8.5 1.2.1.4.1.8.1 1 0 1.1-.3 2.2-1 3.4-.7 1.1-1.6 2.2-2.6 3-1.1.9-2.2 1.6-3.6 2.1-1.3.6-2.6.8-3.9.8-1.3 0-2.5-.4-3.5-1.1-1.1-.7-1.9-1.8-2.7-3.2l-19.5-38h-11.6v35.9c0 1.8-.9 3.2-2.8 4.2-1.8 1-3.9 1.4-6.2 1.4-2.2 0-4.2-.5-6.1-1.4-1.9-1-2.8-2.4-2.8-4.2v-89.1h.2zm17.9 10.2V507h15.1c4.5 0 8.1-1.1 10.7-3.2 2.7-2.2 4-5.9 4-11.3s-1.3-9.2-4-11.4c-2.7-2.2-6.2-3.3-10.7-3.3h-15.1v-.1z" />
     </svg>
   );
 }
diff --git a/gui/src/components/settings/pages/GeneralSettings.tsx b/gui/src/components/settings/pages/GeneralSettings.tsx
index 69f7798809..7e586c265e 100644
--- a/gui/src/components/settings/pages/GeneralSettings.tsx
+++ b/gui/src/components/settings/pages/GeneralSettings.tsx
@@ -26,6 +26,7 @@ import { WrenchIcon } from '../../commons/icon/WrenchIcons';
 import { LangSelector } from '../../commons/LangSelector';
 import { NumberSelector } from '../../commons/NumberSelector';
 import { Radio } from '../../commons/Radio';
+import { ThemeSelector } from '../../commons/ThemeSelector';
 import { Typography } from '../../commons/Typography';
 import { SettingsPageLayout } from '../SettingsPageLayout';
 
@@ -77,6 +78,7 @@ interface SettingsForm {
     watchNewDevices: boolean;
     feedbackSound: boolean;
     feedbackSoundVolume: number;
+    theme: string;
   };
 }
 
@@ -123,6 +125,7 @@ const defaultValues = {
     watchNewDevices: true,
     feedbackSound: true,
     feedbackSoundVolume: 0.5,
+    theme: 'slime',
   },
 };
 
@@ -207,6 +210,7 @@ export function GeneralSettings() {
       watchNewDevices: values.interface.watchNewDevices,
       feedbackSound: values.interface.feedbackSound,
       feedbackSoundVolume: values.interface.feedbackSoundVolume,
+      theme: values.interface.theme,
     });
   };
 
@@ -226,6 +230,7 @@ export function GeneralSettings() {
         watchNewDevices: config?.watchNewDevices,
         feedbackSound: config?.feedbackSound,
         feedbackSoundVolume: config?.feedbackSoundVolume,
+        theme: config?.theme,
       },
     };
 
@@ -905,7 +910,25 @@ export function GeneralSettings() {
               step={0.1}
             />
           </div>
-
+          <div className="pb-4">
+            <Typography bold>
+              {l10n.getString('settings-general-interface-theme')}
+            </Typography>
+            <div className="flex md:flex-row flex-col gap-3 pt-2">
+              <ThemeSelector
+                control={control}
+                name="interface.theme"
+                value={'slime'}
+                colors="!bg-slime"
+              ></ThemeSelector>
+              <ThemeSelector
+                control={control}
+                name="interface.theme"
+                value={'trans'}
+                colors="!bg-trans-flag"
+              ></ThemeSelector>
+            </div>
+          </div>
           <Typography bold>
             {l10n.getString('settings-general-interface-lang')}
           </Typography>
diff --git a/gui/src/hooks/config.ts b/gui/src/hooks/config.ts
index c32bd214e4..f85606cd76 100644
--- a/gui/src/hooks/config.ts
+++ b/gui/src/hooks/config.ts
@@ -18,6 +18,7 @@ export interface Config {
   devSettings: DeveloperModeWidgetForm;
   feedbackSound: boolean;
   feedbackSoundVolume: number;
+  theme: string;
 }
 
 export interface ConfigContext {
@@ -33,6 +34,7 @@ const defaultConfig: Partial<Config> = {
   watchNewDevices: true,
   feedbackSound: true,
   feedbackSoundVolume: 0.5,
+  theme: 'slime',
 };
 
 function fallbackToDefaults(loadedConfig: any): Config {
@@ -52,6 +54,9 @@ export function useConfigProvider(): ConfigContext {
         }
       : null;
     set(newConfig as Config);
+    if ('theme' in config) {
+      document.documentElement.dataset.theme = config.theme;
+    }
 
     if (!debounceTimer.current) {
       debounceTimer.current = setTimeout(async () => {
@@ -85,6 +90,7 @@ export function useConfigProvider(): ConfigContext {
 
         const loadedConfig = fallbackToDefaults(JSON.parse(json));
         set(loadedConfig);
+        document.documentElement.dataset.theme = loadedConfig.theme;
         setLoading(false);
         return loadedConfig;
       } catch (e) {
diff --git a/gui/src/index.css b/gui/src/index.css
index 327c7987a7..3aac76e59c 100644
--- a/gui/src/index.css
+++ b/gui/src/index.css
@@ -39,11 +39,64 @@ body {
   font-display: swap;
 }
 
-html {
+:root {
   overflow: hidden;
   background: theme('colors.background.20');
 }
 
+/* Colors have to be in RGB format currently */
+:root {
+  --background-10: 255, 255, 255;
+  --background-20: 120, 164, 198;
+  --background-30: 96, 138, 171;
+  --background-40: 61, 99, 129;
+  --background-50: 26, 61, 89;
+  --background-60: 17, 45, 67;
+  --background-70: 8, 30, 48;
+  --background-80: 0, 16, 28;
+  --background-90: 0, 5, 9;
+
+  --accent-background-10: 187, 138, 229;
+  --accent-background-20: 157, 92, 212;
+  --accent-background-30: 101, 69, 154;
+  --accent-background-40: 98, 59, 131;
+  --accent-background-50: 46, 33, 69;
+
+  --success: 80, 232, 151;
+  --warning: 216, 205, 55;
+  --critical: 223, 109, 140;
+  --special: 164, 79, 237;
+  --window-icon-stroke: 192, 161, 216;
+
+  --default-color: 255, 255, 255;
+}
+
+:root[data-theme='trans'] {
+  --background-10: 77, 34, 43;
+  --background-20: 26, 102, 130;
+  --background-30: 9, 84, 112;
+  --background-40: 79, 159, 189;
+  --background-50: 238, 238, 238;
+  --background-60: 255, 255, 255;
+  --background-70: 245, 169, 184;
+  --background-80: 91, 206, 250;
+  --background-90: 0, 5, 9;
+
+  --accent-background-10: 181, 58, 82;
+  --accent-background-20: 252, 202, 212;
+  --accent-background-30: 247, 183, 196;
+  --accent-background-40: 247, 183, 196;
+  --accent-background-50: 245, 169, 184;
+
+  --success: 68, 194, 127;
+  --warning: 240, 221, 58;
+  --critical: 223, 109, 140;
+  --special: 164, 79, 237;
+  --window-icon-stroke: 28, 154, 201;
+
+  --default-color: 29, 29, 29;
+}
+
 #root {
   height: 100%;
 }
diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs
index 8b4e9d7257..991b840dd0 100644
--- a/gui/tailwind.config.cjs
+++ b/gui/tailwind.config.cjs
@@ -21,6 +21,26 @@ const colors = {
     700: '#623B83',
     900: '#2E2145',
   },
+  'trans-blue': {
+    100: '#4D222B', // Dark text
+    200: '#1A6682', // Some lighter-ish text
+    300: '#095470', // Light-ish text
+    400: '#4F9FBD', // Button hover in some places
+    500: '#EEEEEE', // Darker trans white tracker list background
+    600: '#FFFFFF', // Trans white tracker list background and some buttons
+    700: '#F5A9B8', // Trans pink home background
+    800: '#5BCEFA', // Trans blue trans outer background
+    900: '#000509',
+  },
+  'trans-pink': {
+    100: '#B53A52', // Accent text
+    200: '#FCCAD4', // Lighter trans pink button
+    300: '#F7B7C4', // Somewhat lighter trans pink button
+    400: '#F7B7C4', // Somewhat lighter trans pink button
+    500: '#F5A9B8', // Trans pink buttons
+    700: '#FA91A6', // Darker trans pink button
+    900: '#F77C94', // Even darker trans pink home bottom
+  },
 };
 
 module.exports = {
@@ -36,26 +56,33 @@ module.exports = {
     extend: {
       colors: {
         status: {
-          success: '#50E897',
-          warning: '#D8CD37',
-          critical: '#DF6D8C',
-          special: '#A44FED',
+          success: 'rgb(var(--success), <alpha-value>)',
+          warning: 'rgb(var(--warning), <alpha-value>)',
+          critical: 'rgb(var(--critical), <alpha-value>)',
+          special: 'rgb(var(--special), <alpha-value>)',
+        },
+        window: {
+          icon: 'rgb(var(--window-icon-stroke), <alpha-value>)',
         },
         ...colors,
-        background: Object.keys(colors['blue-gray']).reduce(
-          (curr, colork, index) => ({
-            ...curr,
-            [(index + 1) * 10]: colors['blue-gray'][colork],
-          }),
-          {}
-        ),
-        'accent-background': Object.keys(colors.purple).reduce(
-          (curr, colork, index) => ({
-            ...curr,
-            [(index + 1) * 10]: colors.purple[colork],
-          }),
-          {}
-        ),
+        background: {
+          10: 'rgb(var(--background-10), <alpha-value>)',
+          20: 'rgb(var(--background-20), <alpha-value>)',
+          30: 'rgb(var(--background-30), <alpha-value>)',
+          40: 'rgb(var(--background-40), <alpha-value>)',
+          50: 'rgb(var(--background-50), <alpha-value>)',
+          60: 'rgb(var(--background-60), <alpha-value>)',
+          70: 'rgb(var(--background-70), <alpha-value>)',
+          80: 'rgb(var(--background-80), <alpha-value>)',
+          90: 'rgb(var(--background-90), <alpha-value>)',
+        },
+        'accent-background': {
+          10: 'rgb(var(--accent-background-10), <alpha-value>)',
+          20: 'rgb(var(--accent-background-20), <alpha-value>)',
+          30: 'rgb(var(--accent-background-30), <alpha-value>)',
+          40: 'rgb(var(--accent-background-40), <alpha-value>)',
+          50: 'rgb(var(--accent-background-50), <alpha-value>)',
+        },
       },
       fontSize: {
         DEFAULT: rem(12),
@@ -64,7 +91,7 @@ module.exports = {
         DEFAULT: 500,
       },
       color: {
-        DEFAULT: '#ffffff',
+        DEFAULT: 'rgb(var(--default-color), <alpha-value>)',
       },
       keyframes: {
         bounce: {
@@ -78,12 +105,16 @@ module.exports = {
           },
         },
       },
+      backgroundImage: {
+        'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`,
+        slime: `linear-gradient(135deg, ${colors.purple[100]} 50%, ${colors['blue-gray'][700]} 50% 100%)`,
+      },
     },
   },
   plugins: [
     require('@tailwindcss/forms'),
     require('tailwind-gradient-mask-image'),
-    plugin(function ({ addUtilities, theme }) {
+    plugin(function ({ addUtilities }) {
       const textConfig = (fontSize, fontWeight) => ({
         fontSize,
         fontWeight,
diff --git a/package-lock.json b/package-lock.json
index fb4eeb4171..c1f8f49e59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,7 +71,7 @@
         "prettier": "^2.7.1",
         "pretty-quick": "^3.1.3",
         "tailwind-gradient-mask-image": "^1.0.0",
-        "tailwindcss": "^3.0.23",
+        "tailwindcss": "^3.3.1",
         "vite": "^4.0.3"
       }
     },
@@ -3664,38 +3664,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
-    "node_modules/acorn-node/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/address": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
@@ -3749,6 +3717,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -4485,15 +4459,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/defined": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -4523,23 +4488,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
-      "dependencies": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "detective": "bin/detective.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -6488,6 +6436,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-sdsl": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -6837,6 +6794,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -7212,6 +7180,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-up": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
@@ -8823,6 +8800,56 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz",
+      "integrity": "sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8882,34 +8909,35 @@
       "dev": true
     },
     "node_modules/tailwindcss": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
-      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz",
+      "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
+        "jiti": "^1.17.2",
         "lilconfig": "^2.0.6",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.18",
+        "postcss": "^8.0.9",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
         "postcss-nested": "6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "resolve": "^1.22.1"
+        "resolve": "^1.22.1",
+        "sucrase": "^3.29.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -9011,6 +9039,27 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/three": {
       "version": "0.148.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz",
@@ -9045,6 +9094,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/ts-node": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz",
@@ -9512,15 +9567,6 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -11952,31 +11998,6 @@
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "requires": {}
     },
-    "acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
-      "requires": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
-        }
-      }
-    },
-    "acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
-    },
     "address": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
@@ -12012,6 +12033,12 @@
         "color-convert": "^2.0.1"
       }
     },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -12527,12 +12554,6 @@
         "object-keys": "^1.1.1"
       }
     },
-    "defined": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true
-    },
     "detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -12557,17 +12578,6 @@
         }
       }
     },
-    "detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
-      "requires": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      }
-    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -13964,6 +13974,12 @@
         }
       }
     },
+    "jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true
+    },
     "js-sdsl": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -14223,6 +14239,17 @@
         "minimatch": "^3.0.4"
       }
     },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -14475,6 +14502,12 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true
     },
+    "pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true
+    },
     "pkg-up": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
@@ -15554,6 +15587,42 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "sucrase": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz",
+      "integrity": "sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -15598,34 +15667,35 @@
       "dev": true
     },
     "tailwindcss": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
-      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz",
+      "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==",
       "dev": true,
       "requires": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
+        "jiti": "^1.17.2",
         "lilconfig": "^2.0.6",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.18",
+        "postcss": "^8.0.9",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
         "postcss-nested": "6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "resolve": "^1.22.1"
+        "resolve": "^1.22.1",
+        "sucrase": "^3.29.0"
       },
       "dependencies": {
         "arg": {
@@ -15684,6 +15754,24 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
     "three": {
       "version": "0.148.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz",
@@ -15712,6 +15800,12 @@
         "is-number": "^7.0.0"
       }
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "ts-node": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz",
@@ -16012,12 +16106,6 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
-    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",