From 4775b2831ecfbd3753323d836bb02be06edeb143 Mon Sep 17 00:00:00 2001
From: sirlilpanda <me@sirlilpanda.studio>
Date: Sun, 22 Mar 2026 23:42:05 +1300
Subject: [PATCH] started to implement both a dark and light mode

---
 src/styles/global.css | 75 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 69 insertions(+), 6 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index bd6f8ce..49750f7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,7 +5,47 @@
  */
 
 :root {
-	--accent: #2337ff;
+
+	--black: 15, 18, 25;
+	--gray-light: 229, 233, 240;
+	--gray-dark: 34, 41, 57;
+	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
+
+
+	--yellow-light-theme: #f5c300;
+	--pink-light-theme: #a4036f;
+	--blue-light-theme: #048ba8;
+	--green-light-theme: #16DB93;
+	--text-color-light-theme: #101010;
+	--title-color-light-theme: var(--yellow-light-theme);
+	--link-color-light-theme: var(--blue-light-theme);
+	--background-light-theme: #ffffff;
+	--header-light-theme: #f2f8ff;
+	--gray-light-theme: rgb(34, 41, 57);
+
+	--yellow-dark-theme: #f5c300;
+	--pink-dark-theme: #a4036f;
+	--blue-dark-theme: #048ba8;
+	--green-dark-theme: #16DB93;
+	--text-color-dark-theme: #fff7d8;
+	--title-color-dark-theme: var(--yellow-dark-theme);
+	--link-color-dark-theme: var(--blue-dark-theme);
+	--background-dark-theme: #202020;
+	--header-dark-theme: #151515;
+	--gray-dark-theme: rgb(229, 233, 240);
+
+	--accent: var(--green);
+	--accent-dark: var(--blue);
+	--gray: var(--gray-light-theme);
+
+
+	--box-shadow: 0 2px 6px rgba(var(--black), 25%), 0 8px 24px rgba(var(--black), 33%),
+		0 16px 32px rgba(var(--black), 33%);
+
+	--box-shadow-lighter: 0 2px 6px rgba(var(--black), 50%), 0 8px 24px rgba(var(--black), 20%);
+
+
+	/* --accent: #2337ff;
 	--accent-dark: #000d8a;
 	--black: 15, 18, 25;
 	--gray: 96, 115, 159;
@@ -14,8 +54,27 @@
 	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
 	--box-shadow:
 		0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
-		0 16px 32px rgba(var(--gray), 33%);
+		0 16px 32px rgba(var(--gray), 33%); */
 }
+
+@media (prefers-color-scheme: dark) {
+	/* defaults to dark theme */
+	:root {
+		--yellow : var(--yellow-dark-theme);
+		--pink : var(--pink-dark-theme);
+		--blue : var(--blue-dark-theme);
+		--green : var(--green-dark-theme);
+		--text-color: var(--text-color-dark-theme);
+		--title-color: var(--title-color-dark-theme);
+		--link-color: var(--link-color-dark-theme);
+		--background-colour : var(--background-dark-theme);
+		--header-color: var(--header-dark-theme);
+		--gray: var(--gray-dark-theme);
+	}
+		
+}
+
+
 @font-face {
 	font-family: "Atkinson";
 	src: url("/fonts/atkinson-regular.woff") format("woff");
@@ -39,7 +98,7 @@ body {
 	background-size: 100% 600px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
-	color: rgb(var(--gray-dark));
+	color: rgb(var(--gray));
 	font-size: 20px;
 	line-height: 1.7;
 }
@@ -56,7 +115,7 @@ h4,
 h5,
 h6 {
 	margin: 0 0 0.5rem 0;
-	color: rgb(var(--black));
+	color: rgb(var(--header-color));
 	line-height: 1.2;
 }
 h1 {
@@ -79,10 +138,10 @@ b {
 	font-weight: 700;
 }
 a {
-	color: var(--accent);
+	color: var(--pink);
 }
 a:hover {
-	color: var(--accent);
+	color: var(--pink);
 }
 p {
 	margin-bottom: 1em;
@@ -136,6 +195,10 @@ hr {
 	}
 }
 
+.katex-html {
+	display: none;
+}
+
 .sr-only {
 	border: 0;
 	padding: 0;