Skip to content

Commit

Permalink
feat: rough implementation of dark mode
Browse files Browse the repository at this point in the history
A lot of CSS variables to migrate still + colors to adjust.
  • Loading branch information
valeriansaliou committed Oct 8, 2023
1 parent d8dfe6f commit a2536a4
Show file tree
Hide file tree
Showing 70 changed files with 485 additions and 353 deletions.
62 changes: 41 additions & 21 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@
:class=`[
"s-app",
"u-appearance",
{
"u-appearance--light": !isDarkMode,
"u-appearance--dark": isDarkMode
}
"u-appearance--" + session.appearance
]`
)
base-alert
Expand All @@ -32,6 +29,7 @@
<script lang="ts">
// PROJECT: STORES
import Store from "@/store";
import { SessionAppearance } from "@/store/tables/session";

export default {
name: "App",
Expand All @@ -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 {
Expand All @@ -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)")
Expand Down Expand Up @@ -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();
}
}
};
Expand All @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions src/assemblies/app/AppSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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-base-purple-ultra-light));
}

#{$c}__header,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/assemblies/inbox/InboxForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/assemblies/inbox/InboxTopbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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));
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/assemblies/start/StartLoginForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/assets/stylesheets/elements/_elements.inline.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 13 additions & 0 deletions src/assets/stylesheets/tools/_tools.functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*
* This file is part of prose-app-web
*
* Copyright 2023, Prose Foundation
*/

/* *************************************************************************
* TOOLS > FUNCTIONS
* **************************************************************************/

@function hex-var($colour) {
@return red($colour) + ", " + green($colour) + ", " + blue($colour);
}
1 change: 1 addition & 0 deletions src/assets/stylesheets/tools/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@
* TOOLS > ALL
* **************************************************************************/

@import "_tools.functions";
@import "_tools.mixins";
90 changes: 61 additions & 29 deletions src/assets/stylesheets/utilities/_utilities.appearance.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,78 @@

.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-purple-ultra-light: #{hex-var($color-base-purple-ultra-light)};
--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)};

// 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(invert($color-base-blue-normal))};
--color-base-blue-dark: #{hex-var(invert($color-base-blue-dark))};
--color-base-blue-link: #{hex-var(invert($color-base-blue-link))};
--color-base-green-normal: #{hex-var(invert($color-base-green-normal))};
--color-base-grey-dark: #{hex-var(invert($color-base-grey-dark))};
--color-base-grey-light: #{hex-var(invert($color-base-grey-light))};
--color-base-grey-normal: #{hex-var(invert($color-base-grey-normal))};
--color-base-orange-light: #{hex-var(invert($color-base-orange-light))};
--color-base-orange-normal: #{hex-var(invert($color-base-orange-normal))};
--color-base-purple-light: #{hex-var(invert($color-base-purple-light))};
--color-base-purple-normal: #{hex-var(invert($color-base-purple-normal))};
--color-base-purple-ultra-light: #{hex-var(
invert($color-base-purple-ultra-light)
)};
--color-base-red-normal: #{hex-var(invert($color-base-red-normal))};

// Borders
--color-border-primary: #{hex-var(invert($color-border-primary))};
--color-border-secondary: #{hex-var(invert($color-border-secondary))};
--color-border-tertiary: #{hex-var(invert($color-border-tertiary))};

// 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))};
}
}
20 changes: 8 additions & 12 deletions src/assets/stylesheets/variables/_variables.colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,34 @@ $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;
$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: #f0f0f0;
$color-border-tertiary: #f5f5f5;

// Backgrounds

$color-background-primary: $color-white;
$color-background-primary: #ffffff;
$color-background-secondary: #fbfbfc;

// 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;
Loading

0 comments on commit a2536a4

Please sign in to comment.