Implemented darkmode

This commit is contained in:
ChrQR 2024-04-23 16:56:43 +02:00
parent d13ac932de
commit 976b1147b3
9 changed files with 1298 additions and 444 deletions

1627
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,3 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
@apply bg-white dark:bg-black text-black dark:text-white text-center;
}

View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" class="">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View File

@ -0,0 +1,48 @@
<script>
// On click function for darkmode switch
import { browser } from '$app/environment';
let darkMode = true;
function handleSwitchDarkMode() {
darkMode = !darkMode;
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
darkMode
? document.documentElement.classList.add('dark')
: document.documentElement.classList.remove('dark');
}
if (browser) {
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
darkMode = true;
} else {
document.documentElement.classList.remove('dark');
darkMode = false;
}
}
</script>
<div>
<input checked={darkMode} on:click={handleSwitchDarkMode} type="checkbox" id="theme-toggle" />
<label for="theme-toggle" />
</div>
<style>
#theme-toggle {
@apply invisible;
}
#theme-toggle + label {
@apply inline-block cursor-pointer h-8 w-8 absolute top-6 right-24 rounded-full duration-300 content-[''];
}
#theme-toggle:not(:checked) + label {
@apply bg-black;
}
#theme-toggle:checked + label {
@apply bg-transparent;
box-shadow: inset -7px -5px 1px 1px #ddd;
}
</style>

View File

@ -1,6 +1,8 @@
<script>
import { blur, fade } from "svelte/transition";
import "../app.css";
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import '../app.css';
// Navigation links are generated based on this object
@ -15,16 +17,12 @@
},
{
name: "portfolio",
subPages: ["learnings", "project a", "project b", "project c"],
subPages: ["learnings", "portfolio_project"],
},
{
name: "contact",
subPages: ["get_in_touch", "socials"],
},
{
name: "login",
subPages: [],
},
];
let selected = nav[0]; // keep track of the selected 'page' object.
@ -57,6 +55,7 @@
{/each}
</ul>
{/key}
<ThemeSwitch class="absolute "/>
</nav>
<div class="container text-center md:max-w-md mx-auto sm:max-w-sm ">
<slot />

View File

@ -1,15 +1,17 @@
<script>
import migImg from "$lib/mig.jpg"
import osImg from "$lib/os.jpg"
import { blur, fade } from "svelte/transition";
</script>
<div class="page-container" in:fade>
<h1 class="text-xl font-jose mb-4">Life is good in Copenhagen</h1>
<div class="md:flex mb-4">
<p class="mb-4">I live in Copenhagen with my partner and children near the water. We love going on expeditions around the city in our cargo bike, or on my electrical skateboard.
When we're not outside I spend a lot of time fiddling around with my homelab, and development projects. You can read more about my projects here, and
<div class="content-container md:flex mb-4 items-center">
<p class="">I live in Copenhagen with my partner and children near the water. We love going on expeditions around the city in our cargo bike, or on my electrical skateboard.
When we're not outside I spend a lot of time fiddling around with my homelab, and development projects. You can read more about my projects and homelab under the homelab and portfolio nav.
</p>
<p> </p>
<img class="rounded-2xl ml-4 md:w-auto md:h-52 sm:w-full sm:h-auto" src={migImg} alt="crazy man"/>
</div>
<p class="mb-4">I work in recruitment, and I specialise in building product teams for start ups and scale ups for a small agency called <a href="https://www.adveniopeople.com">Advenio People</a></p>
<p class="mb-4">I work in recruitment, and I specialise in building product teams for start ups and scale ups for a small recruitment agency called <a class="underline font-semibold" href="https://www.adveniopeople.com">Advenio People</a></p>
<img src={osImg} alt="A happy man and a beautiful woman both wearing facemasks." class="rounded-full w-1/2 h-auto m-auto">
</div>

View File

@ -0,0 +1 @@
<h1>this is the page describing my portfolio project</h1>

View File

@ -1,2 +1,9 @@
<script>
import { fade } from "svelte/transition";
</script>
<div in:fade>
<h1 class="text-xl">Get ready for my resume baby!</h1>
<p>resumes are getting longer and longer these day, and this one is no exception!</p>
</div>

View File

@ -9,5 +9,6 @@ export default {
},
},
plugins: [],
darkMode: 'class',
}