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