Light theme support; Twemoji supportHEADmaster

1 files changed, 21 insertions, 3 deletions

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6fecdb9..e81ddd8 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,6 +7,9 @@
 		<meta name="title" content="bits & Bytes Minecraft" />
 		<meta name="description" content="Official Minecraft server for the bits & Bytes Community" />
 
+		<meta name=”color-scheme” content="dark light" />
+		<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"/>
+
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>bits & Bytes Minecraft</title>
@@ -18,11 +21,26 @@
 
 <style>
 	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
-	html,
+	html {
+		color-scheme: dark light;
+	}
+
+	:root {
+		--base: #272727;
+		--text: #FFFFFF;
+	}
+
+	@media (prefers-color-scheme: light) {
+		:root {
+			--base: #d6d6d6;
+			--text: #353535;
+		}
+	}
+
 	body {
 		font-family: "Jetbrains Mono", monospace;
-		background-color: #272727;
-		color: #ffffff;
+		background-color: var(--base);
+		color: var(--text);
 		margin: 0;
 		width: 100%;
 		height: 100%;