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

add working prefers-color-scheme implementation

Browse source
This commit is contained in:
J-onasJones 2023-09-16 23:52:25 +02:00
parent 57ab995f83
commit 91bdb91b62
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>
</footer>
<script>
import '$lib/styles/style.css';
</script>
<style>
footer {
padding: 1rem;
margin: 2rem;
margin-bottom: 0;
margin-top: 0;
background: #16181c;
background: var(--container-background-color);
display: flex;
flex-wrap: wrap;
justify-content: space-between;

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

@ -1,24 +1,19 @@
<!-- Header.svelte -->
<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0">
<header>
<div class="header-title">
<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a>
</div>
<nav>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<li>
<DarkModeSwitcher />
</li>
</ul>
</nav>
</header>
</body>
<header>
<div class="header-title">
<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a>
</div>
<nav>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</header>
<style>
header {
@ -66,25 +61,4 @@
float: left;
clear: both;
}
button#dark-mode-toggle {
background-color: transparent;
border: none;
cursor: pointer;
}
button#dark-mode-toggle img {
width: 30px;
height: 30px;
}
</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-family: 'inter-semibold';
src: url('/font/Inter-SemiBold.woff2');
@ -19,20 +35,21 @@
html {
/*font-family: 'sary_soft_semiboldregular';*/
font-family: 'inter-semibold';
background-color: var(--background-color);
}
body {
margin: 0;
padding: 0;
background: #eee;
color: #fff;
background-color: #16181c;
color: var(--text-color);
background-color: var(--background-color);
}
main {
padding: 2rem;
margin: 2rem;
background-color: #26292f;
background-color: var(--container-background-color);
border-radius: 0.5rem;
float: left;
overflow: hidden;
@ -44,7 +61,7 @@ main {
flex-grow: 0;
height: auto;
margin: 2rem;
background-color: #26292f;
background-color: var(--container-background-color);
border-radius: 0.5rem;
overflow:visible;
}
@ -82,14 +99,10 @@ main {
}
a {
color: #afb9c4;
color: var(--link-text-color);
text-decoration: none;
}
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 Footer from '$lib/components/Footer.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>
<body style="background-color: {$isDarkMode ? '#fff' : '#16181c'};padding:0">
<div style="height:2rem"></div>
<Header />
<div class="container" class:invert={$isDarkMode}>
<div class="column"><Navbar /></div>
<div class="column content flex_grow" style="margin-left: 0;">
<main>
<slot />
<!-- Please god forgive me -->
<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>
</div>
<div style="height:2rem"></div>
<Header />
<div class="container">
<div class="column"><Navbar /></div>
<div class="column content flex_grow" style="margin-left: 0;">
<main>
<slot />
<!-- 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>
</main>
</div>
</div>
<div class:invert={$isDarkMode}>
<Footer />
</div>
<div style="height:2rem"></div>
</body>
<Footer />
<div style="height:2rem"></div>