diff --git a/frontend/index.html b/frontend/index.html
index 9a5dcd9..8672ceb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,10 +11,19 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
         rel="stylesheet">
     <title>RIP Medium</title>
+
+    <script>
+          // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    </script>
 </head>
 
-<body class="flex justify-center">
-    <article class="flex flex-col h-full w-full justify-center prose px-8 md:px-0">
+<body class="flex justify-center dark:bg-stone-900">
+    <article class="flex flex-col h-full w-full justify-center prose dark:prose-invert px-8 md:px-0">
         <div>
             <h1>Medium.rip</h1>
             <h2>An alternative frontend to Medium</h2>
diff --git a/frontend/show.html b/frontend/show.html
index 77df924..0e1f8eb 100644
--- a/frontend/show.html
+++ b/frontend/show.html
@@ -50,11 +50,19 @@
     <meta name="twitter:url" content="https://medium.rip/{{.Path}}">
     <meta property="og:url" content="https://medium.rip/{{.Path}}">
 
-
+    <script>
+        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    </script>
 </head>
 
-<body class="flex flex-col h-full w-full items-center">
-    <article class="prose lg:prose-lg sm:prose-sm py-20 px-8 md:px-0 max-w-sm sm:max-w-2xl">
+<body class="flex flex-col h-full w-full items-center dark:bg-zinc-800">
+    <article
+        class="prose prose-zinc dark:prose-invert lg:prose-lg sm:prose-sm py-20 px-8 md:px-0 max-w-sm sm:max-w-2xl">
         <h1 class="text-2xl">{{.Title}}</h1>
         <p class="pb-8"><a href="https://medium.com/u/{{.UserId}}">{{.Author}}</a> on {{.PublishDate}}</p>
         {{.Paragraphs}}
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 6598ac0..0b41aca 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.ts", "./**/*.html"],
+  darkMode: 'class',
   theme: {
     fontFamily: {
         'sans': ['Inter'],
