initial dark mode

Author: LinuxJava7

style.css

@@ -1,5 +1,23 @@
 @import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
 
+/* Root Variables - Light Mode (Default) */
+:root {
+  --ctp-text: var(--ctp-latte-text);
+  --ctp-base: var(--ctp-latte-base);
+  --ctp-blue: var(--ctp-latte-blue);
+  --ctp-lavender: var(--ctp-latte-lavender);
+}
+
+/* Dark Mode - Automatically Applied if User Prefers Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ctp-text: var(--ctp-frappe-text);
+    --ctp-base: var(--ctp-frappe-base);
+    --ctp-blue: var(--ctp-frappe-blue);
+    --ctp-lavender: var(--ctp-frappe-lavender);
+  }
+}
+
 /* Root Variables */
 :root {
   font-family: Inter, sans-serif;
@@ -17,7 +35,7 @@
 
 /* Body */
 body {
-  background: rgb(var(--ctp-latte-base-rgb));
+  background: var(--ctp-base);
   margin: 0;
   font-size: 1rem;
   min-height: 100vh;
@@ -27,7 +45,7 @@ body {
 
 /* Links */
 a {
-  color: var(--ctp-latte-blue);
+  color: var(--ctp-blue);
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
@@ -50,7 +68,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  color: var(--ctp-latte-lavender);
+  color: var(--ctp-lavender);
   font-size: 4.1rem;
   font-weight: 900;
   letter-spacing: -0.04em;
@@ -98,7 +116,7 @@ h1 {
   justify-content: center;
   width: 7.375rem;
   height: 2rem;
-  color: rgb(var(--ctp-latte-text-rgb));
+  color: var(--ctp-text);
   font-weight: bold;
   text-decoration: none;
   border-radius: 0.375rem;
@@ -116,7 +134,7 @@ h1 {
 
 /* Footer */
 body > footer {
-  background-color: var(--ctp-frappe-base);
+  background-color: var(--ctp-base);
   color: var(--ctp-frappe-text);
   line-height: 4em;
   padding: 1rem 1rem 0;