Jonas_Jones/wiki.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/wiki.jonasjones.dev.git synced 2025-10-23 06:09:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1 from J-onasJones/prefers-color-scheme

Browse source 
add working prefers-color-scheme implementation
This commit is contained in:
Jonas_Jones 2023-09-16 23:53:25 +02:00 • committed by GitHub
commit 6d1c779668
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/lib/components/DarkModeSwitcher.svelte
View file

@ -1,42 +0,0 @@
<!-- DarkModeSwitcher.svelte -->
<script>
import { isDarkMode } from '$lib/stores/darkModeStore.js';
function toggleDarkMode() {
$isDarkMode = !$isDarkMode;
document.body.classList.toggle("dark-mode", $isDarkMode);
}
</script>
<button on:click={toggleDarkMode}>
<img src={$isDarkMode ? "/dark.svg" : "/light.svg"} alt="Dark Mode">
</button>
<div class:invert={$isDarkMode} class="content">
<!-- Your content here -->
</div>
<style>
body {
transition: background-color 0.5s, color 0.5s;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
}
button.dark {
color: #fff; /* Dark mode text color */
background-color: #333; /* Dark mode background color */
}
.content {
/* Your default content styles here */
}
.invert {
filter: invert(1); /* Apply the invert filter for dark mode */
}
</style>

6
src/lib/components/Footer.svelte
View file

@ -16,13 +16,17 @@
</nav> </nav>
</footer> </footer>
<script>
import '$lib/styles/style.css';
</script>
<style> <style>
footer { footer {
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
background: #16181c; background: var(--container-background-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;

56
src/lib/components/Header.svelte
View file

@ -1,24 +1,19 @@
<!-- Header.svelte --> <!-- Header.svelte -->
<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0"> <header>
<header> <div class="header-title">
<div class="header-title"> <a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a>
<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a> </div>
</div> <nav>
<nav> <ul>
<ul> <li>
<li> <a href="/about">About</a>
<a href="/about">About</a> </li>
</li> <li>
<li> <a href="/contact">Contact</a>
<a href="/contact">Contact</a> </li>
</li> </ul>
<li> </nav>
<DarkModeSwitcher /> </header>
</li>
</ul>
</nav>
</header>
</body>
<style> <style>
header { header {
@ -66,25 +61,4 @@
float: left; float: left;
clear: both; clear: both;
} }
button#dark-mode-toggle {
background-color: transparent;
border: none;
cursor: pointer;
}
button#dark-mode-toggle img {
width: 30px;
height: 30px;
}
</style> </style>
<script>
import DarkModeSwitcher from '$lib/components/DarkModeSwitcher.svelte';
import { isDarkMode } from '$lib/stores/darkModeStore.js';
function toggleDarkMode() {
$isDarkMode = !$isDarkMode;
document.body.classList.toggle("dark-mode", $isDarkMode);
}
</script>

3
src/lib/stores/darkModeStore.js
View file

@ -1,3 +0,0 @@
import { writable } from 'svelte/store';
export let isDarkMode = writable(false);

33
src/lib/styles/style.css
View file

@ -11,6 +11,22 @@
} }
:root {
--background-color: #16181c;
--container-background-color: #26292f;
--text-color: #fff;
--link-text-color: #afb9c4;
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #eee;
--container-background-color: #d9d6d0;
--text-color: #000;
--link-text-color: #50463b;
}
}
@font-face { @font-face {
font-family: 'inter-semibold'; font-family: 'inter-semibold';
src: url('/font/Inter-SemiBold.woff2'); src: url('/font/Inter-SemiBold.woff2');
@ -19,20 +35,21 @@
html { html {
/*font-family: 'sary_soft_semiboldregular';*/ /*font-family: 'sary_soft_semiboldregular';*/
font-family: 'inter-semibold'; font-family: 'inter-semibold';
background-color: var(--background-color);
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #eee; background: #eee;
color: #fff; color: var(--text-color);
background-color: #16181c; background-color: var(--background-color);
} }
main { main {
padding: 2rem; padding: 2rem;
margin: 2rem; margin: 2rem;
background-color: #26292f; background-color: var(--container-background-color);
border-radius: 0.5rem; border-radius: 0.5rem;
float: left; float: left;
overflow: hidden; overflow: hidden;
@ -44,7 +61,7 @@ main {
flex-grow: 0; flex-grow: 0;
height: auto; height: auto;
margin: 2rem; margin: 2rem;
background-color: #26292f; background-color: var(--container-background-color);
border-radius: 0.5rem; border-radius: 0.5rem;
overflow:visible; overflow:visible;
} }
@ -82,14 +99,10 @@ main {
} }
a { a {
color: #afb9c4; color: var(--link-text-color);
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #fff; color: var(--text-color);
} }
.invert {
filter: invert(1);
}

38
src/routes/+layout.svelte
View file

@ -2,32 +2,20 @@
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import Navbar from '$lib/components/Navbar.svelte'; import Navbar from '$lib/components/Navbar.svelte';
import { isDarkMode } from '$lib/stores/darkModeStore';
import '$lib/styles/style.css';
//change background color based on dark mode
//$: document.body.style.backgroundColor = $isDarkMode ? '#fff' : '#16181c';
</script> </script>
<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0"> <div style="height:2rem"></div>
<div style="height:2rem"></div> <Header />
<Header /> <div class="container">
<div class="container" class:invert={$isDarkMode}> <div class="column"><Navbar /></div>
<div class="column"><Navbar /></div> <div class="column content flex_grow" style="margin-left: 0;">
<div class="column content flex_grow" style="margin-left: 0;"> <main>
<main> <slot />
<slot /> <!-- Please god forgive me -->
<!-- Please god forgive me --> <h1 style="color: var(--container-background-color);margin:0;padding:0" class="unselectable">YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS</h1>
<h1 style="color: #26292f;margin:0;padding:0" class="unselectable">YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS</h1> </main>
</main>
</div>
</div> </div>
</div>
<Footer />
<div style="height:2rem"></div>
<div class:invert={$isDarkMode}>
<Footer />
</div>
<div style="height:2rem"></div>
</body>