diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
index b2893c8..cddd8d0 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -8,7 +8,7 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
   items.length > 0 && (
     <nav
       aria-label="Breadcrumb"
-      class="flex flex-wrap items-center gap-1.5 rounded md:px-3 text-[13px] leading-none text-gray-600"
+      class="flex flex-wrap items-center gap-1.5 rounded text-[13px] leading-none text-muted md:px-3"
     >
       {items.map((item, index) => {
         const isCurrent = index === items.length - 1;
@@ -22,12 +22,12 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
             ) : (
               <span
                 aria-current={isCurrent ? "page" : undefined}
-                class={isCurrent ? "font-bold text-black" : undefined}
+                class={isCurrent ? "font-bold text-foreground" : undefined}
               >
                 {item.label}
               </span>
             )}
-            {index < items.length - 1 && <span class="text-gray-400">/</span>}
+            {index < items.length - 1 && <span class="text-muted-soft">/</span>}
           </>
         );
       })}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ef8cb8f..382053d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -17,8 +17,8 @@ const { title, breadcrumbs = [] } = Astro.props as {
         <title>Radium Help - {title}</title>
     </head>
     <body class="site-shell min-h-screen sm:flex sm:items-center sm:justify-center">
-        <main class="flex min-h-screen w-full flex-col bg-white p-4 sm:min-h-200 sm:w-11/12 md:w-3/4 sm:rounded sm:p-5 sm:shadow">
-            <header class="mb-5 flex flex-col gap-3 border-b border-gray-200 pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
+        <main class="flex min-h-screen w-full flex-col bg-surface p-4 text-foreground sm:min-h-200 sm:w-11/12 sm:rounded sm:p-5 sm:shadow md:w-3/4">
+            <header class="mb-5 flex flex-col gap-3 border-b border-border pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
                 <a href="/" class="inline-flex w-fit items-center">
                     <img
                         src="/branding/logo.png"
@@ -29,7 +29,7 @@ const { title, breadcrumbs = [] } = Astro.props as {
                 <Breadcrumbs items={breadcrumbs} />
             </header>
             <slot />
-            <footer class="text-gray-600 flex-1 flex items-end">
+            <footer class="flex flex-1 items-end text-muted">
                 <p>
                     &copy; {new Date().getFullYear()} Radium, a project by 
                     <a
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c719ddc..7800dba 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -40,16 +40,16 @@ const sections = await Promise.all(
                 sections.map((section) => (
                     <a
                         href={`/${section.name}`}
-                        class="block rounded border border-gray-200 hover:bg-gray-50 p-4 text-black bg-white"
+                        class="block rounded border border-border bg-surface p-4 text-foreground hover:bg-surface-subtle"
                     >
                         <span class="mb-1 block text-sm font-bold text-link">
                             {section.title}
                         </span>
-                        <span class="mb-2 block text-[12px] leading-5 text-gray-700">
+                        <span class="mb-2 block text-[12px] leading-5 text-muted">
                             {section.description}
                         </span>
                         {section.articleCount !== 0 && (
-                          <span class="text-[11px] text-gray-500">
+                          <span class="text-[11px] text-muted-soft">
                               {section.articleCount === 1
                                   ? "1 article"
                                   : `${section.articleCount} articles`}
diff --git a/src/styles/global.css b/src/styles/global.css
index 1b63d95..3a13dc1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,28 +2,44 @@
 @plugin "@tailwindcss/typography";
 
 :root {
-    --background: #ffffff;
+    color-scheme: light;
+    --background: #f3f4f6;
     --foreground: #000000;
+    --surface: #ffffff;
+    --surface-subtle: #f9fafb;
+    --border: #e5e7eb;
+    --muted: #4b5563;
+    --muted-soft: #6b7280;
+    --link: #095fb5;
+    --banner-overlay: rgb(0 0 0 / 30%);
 }
 
 body {
-    background: greenyellow;
+    background: var(--surface);
     color: var(--foreground);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
 }
 
-/* @media (prefers-color-scheme: dark) {
-	:root {
-		--background: #000000;
-		--foreground: #ffffff;
-	}
-} */
+@media (prefers-color-scheme: dark) {
+    :root {
+        color-scheme: dark;
+        --background: #000000;
+        --foreground: #f4f7fb;
+        --surface: #11161d;
+        --surface-subtle: #1a202a;
+        --border: #2a3340;
+        --muted: #c7d0dc;
+        --muted-soft: #98a6b6;
+        --link: #7ab8ff;
+        --banner-overlay: rgb(0 0 0 / 58%);
+    }
+}
 
 @media (min-width: 640px) {
     body.site-shell {
         background-image:
-            linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)),
+            linear-gradient(var(--banner-overlay), var(--banner-overlay)),
             url("/branding/banner.png");
         background-position: center;
         background-repeat: no-repeat;
@@ -34,9 +50,14 @@ body {
 @theme inline {
     --color-background: var(--background);
     --color-foreground: var(--foreground);
-    --color-link: #095FB5;
+    --color-surface: var(--surface);
+    --color-surface-subtle: var(--surface-subtle);
+    --color-border: var(--border);
+    --color-muted: var(--muted);
+    --color-muted-soft: var(--muted-soft);
+    --color-link: var(--link);
 }
 
 @utility prose-radium {
-    @apply prose prose-sm max-w-none prose-headings:font-bold prose-headings:mb-1 prose-headings:mt-0 prose-hr:mt-2 prose-hr:mb-6 prose-hr:border-gray-300 text-[12px] prose-li:marker:text-black prose-a:text-link prose-a:no-underline prose-a:hover:underline;
+    @apply prose prose-sm max-w-none text-[12px] text-foreground prose-headings:mt-0 prose-headings:mb-1 prose-headings:font-bold prose-headings:text-foreground prose-p:text-foreground prose-strong:text-foreground prose-li:text-foreground prose-li:marker:text-muted prose-hr:mt-2 prose-hr:mb-6 prose-hr:border-border prose-a:text-link prose-a:no-underline prose-a:hover:underline;
 }
