Merge pull request #10 from grzegorzxpatyk/develop

Develop

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "javascript.preferences.quoteStyle": "single",
+    "typescript.preferences.quoteStyle": "single",
+    "prettier.jsxSingleQuote": true,
+    "prettier.singleQuote": true,
+    "svelte.plugin.svelte.format.config.singleQuote": true,
+    "[svelte]": {
+        "editor.defaultFormatter": "svelte.svelte-vscode"
+    }
+}

src/lib/components/themeSwitch.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { theme } from '../../store';
+    import ThemeSwitchButton from './themeSwitchButton.svelte';
+
+    function setDarkTheme() {
+        if ($theme === 'dark') {
+            theme.set('OSDefault');
+        } else {
+            theme.set('dark');
+        }
+    }
+
+    function setLightTheme() {
+        if ($theme === 'light') {
+            theme.set('OSDefault');
+        } else {
+            theme.set('light');
+        }
+    }
+
+    function setOSDefaultTheme() {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    }
+
+    onMount(() => {
+        theme.set(localStorage?.theme);
+
+        theme.subscribe((value) => {
+            console.log(value);
+            localStorage.theme = value;
+            switch (value) {
+                case 'dark':
+                    document.documentElement.classList.add('dark');
+                    break;
+                case 'light':
+                    document.documentElement.classList.remove('dark');
+                    break;
+                case 'OSDefault':
+                default:
+                    setOSDefaultTheme();
+                    break;
+            }
+        });
+
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', (event) => {
+                console.log(event);
+                if (localStorage.theme !== 'OSDefault') {
+                    return;
+                }
+                setOSDefaultTheme();
+            });
+
+        return () => {
+            window
+                .matchMedia('(prefers-color-scheme: dark)')
+                .removeEventListener('change', () => {
+                    if (localStorage.theme !== 'OSDefault') {
+                        return;
+                    }
+                    setOSDefaultTheme();
+                });
+        };
+    });
+</script>
+
+<svelte:head>
+    <script>
+        if (
+            localStorage.theme === 'dark' ||
+            (!localStorage.theme &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+            (localStorage.theme === 'OSDefault' &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
+</svelte:head>
+
+<div
+    class="fixed top-4 right-4 p-2 hidden sm:grid grid-cols-2 gap-2 bg-zinc-300 dark:bg-zinc-500 bg-opacity-30 rounded-md print:hidden"
+>
+    <ThemeSwitchButton
+        variant="light"
+        clickHandler={setLightTheme}
+        isActive={$theme === 'light'}
+    />
+    <ThemeSwitchButton
+        variant="dark"
+        clickHandler={setDarkTheme}
+        isActive={$theme === 'dark'}
+    />
+</div>

src/lib/components/themeSwitchButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Moon, Sun } from 'radix-icons-svelte';
+
+    export let variant: 'light' | 'dark';
+    export let clickHandler: () => void;
+    export let isActive: boolean;
+</script>
+
+<button
+    class="p-2 bg-zinc-50 dark:bg-zinc-200 bg-opacity-30 dark:bg-opacity-30 hover:bg-opacity-50 dark:hover:bg-opacity-50 rounded-md border-2 {isActive
+        ? 'border-blue-400'
+        : 'border-zinc-300 dark:border-zinc-300'}"
+    on:click={clickHandler}
+>
+    {#if variant === 'dark'}
+        <Moon size={16} />
+    {:else}
+        <Sun size={16} />
+    {/if}
+</button>

src/lib/index.ts

@@ -2,8 +2,10 @@ import Bio__SvelteComponent_ from "./components/bio.svelte";
 import Contact__SvelteComponent_ from "./components/contact.svelte";
 import Section__SvelteComponent_ from "./components/section.svelte";
 import Technologies__SvelteComponent_ from "./components/technologies.svelte";
+import ThemeSwitch__SvelteComponent_ from "./components/themeSwitch.svelte";
 
 export const Bio = Bio__SvelteComponent_;
 export const Contact = Contact__SvelteComponent_;
 export const Section = Section__SvelteComponent_;
-export const Technologies = Technologies__SvelteComponent_;
+export const Technologies = Technologies__SvelteComponent_;
+export const ThemeSwitch = ThemeSwitch__SvelteComponent_;

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import './styles.css';
 	import '../app.css';
 	import profile from '$lib/images/profile.jpg';
-	import { Bio, Section, Contact, Technologies } from '$lib';
+	import { Bio, Section, Contact, Technologies, ThemeSwitch } from '$lib';
 </script>
 
 <svelte:head>
@@ -109,5 +109,4 @@
 	</div>
 </main>
 
-<style>
-</style>
+<ThemeSwitch />

src/store.ts

@@ -0,0 +1,3 @@
+import { writable, type Writable } from 'svelte/store';
+
+export const theme: Writable<'light' | 'dark' | 'OSDefault'> = writable('OSDefault');

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
@@ -12,5 +13,5 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: []
 }