diff --git a/src/App.vue b/src/App.vue
index 1c83b6eb..02f421e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,10 +14,7 @@
   :class=`[
     "s-app",
     "u-appearance",
-    {
-      "u-appearance--light": !isDarkMode,
-      "u-appearance--dark": isDarkMode
-    }
+    "u-appearance--" + session.appearance
   ]`
 )
   base-alert
@@ -32,6 +29,7 @@
 <script lang="ts">
 // PROJECT: STORES
 import Store from "@/store";
+import { SessionAppearance } from "@/store/tables/session";
 
 export default {
   name: "App",
@@ -46,21 +44,8 @@ export default {
   },
 
   computed: {
-    isDarkMode(): boolean {
-      const theme = this.settings.appearance?.theme || "system";
-
-      // Forced dark mode?
-      if (theme === "dark") {
-        return true;
-      }
-
-      // User prefers dark mode?
-      if (theme === "system" && this.hasSystemDarkMode === true) {
-        return true;
-      }
-
-      // Default to light mode
-      return false;
+    session(): typeof Store.$session {
+      return Store.$session;
     },
 
     settings(): typeof Store.$settings {
@@ -76,16 +61,43 @@ export default {
   mounted() {
     // Start watching for dark mode changes
     this.setupListenerSystemDarkMode();
+
+    // Bind settings appearance theme handler
+    Store.$settings
+      .events()
+      .on("appearance:theme", this.onSettingsAppearanceTheme);
   },
 
   unmounted() {
     // Stop watching for dark mode changes
     this.unsetupListenerSystemDarkMode();
+
+    // Unbind settings appearance theme handler
+    Store.$settings
+      .events()
+      .off("appearance:theme", this.onSettingsAppearanceTheme);
   },
 
   methods: {
     // --> HELPERS <--
 
+    refreshEffectiveAppearance(): void {
+      // Acquire effective appearance
+      const theme = this.settings.appearance?.theme || "system";
+
+      // Forced dark mode, or user prefers dark mode?
+      if (
+        theme === "dark" ||
+        (theme === "system" && this.hasSystemDarkMode === true)
+      ) {
+        // Update appearance to dark in session store
+        this.session.setAppearance(SessionAppearance.Dark);
+      } else {
+        // Update appearance to light in session store
+        this.session.setAppearance(SessionAppearance.Light);
+      }
+    },
+
     initializeSystemDarkMode(): void {
       this.matchMediaDarkMode = window.matchMedia
         ? window.matchMedia("(prefers-color-scheme: dark)")
@@ -118,6 +130,14 @@ export default {
 
     onSystemDarkModeChange({ matches = false }): void {
       this.hasSystemDarkMode = matches;
+
+      // Refresh effective appearance
+      this.refreshEffectiveAppearance();
+    },
+
+    onSettingsAppearanceTheme(): void {
+      // Refresh effective appearance
+      this.refreshEffectiveAppearance();
     }
   }
 };
@@ -131,8 +151,8 @@ export default {
 $c: ".s-app";
 
 .s-app {
-  background-color: $color-background-primary;
-  color: $color-black;
+  background-color: rgb(var(--color-background-primary));
+  color: rgb(var(--color-black));
   user-select: none;
   margin: 0;
   padding: 0;
diff --git a/src/assemblies/app/AppSidebar.vue b/src/assemblies/app/AppSidebar.vue
index a628f157..8f63eb07 100644
--- a/src/assemblies/app/AppSidebar.vue
+++ b/src/assemblies/app/AppSidebar.vue
@@ -113,7 +113,7 @@ $sidebar-context-height: $size-inbox-form-height;
 
   &,
   #{$c}__context #{$c}__context-presence {
-    background-color: var(--color-base-purple-ultra-light);
+    background-color: rgb(var(--color-background-secondary));
   }
 
   #{$c}__header,
@@ -124,7 +124,7 @@ $sidebar-context-height: $size-inbox-form-height;
 
   #{$c}__header,
   #{$c}__context {
-    background-color: rgba(var(--color-base-purple-ultra-light), 0.9);
+    background-color: rgba(var(--color-background-secondary), 0.9);
     position: absolute;
     inset-inline: 0;
     backdrop-filter: blur(9px);
@@ -157,7 +157,7 @@ $sidebar-context-height: $size-inbox-form-height;
     }
 
     &--floating {
-      border-block-end-color: var(--color-border-secondary);
+      border-block-end-color: rgb(var(--color-border-secondary));
 
       &:after {
         display: block;
@@ -191,7 +191,7 @@ $sidebar-context-height: $size-inbox-form-height;
 
   #{$c}__context {
     border-block-start: $sidebar-context-border-width solid
-      var(--color-border-secondary);
+      rgb(var(--color-border-secondary));
     height: $sidebar-context-height;
     inset-block-end: 0;
     z-index: 2;
diff --git a/src/assemblies/inbox/InboxForm.vue b/src/assemblies/inbox/InboxForm.vue
index 768c907b..484cd9bc 100644
--- a/src/assemblies/inbox/InboxForm.vue
+++ b/src/assemblies/inbox/InboxForm.vue
@@ -384,7 +384,7 @@ $form-compose-send-button-size: (
       }
 
       #{$c}__compose-send-icon {
-        fill: var(--color-white);
+        fill: rgb(var(--color-white));
         margin-inline-start: -2px;
       }
     }
diff --git a/src/assemblies/inbox/InboxTopbar.vue b/src/assemblies/inbox/InboxTopbar.vue
index 002ebd85..f3e79108 100644
--- a/src/assemblies/inbox/InboxTopbar.vue
+++ b/src/assemblies/inbox/InboxTopbar.vue
@@ -328,7 +328,7 @@ $c: ".a-inbox-topbar";
     align-items: center;
 
     &--name {
-      color: var(--color-text-primary);
+      color: rgb(var(--color-text-primary));
       font-size: 16px;
 
       #{$c}__identity-badge {
@@ -337,18 +337,18 @@ $c: ".a-inbox-topbar";
     }
 
     &--jid {
-      color: var(--color-text-secondary);
+      color: rgb(var(--color-text-secondary));
       font-size: 15px;
 
       #{$c}__identity-badge {
         margin-block-start: 2px;
 
         &--verified {
-          fill: var(--color-base-green-normal);
+          fill: rgb(var(--color-base-green-normal));
         }
 
         &--unknown {
-          fill: var(--color-base-grey-normal);
+          fill: rgb(var(--color-base-grey-normal));
         }
       }
     }
diff --git a/src/assemblies/start/StartLoginForm.vue b/src/assemblies/start/StartLoginForm.vue
index daf2a97c..eac5e0e0 100644
--- a/src/assemblies/start/StartLoginForm.vue
+++ b/src/assemblies/start/StartLoginForm.vue
@@ -173,7 +173,7 @@ $c: ".a-start-login-form";
       }
 
       #{$c}__options-recover {
-        color: var(--color-text-primary);
+        color: rgb(var(--color-text-primary));
         font-size: 15px;
         opacity: 0.3;
         pointer-events: none;
diff --git a/src/assets/images/components/base/BaseAlert/badge-icon-checkmark.svg b/src/assets/images/components/base/BaseAlert/badge-icon-checkmark.svg
deleted file mode 100644
index 8c00c58f..00000000
--- a/src/assets/images/components/base/BaseAlert/badge-icon-checkmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 0c6.628125 0 12 5.371875 12 12s-5.371875 12-12 12-12-5.371875-12-12 5.371875-12 12-12zm5.4682728 8.73435145c-.3124686-.3124686-.8199177-.3124686-1.1323863 0l-5.8344136 5.83191395-2.63473525-2.6322355c-.3124686-.3124686-.8199176-.3124686-1.1323862 0s-.3124686.8199176 0 1.1323862l3.19967845 3.1996785c.3124686.3124685.8199176.3124685 1.1323862 0l6.3993569-6.39935695c.3124686-.3124686.3124686-.8199176 0-1.1323862z"/></svg>
diff --git a/src/assets/images/components/base/BaseAlert/badge-icon-exclamation.svg b/src/assets/images/components/base/BaseAlert/badge-icon-exclamation.svg
deleted file mode 100644
index 7e73f6fe..00000000
--- a/src/assets/images/components/base/BaseAlert/badge-icon-exclamation.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 24c6.628125 0 12-5.371875 12-12s-5.371875-12-12-12-12 5.371875-12 12 5.371875 12 12 12zm0-18c.6234375 0 1.125.5015625 1.125 1.125v5.25c0 .6234375-.5015625 1.125-1.125 1.125s-1.125-.5015625-1.125-1.125v-5.25c0-.6234375.5015625-1.125 1.125-1.125zm1.5 10.5c0 .8296875-.6703125 1.5-1.5 1.5s-1.5-.6703125-1.5-1.5.6703125-1.5 1.5-1.5 1.5.6703125 1.5 1.5z"/></svg>
diff --git a/src/assets/images/components/base/BaseAlert/badge-icon-information.svg b/src/assets/images/components/base/BaseAlert/badge-icon-information.svg
deleted file mode 100644
index 4e877433..00000000
--- a/src/assets/images/components/base/BaseAlert/badge-icon-information.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 24c6.628125 0 12-5.371875 12-12s-5.371875-12-12-12-12 5.371875-12 12 5.371875 12 12 12zm.005-13.5c.6927083 0 1.25.5015625 1.25 1.125v5.25c0 .6234375-.5572917 1.125-1.25 1.125s-1.25-.5015625-1.25-1.125v-5.25c0-.6234375.5572917-1.125 1.25-1.125zm1.495-3c0 .8296875-.6703125 1.5-1.5 1.5s-1.5-.6703125-1.5-1.5.6703125-1.5 1.5-1.5 1.5.6703125 1.5 1.5z"/></svg>
diff --git a/src/assets/images/components/base/BaseAlert/close-icon.svg b/src/assets/images/components/base/BaseAlert/close-icon.svg
deleted file mode 100644
index f4e1ae41..00000000
--- a/src/assets/images/components/base/BaseAlert/close-icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m17.644854 8.04935187c.4685304-.46853038.4685304-1.22942371 0-1.69795409-.4685304-.46853037-1.2294237-.46853037-1.6979541 0l-3.9468999 3.95064812-3.95064813-3.94689987c-.46853038-.46853038-1.22942371-.46853038-1.69795409 0-.46853037.46853037-.46853037 1.2294237 0 1.69795408l3.95064812 3.94689989-3.94689987 3.9506481c-.46853038.4685304-.46853038 1.2294237 0 1.6979541.46853037.4685304 1.2294237.4685304 1.69795408 0l3.94689989-3.9506481 3.9506481 3.9468999c.4685304.4685304 1.2294237.4685304 1.6979541 0s.4685304-1.2294237 0-1.6979541l-3.9506481-3.9468999z" fill="#1c293b" transform="translate(-6 -6)"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/exclamationmark.circle.fill.svg b/src/assets/images/icons/exclamationmark.circle.fill.svg
new file mode 100644
index 00000000..388e0843
--- /dev/null
+++ b/src/assets/images/icons/exclamationmark.circle.fill.svg
@@ -0,0 +1 @@
+<svg height="20.1812" width="20.5381" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h20.5381v20.1812h-20.5381z" opacity="0"/><path d="m20.1767 10.0875c0 5.5185-4.5626 10.0875-10.0892 10.0875-5.5168 0-10.0875-4.569-10.0875-10.0875 0-5.52656 4.56269-10.0875 10.0795-10.0875 5.5265 0 10.0972 4.56094 10.0972 10.0875zm-11.2849 3.9357c0 .6377.54296 1.1153 1.1992 1.1153.6545 0 1.194-.4696 1.194-1.1153 0-.6404-.5315-1.1197-1.194-1.1197-.66424 0-1.1992.4856-1.1992 1.1197zm.14316-8.0736.1375 4.9268c.01855.5791.34394.8974.91854.8974.5533 0 .877-.3086.8955-.9009l.1455-4.91529c.0186-.59668-.4293-1.02148-1.0525-1.02148-.6295 0-1.06309.41679-1.04454 1.01347z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/info.circle.fill.svg b/src/assets/images/icons/info.circle.fill.svg
new file mode 100644
index 00000000..663f1998
--- /dev/null
+++ b/src/assets/images/icons/info.circle.fill.svg
@@ -0,0 +1 @@
+<svg height="20.1812" width="20.5381" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h20.5381v20.1812h-20.5381z" opacity="0"/><path d="m20.1767 10.0875c0 5.5185-4.5626 10.0875-10.0892 10.0875-5.5168 0-10.0875-4.569-10.0875-10.0875 0-5.52656 4.56269-10.0875 10.0795-10.0875 5.5265 0 10.0972 4.56094 10.0972 10.0875zm-11.70209-1.77501c-.45762 0-.81328.35391-.81328.78848 0 .46738.35566.79824.81328.79824h1.025v4.22419h-1.20157c-.4621 0-.81953.3539-.81953.7868 0 .4691.35743.8.81953.8h4.11116c.4638 0 .8195-.3309.8195-.8 0-.4329-.3557-.7868-.8195-.7868h-1.1242v-4.79099c0-.61191-.3016-1.01992-.8825-1.01992zm.15918-2.96543c0 .77559.62285 1.4002 1.39221 1.4002.7693 0 1.3841-.62461 1.3841-1.4002 0-.78613-.6148-1.4037-1.3841-1.4037-.76936 0-1.39221.61757-1.39221 1.4037z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/xmark.svg b/src/assets/images/icons/xmark.svg
new file mode 100644
index 00000000..b6101b0d
--- /dev/null
+++ b/src/assets/images/icons/xmark.svg
@@ -0,0 +1 @@
+<svg height="15.7404" width="16.0884" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h16.0884v15.7404h-16.0884z" opacity="0"/><path d="m.312676 15.4268c.42441.4147 1.140224.4094 1.544324.0053l6.00743-6.00743 6.00387 6.00563c.4112.4112 1.1262.4174 1.5426-.0052.4164-.4244.4182-1.1235.007-1.5363l-6.00387-6.01373 6.00387-6.00392c.4112-.41113.4174-1.118153-.007-1.534556-.4244-.4244105-1.1314-.4261683-1.5426-.007031l-6.00387 6.003917-6.00743-6.005675c-.4041-.4103483-1.127921-.4253872-1.544324.007031-.414645.424411-.4093721 1.130464-.005273 1.534554l6.007427 6.00568-6.007427 6.01723c-.4040991.4023-.41738 1.1181.005273 1.5345z"/></svg>
\ No newline at end of file
diff --git a/src/assets/stylesheets/elements/_elements.inline.scss b/src/assets/stylesheets/elements/_elements.inline.scss
index 93e5a054..1859ce9f 100644
--- a/src/assets/stylesheets/elements/_elements.inline.scss
+++ b/src/assets/stylesheets/elements/_elements.inline.scss
@@ -10,7 +10,7 @@
 
 a {
   outline: 0;
-  color: $color-base-blue-link;
+  color: rgb(var(--color-base-blue-link));
   text-decoration: none;
   transition: color 100ms linear;
   cursor: pointer;
diff --git a/src/assets/stylesheets/tools/_tools.functions.scss b/src/assets/stylesheets/tools/_tools.functions.scss
new file mode 100644
index 00000000..1e68d090
--- /dev/null
+++ b/src/assets/stylesheets/tools/_tools.functions.scss
@@ -0,0 +1,29 @@
+/*
+ * This file is part of prose-app-web
+ *
+ * Copyright 2023, Prose Foundation
+ */
+
+/* *************************************************************************
+ * TOOLS > FUNCTIONS
+ * **************************************************************************/
+
+@function hex-var($color) {
+  @return red($color) + ", " + green($color) + ", " + blue($color);
+}
+
+@function color-mix-var($base, $color, $percent) {
+  @return color-mix(in srgb, rgb($color) (100% - $percent), rgb($base));
+}
+
+@function lighten-var($color, $percent) {
+  // Notice: apply a corrective factor to the percent so that it looks almost \
+  //   like SCSS lighten() function.
+  @return color-mix-var(var(--color-white), $color, ($percent * 1.3));
+}
+
+@function darken-var($color, $percent) {
+  // Notice: apply a corrective factor to the percent so that it looks almost \
+  //   like SCSS darken() function.
+  @return color-mix-var(var(--color-black), $color, ($percent * 1.3));
+}
diff --git a/src/assets/stylesheets/tools/all.scss b/src/assets/stylesheets/tools/all.scss
index 3aa3b570..838a9be4 100644
--- a/src/assets/stylesheets/tools/all.scss
+++ b/src/assets/stylesheets/tools/all.scss
@@ -8,4 +8,5 @@
  * TOOLS > ALL
  * **************************************************************************/
 
+@import "_tools.functions";
 @import "_tools.mixins";
diff --git a/src/assets/stylesheets/utilities/_utilities.appearance.scss b/src/assets/stylesheets/utilities/_utilities.appearance.scss
index 735a2e22..7b1181b4 100644
--- a/src/assets/stylesheets/utilities/_utilities.appearance.scss
+++ b/src/assets/stylesheets/utilities/_utilities.appearance.scss
@@ -10,46 +10,93 @@
 
 .u-appearance {
   // Black
-  --color-black: #{$color-black};
+  --color-black: #{hex-var($color-black)};
 
   // White
-  --color-white: #{$color-white};
+  --color-white: #{hex-var($color-white)};
 
   // Bases
-  --color-base-blue-light: #{$color-base-blue-light};
-  --color-base-blue-normal: #{$color-base-blue-normal};
-  --color-base-blue-dark: #{$color-base-blue-dark};
-  --color-base-blue-ultra-dark: #{$color-base-blue-ultra-dark};
-  --color-base-blue-link: #{$color-base-blue-link};
-  --color-base-green-normal: #{$color-base-green-normal};
-  --color-base-grey-dark: #{$color-base-grey-dark};
-  --color-base-grey-light: #{$color-base-grey-light};
-  --color-base-grey-normal: #{$color-base-grey-normal};
-  --color-base-orange-light: #{$color-base-orange-light};
-  --color-base-orange-normal: #{$color-base-orange-normal};
-  --color-base-pink-light: #{$color-base-pink-light};
-  --color-base-purple-light: #{$color-base-purple-light};
-  --color-base-purple-normal: #{$color-base-purple-normal};
-  --color-base-purple-ultra-light: #{$color-base-purple-ultra-light};
-  --color-base-red-normal: #{$color-base-red-normal};
-  --color-base-yellow-ultra-light: #{$color-base-yellow-ultra-light};
+  --color-base-blue-normal: #{hex-var($color-base-blue-normal)};
+  --color-base-blue-dark: #{hex-var($color-base-blue-dark)};
+  --color-base-blue-link: #{hex-var($color-base-blue-link)};
+  --color-base-green-normal: #{hex-var($color-base-green-normal)};
+  --color-base-grey-dark: #{hex-var($color-base-grey-dark)};
+  --color-base-grey-light: #{hex-var($color-base-grey-light)};
+  --color-base-grey-normal: #{hex-var($color-base-grey-normal)};
+  --color-base-orange-light: #{hex-var($color-base-orange-light)};
+  --color-base-orange-normal: #{hex-var($color-base-orange-normal)};
+  --color-base-purple-light: #{hex-var($color-base-purple-light)};
+  --color-base-purple-normal: #{hex-var($color-base-purple-normal)};
+  --color-base-red-normal: #{hex-var($color-base-red-normal)};
 
   // Borders
-  --color-border-primary: #{$color-border-primary};
-  --color-border-secondary: #{$color-border-secondary};
-  --color-border-tertiary: #{$color-border-tertiary};
+  --color-border-primary: #{hex-var($color-border-primary)};
+  --color-border-secondary: #{hex-var($color-border-secondary)};
+  --color-border-tertiary: #{hex-var($color-border-tertiary)};
 
   // Backgrounds
-  --color-background-primary: #{$color-background-primary};
-  --color-background-secondary: #{$color-background-secondary};
+  --color-background-primary: #{hex-var($color-background-primary)};
+  --color-background-secondary: #{hex-var($color-background-secondary)};
+
+  // Shadows
+  --color-shadow-primary: #{hex-var($color-shadow-primary)};
 
   // Texts
-  --color-text-primary: #{$color-text-primary};
-  --color-text-secondary: #{$color-text-secondary};
-  --color-text-tertiary: #{$color-text-tertiary};
-  --color-text-reverse: #{$color-text-reverse};
+  --color-text-primary: #{hex-var($color-text-primary)};
+  --color-text-secondary: #{hex-var($color-text-secondary)};
+  --color-text-tertiary: #{hex-var($color-text-tertiary)};
+  --color-text-reverse: #{hex-var($color-text-reverse)};
 
   &--dark {
-    /* TODO */
+    // Black
+    --color-black: #{hex-var(invert($color-black))};
+
+    // White
+    --color-white: #{hex-var(invert($color-white))};
+
+    // Bases
+    --color-base-blue-normal: #{hex-var(lighten($color-base-blue-normal, 4%))};
+    --color-base-blue-dark: #{hex-var(lighten($color-base-blue-dark, 6%))};
+    --color-base-blue-link: #{hex-var(lighten($color-base-blue-link, 4%))};
+    --color-base-green-normal: #{hex-var(lighten($color-base-green-normal, 18%))};
+    --color-base-grey-dark: #{hex-var(
+        lighten(invert($color-base-grey-dark), 2%)
+      )};
+    --color-base-grey-light: #{hex-var(
+        lighten(invert($color-base-grey-light), 2%)
+      )};
+    --color-base-grey-normal: #{hex-var(
+        lighten(invert($color-base-grey-normal), 4%)
+      )};
+    --color-base-orange-light: #{hex-var(lighten($color-base-orange-light, 6%))};
+    --color-base-orange-normal: #{hex-var(
+        lighten($color-base-orange-normal, 2%)
+      )};
+    --color-base-purple-light: #{hex-var(lighten($color-base-purple-light, 2%))};
+    --color-base-purple-normal: #{hex-var(
+        lighten($color-base-purple-normal, 20%)
+      )};
+    --color-base-red-normal: #{hex-var(lighten($color-base-red-normal, 3%))};
+
+    // Borders
+    --color-border-primary: #{hex-var(
+        lighten(invert($color-border-primary), 8%)
+      )};
+    --color-border-secondary: #{hex-var(
+        lighten(invert($color-border-secondary), 4%)
+      )};
+    --color-border-tertiary: #{hex-var(
+        lighten(invert($color-border-tertiary), 4%)
+      )};
+
+    // Backgrounds
+    --color-background-primary: #{hex-var(invert($color-background-primary))};
+    --color-background-secondary: #{hex-var(invert($color-background-secondary))};
+
+    // Texts
+    --color-text-primary: #{hex-var(invert($color-text-primary))};
+    --color-text-secondary: #{hex-var(invert($color-text-secondary))};
+    --color-text-tertiary: #{hex-var(invert($color-text-tertiary))};
+    --color-text-reverse: #{hex-var(invert($color-text-reverse))};
   }
 }
diff --git a/src/assets/stylesheets/variables/_variables.colors.scss b/src/assets/stylesheets/variables/_variables.colors.scss
index 067a2b0b..5474dba6 100644
--- a/src/assets/stylesheets/variables/_variables.colors.scss
+++ b/src/assets/stylesheets/variables/_variables.colors.scss
@@ -18,10 +18,8 @@ $color-white: #ffffff;
 
 // Bases
 
-$color-base-blue-light: #6edbff;
 $color-base-blue-normal: #2490f0;
 $color-base-blue-dark: #0079e5;
-$color-base-blue-ultra-dark: #1c293b;
 $color-base-blue-link: #4233be;
 $color-base-green-normal: #05c02b;
 $color-base-grey-dark: #495462;
@@ -29,27 +27,28 @@ $color-base-grey-light: #f5f6fa;
 $color-base-grey-normal: #949eb1;
 $color-base-orange-light: #f1914b;
 $color-base-orange-normal: #dd792f;
-$color-base-pink-light: #ff88a3;
 $color-base-purple-light: #c6c6e1;
 $color-base-purple-normal: #392ca0;
-$color-base-purple-ultra-light: #fbfbfd;
 $color-base-red-normal: #dd2f2f;
-$color-base-yellow-ultra-light: #fffff8;
 
 // Borders
 
-$color-border-primary: rgba($color-black, 0.1);
-$color-border-secondary: rgba($color-black, 0.06);
-$color-border-tertiary: rgba($color-black, 0.04);
+$color-border-primary: #e5e5e5;
+$color-border-secondary: #ebebeb;
+$color-border-tertiary: #f5f5f5;
 
 // Backgrounds
 
-$color-background-primary: $color-white;
+$color-background-primary: #ffffff;
 $color-background-secondary: #fbfbfc;
 
+// Shadows
+
+$color-shadow-primary: #000000;
+
 // Texts
 
-$color-text-primary: $color-black;
-$color-text-secondary: rgba($color-base-blue-ultra-dark, 0.55);
-$color-text-tertiary: rgba($color-base-blue-ultra-dark, 0.45);
-$color-text-reverse: $color-white;
+$color-text-primary: #000000;
+$color-text-secondary: #828993;
+$color-text-tertiary: #999fa7;
+$color-text-reverse: #ffffff;
diff --git a/src/components/base/BaseAction.vue b/src/components/base/BaseAction.vue
index 7b6d4d76..89e1f084 100644
--- a/src/components/base/BaseAction.vue
+++ b/src/components/base/BaseAction.vue
@@ -16,7 +16,8 @@ div(
     {
       "c-base-action--active": active,
       "c-base-action--disabled": disabled,
-      "c-base-action--auto-width": autoWidth
+      "c-base-action--auto-width": autoWidth,
+      "c-base-action--auto-height": autoHeight
     }
   ]`
 )
@@ -112,6 +113,11 @@ export default {
     autoWidth: {
       type: Boolean,
       default: false
+    },
+
+    autoHeight: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -168,7 +174,7 @@ $c: ".c-base-action";
     transition: background-color 100ms linear;
 
     &:focus-visible {
-      outline-color: rgba($color-base-purple-normal, 0.3);
+      outline-color: rgba(var(--color-base-purple-normal), 0.3);
       outline-offset: 1px;
     }
 
@@ -180,7 +186,7 @@ $c: ".c-base-action";
 
     #{$c}__icon,
     #{$c}__dropdown {
-      fill: $color-base-grey-dark;
+      fill: rgb(var(--color-base-grey-dark));
     }
 
     #{$c}__dropdown {
@@ -193,19 +199,19 @@ $c: ".c-base-action";
   &--active {
     #{$c}__inner {
       #{$c}__icon {
-        fill: darken($color-base-blue-normal, 6%);
+        fill: darken-var(var(--color-base-blue-normal), 6%);
       }
     }
 
     &#{$c}--white {
       #{$c}__inner {
-        background-color: $color-base-grey-light;
+        background-color: rgb(var(--color-base-grey-light));
       }
     }
 
     &#{$c}--grey {
       #{$c}__inner {
-        background-color: darken($color-base-grey-light, 3%);
+        background-color: darken-var(var(--color-base-grey-light), 3%);
       }
     }
   }
@@ -225,16 +231,23 @@ $c: ".c-base-action";
     }
   }
 
+  &--auto-height {
+    #{$c}__inner {
+      height: auto;
+      padding-block: $size-base-action-padding-sides;
+    }
+  }
+
   // --> CONTEXTS <--
 
   &--white {
     #{$c}__inner {
       &:hover {
-        background-color: darken($color-base-grey-light, 1%);
+        background-color: darken-var(var(--color-base-grey-light), 1%);
       }
 
       &:active {
-        background-color: darken($color-base-grey-light, 4%);
+        background-color: darken-var(var(--color-base-grey-light), 4%);
       }
     }
   }
@@ -242,11 +255,11 @@ $c: ".c-base-action";
   &--grey {
     #{$c}__inner {
       &:hover {
-        background-color: darken($color-base-grey-light, 4%);
+        background-color: darken-var(var(--color-base-grey-light), 4%);
       }
 
       &:active {
-        background-color: darken($color-base-grey-light, 8%);
+        background-color: darken-var(var(--color-base-grey-light), 8%);
       }
     }
   }
diff --git a/src/components/base/BaseAlert.vue b/src/components/base/BaseAlert.vue
index bd4ae195..1d8dfc87 100644
--- a/src/components/base/BaseAlert.vue
+++ b/src/components/base/BaseAlert.vue
@@ -23,6 +23,11 @@ transition(
     ]`
   )
     span.c-base-alert__badge
+      base-icon(
+        :name="badgeIcon"
+        size="24px"
+        class="c-base-alert__badge-icon"
+      )
 
     .c-base-alert__text
       p.c-base-alert__text-title.u-bold
@@ -33,8 +38,14 @@ transition(
       )
         | {{ description }}
 
-    a.c-base-alert__close(
+    base-action(
       @click="onCloseClick"
+      class="c-base-alert__close"
+      icon="xmark"
+      context="grey"
+      size="11px"
+      auto-width
+      auto-height
     )
 </template>
 
@@ -139,6 +150,29 @@ export default {
     EventBus.off("show", this.show as Handler);
   },
 
+  computed: {
+    badgeIcon(): string {
+      switch (this.level) {
+        case "success": {
+          return "checkmark.circle.fill";
+        }
+
+        case "info": {
+          return "info.circle.fill";
+        }
+
+        case "warning":
+        case "error": {
+          return "exclamationmark.circle.fill";
+        }
+
+        default: {
+          return "questionmark.circle.fill";
+        }
+      }
+    }
+  },
+
   methods: {
     show({
       level,
@@ -250,14 +284,10 @@ $c: ".c-base-alert";
 
 // VARIABLES
 $badge-size: 54px;
-$badge-icon-size: 24px;
-
-$close-size: 24px;
-$close-icon-size: 12px;
 
 .c-base-alert {
-  background: rgba($color-white, 0.95);
-  border: 1px solid rgba($color-black, 0.06);
+  background: rgba(var(--color-white), 0.95);
+  border: 1px solid rgba(var(--color-border-secondary), 0.9);
   padding: 10px;
   padding-inline-end: 80px;
   backdrop-filter: blur(9px);
@@ -268,11 +298,11 @@ $close-icon-size: 12px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10000;
-  box-shadow: 0 2px 4px 0 rgba($color-black, 0.04);
+  box-shadow: 0 2px 4px 0 rgba(var(--color-shadow-primary), 0.04);
   border-radius: 16px;
 
   #{$c}__badge {
-    background-color: rgba($color-base-grey-dark, 0.15);
+    background-color: rgba(var(--color-base-grey-dark), 0.15);
     width: $badge-size;
     height: $badge-size;
     margin-inline-end: 24px;
@@ -282,15 +312,8 @@ $close-icon-size: 12px;
     justify-content: center;
     border-radius: 12px;
 
-    &:after {
-      @include mask-position(center);
-      @include mask-size(cover);
-      @include mask-repeat(no-repeat);
-
-      content: "";
-      background-color: $color-base-grey-dark;
-      width: $badge-icon-size;
-      height: $badge-icon-size;
+    #{$c}__badge-icon {
+      fill: rgb(var(--color-base-grey-dark));
       flex: 0 0 auto;
     }
   }
@@ -299,136 +322,84 @@ $close-icon-size: 12px;
     flex: 1;
 
     #{$c}__text-title {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       font-size: 17px;
     }
 
     #{$c}__text-description {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       font-size: 15px;
       margin-block-start: 10px;
     }
   }
 
   #{$c}__close {
-    background-color: transparent;
-    width: $close-size;
-    height: $close-size;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
     inset-inline-end: 15px;
-    border-radius: 5px;
-
-    &:hover {
-      background-color: $color-base-grey-light;
-
-      &:after {
-        opacity: 0.75;
-      }
-    }
-
-    &:active {
-      background-color: darken($color-base-grey-light, 2%);
-      transition: background-color 100ms linear;
-    }
-
-    &:after {
-      content: "";
-      background-image: url("@/assets/images/components/base/BaseAlert/close-icon.svg");
-      background-position: center;
-      background-size: cover;
-      background-repeat: no-repeat;
-      width: $close-icon-size;
-      height: $close-icon-size;
-      opacity: 0.4;
-      flex: 0 0 auto;
-    }
   }
 
   // --> LEVELS <--
 
-  &--error,
-  &--warning {
-    #{$c}__badge {
-      &:after {
-        @include mask-image(
-          "@/assets/images/components/base/BaseAlert/badge-icon-exclamation.svg"
-        );
-      }
-    }
-  }
-
   &--error {
     #{$c}__badge {
-      background-color: rgba($color-base-red-normal, 0.15);
+      background-color: rgba(var(--color-base-red-normal), 0.15);
 
-      &:after {
-        background-color: $color-base-red-normal;
+      #{$c}__badge-icon {
+        fill: rgb(var(--color-base-red-normal));
       }
     }
 
     #{$c}__text {
       #{$c}__text-title {
-        color: $color-base-red-normal;
+        color: rgb(var(--color-base-red-normal));
       }
     }
   }
 
   &--warning {
     #{$c}__badge {
-      background-color: rgba($color-base-orange-normal, 0.15);
+      background-color: rgba(var(--color-base-orange-normal), 0.15);
 
-      &:after {
-        background-color: $color-base-orange-normal;
+      #{$c}__badge-icon {
+        fill: rgb(var(--color-base-orange-normal));
       }
     }
 
     #{$c}__text {
       #{$c}__text-title {
-        color: $color-base-orange-normal;
+        color: rgb(var(--color-base-orange-normal));
       }
     }
   }
 
   &--info {
     #{$c}__badge {
-      background-color: rgba($color-base-blue-normal, 0.15);
-
-      &:after {
-        @include mask-image(
-          "@/assets/images/components/base/BaseAlert/badge-icon-information.svg"
-        );
+      background-color: rgba(var(--color-base-blue-normal), 0.15);
 
-        background-color: $color-base-blue-normal;
+      #{$c}__badge-icon {
+        fill: rgb(var(--color-base-blue-normal));
       }
     }
 
     #{$c}__text {
       #{$c}__text-title {
-        color: $color-base-blue-normal;
+        color: rgb(var(--color-base-blue-normal));
       }
     }
   }
 
   &--success {
     #{$c}__badge {
-      background-color: rgba($color-base-green-normal, 0.15);
-
-      &:after {
-        @include mask-image(
-          "@/assets/images/components/base/BaseAlert/badge-icon-checkmark.svg"
-        );
+      background-color: rgba(var(--color-base-green-normal), 0.15);
 
-        background-color: $color-base-green-normal;
+      #{$c}__badge-icon {
+        fill: rgb(var(--color-base-green-normal));
       }
     }
 
     #{$c}__text {
       #{$c}__text-title {
-        color: $color-base-green-normal;
+        color: rgb(var(--color-base-green-normal));
       }
     }
   }
diff --git a/src/components/base/BaseAvatar.vue b/src/components/base/BaseAvatar.vue
index d75b146b..da942c07 100644
--- a/src/components/base/BaseAvatar.vue
+++ b/src/components/base/BaseAvatar.vue
@@ -265,8 +265,8 @@ export default {
 $c: ".c-base-avatar";
 
 .c-base-avatar {
-  color: $color-text-reverse;
-  background-color: $color-base-grey-light;
+  color: rgb(var(--color-text-reverse));
+  background-color: rgb(var(--color-base-grey-light));
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -277,11 +277,11 @@ $c: ".c-base-avatar";
   // --> SHADOWS <--
 
   &--shadow-normal {
-    box-shadow: 0 2px 4px 0 rgba($color-black, 0.08);
+    box-shadow: 0 2px 4px 0 rgba(var(--color-shadow-primary), 0.08);
   }
 
   &--shadow-light {
-    box-shadow: 0 0 2px 0 rgba($color-black, 0.08);
+    box-shadow: 0 0 2px 0 rgba(var(--color-shadow-primary), 0.08);
   }
 }
 </style>
diff --git a/src/components/base/BaseBadge.vue b/src/components/base/BaseBadge.vue
index 86044a01..a88f612d 100644
--- a/src/components/base/BaseBadge.vue
+++ b/src/components/base/BaseBadge.vue
@@ -82,35 +82,35 @@ export default {
 $c: ".c-base-badge";
 
 .c-base-badge {
-  background-color: $color-black;
+  background-color: rgb(var(--color-black));
   display: flex;
   align-items: center;
   justify-content: center;
 
   #{$c}__icon {
-    fill: $color-white;
+    fill: rgb(var(--color-white));
   }
 
   // --> COLORS <--
 
   &--grey {
-    background-color: $color-base-grey-normal;
+    background-color: rgb(var(--color-base-grey-normal));
   }
 
   &--green {
-    background-color: $color-base-green-normal;
+    background-color: rgb(var(--color-base-green-normal));
   }
 
   &--blue {
-    background-color: $color-base-blue-dark;
+    background-color: rgb(var(--color-base-blue-dark));
   }
 
   &--orange {
-    background-color: $color-base-orange-normal;
+    background-color: rgb(var(--color-base-orange-normal));
   }
 
   &--red {
-    background-color: $color-base-red-normal;
+    background-color: rgb(var(--color-base-red-normal));
   }
 }
 </style>
diff --git a/src/components/base/BaseBadgeDetails.vue b/src/components/base/BaseBadgeDetails.vue
index a5ecbc60..ce58e59c 100644
--- a/src/components/base/BaseBadgeDetails.vue
+++ b/src/components/base/BaseBadgeDetails.vue
@@ -88,13 +88,13 @@ $c: ".c-base-badge-details";
       flex: 1;
 
       #{$c}__title {
-        color: $color-text-primary;
+        color: rgb(var(--color-text-primary));
         font-size: 12.5px;
         line-height: 14px;
       }
 
       #{$c}__label {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
         font-size: 12px;
         line-height: 13px;
         margin-block-start: 4px;
@@ -104,7 +104,7 @@ $c: ".c-base-badge-details";
     &--red {
       #{$c}__text {
         #{$c}__title {
-          color: $color-base-red-normal;
+          color: rgb(var(--color-base-red-normal));
         }
       }
     }
@@ -112,7 +112,7 @@ $c: ".c-base-badge-details";
     &--orange {
       #{$c}__text {
         #{$c}__title {
-          color: $color-base-orange-normal;
+          color: rgb(var(--color-base-orange-normal));
         }
       }
     }
diff --git a/src/components/base/BaseBanner.vue b/src/components/base/BaseBanner.vue
index 1874a17c..5772d5c4 100644
--- a/src/components/base/BaseBanner.vue
+++ b/src/components/base/BaseBanner.vue
@@ -79,7 +79,7 @@ export default {
 $c: ".c-base-banner";
 
 .c-base-banner {
-  color: $color-text-reverse;
+  color: rgb(var(--color-text-reverse));
   min-height: 26px;
   padding-inline: 20px;
   padding-block: 8px;
@@ -100,7 +100,7 @@ $c: ".c-base-banner";
   }
 
   #{$c}__icon {
-    fill: $color-text-reverse;
+    fill: rgb(var(--color-text-reverse));
     margin-inline-end: 24px;
   }
 
@@ -126,19 +126,19 @@ $c: ".c-base-banner";
   // --> COLORS <--
 
   &--grey {
-    background-color: $color-base-grey-dark;
+    background-color: rgb(var(--color-base-grey-dark));
   }
 
   &--blue {
-    background-color: $color-base-blue-dark;
+    background-color: rgb(var(--color-base-blue-dark));
   }
 
   &--red {
-    background-color: $color-base-red-normal;
+    background-color: rgb(var(--color-base-red-normal));
   }
 
   &--orange {
-    background-color: $color-base-orange-normal;
+    background-color: rgb(var(--color-base-orange-normal));
   }
 }
 </style>
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index eb7aaedb..2c0ac167 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -208,12 +208,12 @@ export default {
 $c: ".c-base-button";
 
 // VARIABLES
-$color-button-dark-normal: $color-base-purple-normal;
-$color-button-dark-reverse: $color-white;
-$color-button-light-normal: $color-white;
-$color-button-light-reverse: rgba($color-black, 0.15);
-$color-button-red-normal: $color-base-red-normal;
-$color-button-red-reverse: $color-white;
+$color-button-dark-normal: var(--color-base-purple-normal);
+$color-button-dark-reverse: var(--color-white);
+$color-button-light-normal: var(--color-white);
+$color-button-light-reverse: var(--color-black);
+$color-button-red-normal: var(--color-base-red-normal);
+$color-button-red-reverse: var(--color-white);
 
 $size-small-padding-sides: 10px;
 $size-mid-small-padding-sides: 12px;
@@ -227,7 +227,7 @@ $size-ultra-large-padding-sides: 44px;
   display: inline-block;
 
   #{$c}__inner {
-    border: 1px solid rgba($color-black, 0.5);
+    border: 1px solid rgba(var(--color-black), 0.25);
     outline: 2px solid transparent;
     text-align: center;
     user-select: none;
@@ -246,7 +246,7 @@ $size-ultra-large-padding-sides: 44px;
     }
 
     &:focus-visible {
-      outline-color: rgba($color-base-purple-normal, 0.3);
+      outline-color: rgba(var(--color-base-purple-normal), 0.3);
       outline-offset: 1px;
     }
 
@@ -269,14 +269,14 @@ $size-ultra-large-padding-sides: 44px;
   &--red {
     #{$c}__inner {
       box-shadow: 0 4px 4px 0 rgba($color-button-dark-normal, 0.04),
-        inset 0 1px 0 0 rgba($color-white, 0.15);
+        inset 0 1px 0 0 rgba(var(--color-white), 0.15);
 
       #{$c}__icon {
-        fill: $color-white;
+        fill: rgb(var(--color-white));
       }
 
       #{$c}__label {
-        color: $color-white;
+        color: rgb(var(--color-white));
       }
 
       &:active {
@@ -287,48 +287,48 @@ $size-ultra-large-padding-sides: 44px;
 
   &--dark {
     #{$c}__inner {
-      background-color: $color-button-dark-normal;
+      background-color: rgb($color-button-dark-normal);
 
       &:hover {
-        background-color: lighten($color-button-dark-normal, 6%);
+        background-color: lighten-var($color-button-dark-normal, 6%);
       }
 
       &:active {
-        background-color: lighten($color-button-dark-normal, 2%);
+        background-color: lighten-var($color-button-dark-normal, 2%);
       }
     }
   }
 
   &--light {
     #{$c}__inner {
-      background-color: $color-button-light-normal;
-      border-color: rgba($color-black, 0.15);
+      background-color: rgb($color-button-light-normal);
+      border-color: rgba(var(--color-black), 0.15);
 
       #{$c}__icon {
-        fill: $color-black;
+        fill: rgb(var(--color-black));
       }
 
       #{$c}__label {
-        color: $color-black;
+        color: rgb(var(--color-black));
       }
 
       &:hover,
       &:active {
-        border-color: rgba($color-black, 0.2);
+        border-color: rgba(var(--color-black), 0.2);
       }
     }
   }
 
   &--red {
     #{$c}__inner {
-      background-color: $color-button-red-normal;
+      background-color: rgb($color-button-red-normal);
 
       &:hover {
-        background-color: lighten($color-button-red-normal, 6%);
+        background-color: lighten-var($color-button-red-normal, 6%);
       }
 
       &:active {
-        background-color: lighten($color-button-red-normal, 2%);
+        background-color: lighten-var($color-button-red-normal, 2%);
       }
     }
   }
@@ -403,52 +403,52 @@ $size-ultra-large-padding-sides: 44px;
   &--reverse {
     &#{$c}--dark {
       #{$c}__inner {
-        background-color: $color-button-dark-reverse;
-        border-color: $color-button-dark-normal;
+        background-color: rgb($color-button-dark-reverse);
+        border-color: rgb($color-button-dark-normal);
 
         #{$c}__icon {
-          fill: $color-button-dark-normal;
+          fill: rgb($color-button-dark-normal);
         }
 
         #{$c}__label {
-          color: $color-button-dark-normal;
+          color: rgb($color-button-dark-normal);
         }
       }
     }
 
     &#{$c}--light {
       #{$c}__inner {
-        background-color: $color-button-light-reverse;
+        background-color: rgba($color-button-light-reverse, 0.15);
 
         #{$c}__icon {
-          fill: $color-black;
+          fill: rgb(var(--color-black));
         }
 
         #{$c}__label {
-          color: $color-black;
+          color: rgb(var(--color-black));
         }
 
         &:hover {
-          background-color: lighten($color-button-light-reverse, 12%);
+          background-color: rgba($color-button-light-reverse, 0.11);
         }
 
         &:active {
-          background-color: lighten($color-button-light-reverse, 6%);
+          background-color: rgba($color-button-light-reverse, 0.125);
         }
       }
     }
 
     &#{$c}--red {
       #{$c}__inner {
-        background-color: $color-button-red-reverse;
-        border-color: $color-button-red-normal;
+        background-color: rgb($color-button-red-reverse);
+        border-color: rgb($color-button-red-normal);
 
         #{$c}__icon {
-          fill: $color-button-red-normal;
+          fill: rgb($color-button-red-normal);
         }
 
         #{$c}__label {
-          color: $color-button-red-normal;
+          color: rgb($color-button-red-normal);
         }
       }
     }
diff --git a/src/components/base/BaseCount.vue b/src/components/base/BaseCount.vue
index 4c13406b..0bfc5bef 100644
--- a/src/components/base/BaseCount.vue
+++ b/src/components/base/BaseCount.vue
@@ -67,13 +67,13 @@ $count-padding-sides: 5px;
   // --> COLORS <--
 
   &--blue {
-    background-color: $color-base-blue-normal;
-    color: $color-white;
+    background-color: rgb(var(--color-base-blue-normal));
+    color: rgb(var(--color-white));
   }
 
   &--white {
-    background-color: $color-white;
-    color: $color-black;
+    background-color: rgb(var(--color-white));
+    color: rgb(var(--color-black));
   }
 }
 </style>
diff --git a/src/components/base/BaseDataTable.vue b/src/components/base/BaseDataTable.vue
index e43432f4..96cd5795 100644
--- a/src/components/base/BaseDataTable.vue
+++ b/src/components/base/BaseDataTable.vue
@@ -283,8 +283,8 @@ $controls-button-width: 26px;
 $controls-button-height: 22px;
 
 .c-base-data-table {
-  background-color: $color-background-primary;
-  border-block: 1px solid $color-border-primary;
+  background-color: rgb(var(--color-background-primary));
+  border-block: 1px solid rgb(var(--color-border-primary));
 
   #{$c}__header,
   #{$c}__rows,
@@ -293,20 +293,20 @@ $controls-button-height: 22px;
   }
 
   #{$c}__header {
-    border-block-end: 1px solid $color-border-secondary;
+    border-block-end: 1px solid rgb(var(--color-border-secondary));
     font-size: 12px;
     line-height: 14px;
     padding-block: 8px;
 
     > #{$c}__column {
-      border-inline-end: 1px solid $color-border-tertiary;
+      border-inline-end: 1px solid rgb(var(--color-border-tertiary));
 
       &:last-child {
         border-inline-end: 0 none;
       }
 
       #{$c}__column-label {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
       }
 
       &--actionable {
@@ -314,14 +314,14 @@ $controls-button-height: 22px;
 
         &:hover {
           #{$c}__column-label {
-            color: $color-text-primary;
+            color: rgb(var(--color-text-primary));
           }
         }
       }
 
       &--ordered {
         #{$c}__column-label {
-          color: $color-text-primary;
+          color: rgb(var(--color-text-primary));
         }
       }
     }
@@ -336,12 +336,12 @@ $controls-button-height: 22px;
     overflow: auto;
 
     #{$c}__row {
-      border-block-end: 1px solid $color-border-tertiary;
+      border-block-end: 1px solid rgb(var(--color-border-tertiary));
       padding-block: 4px;
 
       > #{$c}__column {
         #{$c}__column-label {
-          color: $color-text-primary;
+          color: rgb(var(--color-text-primary));
         }
       }
     }
@@ -382,7 +382,7 @@ $controls-button-height: 22px;
   }
 
   #{$c}__controls {
-    border-block-start: 1px solid $color-border-secondary;
+    border-block-start: 1px solid rgb(var(--color-border-secondary));
     padding-block: 5px;
 
     #{$c}__control {
diff --git a/src/components/base/BaseFlag.vue b/src/components/base/BaseFlag.vue
index 2c4817b8..f56e7785 100644
--- a/src/components/base/BaseFlag.vue
+++ b/src/components/base/BaseFlag.vue
@@ -96,7 +96,7 @@ export default {
 $c: ".c-base-flag";
 
 .c-base-flag {
-  background-color: $color-base-grey-light;
+  background-color: rgb(var(--color-base-grey-light));
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -105,11 +105,11 @@ $c: ".c-base-flag";
   // --> SHADOWS <--
 
   &--shadow-normal {
-    box-shadow: 0 2px 4px 0 rgba($color-black, 0.08);
+    box-shadow: 0 2px 4px 0 rgba(var(--color-shadow-primary), 0.08);
   }
 
   &--shadow-light {
-    box-shadow: 0 0 2px 0 rgba($color-black, 0.08);
+    box-shadow: 0 0 2px 0 rgba(var(--color-shadow-primary), 0.08);
   }
 }
 </style>
diff --git a/src/components/base/BaseIcon.vue b/src/components/base/BaseIcon.vue
index c3be4cdf..9b202631 100644
--- a/src/components/base/BaseIcon.vue
+++ b/src/components/base/BaseIcon.vue
@@ -66,7 +66,7 @@ export default {
 $c: ".c-base-icon";
 
 // VARIABLES
-$icon-fill-default: $color-black;
+$icon-fill-default: rgb(var(--color-black));
 
 .c-base-icon {
   fill: $icon-fill-default;
diff --git a/src/components/base/BaseIndicatorLevel.vue b/src/components/base/BaseIndicatorLevel.vue
index c5b43786..9b3e9ef5 100644
--- a/src/components/base/BaseIndicatorLevel.vue
+++ b/src/components/base/BaseIndicatorLevel.vue
@@ -104,8 +104,8 @@ $c: ".c-base-indicator-level";
   align-items: center;
 
   #{$c}__step {
-    background-color: $color-base-grey-light;
-    border: 1px solid $color-border-primary;
+    background-color: rgb(var(--color-base-grey-light));
+    border: 1px solid rgb(var(--color-border-primary));
     margin-inline-end: 2px;
     flex: 1;
     border-radius: 3px;
@@ -140,7 +140,7 @@ $c: ".c-base-indicator-level";
   &--green {
     #{$c}__step {
       &--active {
-        background-color: $color-base-green-normal;
+        background-color: rgb(var(--color-base-green-normal));
       }
     }
   }
@@ -148,7 +148,7 @@ $c: ".c-base-indicator-level";
   &--orange {
     #{$c}__step {
       &--active {
-        background-color: $color-base-orange-light;
+        background-color: rgb(var(--color-base-orange-light));
       }
     }
   }
@@ -156,7 +156,7 @@ $c: ".c-base-indicator-level";
   &--red {
     #{$c}__step {
       &--active {
-        background-color: $color-base-red-normal;
+        background-color: rgb(var(--color-base-red-normal));
       }
     }
   }
diff --git a/src/components/base/BaseNavigateSection.vue b/src/components/base/BaseNavigateSection.vue
index 9728d6f2..824acc82 100644
--- a/src/components/base/BaseNavigateSection.vue
+++ b/src/components/base/BaseNavigateSection.vue
@@ -110,7 +110,7 @@ $icon-size: 28px;
     border-radius: 6px;
 
     #{$c}__icon-inner {
-      fill: $color-white;
+      fill: rgb(var(--color-white));
     }
   }
 
@@ -123,13 +123,13 @@ $icon-size: 28px;
     }
 
     #{$c}__text-title {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       font-size: 14px;
       line-height: 16px;
     }
 
     #{$c}__text-label {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
       font-size: 12.75px;
       line-height: 15px;
       margin-block-start: 2px;
@@ -137,36 +137,36 @@ $icon-size: 28px;
   }
 
   #{$c}__arrow {
-    fill: $color-white;
+    fill: rgb(var(--color-white));
     margin-inline-start: 8px;
     flex: 0 0 auto;
     visibility: hidden;
   }
 
   &:hover {
-    background-color: $color-base-grey-light;
+    background-color: rgb(var(--color-base-grey-light));
   }
 
   &:active {
-    background-color: darken($color-base-grey-light, 1.5%);
+    background-color: darken-var(var(--color-base-grey-light), 1.5%);
   }
 
   // --> COLORS <--
 
   &--blue {
     #{$c}__icon {
-      background-color: $color-base-blue-dark;
+      background-color: rgb(var(--color-base-blue-dark));
     }
 
     &#{$c}--active {
-      background-color: $color-base-blue-dark;
+      background-color: rgb(var(--color-base-blue-dark));
 
       &:hover {
-        background-color: darken($color-base-blue-dark, 2%);
+        background-color: darken-var(var(--color-base-blue-dark), 2%);
       }
 
       &:active {
-        background-color: darken($color-base-blue-dark, 3%);
+        background-color: darken-var(var(--color-base-blue-dark), 3%);
       }
     }
   }
@@ -183,11 +183,11 @@ $icon-size: 28px;
 
       #{$c}__text {
         #{$c}__text-title {
-          color: $color-text-reverse;
+          color: rgb(var(--color-text-reverse));
         }
 
         #{$c}__text-label {
-          color: rgba($color-text-reverse, 0.7);
+          color: rgba(var(--color-text-reverse), 0.7);
         }
       }
 
diff --git a/src/components/base/BasePlatformLogo.vue b/src/components/base/BasePlatformLogo.vue
index 537e33b4..e72a49d3 100644
--- a/src/components/base/BasePlatformLogo.vue
+++ b/src/components/base/BasePlatformLogo.vue
@@ -94,8 +94,8 @@ $c: ".c-base-platform-logo";
 $name-logos: ("web", "macos", "ios", "windows", "android", "linux");
 
 .c-base-platform-logo {
-  background-color: $color-white;
-  border: 0.5px solid $color-black;
+  background-color: rgb(var(--color-white));
+  border: 0.5px solid rgb(var(--color-black));
   width: 46px;
   height: 54px;
   border-radius: 4px;
diff --git a/src/components/base/BasePopover.vue b/src/components/base/BasePopover.vue
index ce3b8973..2fe82d2e 100644
--- a/src/components/base/BasePopover.vue
+++ b/src/components/base/BasePopover.vue
@@ -121,13 +121,13 @@ export default {
 $c: ".c-base-popover";
 
 .c-base-popover {
-  background-color: $color-white;
+  background-color: rgb(var(--color-white));
   border: $size-base-popover-border-width solid
-    darken($color-base-grey-light, 2%);
+    rgb(var(--color-border-secondary));
   min-width: 180px;
   max-width: 360px;
   padding-block: 7px;
   border-radius: 5px;
-  box-shadow: 0 2px 6px 0 rgba($color-black, 0.025);
+  box-shadow: 0 2px 6px 0 rgba(var(--color-shadow-primary), 0.025);
 }
 </style>
diff --git a/src/components/base/BasePopoverList.vue b/src/components/base/BasePopoverList.vue
index 88e9519a..7e4f4cd7 100644
--- a/src/components/base/BasePopoverList.vue
+++ b/src/components/base/BasePopoverList.vue
@@ -183,12 +183,12 @@ $entry-button-popover-edges-offset: (
       min-width: 16px;
 
       #{$c}__button-icon-inner {
-        fill: $color-base-grey-dark;
+        fill: rgb(var(--color-base-grey-dark));
       }
     }
 
     #{$c}__button-arrow {
-      fill: $color-base-grey-dark;
+      fill: rgb(var(--color-base-grey-dark));
     }
 
     #{$c}__button-popover {
@@ -204,7 +204,7 @@ $entry-button-popover-edges-offset: (
       &:active {
         #{$c}__button-icon {
           #{$c}__button-icon-inner {
-            fill: $color-white;
+            fill: rgb(var(--color-white));
           }
         }
       }
@@ -213,7 +213,7 @@ $entry-button-popover-edges-offset: (
     &--color-blue {
       #{$c}__button-icon {
         #{$c}__button-icon-inner {
-          fill: $color-base-blue-normal;
+          fill: rgb(var(--color-base-blue-normal));
         }
       }
     }
@@ -221,7 +221,7 @@ $entry-button-popover-edges-offset: (
     &--color-red {
       #{$c}__button-icon {
         #{$c}__button-icon-inner {
-          fill: $color-base-red-normal;
+          fill: rgb(var(--color-base-red-normal));
         }
       }
     }
diff --git a/src/components/base/BasePopup.vue b/src/components/base/BasePopup.vue
index c3f8de3b..54a8ccab 100644
--- a/src/components/base/BasePopup.vue
+++ b/src/components/base/BasePopup.vue
@@ -80,7 +80,7 @@ export default {
 $c: ".c-base-popup";
 
 .c-base-popup {
-  background-color: rgba($color-base-grey-dark, 0.35);
+  background-color: rgba(var(--color-base-grey-dark), 0.35);
   user-select: none;
   position: fixed;
   display: flex;
@@ -90,9 +90,9 @@ $c: ".c-base-popup";
   z-index: 1000;
 
   #{$c}__popup {
-    background-color: $color-white;
+    background-color: rgb(var(--color-white));
     border-radius: 7px;
-    box-shadow: 0 4px 14px 0 rgba($color-black, 0.075);
+    box-shadow: 0 4px 14px 0 rgba(var(--color-shadow-primary), 0.075);
   }
 }
 </style>
diff --git a/src/components/base/BasePresence.vue b/src/components/base/BasePresence.vue
index 211fdf2f..0bda9164 100644
--- a/src/components/base/BasePresence.vue
+++ b/src/components/base/BasePresence.vue
@@ -101,15 +101,15 @@ $sizes: (
 );
 
 $availabilities: (
-  "available": $color-base-green-normal,
-  "away": $color-base-orange-normal,
-  "unavailable": $color-base-grey-normal,
-  "dnd": $color-base-red-normal
+  "available": var(--color-base-green-normal),
+  "away": var(--color-base-orange-normal),
+  "unavailable": var(--color-base-grey-normal),
+  "dnd": var(--color-base-red-normal)
 );
 
 .c-base-presence {
   background-color: transparent;
-  border: 1px solid $color-base-grey-normal;
+  border: 1px solid rgb(var(--color-base-grey-normal));
   display: inline-block;
   box-sizing: border-box;
   border-radius: 100%;
@@ -127,15 +127,15 @@ $availabilities: (
 
   @each $availability, $color in $availabilities {
     &--#{$availability} {
-      background-color: $color-base-grey-dark;
+      background-color: rgb(var(--color-base-grey-dark));
       border: 0 none;
 
       &#{$c}--#{$availability} {
-        background-color: $color;
+        background-color: rgb($color);
       }
 
       &#{$c}--active {
-        background-color: $color-white;
+        background-color: rgb(var(--color-white));
       }
     }
   }
@@ -143,7 +143,7 @@ $availabilities: (
   // --> BOOLEANS <--
 
   &--active {
-    border-color: $color-white;
+    border-color: rgb(var(--color-white));
   }
 
   &--available-only {
diff --git a/src/components/base/BaseProseLogo.vue b/src/components/base/BaseProseLogo.vue
index ce590425..ff62371c 100644
--- a/src/components/base/BaseProseLogo.vue
+++ b/src/components/base/BaseProseLogo.vue
@@ -88,7 +88,7 @@ $size-widths: (
   // --> TINTS <--
 
   &--normal {
-    background-color: $color-base-blue-normal;
+    background-color: rgb(var(--color-base-blue-normal));
     background-image: url("@/assets/images/components/base/BaseProseLogo/logo-tint-normal.webp");
     background-repeat: no-repeat;
     background-size: contain;
@@ -96,11 +96,11 @@ $size-widths: (
   }
 
   &--black {
-    background-color: $color-black;
+    background-color: rgb(var(--color-black));
   }
 
   &--white {
-    background-color: $color-white;
+    background-color: rgb(var(--color-white));
   }
 }
 </style>
diff --git a/src/components/base/BaseSeparator.vue b/src/components/base/BaseSeparator.vue
index e81ccc51..936d4609 100644
--- a/src/components/base/BaseSeparator.vue
+++ b/src/components/base/BaseSeparator.vue
@@ -30,7 +30,7 @@ export default {
 $c: ".c-base-separator";
 
 .c-base-separator {
-  background-color: $color-border-secondary;
+  background-color: rgb(var(--color-border-secondary));
   width: 1px;
   height: 20px;
   margin-inline: 14px;
diff --git a/src/components/base/BaseServerLogo.vue b/src/components/base/BaseServerLogo.vue
index b7232015..ec4db611 100644
--- a/src/components/base/BaseServerLogo.vue
+++ b/src/components/base/BaseServerLogo.vue
@@ -78,7 +78,7 @@ export default {
 $c: ".c-base-server-logo";
 
 .c-base-server-logo {
-  background-color: $color-base-grey-light;
+  background-color: rgb(var(--color-base-grey-light));
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -88,7 +88,7 @@ $c: ".c-base-server-logo";
   // --> SHADOWS <--
 
   &--shadow-normal {
-    box-shadow: 0 2px 4px 0 rgba($color-black, 0.08);
+    box-shadow: 0 2px 4px 0 rgba(var(--color-shadow-primary), 0.08);
   }
 }
 </style>
diff --git a/src/components/base/BaseStreamView.vue b/src/components/base/BaseStreamView.vue
index 9ea4725f..2ad4e690 100644
--- a/src/components/base/BaseStreamView.vue
+++ b/src/components/base/BaseStreamView.vue
@@ -60,14 +60,14 @@ export default {
 $c: ".c-base-stream-view";
 
 .c-base-stream-view {
-  border: 1px solid $color-border-primary;
+  border: 1px solid rgb(var(--color-border-primary));
   aspect-ratio: 4/3;
   border-radius: 3px;
   position: relative;
   box-sizing: border-box;
 
   #{$c}__view {
-    background-color: $color-base-grey-light;
+    background-color: rgb(var(--color-base-grey-light));
     position: absolute;
     inset: 2px;
     border-radius: 2px;
diff --git a/src/components/base/BaseTooltip.vue b/src/components/base/BaseTooltip.vue
index 986e9a7b..473ed7ea 100644
--- a/src/components/base/BaseTooltip.vue
+++ b/src/components/base/BaseTooltip.vue
@@ -151,7 +151,7 @@ $tooltip-spacing-inline: -3px;
   }
 
   #{$c}__value {
-    background-color: rgba($color-white, 0.9);
+    background-color: rgba(var(--color-white), 0.9);
     backdrop-filter: blur(3px);
     font-size: 11.5px;
     user-select: none;
@@ -160,11 +160,11 @@ $tooltip-spacing-inline: -3px;
     padding: 5px 10px;
     display: inline-block;
     border-radius: 3px;
-    box-shadow: 0 2px 6px 0 rgba($color-black, 0.06);
+    box-shadow: 0 2px 6px 0 rgba(var(--color-shadow-primary), 0.06);
 
     &,
     a {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
     }
 
     a {
diff --git a/src/components/form/FormCheckbox.vue b/src/components/form/FormCheckbox.vue
index 7ed6c5e4..bbbcbf98 100644
--- a/src/components/form/FormCheckbox.vue
+++ b/src/components/form/FormCheckbox.vue
@@ -139,8 +139,8 @@ $c: ".c-form-checkbox";
 
     &:before {
       content: "";
-      background-color: $color-white;
-      border: 1px solid $color-border-primary;
+      background-color: rgb(var(--color-white));
+      border: 1px solid rgb(var(--color-border-primary));
       outline: 2px solid transparent;
       position: absolute;
       inset: 0;
@@ -164,14 +164,14 @@ $c: ".c-form-checkbox";
     &:hover {
       &:checked {
         &:before {
-          border-color: darken($color-base-purple-normal, 5%);
-          background: darken($color-base-purple-normal, 5%);
+          border-color: darken-var(var(--color-base-purple-normal), 8%);
+          background: darken-var(var(--color-base-purple-normal), 8%);
         }
       }
 
       &:not(:checked) {
         &:before {
-          border-color: rgba($color-base-purple-normal, 0.75);
+          border-color: rgba(var(--color-base-purple-normal), 0.75);
           border-width: 2px;
         }
       }
@@ -180,41 +180,40 @@ $c: ".c-form-checkbox";
     &:active {
       &:checked {
         &:before {
-          border-color: darken($color-base-purple-normal, 10%);
-          background: darken($color-base-purple-normal, 10%);
+          border-color: darken-var(var(--color-base-purple-normal), 14%);
+          background: darken-var(var(--color-base-purple-normal), 14%);
         }
       }
 
       &:not(:checked) {
         &:before {
-          border-color: darken($color-base-purple-normal, 8%);
+          border-color: darken-var(var(--color-base-purple-normal), 8%);
         }
       }
     }
 
     &:focus-visible {
       &:before {
-        outline-color: rgba($color-base-purple-normal, 0.3);
+        outline-color: rgba(var(--color-base-purple-normal), 0.3);
         outline-offset: 1px;
       }
     }
 
     &:checked {
       &:before {
-        border-color: $color-base-purple-normal;
-        background: $color-base-purple-normal;
+        border-color: rgb(var(--color-base-purple-normal));
+        background: rgb(var(--color-base-purple-normal));
         transition: none;
       }
 
       &:after {
-        border-color: $color-white;
         visibility: visible;
       }
     }
   }
 
   #{$c}__label {
-    color: $color-text-primary;
+    color: rgb(var(--color-text-primary));
     flex: 1;
 
     &:hover {
@@ -269,7 +268,7 @@ $c: ".c-form-checkbox";
     }
 
     #{$c}__label {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
     }
   }
 }
diff --git a/src/components/form/FormField.vue b/src/components/form/FormField.vue
index 54903e67..24f500ec 100644
--- a/src/components/form/FormField.vue
+++ b/src/components/form/FormField.vue
@@ -303,18 +303,18 @@ $c: ".c-form-field";
   }
 
   #{$c}__inner {
-    background-color: $color-white;
-    border: 1px solid rgba($color-black, 0.1);
+    background-color: rgb(var(--color-white));
+    border: 1px solid rgba(var(--color-black), 0.1);
     outline: 0 none;
-    color: $color-text-primary;
+    color: rgb(var(--color-text-primary));
     font-family: inherit;
     width: 100%;
     padding-block: $size-form-field-padding-block;
     transition-property: box-shadow, border-color;
     border-radius: $size-form-field-border-radius;
     box-sizing: border-box;
-    box-shadow: 0 3px 4px 0 rgba($color-black, 0.01),
-      inset 0 1px 2px 0 rgba($color-black, 0.04);
+    box-shadow: 0 3px 4px 0 rgba(var(--color-shadow-primary), 0.01),
+      inset 0 1px 2px 0 rgba(var(--color-black), 0.04);
 
     &--textarea {
       height: 100%;
@@ -324,18 +324,18 @@ $c: ".c-form-field";
     }
 
     &::placeholder {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
       opacity: 1;
     }
 
     &:hover {
-      border-color: rgba($color-base-purple-normal, 0.5);
+      border-color: rgba(var(--color-base-purple-normal), 0.5);
     }
 
     &:focus {
-      border-color: $color-base-purple-normal;
-      box-shadow: 0 3px 4px 0 rgba($color-black, 0.1),
-        inset 0 1px 2px 0 rgba($color-black, 0.04);
+      border-color: rgb(var(--color-base-purple-normal));
+      box-shadow: 0 3px 4px 0 rgba(var(--color-shadow-primary), 0.1),
+        inset 0 1px 2px 0 rgba(var(--color-black), 0.04);
     }
   }
 
@@ -466,19 +466,19 @@ $c: ".c-form-field";
     }
 
     #{$c}__inner {
-      background-color: rgba($color-base-grey-light, 0.6);
-      color: $color-text-secondary;
+      background-color: rgba(var(--color-base-grey-light), 0.6);
+      color: rgb(var(--color-text-secondary));
       pointer-events: none;
 
       &::placeholder {
-        color: $color-text-tertiary;
+        color: rgb(var(--color-text-tertiary));
       }
     }
   }
 
   &--focused {
     &:before {
-      border-color: rgba($color-base-purple-normal, 0.2);
+      border-color: rgba(var(--color-base-purple-normal), 0.2);
     }
   }
 }
diff --git a/src/components/form/FormFieldset.vue b/src/components/form/FormFieldset.vue
index 80b1e213..7f98184f 100644
--- a/src/components/form/FormFieldset.vue
+++ b/src/components/form/FormFieldset.vue
@@ -34,7 +34,7 @@ $c: ".c-form-fieldset";
   & + #{$c} {
     &:before {
       content: "";
-      background-color: $color-border-secondary;
+      background-color: rgb(var(--color-border-secondary));
       height: 1px;
       margin-block: 24px;
       display: block;
diff --git a/src/components/form/FormFieldsetControl.vue b/src/components/form/FormFieldsetControl.vue
index bce1ffd8..2b7747f6 100644
--- a/src/components/form/FormFieldsetControl.vue
+++ b/src/components/form/FormFieldsetControl.vue
@@ -60,7 +60,7 @@ $c: ".c-form-fieldset-control";
 
   #{$c}__label,
   #{$c}__value {
-    color: $color-text-primary;
+    color: rgb(var(--color-text-primary));
     font-size: 13px;
     letter-spacing: 0.05px;
     line-height: 18px;
diff --git a/src/components/form/FormFieldsetField.vue b/src/components/form/FormFieldsetField.vue
index 31d10a72..ed9858de 100644
--- a/src/components/form/FormFieldsetField.vue
+++ b/src/components/form/FormFieldsetField.vue
@@ -58,7 +58,7 @@ $c: ".c-form-fieldset-field";
   }
 
   #{$c}__label {
-    color: $color-text-primary;
+    color: rgb(var(--color-text-primary));
     font-size: 14px;
     letter-spacing: 0.1px;
     line-height: 20px;
diff --git a/src/components/form/FormFieldsetNotes.vue b/src/components/form/FormFieldsetNotes.vue
index 72392d8f..b65e8fb5 100644
--- a/src/components/form/FormFieldsetNotes.vue
+++ b/src/components/form/FormFieldsetNotes.vue
@@ -31,7 +31,7 @@ export default {
 $c: ".c-form-fieldset-notes";
 
 .c-form-fieldset-notes {
-  color: $color-text-secondary;
+  color: rgb(var(--color-text-secondary));
   font-size: 13.5px;
   line-height: 16px;
   margin-block-start: 22px;
diff --git a/src/components/form/FormSelect.vue b/src/components/form/FormSelect.vue
index 87b8edd6..7f6996bc 100644
--- a/src/components/form/FormSelect.vue
+++ b/src/components/form/FormSelect.vue
@@ -562,9 +562,9 @@ $sizes: (
 
   #{$c}__field,
   #{$c}__dropdown {
-    background-color: $color-white;
-    border: $size-form-select-border-width solid rgba($color-black, 0.1);
-    box-shadow: 0 2px 3px 0 rgba($color-black, 0.01);
+    background-color: rgb(var(--color-white));
+    border: $size-form-select-border-width solid rgba(var(--color-black), 0.1);
+    box-shadow: 0 2px 3px 0 rgba(var(--color-shadow-primary), 0.01);
   }
 
   #{$c}__field,
@@ -592,11 +592,11 @@ $sizes: (
     position: relative;
 
     &:hover {
-      border-color: rgba($color-black, 0.15);
+      border-color: rgba(var(--color-black), 0.15);
     }
 
     &:active {
-      border-color: rgba($color-black, 0.2);
+      border-color: rgba(var(--color-black), 0.2);
     }
 
     #{$c}__inner {
@@ -605,15 +605,15 @@ $sizes: (
     }
 
     #{$c}__value {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
 
       &--empty {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
       }
     }
 
     #{$c}__arrow {
-      fill: $color-text-tertiary;
+      fill: rgb(var(--color-text-tertiary));
       margin-inline-start: 5px;
       flex: 0 0 auto;
     }
@@ -626,7 +626,7 @@ $sizes: (
   }
 
   #{$c}__search {
-    background-color: rgba($color-background-primary, 0.94);
+    background-color: rgba(var(--color-background-primary), 0.94);
     position: absolute;
     inset-block-start: 0;
     inset-inline: 0;
@@ -638,7 +638,7 @@ $sizes: (
     }
 
     #{$c}__search-icon {
-      fill: $color-base-grey-normal;
+      fill: rgb(var(--color-base-grey-normal));
       pointer-events: none;
       position: absolute;
       inset-block-start: 50%;
@@ -648,15 +648,15 @@ $sizes: (
     input {
       background-color: transparent;
       border: 0 none;
-      border-block-end: 1px solid $color-border-tertiary;
-      color: $color-text-primary;
+      border-block-end: 1px solid rgb(var(--color-border-tertiary));
+      color: rgb(var(--color-text-primary));
       outline: 0 none;
       font-size: 11px;
       letter-spacing: 0.05px;
       width: 100%;
 
       &::placeholder {
-        color: $color-text-tertiary;
+        color: rgb(var(--color-text-tertiary));
         opacity: 1;
       }
     }
@@ -678,45 +678,48 @@ $sizes: (
         transition: none;
 
         #{$c}__value {
-          color: $color-text-primary;
+          color: rgb(var(--color-text-primary));
         }
       }
 
       &--hovered {
         a {
-          background-color: $color-base-purple-normal;
+          background-color: rgb(var(--color-base-purple-normal));
 
           &,
           &:active {
             #{$c}__value {
-              color: $color-text-reverse;
+              color: rgb(var(--color-text-reverse));
             }
           }
 
           &:active {
-            background-color: darken($color-base-purple-normal, 6%);
+            background-color: darken-var(var(--color-base-purple-normal), 8%);
           }
         }
       }
 
       &--selected {
         a {
-          background-color: darken($color-background-secondary, 3%);
+          background-color: darken-var(var(--color-background-secondary), 3%);
         }
 
         &#{$c}__option--hovered {
           a {
-            background-color: darken($color-background-secondary, 8%);
+            background-color: darken-var(var(--color-background-secondary), 8%);
 
             &,
             &:active {
               #{$c}__value {
-                color: $color-text-primary;
+                color: rgb(var(--color-text-primary));
               }
             }
 
             &:active {
-              background-color: darken($color-background-secondary, 10%);
+              background-color: darken-var(
+                var(--color-background-secondary),
+                10%
+              );
             }
           }
         }
@@ -839,7 +842,7 @@ $sizes: (
       &,
       &:hover,
       &:active {
-        border-color: rgba($color-black, 0.125);
+        border-color: rgba(var(--color-black), 0.125);
       }
     }
 
@@ -872,14 +875,14 @@ $sizes: (
     }
 
     #{$c}__field {
-      background-color: rgba($color-base-grey-light, 0.6);
+      background-color: rgba(var(--color-base-grey-light), 0.6);
 
       #{$c}__icon {
         opacity: 0.6;
       }
 
       #{$c}__value {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
       }
     }
   }
diff --git a/src/components/form/FormToggle.vue b/src/components/form/FormToggle.vue
index d7ee3470..19ec4590 100644
--- a/src/components/form/FormToggle.vue
+++ b/src/components/form/FormToggle.vue
@@ -129,24 +129,24 @@ $toggle-field-height: ($toggle-height - (2 * $toggle-handle-offset));
     display: none;
 
     &:checked + #{$c}__field {
-      background-color: $color-base-purple-normal;
+      background-color: rgb(var(--color-base-purple-normal));
 
       &:after {
         margin-inline-start: ($toggle-field-width - $toggle-handle-size);
       }
 
       &:hover {
-        background-color: darken($color-base-purple-normal, 6%);
+        background-color: darken-var(var(--color-base-purple-normal), 8%);
       }
 
       &:active {
-        background-color: darken($color-base-purple-normal, 12%);
+        background-color: darken-var(var(--color-base-purple-normal), 14%);
       }
     }
   }
 
   #{$c}__field {
-    background-color: rgba($color-base-grey-normal, 0.2);
+    background-color: rgba(var(--color-base-grey-normal), 0.2);
     width: $toggle-field-width;
     height: $toggle-field-height;
     padding: $toggle-handle-offset;
@@ -157,29 +157,29 @@ $toggle-field-height: ($toggle-height - (2 * $toggle-handle-offset));
 
     &:after {
       content: "";
-      background-color: $color-white;
+      background-color: rgb(var(--color-white));
       width: $toggle-handle-size;
       height: $toggle-handle-size;
       border-radius: $toggle-height;
       display: block;
-      box-shadow: 0 1px 2px 0 rgba($color-black, 0.08);
+      box-shadow: 0 1px 2px 0 rgba(var(--color-shadow-primary), 0.08);
       transition: all 150ms linear;
       transition-property: margin-inline-start, box-shadow;
     }
 
     &:hover {
-      background-color: rgba($color-base-grey-normal, 0.27);
+      background-color: rgba(var(--color-base-grey-normal), 0.27);
 
       &:after {
-        box-shadow: 0 1px 2px 0 rgba($color-black, 0.12);
+        box-shadow: 0 1px 2px 0 rgba(var(--color-shadow-primary), 0.12);
       }
     }
 
     &:active {
-      background-color: rgba($color-base-grey-normal, 0.34);
+      background-color: rgba(var(--color-base-grey-normal), 0.34);
 
       &:after {
-        box-shadow: 0 1px 2px 0 rgba($color-black, 0.1);
+        box-shadow: 0 1px 2px 0 rgba(var(--color-shadow-primary), 0.1);
       }
     }
   }
diff --git a/src/components/inbox/InboxFormChatstate.vue b/src/components/inbox/InboxFormChatstate.vue
index 703ee6dc..386f9f18 100644
--- a/src/components/inbox/InboxFormChatstate.vue
+++ b/src/components/inbox/InboxFormChatstate.vue
@@ -66,15 +66,15 @@ export default {
 $c: ".c-inbox-form-chatstate";
 
 .c-inbox-form-chatstate {
-  background: rgba($color-white, 0.875);
-  color: lighten($color-base-grey-dark, 15%);
-  border: 1px solid darken($color-base-grey-light, 4%);
+  background: rgba(var(--color-white), 0.875);
+  color: lighten-var(var(--color-base-grey-dark), 15%);
+  border: 1px solid rgba(var(--color-border-primary), 0.8);
   font-size: 12.5px;
   line-height: 24px;
   padding-inline: 12px;
   padding-block-end: 1px;
   border-radius: 16px;
-  box-shadow: 0 1px 3px 0 rgba($color-black, 0.02);
+  box-shadow: 0 1px 3px 0 rgba(var(--color-shadow-primary), 0.02);
   backdrop-filter: blur(6px);
 }
 </style>
diff --git a/src/components/inbox/InboxMessaging.vue b/src/components/inbox/InboxMessaging.vue
index c8232f47..8eeca185 100644
--- a/src/components/inbox/InboxMessaging.vue
+++ b/src/components/inbox/InboxMessaging.vue
@@ -100,6 +100,7 @@ import RemoveMessage from "@/modals/inbox/RemoveMessage.vue";
 import Store from "@/store";
 import { EventMessageGeneric } from "@/store/tables/inbox";
 import { EventAvatarGeneric } from "@/store/tables/avatar";
+import { SessionAppearance } from "@/store/tables/session";
 
 // PROJECT: BROKER
 import Broker from "@/broker";
@@ -221,6 +222,10 @@ export default {
       return Store.$session;
     },
 
+    settings(): typeof Store.$settings {
+      return Store.$settings;
+    },
+
     messages(): ReturnType<typeof Store.$inbox.getMessages> {
       return Store.$inbox.getMessages(this.jid);
     }
@@ -254,16 +259,18 @@ export default {
   created() {
     // TODO: put this in a utility helper
 
-    // Bind connected handler
+    // Bind session handlers
     Store.$session.events().on("connected", this.onStoreConnected);
+    Store.$session.events().on("appearance", this.onStoreAppearance);
 
     // Synchronize messages eagerly
     this.syncMessagesEager();
   },
 
   beforeUnmount() {
-    // Unbind connected handler
+    // Unbind session handler
     Store.$session.events().off("connected", this.onStoreConnected);
+    Store.$session.events().off("appearance", this.onStoreAppearance);
 
     // Un-setup store
     this.unsetupStore();
@@ -310,10 +317,26 @@ export default {
     setupContext(runtime: MessagingRuntime): void {
       runtime.MessagingContext.setLanguage("en");
       runtime.MessagingContext.setStylePlatform(MessagingPlatform.Web);
-      runtime.MessagingContext.setStyleTheme(MessagingTheme.Light);
       runtime.MessagingContext.setAccountJID(this.selfJID.toString());
     },
 
+    setupTheme(runtime: MessagingRuntime): void {
+      // Apply style theme (as needed)
+      switch (this.session.appearance) {
+        case SessionAppearance.Light: {
+          runtime.MessagingContext.setStyleTheme(MessagingTheme.Light);
+
+          break;
+        }
+
+        case SessionAppearance.Dark: {
+          runtime.MessagingContext.setStyleTheme(MessagingTheme.Dark);
+
+          break;
+        }
+      }
+    },
+
     setupEvents(runtime: MessagingRuntime): void {
       // Subscribe to messaging events
       for (let [eventName, eventHandler] of Object.entries(
@@ -603,6 +626,7 @@ export default {
       if (frameRuntime !== null) {
         this.setupDocument(frameRuntime);
         this.setupContext(frameRuntime);
+        this.setupTheme(frameRuntime);
         this.setupEvents(frameRuntime);
         this.setupStore(frameRuntime);
         this.setupListeners(frameRuntime);
@@ -823,6 +847,15 @@ export default {
       }
     },
 
+    onStoreAppearance(): void {
+      const frameRuntime = this.frame();
+
+      if (frameRuntime !== null) {
+        // Re-setup theme
+        this.setupTheme(frameRuntime);
+      }
+    },
+
     onStoreMessageInserted(event: EventMessageGeneric): void {
       if (this.jid.equals(event.jid) === true) {
         // Insert into view
diff --git a/src/components/inbox/InboxUserinfoActions.vue b/src/components/inbox/InboxUserinfoActions.vue
index c8574317..34c5dd0c 100644
--- a/src/components/inbox/InboxUserinfoActions.vue
+++ b/src/components/inbox/InboxUserinfoActions.vue
@@ -130,7 +130,7 @@ $c: ".c-inbox-userinfo-actions";
 .c-inbox-userinfo-actions {
   #{$c}__action {
     #{$c}__action-navigate {
-      fill: $color-base-grey-dark;
+      fill: rgb(var(--color-base-grey-dark));
     }
   }
 }
diff --git a/src/components/inbox/InboxUserinfoIdentity.vue b/src/components/inbox/InboxUserinfoIdentity.vue
index 1891e6dc..992881f7 100644
--- a/src/components/inbox/InboxUserinfoIdentity.vue
+++ b/src/components/inbox/InboxUserinfoIdentity.vue
@@ -175,12 +175,12 @@ $c: ".c-inbox-userinfo-identity";
       }
 
       #{$c}__name-full {
-        color: $color-text-primary;
+        color: rgb(var(--color-text-primary));
       }
     }
 
     #{$c}__role {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
       font-size: 13px;
       margin-block-start: 6px;
     }
diff --git a/src/components/inbox/InboxUserinfoInformation.vue b/src/components/inbox/InboxUserinfoInformation.vue
index ee3fde34..e7ae8acd 100644
--- a/src/components/inbox/InboxUserinfoInformation.vue
+++ b/src/components/inbox/InboxUserinfoInformation.vue
@@ -228,7 +228,7 @@ $c: ".c-inbox-userinfo-information";
 
 .c-inbox-userinfo-information {
   #{$c}__icon {
-    fill: lighten($color-base-grey-dark, 10%);
+    fill: lighten-var(var(--color-base-grey-dark), 10%);
   }
 
   #{$c}__emoji {
diff --git a/src/components/inbox/InboxUserinfoSecurity.vue b/src/components/inbox/InboxUserinfoSecurity.vue
index bbdb22f3..e23c34ab 100644
--- a/src/components/inbox/InboxUserinfoSecurity.vue
+++ b/src/components/inbox/InboxUserinfoSecurity.vue
@@ -245,37 +245,37 @@ $c: ".c-inbox-userinfo-security";
 .c-inbox-userinfo-security {
   #{$c}__icon {
     &--identity-verified {
-      fill: $color-base-green-normal;
+      fill: rgb(var(--color-base-green-normal));
     }
 
     &--identity-unknown {
-      fill: $color-base-grey-normal;
+      fill: rgb(var(--color-base-grey-normal));
     }
 
     &--encryption-secure {
-      fill: $color-base-blue-dark;
+      fill: rgb(var(--color-base-blue-dark));
     }
 
     &--encryption-safe {
-      fill: $color-base-grey-dark;
+      fill: rgb(var(--color-base-grey-dark));
     }
 
     &--encryption-unknown {
-      fill: $color-base-orange-normal;
+      fill: rgb(var(--color-base-orange-normal));
     }
 
     &--encryption-insecure {
-      fill: $color-base-red-normal;
+      fill: rgb(var(--color-base-red-normal));
     }
   }
 
   #{$c}__label {
     &--important {
-      color: $color-base-orange-normal;
+      color: rgb(var(--color-base-orange-normal));
     }
 
     &--critical {
-      color: $color-base-red-normal;
+      color: rgb(var(--color-base-red-normal));
     }
   }
 
@@ -283,21 +283,21 @@ $c: ".c-inbox-userinfo-security";
     position: relative;
 
     #{$c}__details-icon {
-      fill: rgba($color-base-grey-dark, 0.65);
+      fill: rgba(var(--color-base-grey-dark), 0.65);
       cursor: pointer;
       display: block;
 
       &:hover {
-        fill: rgba($color-base-grey-dark, 0.8);
+        fill: rgba(var(--color-base-grey-dark), 0.8);
       }
 
       &:active {
-        fill: $color-base-grey-dark;
+        fill: rgb(var(--color-base-grey-dark));
       }
     }
 
     #{$c}__details-popover {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       width: (
         $size-inbox-userinfo-width -
           (
diff --git a/src/components/inbox/InboxUserinfoSecurityDetailsIdentity.vue b/src/components/inbox/InboxUserinfoSecurityDetailsIdentity.vue
index 6f07aabe..7ad5b582 100644
--- a/src/components/inbox/InboxUserinfoSecurityDetailsIdentity.vue
+++ b/src/components/inbox/InboxUserinfoSecurityDetailsIdentity.vue
@@ -152,14 +152,14 @@ $quickie-icon-size: 26px;
 
 .c-inbox-userinfo-security-details-identity {
   #{$c}__quickie {
-    background-color: $color-background-secondary;
+    background-color: rgb(var(--color-background-secondary));
   }
 
   #{$c}__disclaimer {
-    color: $color-text-primary;
+    color: rgb(var(--color-text-primary));
     font-size: 11.5px;
     line-height: 13px;
-    border-block-start: 1px solid $color-border-tertiary;
+    border-block-start: 1px solid rgb(var(--color-border-tertiary));
     padding-block: 8px;
 
     a {
diff --git a/src/components/layout/LayoutAvatarPresence.vue b/src/components/layout/LayoutAvatarPresence.vue
index 3eaeb74c..ceef82be 100644
--- a/src/components/layout/LayoutAvatarPresence.vue
+++ b/src/components/layout/LayoutAvatarPresence.vue
@@ -58,7 +58,7 @@ $c: ".c-layout-avatar-presence";
   position: relative;
 
   #{$c}__presence {
-    background-color: $color-white;
+    background-color: rgb(var(--color-white));
     padding: 2px;
     display: flex;
     align-items: center;
diff --git a/src/components/layout/LayoutPopupNavigate.vue b/src/components/layout/LayoutPopupNavigate.vue
index 896c85ac..b9b8824f 100644
--- a/src/components/layout/LayoutPopupNavigate.vue
+++ b/src/components/layout/LayoutPopupNavigate.vue
@@ -199,7 +199,7 @@ $popup-max-height-small: 540px;
   }
 
   #{$c}__navigate {
-    border-inline-end: 1px solid $color-border-secondary;
+    border-inline-end: 1px solid rgb(var(--color-border-secondary));
     padding-inline: 12px;
     padding-block: $popup-padding-block-start $popup-padding-block-end;
     overflow: auto;
@@ -207,7 +207,7 @@ $popup-max-height-small: 540px;
   }
 
   #{$c}__content {
-    background-color: $color-background-secondary;
+    background-color: rgb(var(--color-background-secondary));
     flex: 1;
     position: relative;
 
@@ -239,10 +239,10 @@ $popup-max-height-small: 540px;
       transition: border-color 50ms linear;
 
       &--separated {
-        border-block-start-color: $color-border-tertiary;
+        border-block-start-color: rgb(var(--color-border-tertiary));
 
         &#{$c}__actions--overlay {
-          background-color: rgba($color-background-secondary, 0.9);
+          background-color: rgba(var(--color-background-secondary), 0.9);
           backdrop-filter: blur(9px);
         }
       }
diff --git a/src/components/list/ListButton.vue b/src/components/list/ListButton.vue
index 262051eb..100532b6 100644
--- a/src/components/list/ListButton.vue
+++ b/src/components/list/ListButton.vue
@@ -132,7 +132,7 @@ $c: ".c-list-button";
   cursor: default;
 
   &:hover {
-    background-color: darken($color-base-grey-light, 1%);
+    background-color: darken-var(var(--color-base-grey-light), 1%);
   }
 
   #{$c}__icon {
@@ -180,13 +180,13 @@ $c: ".c-list-button";
 
   &--color-normal {
     #{$c}__label {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
     }
   }
 
   &--color-lighter {
     #{$c}__label {
-      color: lighten($color-text-primary, 26%);
+      color: lighten-var(var(--color-text-primary), 26%);
     }
   }
 
@@ -195,36 +195,36 @@ $c: ".c-list-button";
     &:hover,
     &#{$c}--actionable:active {
       #{$c}__label {
-        color: $color-white;
+        color: rgb(var(--color-white));
       }
     }
   }
 
   &--color-blue {
     #{$c}__label {
-      color: $color-base-blue-normal;
+      color: rgb(var(--color-base-blue-normal));
     }
 
     &:hover {
-      background-color: $color-base-blue-normal;
+      background-color: rgb(var(--color-base-blue-normal));
     }
 
     &#{$c}--actionable:active {
-      background-color: darken($color-base-blue-normal, 4%);
+      background-color: darken-var(var(--color-base-blue-normal), 4%);
     }
   }
 
   &--color-red {
     #{$c}__label {
-      color: $color-base-red-normal;
+      color: rgb(var(--color-base-red-normal));
     }
 
     &:hover {
-      background-color: $color-base-red-normal;
+      background-color: rgb(var(--color-base-red-normal));
     }
 
     &#{$c}--actionable:active {
-      background-color: darken($color-base-red-normal, 4%);
+      background-color: darken-var(var(--color-base-red-normal), 4%);
     }
   }
 
@@ -239,42 +239,42 @@ $c: ".c-list-button";
     cursor: pointer;
 
     &:active {
-      background-color: darken($color-base-grey-light, 2%);
+      background-color: darken-var(var(--color-base-grey-light), 2.5%);
     }
   }
 
   &--active {
-    background-color: $color-base-blue-normal;
+    background-color: rgb(var(--color-base-blue-normal));
 
     &:hover {
-      background-color: darken($color-base-blue-normal, 4%);
+      background-color: darken-var(var(--color-base-blue-normal), 4%);
     }
 
     &#{$c}--actionable:active {
-      background-color: darken($color-base-blue-normal, 6%);
+      background-color: darken-var(var(--color-base-blue-normal), 6%);
     }
 
     #{$c}__label {
-      color: $color-white;
+      color: rgb(var(--color-white));
     }
   }
 
   &--important {
     &:not(#{$c}--active) {
       &:nth-child(odd) {
-        background-color: darken($color-base-grey-light, 0.75%);
+        background-color: darken-var(var(--color-base-grey-light), 0.75%);
       }
 
       &:nth-child(even) {
-        background-color: lighten($color-base-grey-light, 0.25%);
+        background-color: lighten-var(var(--color-base-grey-light), 0.25%);
       }
 
       &:hover {
-        background-color: darken($color-base-grey-light, 2.5%);
+        background-color: darken-var(var(--color-base-grey-light), 2.5%);
       }
 
       &#{$c}--actionable:active {
-        background-color: darken($color-base-grey-light, 3.5%);
+        background-color: darken-var(var(--color-base-grey-light), 3.5%);
       }
     }
   }
diff --git a/src/components/list/ListDisclosure.vue b/src/components/list/ListDisclosure.vue
index bd060e82..7e7d74e6 100644
--- a/src/components/list/ListDisclosure.vue
+++ b/src/components/list/ListDisclosure.vue
@@ -136,7 +136,7 @@ $c: ".c-list-disclosure";
 
 .c-list-disclosure {
   #{$c}__header {
-    color: $color-base-grey-normal;
+    color: rgb(var(--color-base-grey-normal));
     font-size: 12.5px;
     line-height: 20px;
     display: flex;
@@ -144,18 +144,18 @@ $c: ".c-list-disclosure";
     cursor: pointer;
 
     &:hover {
-      color: darken($color-base-grey-normal, 20%);
+      color: darken-var(var(--color-base-grey-normal), 20%);
 
       #{$c}__header-arrow {
-        fill: darken($color-base-grey-normal, 15%);
+        fill: darken-var(var(--color-base-grey-normal), 15%);
       }
     }
 
     &:active {
-      color: darken($color-base-grey-normal, 35%);
+      color: darken-var(var(--color-base-grey-normal), 35%);
 
       #{$c}__header-arrow {
-        fill: darken($color-base-grey-normal, 25%);
+        fill: darken-var(var(--color-base-grey-normal), 25%);
       }
     }
 
@@ -164,7 +164,7 @@ $c: ".c-list-disclosure";
     }
 
     #{$c}__header-arrow {
-      fill: $color-base-grey-normal;
+      fill: rgb(var(--color-base-grey-normal));
       margin-inline-start: 5px;
       flex: 0 0 auto;
       transition: transform 100ms linear;
@@ -180,7 +180,7 @@ $c: ".c-list-disclosure";
 
   &--separated {
     #{$c}__header {
-      border-block-end: 1px solid rgba($color-base-grey-normal, 0.2);
+      border-block-end: 1px solid rgba(var(--color-base-grey-normal), 0.2);
       padding-block-end: 4px;
     }
   }
diff --git a/src/components/list/ListDivider.vue b/src/components/list/ListDivider.vue
index 71f5bff1..44389eda 100644
--- a/src/components/list/ListDivider.vue
+++ b/src/components/list/ListDivider.vue
@@ -30,7 +30,7 @@ export default {
 $c: ".c-list-divider";
 
 .c-list-divider {
-  background-color: $color-base-grey-light;
+  background-color: rgb(var(--color-base-grey-light));
   height: 1px;
   margin-block: 7px;
   display: block;
diff --git a/src/components/list/ListEntry.vue b/src/components/list/ListEntry.vue
index f6810ea2..13e9d699 100644
--- a/src/components/list/ListEntry.vue
+++ b/src/components/list/ListEntry.vue
@@ -92,13 +92,13 @@ $c: ".c-list-entry";
 
   &--color-normal {
     #{$c}__label {
-      color: lighten($color-text-primary, 26%);
+      color: lighten-var(var(--color-text-primary), 26%);
     }
   }
 
   &--color-lighter {
     #{$c}__label {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
     }
   }
 }
diff --git a/src/components/popups/sidebar/EditProfileEncryptionDeviceCurrent.vue b/src/components/popups/sidebar/EditProfileEncryptionDeviceCurrent.vue
index 94873f44..7e99e797 100644
--- a/src/components/popups/sidebar/EditProfileEncryptionDeviceCurrent.vue
+++ b/src/components/popups/sidebar/EditProfileEncryptionDeviceCurrent.vue
@@ -134,7 +134,7 @@ $inner-spacing-sides: 18px;
   align-items: center;
 
   #{$c}__snapshot {
-    border-inline-end: 1px solid $color-border-secondary;
+    border-inline-end: 1px solid rgb(var(--color-border-secondary));
     padding-inline-end: $inner-spacing-sides;
     display: flex;
     align-items: flex-start;
@@ -149,12 +149,12 @@ $inner-spacing-sides: 18px;
       flex: 1;
 
       #{$c}__snapshot-system {
-        color: $color-text-primary;
+        color: rgb(var(--color-text-primary));
         font-size: 14px;
       }
 
       #{$c}__snapshot-client {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
         font-size: 12.5px;
         margin-block-start: 3px;
       }
diff --git a/src/components/popups/sidebar/EditProfileNavigate.vue b/src/components/popups/sidebar/EditProfileNavigate.vue
index 35d7f733..0bd29792 100644
--- a/src/components/popups/sidebar/EditProfileNavigate.vue
+++ b/src/components/popups/sidebar/EditProfileNavigate.vue
@@ -324,8 +324,8 @@ $c: ".p-edit-profile-navigate";
         #{$c}__identity-avatar-edit-inner {
           background-image: linear-gradient(
             180deg,
-            rgba($color-black, 0) 0%,
-            rgba($color-black, 0.6) 100%
+            rgba(var(--color-black), 0) 0%,
+            rgba(var(--color-black), 0.6) 100%
           );
           padding-block-start: 14px;
           padding-block-end: 10px;
@@ -337,7 +337,7 @@ $c: ".p-edit-profile-navigate";
           transition: opacity 100ms linear;
 
           #{$c}__identity-avatar-edit-text {
-            color: $color-text-reverse;
+            color: rgb(var(--color-text-reverse));
             font-size: 12.5px;
             line-height: 14px;
             text-transform: lowercase;
@@ -349,13 +349,13 @@ $c: ".p-edit-profile-navigate";
     }
 
     #{$c}__identity-name {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       font-size: 15.5px;
       margin-block-start: 14px;
     }
 
     #{$c}__identity-address {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
       font-size: 13.5px;
       margin-block-start: 4px;
     }
diff --git a/src/components/popups/sidebar/SettingsEditorFormFieldset.vue b/src/components/popups/sidebar/SettingsEditorFormFieldset.vue
index 6ee7d463..85a69001 100644
--- a/src/components/popups/sidebar/SettingsEditorFormFieldset.vue
+++ b/src/components/popups/sidebar/SettingsEditorFormFieldset.vue
@@ -452,7 +452,7 @@ $c: ".p-settings-editor-form-fieldset";
 
 .p-settings-editor-form-fieldset {
   #{$c}__title {
-    color: $color-text-secondary;
+    color: rgb(var(--color-text-secondary));
     font-size: 14.5px;
     margin-block-end: 16px;
   }
@@ -473,7 +473,7 @@ $c: ".p-settings-editor-form-fieldset";
       }
 
       #{$c}__field-aside-link {
-        color: $color-base-purple-normal;
+        color: rgb(var(--color-base-purple-normal));
 
         &:hover {
           text-decoration: underline;
@@ -495,10 +495,10 @@ $c: ".p-settings-editor-form-fieldset";
         }
 
         &--green {
-          color: $color-base-green-normal;
+          color: rgb(var(--color-base-green-normal));
 
           #{$c}__field-aside-icon {
-            fill: $color-base-green-normal;
+            fill: rgb(var(--color-base-green-normal));
           }
         }
       }
@@ -514,15 +514,15 @@ $c: ".p-settings-editor-form-fieldset";
         margin-inline-end: 3px;
 
         &--grey {
-          fill: $color-base-grey-normal;
+          fill: rgb(var(--color-base-grey-normal));
         }
 
         &--blue {
-          fill: $color-base-blue-dark;
+          fill: rgb(var(--color-base-blue-dark));
         }
 
         &--green {
-          fill: $color-base-green-normal;
+          fill: rgb(var(--color-base-green-normal));
         }
       }
     }
diff --git a/src/components/sidebar/SidebarContext.vue b/src/components/sidebar/SidebarContext.vue
index 21042688..9c9e7b60 100644
--- a/src/components/sidebar/SidebarContext.vue
+++ b/src/components/sidebar/SidebarContext.vue
@@ -539,13 +539,23 @@ export default {
       // Reset all stores
       Store.reset();
 
-      // Redirect to login
-      await this.$router.push({
-        name: "start.login"
-      });
-
       // Show confirm alert
       BaseAlert.info("Signed out", "Successfully signed out");
+
+      // Hide sign out modal
+      this.modals.signOut.visible = false;
+
+      // Make sure that sign out modal is hidden, then redirect to login
+      // Important: failure to remove the sign out modal from the DOM will \
+      //   induce a general Vue error due to the teleport target (ie. #app) \
+      //   being destroyed, then re-created with a different DOM reference. \
+      //   This explains why we need to wait for $nextTick() before redirecting.
+      this.$nextTick(async () => {
+        // Redirect to login
+        await this.$router.push({
+          name: "start.login"
+        });
+      });
     },
 
     onModalSignOutClose(): void {
@@ -605,7 +615,7 @@ $current-status-define-padding-block: 2px;
     overflow: hidden;
 
     #{$c}__team {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       font-size: 14px;
     }
 
@@ -626,7 +636,7 @@ $current-status-define-padding-block: 2px;
       }
 
       #{$c}__status-text {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
         margin-inline-start: 5px;
 
         &:before {
@@ -639,7 +649,7 @@ $current-status-define-padding-block: 2px;
       }
 
       #{$c}__status-define {
-        color: $color-base-purple-normal;
+        color: rgb(var(--color-base-purple-normal));
         margin-inline: (-1 * $current-status-define-padding-inline);
         margin-block: (-1 * $current-status-define-padding-block);
         padding: $current-status-define-padding-block
@@ -648,11 +658,11 @@ $current-status-define-padding-block: 2px;
         transition: background-color 100ms linear;
 
         &:hover {
-          background-color: darken($color-base-grey-light, 3%);
+          background-color: darken-var(var(--color-base-grey-light), 3%);
         }
 
         &:active {
-          background-color: darken($color-base-grey-light, 5%);
+          background-color: darken-var(var(--color-base-grey-light), 5%);
         }
       }
     }
diff --git a/src/components/sidebar/SidebarContextAccount.vue b/src/components/sidebar/SidebarContextAccount.vue
index 8c8aafa8..d88556b0 100644
--- a/src/components/sidebar/SidebarContextAccount.vue
+++ b/src/components/sidebar/SidebarContextAccount.vue
@@ -112,14 +112,14 @@ $c: ".c-sidebar-context-account";
       }
 
       #{$c}__identity-name {
-        color: $color-text-primary;
+        color: rgb(var(--color-text-primary));
         font-size: 13.5px;
         flex: 1;
       }
     }
 
     #{$c}__identity-address {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
       font-size: 12.5px;
     }
   }
diff --git a/src/components/sidebar/SidebarMainItemAdd.vue b/src/components/sidebar/SidebarMainItemAdd.vue
index de5d79a9..f1198a1c 100644
--- a/src/components/sidebar/SidebarMainItemAdd.vue
+++ b/src/components/sidebar/SidebarMainItemAdd.vue
@@ -60,7 +60,7 @@ $c: ".c-sidebar-main-item-add";
 
 .c-sidebar-main-item-add {
   #{$c}__icon {
-    fill: $color-base-blue-dark;
+    fill: rgb(var(--color-base-blue-dark));
   }
 }
 </style>
diff --git a/src/components/sidebar/SidebarMainItemChannel.vue b/src/components/sidebar/SidebarMainItemChannel.vue
index abcea968..bc37b479 100644
--- a/src/components/sidebar/SidebarMainItemChannel.vue
+++ b/src/components/sidebar/SidebarMainItemChannel.vue
@@ -65,7 +65,7 @@ $c: ".c-sidebar-main-item-channel";
 
 .c-sidebar-main-item-channel {
   #{$c}__icon {
-    fill: $color-base-blue-dark;
+    fill: rgb(var(--color-base-blue-dark));
     margin-block-start: 2px;
   }
 }
diff --git a/src/components/sidebar/SidebarMainItemSection.vue b/src/components/sidebar/SidebarMainItemSection.vue
index e96d480a..0c27fb1e 100644
--- a/src/components/sidebar/SidebarMainItemSection.vue
+++ b/src/components/sidebar/SidebarMainItemSection.vue
@@ -70,7 +70,7 @@ $c: ".c-sidebar-main-item-section";
 
 .c-sidebar-main-item-section {
   #{$c}__icon {
-    fill: $color-base-blue-dark;
+    fill: rgb(var(--color-base-blue-dark));
   }
 }
 </style>
diff --git a/src/components/start/StartServerIdentity.vue b/src/components/start/StartServerIdentity.vue
index 82ce48ad..41a3a4d6 100644
--- a/src/components/start/StartServerIdentity.vue
+++ b/src/components/start/StartServerIdentity.vue
@@ -66,15 +66,15 @@ $c: ".c-start-server-identity";
 $logo-size: 44px;
 
 .c-start-server-identity {
-  background: $color-white;
-  border: 1px solid rgba($color-black, 0.06);
+  background: rgb(var(--color-white));
+  border: 1px solid rgba(var(--color-black), 0.06);
   padding: 5px;
   padding-inline-end: 30px;
   display: flex;
   align-items: center;
   border-radius: 30px;
   box-sizing: border-box;
-  box-shadow: 0 4px 4px 0 rgba($color-black, 0.01);
+  box-shadow: 0 4px 4px 0 rgba(var(--color-shadow-primary), 0.01);
 
   #{$c}__logo {
     margin-inline-end: 12px;
@@ -82,7 +82,7 @@ $logo-size: 44px;
   }
 
   #{$c}__text {
-    color: $color-text-primary;
+    color: rgb(var(--color-text-primary));
     flex: 1;
 
     #{$c}__server {
@@ -93,12 +93,12 @@ $logo-size: 44px;
       }
 
       #{$c}__server-domain {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
         font-size: 13px;
 
         &:before {
           content: "";
-          background-color: $color-border-primary;
+          background-color: rgb(var(--color-border-primary));
           vertical-align: middle;
           width: 1px;
           height: 11px;
diff --git a/src/components/tool/ToolEmojiPicker.vue b/src/components/tool/ToolEmojiPicker.vue
index d009b224..ab992475 100644
--- a/src/components/tool/ToolEmojiPicker.vue
+++ b/src/components/tool/ToolEmojiPicker.vue
@@ -70,7 +70,7 @@ $c: ".c-tool-emoji-picker";
 
     .v3-header,
     .v3-footer {
-      border-color: $color-border-secondary;
+      border-color: rgb(var(--color-border-secondary));
     }
 
     .v3-header {
@@ -98,7 +98,7 @@ $c: ".c-tool-emoji-picker";
 
         .v3-group {
           h5 {
-            background: rgba($color-white, 0.925);
+            background: rgba(var(--color-white), 0.925);
             font-size: 13px;
             font-weight: $font-weight-medium;
             padding-block-start: 7px;
@@ -111,11 +111,14 @@ $c: ".c-tool-emoji-picker";
               border-radius: 7px;
 
               &:hover {
-                background-color: $color-base-grey-light;
+                background-color: rgb(var(--color-base-grey-light));
               }
 
               &:active {
-                background-color: darken($color-base-grey-light, 1.5%);
+                background-color: darken-var(
+                  var(--color-base-grey-light),
+                  1.5%
+                );
               }
             }
           }
@@ -136,4 +139,20 @@ $c: ".c-tool-emoji-picker";
     }
   }
 }
+
+// --> APPEARANCES <--
+
+.u-appearance {
+  &--dark {
+    .v3-header {
+      .v3-groups {
+        .v3-group {
+          .v3-icon {
+            filter: invert(100%);
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/modals/sidebar/AddContact.vue b/src/modals/sidebar/AddContact.vue
index 7c56e11f..595bc9f5 100644
--- a/src/modals/sidebar/AddContact.vue
+++ b/src/modals/sidebar/AddContact.vue
@@ -296,7 +296,7 @@ $c: ".m-add-contact";
     }
 
     #{$c}__form-identity {
-      color: $color-text-secondary;
+      color: rgb(var(--color-text-secondary));
       max-width: 30%;
       display: flex;
       align-items: center;
@@ -335,7 +335,7 @@ $c: ".m-add-contact";
       }
 
       #{$c}__notice-label {
-        color: $color-text-secondary;
+        color: rgb(var(--color-text-secondary));
         flex: 1;
       }
     }
@@ -344,11 +344,11 @@ $c: ".m-add-contact";
       #{$c}__notice-line {
         &:first-child {
           #{$c}__notice-icon {
-            fill: $color-base-green-normal;
+            fill: rgb(var(--color-base-green-normal));
           }
 
           #{$c}__notice-label {
-            color: $color-base-green-normal;
+            color: rgb(var(--color-base-green-normal));
           }
         }
       }
@@ -358,11 +358,11 @@ $c: ".m-add-contact";
       #{$c}__notice-line {
         &:first-child {
           #{$c}__notice-icon {
-            fill: $color-base-grey-dark;
+            fill: rgb(var(--color-base-grey-dark));
           }
 
           #{$c}__notice-label {
-            color: $color-base-grey-dark;
+            color: rgb(var(--color-base-grey-dark));
           }
         }
       }
diff --git a/src/modals/sidebar/UpdateStatus.vue b/src/modals/sidebar/UpdateStatus.vue
index 32e11d1d..b45d0ff8 100644
--- a/src/modals/sidebar/UpdateStatus.vue
+++ b/src/modals/sidebar/UpdateStatus.vue
@@ -274,12 +274,12 @@ $c: ".m-update-status";
   }
 
   #{$c}__example {
-    color: $color-text-secondary;
+    color: rgb(var(--color-text-secondary));
     font-size: 13px;
     margin-block-start: 15px;
 
     #{$c}__example-status {
-      color: $color-text-primary;
+      color: rgb(var(--color-text-primary));
       margin-inline-start: 4px;
 
       &:hover {
diff --git a/src/store/index.ts b/src/store/index.ts
index b02dd848..39a947eb 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -35,7 +35,7 @@ const STORE_PERSIST_REVISION = "v1";
 const STORE_PERSIST_BOOT = "boot";
 
 const STORE_KEY_PREFIX = "$";
-const STORE_RESET_IGNORES = ["account", "layout"];
+const STORE_RESET_IGNORES = ["account", "layout", "settings"];
 
 /**************************************************************************
  * STORE
diff --git a/src/store/tables/session.ts b/src/store/tables/session.ts
index a80bc3de..1264563a 100644
--- a/src/store/tables/session.ts
+++ b/src/store/tables/session.ts
@@ -12,6 +12,17 @@
 import mitt from "mitt";
 import { defineStore } from "pinia";
 
+/**************************************************************************
+ * ENUMERATIONS
+ * ************************************************************************* */
+
+enum SessionAppearance {
+  // Light appearance.
+  Light = "light",
+  // Dark appearance.
+  Dark = "dark"
+}
+
 /**************************************************************************
  * INSTANCES
  * ************************************************************************* */
@@ -31,7 +42,9 @@ const $session = defineStore("session", {
       connected: false,
       connecting: false,
 
-      protocol: ""
+      protocol: "",
+
+      appearance: SessionAppearance.Light
     };
   },
 
@@ -53,6 +66,10 @@ const $session = defineStore("session", {
       this.setGeneric("protocol", this.protocol, protocol);
     },
 
+    setAppearance(appearance: SessionAppearance): void {
+      this.setGeneric("appearance", this.appearance, appearance);
+    },
+
     setGeneric<ValueType>(
       key: string,
       previousValue: ValueType,
@@ -78,4 +95,5 @@ const $session = defineStore("session", {
  * EXPORTS
  * ************************************************************************* */
 
+export { SessionAppearance };
 export default $session;
diff --git a/src/store/tables/settings.ts b/src/store/tables/settings.ts
index a76a8241..4ee7512f 100644
--- a/src/store/tables/settings.ts
+++ b/src/store/tables/settings.ts
@@ -10,10 +10,17 @@
 
 // NPM
 import { defineStore } from "pinia";
+import mitt from "mitt";
 
 // PROJECT: STORES
 import { STORE_PERSIST_PREFIX, STORE_PERSIST_BOOT } from "@/store";
 
+/**************************************************************************
+ * INSTANCES
+ * ************************************************************************* */
+
+const EventBus = mitt();
+
 /**************************************************************************
  * TABLE
  * ************************************************************************* */
@@ -110,8 +117,15 @@ const $settings = defineStore("settings", {
   },
 
   actions: {
+    events(): ReturnType<typeof mitt> {
+      // Return event bus
+      return EventBus;
+    },
+
     setAppearanceTheme(value: string): void {
-      this.setGeneric(this.appearance, "theme", value);
+      this.setGeneric(this.appearance, "theme", value, {
+        event: "appearance:theme"
+      });
 
       // Store in local storage? (for use during boot, before store is loaded)
       if (window.localStorage !== undefined) {
@@ -228,7 +242,8 @@ const $settings = defineStore("settings", {
     setGeneric<ValueType>(
       container: { [key: string]: ValueType },
       key: string,
-      value: ValueType
+      value: ValueType,
+      options?: { event?: string }
     ): boolean {
       // Check if will change
       const willChange = container[key] !== value ? true : false;
@@ -239,6 +254,11 @@ const $settings = defineStore("settings", {
           container[key] = value;
         });
 
+        // Broadcast state change?
+        if (options?.event) {
+          EventBus.emit(options.event, value);
+        }
+
         // Has changed
         return true;
       }
diff --git a/src/views/app/AppBase.vue b/src/views/app/AppBase.vue
index 96b037dc..00241f3e 100644
--- a/src/views/app/AppBase.vue
+++ b/src/views/app/AppBase.vue
@@ -46,7 +46,7 @@ $c: ".v-app-base";
   display: flex;
 
   #{$c}__sidebar {
-    border-inline-end: 1px solid $color-border-secondary;
+    border-inline-end: 1px solid rgb(var(--color-border-secondary));
     width: 300px;
     flex: 0 0 auto;
   }
diff --git a/src/views/app/inbox/AppInboxBase.vue b/src/views/app/inbox/AppInboxBase.vue
index 91c194c4..f3b5308f 100644
--- a/src/views/app/inbox/AppInboxBase.vue
+++ b/src/views/app/inbox/AppInboxBase.vue
@@ -96,8 +96,8 @@ $content-padding-sides: 14px;
   flex-direction: column;
 
   #{$c}__topbar {
-    background-color: $color-base-grey-light;
-    border-block-end: 1px solid $color-border-secondary;
+    background-color: rgb(var(--color-base-grey-light));
+    border-block-end: 1px solid rgb(var(--color-border-secondary));
     height: $size-inbox-topbar-height;
     padding: 0 $content-padding-sides;
     flex: 0 0 auto;
@@ -136,8 +136,8 @@ $content-padding-sides: 14px;
         &:before {
           background-image: linear-gradient(
             0deg,
-            rgba($color-black, 0) 0%,
-            rgba($color-black, 0.015) 100%
+            rgba(var(--color-black), 0) 0%,
+            rgba(var(--color-black), 0.015) 100%
           );
           inset-block-start: 0;
         }
@@ -145,15 +145,15 @@ $content-padding-sides: 14px;
         &:after {
           background-image: linear-gradient(
             180deg,
-            rgba($color-black, 0) 0%,
-            rgba($color-black, 0.01) 100%
+            rgba(var(--color-black), 0) 0%,
+            rgba(var(--color-black), 0.01) 100%
           );
           inset-block-end: 0;
         }
       }
 
       #{$c}__form {
-        border-block-start: 1px solid $color-border-secondary;
+        border-block-start: 1px solid rgb(var(--color-border-secondary));
         min-height: $size-inbox-form-height;
         padding: 0 $content-padding-sides;
         flex: 0 0 auto;
@@ -161,7 +161,7 @@ $content-padding-sides: 14px;
     }
 
     #{$c}__userinfo {
-      border-inline-start: 1px solid $color-border-secondary;
+      border-inline-start: 1px solid rgb(var(--color-border-secondary));
       width: $size-inbox-userinfo-width;
       overflow-x: hidden;
       overflow-y: auto;
diff --git a/src/views/start/StartLogin.vue b/src/views/start/StartLogin.vue
index 9b2a9b51..7f658b83 100644
--- a/src/views/start/StartLogin.vue
+++ b/src/views/start/StartLogin.vue
@@ -113,8 +113,8 @@ $c: ".v-start-login";
   }
 
   #{$c}__box {
-    background: rgba($color-white, 0.85);
-    border: 1px solid rgba($color-base-purple-light, 0.325);
+    background: rgba(var(--color-white), 0.85);
+    border: 1px solid rgba(var(--color-base-purple-light), 0.325);
     backdrop-filter: blur(14px);
     display: flex;
     align-items: center;