Merge pull request #19 from prose-im/dark-mode

Dark Mode

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;

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;

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;
       }
     }

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));
         }
       }
     }

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;

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;

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));
+}

src/assets/stylesheets/tools/all.scss

@@ -8,4 +8,5 @@
  * TOOLS > ALL
  * **************************************************************************/
 
+@import "_tools.functions";
 @import "_tools.mixins";

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))};
   }
 }