dark mode (we need to improve the colours a lot)

This commit is contained in:
Akis 2022-08-06 10:56:25 +03:00
parent 68502e7426
commit efbc2d935d
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
5 changed files with 65 additions and 5 deletions

View File

@ -23,6 +23,7 @@
"prettier-plugin-svelte": "^2.7.0", "prettier-plugin-svelte": "^2.7.0",
"svelte": "^3.49.0", "svelte": "^3.49.0",
"svelte-check": "^2.8.0", "svelte-check": "^2.8.0",
"svelte-dark-mode": "^2.1.0",
"svelte-hcaptcha": "^0.1.1", "svelte-hcaptcha": "^0.1.1",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"svelte-seo": "^1.4.1", "svelte-seo": "^1.4.1",

View File

@ -11,6 +11,7 @@ specifiers:
prettier-plugin-svelte: ^2.7.0 prettier-plugin-svelte: ^2.7.0
svelte: ^3.49.0 svelte: ^3.49.0
svelte-check: ^2.8.0 svelte-check: ^2.8.0
svelte-dark-mode: ^2.1.0
svelte-hcaptcha: ^0.1.1 svelte-hcaptcha: ^0.1.1
svelte-preprocess: ^4.10.7 svelte-preprocess: ^4.10.7
svelte-seo: ^1.4.1 svelte-seo: ^1.4.1
@ -31,6 +32,7 @@ devDependencies:
prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
svelte: 3.49.0 svelte: 3.49.0
svelte-check: 2.8.0_svelte@3.49.0 svelte-check: 2.8.0_svelte@3.49.0
svelte-dark-mode: 2.1.0
svelte-hcaptcha: 0.1.1 svelte-hcaptcha: 0.1.1
svelte-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji svelte-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji
svelte-seo: 1.4.1_typescript@4.7.4 svelte-seo: 1.4.1_typescript@4.7.4
@ -1044,6 +1046,10 @@ packages:
- sugarss - sugarss
dev: true dev: true
/svelte-dark-mode/2.1.0:
resolution: {integrity: sha512-/QmIqWGwzcfE82FAMuHBlKFwudW7Vcos60Ii8j/mJZ0H6kGAXwL5EGlcc8voBJMJv/i0QZmhp5b1ZX/XKg9NJQ==}
dev: true
/svelte-hcaptcha/0.1.1: /svelte-hcaptcha/0.1.1:
resolution: {integrity: sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==} resolution: {integrity: sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==}
dev: true dev: true

View File

@ -2,6 +2,7 @@
import IconBars from "~icons/fa6-solid/bars"; import IconBars from "~icons/fa6-solid/bars";
import IconMatrix from "~icons/simple-icons/matrix"; import IconMatrix from "~icons/simple-icons/matrix";
import IconGitHub from "~icons/simple-icons/github"; import IconGitHub from "~icons/simple-icons/github";
import ThemeToggle from "./ThemeToggle.svelte";
</script> </script>
<nav> <nav>
@ -34,6 +35,9 @@
<a href="https://github.com/ProjectSegfault/"> <a href="https://github.com/ProjectSegfault/">
<IconGitHub /> <IconGitHub />
</a> </a>
<div>
<ThemeToggle />
</div>
</div> </div>
</nav> </nav>

View File

@ -0,0 +1,38 @@
<script lang="ts">
import { afterUpdate } from "svelte";
import DarkMode from "svelte-dark-mode";
import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
import IconSun from "~icons/fa6-solid/sun";
import IconMoon from "~icons/fa6-solid/moon";
let theme: Theme;
afterUpdate(() => {
document.documentElement.className = theme;
});
let toggle = () => {
theme = theme === "dark" ? "light" : "dark";
};
</script>
<DarkMode bind:theme />
{#if theme === "dark"}
<div on:click={toggle}>
<IconSun />
</div>
{:else if theme === "light"}
<div on:click={toggle}>
<IconMoon />
</div>
{/if}
<style>
div {
cursor: pointer;
display: flex;
align-items: center;
}
</style>

View File

@ -17,18 +17,29 @@
} }
html { html {
--primary: #151515;
--secondary: #252525;
--tertiary: #353535;
--accent-primary: #b59bd8; --accent-primary: #b59bd8;
--accent-secondary: #b59bd8; --accent-secondary: #b59bd8;
--accent-translucent: #b59bd898; --accent-translucent: #b59bd898;
--text: #ffffffde;
--grey: #5454547a;
--font-primary: Raleway; --font-primary: Raleway;
--font-header: Raleway; --font-header: Raleway;
} }
html.dark {
--primary: #151515;
--secondary: #252525;
--tertiary: #353535;
--text: #ffffffde;
--grey: #5454547a;
}
html.light {
--primary: #dddddd;
--secondary: #bbbbbb;
--tertiary: #939393;
--text: #1f1f1f;
--grey: #292929;
}
body { body {
font-family: var(--font-primary); font-family: var(--font-primary);
background-color: var(--primary); background-color: var(--primary);