mirror of
https://github.com/ProjectSegfault/website.git
synced 2024-11-08 17:12:24 +05:30
dark mode (we need to improve the colours a lot)
This commit is contained in:
parent
68502e7426
commit
efbc2d935d
@ -23,6 +23,7 @@
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"svelte": "^3.49.0",
|
||||
"svelte-check": "^2.8.0",
|
||||
"svelte-dark-mode": "^2.1.0",
|
||||
"svelte-hcaptcha": "^0.1.1",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"svelte-seo": "^1.4.1",
|
||||
|
@ -11,6 +11,7 @@ specifiers:
|
||||
prettier-plugin-svelte: ^2.7.0
|
||||
svelte: ^3.49.0
|
||||
svelte-check: ^2.8.0
|
||||
svelte-dark-mode: ^2.1.0
|
||||
svelte-hcaptcha: ^0.1.1
|
||||
svelte-preprocess: ^4.10.7
|
||||
svelte-seo: ^1.4.1
|
||||
@ -31,6 +32,7 @@ devDependencies:
|
||||
prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
|
||||
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-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji
|
||||
svelte-seo: 1.4.1_typescript@4.7.4
|
||||
@ -1044,6 +1046,10 @@ packages:
|
||||
- sugarss
|
||||
dev: true
|
||||
|
||||
/svelte-dark-mode/2.1.0:
|
||||
resolution: {integrity: sha512-/QmIqWGwzcfE82FAMuHBlKFwudW7Vcos60Ii8j/mJZ0H6kGAXwL5EGlcc8voBJMJv/i0QZmhp5b1ZX/XKg9NJQ==}
|
||||
dev: true
|
||||
|
||||
/svelte-hcaptcha/0.1.1:
|
||||
resolution: {integrity: sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==}
|
||||
dev: true
|
||||
|
@ -2,6 +2,7 @@
|
||||
import IconBars from "~icons/fa6-solid/bars";
|
||||
import IconMatrix from "~icons/simple-icons/matrix";
|
||||
import IconGitHub from "~icons/simple-icons/github";
|
||||
import ThemeToggle from "./ThemeToggle.svelte";
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
@ -34,6 +35,9 @@
|
||||
<a href="https://github.com/ProjectSegfault/">
|
||||
<IconGitHub />
|
||||
</a>
|
||||
<div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
38
src/lib/ThemeToggle.svelte
Normal file
38
src/lib/ThemeToggle.svelte
Normal 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>
|
@ -17,18 +17,29 @@
|
||||
}
|
||||
|
||||
html {
|
||||
--primary: #151515;
|
||||
--secondary: #252525;
|
||||
--tertiary: #353535;
|
||||
--accent-primary: #b59bd8;
|
||||
--accent-secondary: #b59bd8;
|
||||
--accent-translucent: #b59bd898;
|
||||
--text: #ffffffde;
|
||||
--grey: #5454547a;
|
||||
--font-primary: 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 {
|
||||
font-family: var(--font-primary);
|
||||
background-color: var(--primary);
|
||||
|
Loading…
Reference in New Issue
Block a user