Dark mode, hide posts

public/global.css

@@ -10,10 +10,14 @@ body {
 	box-sizing: border-box;
 	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	margin-top: 30px;
+	transition: color .3s, background-color .3s;
+	background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
 }
 
-html {
+body.dark {
-	background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
+	background-color: #1f1f1f;
+	background-image: linear-gradient(to top, rgba(94, 61, 74, 0.685), transparent min(180vh, 1080px));
+	color: rgb(191, 191, 191);
 }
 
 h1 {

src/App.svelte

@@ -3,11 +3,24 @@
 	import Button from "./components/button.svelte";
 	import Contact from "./components/contact.svelte";
 	import Hero from "./components/hero.svelte";
-	import Posts from "./components/posts.svelte";
+	// import Posts from "./components/posts.svelte";
 	import Project from "./components/project.svelte";
 	import Split from "./components/split.svelte";
 	import darkmode from "./stores/darkmode";
 
+	function toggle() {
+		$darkmode = !$darkmode;
+	}
+
+	$: {
+		if(typeof document !== "undefined") {
+			if($darkmode) {
+				document.body.classList.add("dark");
+			} else {
+				document.body.classList.remove("dark");
+			}
+		}
+	}
 </script>
 
 <svelte:head>
@@ -15,16 +28,17 @@
 	<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
 </svelte:head>
 
-<div class="bar">
+<div class="bar" class:dark={$darkmode}>
 	<Bar>
 		<h3>Daniel Bulant</h3>
 		<a href="#contact" class="big">Contact</a>
 		<Split />
+		<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
 		<a href="#contact" class="small">Contact</a>
 		<a href="mailto:danbulant@danbulant.eu" class="big">danbulant@danbulant.eu</a>
 	</Bar>
 </div>
-<main>
+<main class:dark={$darkmode}>
 	<Hero>
 		<h1>I'm a young developer making <u>websites</u> and <u>discord bots</u>.</h1>
 		<!-- <h3>To be used later</h3> -->
@@ -52,12 +66,12 @@
 			</Project>
 		</div>
 	</div>
-	<Posts />
+	<!-- <Posts /> -->
 	<div id="contact">
 		<Contact />
 	</div>
 </main>
-<div class="bottombar">
+<div class="bottombar" class:dark={$darkmode}>
 	<Bar>
 		<h3>Daniel Bulant</h3>
 		<Split />
@@ -98,6 +112,9 @@
 			width: 100%;
 			background: white;
 		}
+		.dark.bottombar {
+			background: rgb(28, 28, 33);
+		}
 	}
 	.bottombar h3 {
 		font-size: 18px;
@@ -146,6 +163,9 @@
 		margin: 0 auto 30px auto;
 		background: white;
 	}
+	.dark.bar {
+		background: rgb(28, 28, 33);
+	}
 	.bar h3 {
 		font-size: 18px;
 		font-weight: bold;
@@ -153,6 +173,9 @@
 	h1, h3 {
 		color: #282B29;
 	}
+	.dark h3 {
+		color: rgb(191, 191, 191);
+	}
 	h1 {
 		font-size: 72px;
 	}
@@ -168,4 +191,7 @@
 	.bar a {
 		color: #202020b2;
 	}
+	.dark.bar a {
+		color: rgba(191, 191, 191, 0.698);
+	}
 </style>

src/components/bar.svelte

@@ -12,6 +12,9 @@
         align-items: center;
         padding: 10px;
     }
+    :global(.dark nav.bar-component) {
+        background: rgb(28, 28, 33);
+    }
     :global(nav.bar-component > *) {
         margin: 10px;
     }

src/components/button.svelte

@@ -1,12 +1,14 @@
 <script>
+	import darkmode from "../stores/darkmode";
+
     export var href = "";
     export var text = false;
 </script>
 
 {#if href}
-    <a href={href} class="button" class:text><slot /></a>
+    <a href={href} class="button" class:text class:dark={$darkmode}><slot /></a>
 {:else}
-    <button on:click class:text><slot /></button>
+    <button on:click class:text class:dark={$darkmode}><slot /></button>
 {/if}
 
 <style>
@@ -34,4 +36,7 @@
         color: black;
         border-color: transparent;
     }
+    .dark.text {
+        color: white;
+    }
 </style>

src/components/contact.svelte

@@ -1,5 +1,8 @@
+<script>
+    import darkmode from "../stores/darkmode";
+</script>
 
-<div class="contact">
+<div class="contact" class:dark={$darkmode}>
     <div class="address">Prague, Czech Republic</div>
     <a href="mailto:danbulant@danbulant.eu" target="_blank">danbulant@danbulant.eu</a>
     <div class="profiles">
@@ -26,6 +29,9 @@
     .address {
         color: #202020d5;
     }
+    .dark .address {
+        color: rgba(191, 191, 191, 0.835);
+    }
     .contact > a {
         color: #202020;
         font-size: 36px;
@@ -34,6 +40,9 @@
         display: block;
         font-size: max(min(36px, 4vw), 23px);
     }
+    .dark.contact > a {
+        color: rgb(191, 191, 191);
+    }
     .profiles {
         display: flex;
         justify-content: center;
@@ -60,6 +69,9 @@
     .github {
         color: #333333;
     }
+    .dark .github {
+        color: rgb(191, 191, 191);
+    }
     .discord {
         color: #7289DA;
     }