Add dark theme

src/App.svelte

@@ -4,6 +4,7 @@
   import { getProfile } from './utils';
   import Home from './Home.svelte';
   import Note from './Note.svelte';
+  import ThemeSwitch from './ThemeSwitch.svelte';
 
   let currentHash = '';
   let profile: import('nostr-tools').Event;
@@ -80,3 +81,5 @@
     This page connects to some servers (Nostr relays) to retrieve data: {relays.join(', ')}
   {/if}
 </div>
+
+<ThemeSwitch />

src/Loading.svelte

@@ -4,7 +4,7 @@
 
 <style>
 
-.loader-container {
+  .loader-container {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -44,6 +44,11 @@
       opacity: 1;
     }
   }
+
+  :global(html.dark) .loader:after {
+    border: 6px solid #373737;
+    border-color: #373737 transparent #373737 transparent;
+  }
 </style>
 
 <div class="loader-container">

src/ThemeSwitch.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	let darkMode = true;
+
+	function handleSwitchDarkMode() {
+		darkMode = !darkMode;
+
+		localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+
+		darkMode
+			? document.documentElement.classList.add('dark')
+			: document.documentElement.classList.remove('dark');
+	}
+
+	// Check if the code is running in the browser
+	if (typeof window !== 'undefined') {
+		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 {
+		display: none;
+	}
+
+	#theme-toggle + label {
+		display: inline-block;
+		cursor: pointer;
+		height: 1rem;
+		width: 1rem;
+		position: absolute;
+		top: 1rem;
+		right: 3rem;
+		border-radius: 9px;
+		transition-duration: 300ms;
+		content: '';
+
+		@media only screen and (max-width: 768px) {
+			right: 1rem;
+		}
+	}
+
+	#theme-toggle:not(:checked) + label {
+		background-color: #e9e9e9;
+	}
+
+	#theme-toggle:checked + label {
+		background-color: transparent;
+		box-shadow: inset -6px -6px 1px 1px #3f3f3f;
+	}
+
+</style>

src/app.scss

@@ -12,6 +12,11 @@ body {
   padding: 0;
 }
 
+html.dark body {
+  background-color: #242424;
+  color: #cbcbcb;
+}
+
 #app {
   box-sizing: border-box;
   width: 80%;
@@ -27,13 +32,25 @@ body {
   }
 }
 
+html.dark #app {
+  background-color: #242424;
+  color: #ebebeb;
+}
+
 a {
   color: #242424;
   &:visited {
     color: #242424;
   }
 }
 
+html.dark a {
+  color: #f5f5f5;
+  &:visited {
+    color: #f5f5f5;
+  }
+}
+
 ol, ul {
   padding-left: 1rem;
   margin: 0;
@@ -81,6 +98,7 @@ pre {
 
     @media only screen and (max-width: 768px) {
       margin-bottom: 1rem;
+      margin-right: 2.5rem;
     }
 
     a{
@@ -128,6 +146,22 @@ pre {
 
 }
 
+html.dark .header {
+
+  a {
+    &:visited {
+      color: #cbcbcb;
+    }
+  }
+
+  .external-link {
+    color: #747474;
+    a {
+      color: #747474;
+    }
+  }
+}
+
 .topic-wrapper {
   margin-bottom: 1.5rem;
   display: flex;
@@ -151,7 +185,25 @@ pre {
 
       &.selected {
         background-color: #242424;
-        color: #FFFFFF;
+        color: #f5f5f5;
+      }
+
+    }
+  }
+}
+
+html.dark .topic-wrapper {
+  div {
+    a {
+      background-color: #747474;
+      color: #242424;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      &.selected {
+        background-color: #cbcbcb;
       }
 
     }
@@ -176,13 +228,22 @@ pre {
   border-bottom: 8px solid #ebebeb;
 }
 
+html.dark .about {
+  border-bottom: 8px solid #373737;
+}
+
 .separator {
   margin-bottom: 2rem;
   border-bottom: 8px solid #ebebeb;
 }
 
+html.dark .separator {
+  border-bottom: 8px solid #373737;
+}
+
 .top-notes {
   display: flex;
+  color: #747474;
 
   @media only screen and (max-width: 768px) {
     display: block;
@@ -241,6 +302,11 @@ pre {
   }
 }
 
+html.dark .top-notes {
+  color: #cbcbcb;
+  border-bottom: 8px solid #373737;
+}
+
 .short-notes {
   border-bottom: 8px solid #f5f5f5;
   padding-bottom: 1rem;
@@ -286,8 +352,16 @@ pre {
   }
 }
 
+html.dark .short-notes {
+  a {
+    color: #cbcbcb;
+  }
+  border-bottom: 8px solid #373737;
+}
+
 .listing-notes {
   margin-top: 1rem;
+  color: #747474;
 
   ul {
     list-style-type: none;
@@ -313,6 +387,10 @@ pre {
   }
 }
 
+html.dark .listing-notes {
+  color: #cbcbcb;
+}
+
 h1 {
   font-size: 2rem;
   line-height: 0.9;
@@ -387,6 +465,17 @@ h1 {
   }
 }
 
+html.dark .footer {
+  border-top: 8px solid #373737;
+  color: #747474;
+  a {
+    color: #747474;
+    &:visited {
+      color: #747474;
+    }
+  }
+}
+
 zap-threads {
   font-size: 0.9rem;
 }