From 4329d9f592783b92b1578c498e8dff6e53fa9b41 Mon Sep 17 00:00:00 2001 From: hippoz <10706925-hippoz@users.noreply.gitlab.com> Date: Sun, 25 Jun 2023 17:26:30 +0300 Subject: [PATCH] improve theme handling --- frontend/public/index.html | 2 +- frontend/src/components/Main.svelte | 22 -------------- frontend/src/components/Sidebar.svelte | 2 +- frontend/src/gateway.js | 1 - frontend/src/responsive.js | 15 ++++++++-- frontend/src/stores.js | 1 - frontend/src/styles/global.css | 40 ++++++++++++++++++-------- 7 files changed, 43 insertions(+), 40 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index 7b34d93..c702fca 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte index 57e453e..7b6d81b 100644 --- a/frontend/src/components/Main.svelte +++ b/frontend/src/components/Main.svelte @@ -16,28 +16,6 @@ }); - - {#if $theme === "light"} - - {/if} - diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte index 510a3ea..5dd65af 100644 --- a/frontend/src/components/Sidebar.svelte +++ b/frontend/src/components/Sidebar.svelte @@ -37,7 +37,7 @@ display: flex; align-items: center; justify-content: center; - background: var(--background-color-1); + background: var(--background-color-2); padding: 0; font-size: inherit; border-radius: 50%; diff --git a/frontend/src/gateway.js b/frontend/src/gateway.js index 670070b..34a07ee 100644 --- a/frontend/src/gateway.js +++ b/frontend/src/gateway.js @@ -178,7 +178,6 @@ export default { const dataBlob = new Blob([jsonString, "\n", binaryData], { type: "application/octet-stream" }); - console.log(dataBlob); this.ws.send(dataBlob); } else { this.ws.send(jsonString); diff --git a/frontend/src/responsive.js b/frontend/src/responsive.js index 3fdd2f4..0e34b90 100644 --- a/frontend/src/responsive.js +++ b/frontend/src/responsive.js @@ -1,5 +1,5 @@ import { getItem } from "./storage"; -import { showSidebar, smallViewport } from "./stores"; +import { showSidebar, smallViewport, theme } from "./stores"; function initViewportSizeHandler() { const root = document.querySelector(':root'); @@ -23,6 +23,16 @@ function initViewportSizeHandler() { } } +function updateTheme(themeName) { + const classes = document.documentElement.classList; + for (const k of classes.values()) { + if (k.startsWith("theme--")) { + classes.remove(k); + } + } + classes.add(`theme--${themeName}`); +} + export function initResponsiveHandlers() { initViewportSizeHandler(); @@ -32,7 +42,8 @@ export function initResponsiveHandlers() { showSidebar.set(matches); smallViewport.set(!matches); }; - mediaQuery.addEventListener("change", update); update(mediaQuery); + + theme.subscribe(updateTheme); } diff --git a/frontend/src/stores.js b/frontend/src/stores.js index 0fb2313..6e35f24 100644 --- a/frontend/src/stores.js +++ b/frontend/src/stores.js @@ -712,7 +712,6 @@ class SelectedChannelStore extends Store { this.communityIdToSelectedChannel.set(parseInt(communityId), channel); } } - console.log(this.communityIdToSelectedChannel); this.value = this.communityIdToSelectedChannel.get(selectedCommunity.value.id) || noneChannel; this.updateSavedMap(); this.updated(); diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index e32cbaa..c31915b 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -34,17 +34,6 @@ /* top-level */ :root { - --background-color-0: #151515; - --background-color-1: #1a1a1a; - --background-color-2: #202020; - --background-color-3: #262626; - --foreground-color-1: hsl(210, 100%, 100%); - --foreground-color-2: hsl(63, 10%, 82%); - --foreground-color-3: hsl(63, 2%, 60%); - --foreground-color-4: hsl(63, 2%, 49%); - --foreground-special-color-1: hsl(180, 2%, 70%); - --colored-element-text-color: var(--foreground-color-1); - --purple-1: hsl(280, 78%, 50%); --blue-1: hsl(200, 78%, 50%); --green-1: hsl(140, 78%, 50%); @@ -95,11 +84,38 @@ --h6: 0.889rem; } +.theme--dark { + color-scheme: dark; + --background-color-0: hsl(0, 0%, 8%); + --background-color-1: hsl(0, 0%, 10%); + --background-color-2: hsl(0, 0%, 13%); + --background-color-3: hsl(0, 0%, 15%); + --foreground-color-1: hsl(210, 100%, 100%); + --foreground-color-2: hsl(63, 10%, 82%); + --foreground-color-3: hsl(63, 2%, 60%); + --foreground-color-4: hsl(63, 2%, 49%); + --foreground-special-color-1: hsl(180, 2%, 70%); + --colored-element-text-color: var(--foreground-color-1); +} + +.theme--light { + color-scheme: light; + --background-color-0: hsl(210, 10%, 85%); + --background-color-1: hsl(210, 10%, 92%); + --background-color-2: hsl(210, 10%, 98%); + --background-color-3: hsl(210, 100%, 100%); + --foreground-color-0: hsl(180, 11%, 4%); + --foreground-color-1: hsl(180, 11%, 6%); + --foreground-color-2: hsl(180, 11%, 10%); + --foreground-color-3: hsl(180, 11%, 14%); + --colored-element-text-color: var(--background-color-0); + --foreground-special-color-1: hsl(180, 18%, 20%); +} + html, body { padding: 0; margin: 0; - color-scheme: dark; accent-color: var(--purple-2); }