hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve theme handling

Browse source
This commit is contained in:
hippoz 2023-06-25 17:26:30 +03:00
parent 045e34cbd5
commit 4329d9f592
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
7 changed files with 43 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/public/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="theme--dark">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="noindex" content="noindex"> <meta name="noindex" content="noindex">

22
frontend/src/components/Main.svelte
View file

@ -16,28 +16,6 @@
}); });
</script> </script>
<svelte:head>
{#if $theme === "light"}
<style>
body {
color-scheme: light;
--foreground-color-0: hsl(180, 11%, 6%);
--foreground-color-1: hsl(180, 11%, 7%);
--foreground-color-2: hsl(180, 11%, 11%);
--foreground-color-3: hsl(180, 11%, 15%);
--background-color-0: rgb(253, 254, 255);
--background-color-1: rgb(253, 254, 255);
--background-color-2: rgb(218, 219, 220);
--background-color-3: rgb(173, 174, 175);
--colored-element-text-color: var(--background-color-0);
--foreground-special-color-1: hsl(180, 18%, 20%);
}
</style>
{/if}
</svelte:head>
<OverlayProvider /> <OverlayProvider />

2
frontend/src/components/Sidebar.svelte
View file

@ -37,7 +37,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--background-color-1); background: var(--background-color-2);
padding: 0; padding: 0;
font-size: inherit; font-size: inherit;
border-radius: 50%; border-radius: 50%;

1
frontend/src/gateway.js
View file

@ -178,7 +178,6 @@ export default {
const dataBlob = new Blob([jsonString, "\n", binaryData], { const dataBlob = new Blob([jsonString, "\n", binaryData], {
type: "application/octet-stream" type: "application/octet-stream"
}); });
console.log(dataBlob);
this.ws.send(dataBlob); this.ws.send(dataBlob);
} else { } else {
this.ws.send(jsonString); this.ws.send(jsonString);

15
frontend/src/responsive.js
View file

@ -1,5 +1,5 @@
import { getItem } from "./storage"; import { getItem } from "./storage";
import { showSidebar, smallViewport } from "./stores"; import { showSidebar, smallViewport, theme } from "./stores";
function initViewportSizeHandler() { function initViewportSizeHandler() {
const root = document.querySelector(':root'); 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() { export function initResponsiveHandlers() {
initViewportSizeHandler(); initViewportSizeHandler();
@ -32,7 +42,8 @@ export function initResponsiveHandlers() {
showSidebar.set(matches); showSidebar.set(matches);
smallViewport.set(!matches); smallViewport.set(!matches);
}; };
mediaQuery.addEventListener("change", update); mediaQuery.addEventListener("change", update);
update(mediaQuery); update(mediaQuery);
theme.subscribe(updateTheme);
} }

1
frontend/src/stores.js
View file

@ -712,7 +712,6 @@ class SelectedChannelStore extends Store {
this.communityIdToSelectedChannel.set(parseInt(communityId), channel); this.communityIdToSelectedChannel.set(parseInt(communityId), channel);
} }
} }
console.log(this.communityIdToSelectedChannel);
this.value = this.communityIdToSelectedChannel.get(selectedCommunity.value.id) || noneChannel; this.value = this.communityIdToSelectedChannel.get(selectedCommunity.value.id) || noneChannel;
this.updateSavedMap(); this.updateSavedMap();
this.updated(); this.updated();

40
frontend/src/styles/global.css
View file

@ -34,17 +34,6 @@
/* top-level */ /* top-level */
:root { :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%); --purple-1: hsl(280, 78%, 50%);
--blue-1: hsl(200, 78%, 50%); --blue-1: hsl(200, 78%, 50%);
--green-1: hsl(140, 78%, 50%); --green-1: hsl(140, 78%, 50%);
@ -95,11 +84,38 @@
--h6: 0.889rem; --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 { html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
color-scheme: dark;
accent-color: var(--purple-2); accent-color: var(--purple-2);
} }