diff --git a/src/__layout.svelte b/src/__layout.svelte
new file mode 100644
index 0000000..823c4b1
--- /dev/null
+++ b/src/__layout.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+      document.documentElement.classList.add('light-mode');
+    }
+  });
+</script>
+
+<slot />
\ No newline at end of file
diff --git a/src/app.css b/src/app.css
index ffad73e..7ef7431 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,12 +1,11 @@
-@import "@fontsource/fira-mono";
+@import '@fontsource/fira-mono';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --font-mono: "Fira Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: 'Fira Mono', monospace;
   --secondary-color: #d0dde9;
   --accent-color: #ff3e00;
   --heading-color: rgba(0, 0, 0, 0.7);
@@ -15,6 +14,10 @@
   @apply text-gray-100;
 }
 
+:root.light-mode {
+  @apply bg-gray-100 text-gray-900;
+}
+
 body {
   @apply bg-gray-900 min-h-screen m-0;
 }
@@ -55,4 +58,4 @@ pre {
 
 button {
   @apply focus:outline-none p-2 rounded-md;
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c98f571..72f9690 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,7 +1,7 @@
-const colors = require("tailwindcss/colors");
+const colors = require('tailwindcss/colors');
 
 module.exports = {
-  content: ["./src/**/*.svelte", "./src/**/*.js", "./src/**/*.ts"],
+  content: ['./src/**/*.svelte', './src/**/*.js', './src/**/*.ts'],
   theme: {
     colors: {
       gray: colors.neutral,
@@ -15,4 +15,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-};
+};
\ No newline at end of file