diff --git a/package.json b/package.json
index 447970d..bca1187 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "suncalc": "^1.9.0",
     "tailwind-merge": "3.4.0"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@types/node": "^25.1.0",
     "@types/react": "19.2.10",
     "@types/react-dom": "19.2.3",
+    "@types/suncalc": "^1.9.2",
     "@vitejs/plugin-react": "5.1.2",
     "eslint": "9.39.2",
     "eslint-plugin-react-hooks": "7.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ddaab80..1de3073 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      suncalc:
+        specifier: ^1.9.0
+        version: 1.9.0
       tailwind-merge:
         specifier: 3.4.0
         version: 3.4.0
@@ -69,6 +72,9 @@ importers:
       '@types/react-dom':
         specifier: 19.2.3
         version: 19.2.3(@types/react@19.2.10)
+      '@types/suncalc':
+        specifier: ^1.9.2
+        version: 1.9.2
       '@vitejs/plugin-react':
         specifier: 5.1.2
         version: 5.1.2(vite@7.3.1(@types/node@25.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.5.1))
@@ -1172,6 +1178,9 @@ packages:
   '@types/react@19.2.10':
     resolution: {integrity: sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==}
 
+  '@types/suncalc@1.9.2':
+    resolution: {integrity: sha512-ATAGBHHfA1TlE2tjfidLyTcysjoT2JHHEAmWRULh73SU9UTn++j5fqHEW16X6Y/2Li87jEQXzgu4R/OOdlDqzw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -2101,6 +2110,9 @@ packages:
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
+  suncalc@1.9.0:
+    resolution: {integrity: sha512-vMJ8Byp1uIPoj+wb9c1AdK4jpkSKVAywgHX0lqY7zt6+EWRRC3Z+0Ucfjy/0yxTVO1hwwchZe4uoFNqrIC24+A==}
+
   supports-color@10.2.2:
     resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
     engines: {node: '>=18'}
@@ -3137,6 +3149,8 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/suncalc@1.9.2': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -4369,6 +4383,8 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
+  suncalc@1.9.0: {}
+
   supports-color@10.2.2: {}
 
   supports-color@7.2.0:
diff --git a/src/App.tsx b/src/App.tsx
index 46ee1b1..dfa695b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,9 +8,11 @@ import { isAugust, isMsgExpired, isValentinesSeason } from "./utils/date";
 import WelcomeScreen from "./pages/welcome-screen";
 import { AutoReload } from "./components/auto-reload";
 import { useMessage } from "./hooks/use-message";
+import { useSunDarkMode } from "./hooks/use-sun-dark-mode";
 
 export default function App() {
   const { data: message } = useMessage();
+  useSunDarkMode();
 
   useEffect(() => {
     const interval = setInterval(
diff --git a/src/components/orakel.tsx b/src/components/orakel.tsx
index b3a64f5..35012d7 100644
--- a/src/components/orakel.tsx
+++ b/src/components/orakel.tsx
@@ -4,18 +4,18 @@ export function Orakel() {
       <h1 className="text-5xl font-bold drop-shadow-lg">Informatikk-orakel</h1>
       <p className="my-4 text-md max-w-2xl">Få hjelp med informatikkoppgaver 💻</p>
       <div className="mt- grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div className="bg-white/20 p-4 rounded-lg border-2">
+        <div className="bg-background/20 p-4 rounded-lg border-2">
           <h2 className="text-xl font-semibold">📅 Tid</h2>
           <p className="mt-2 text-md font-bold">Torsdag</p>
           <p className="text-md">14:15 - 16:00</p>
           <p className="mt-2 text-md font-bold">Fredag</p>
           <p className=" text-md">12:15 - 14:00</p>
         </div>
-        <div className="bg-white/20 p-4 rounded-lg border-2">
+        <div className="bg-background/20 p-4 rounded-lg border-2">
           <h2 className="text-xl font-semibold">📍 Sted</h2>
           <p className="mt-2 text-md">Programmerbar</p>
         </div>
-        <div className="bg-white/20 p-4 rounded-lg border-2">
+        <div className="bg-background/20 p-4 rounded-lg border-2">
           <h2 className="text-xl font-semibold">🧇 Vaffel</h2>
           <p className="mt-2 text-md">Gratis vafler på torsdagene!</p>
           <p className="mt-2 text-sm italic">Bestilles gjennom discord</p>
diff --git a/src/components/weather.tsx b/src/components/weather.tsx
index 00b5854..8173b4e 100644
--- a/src/components/weather.tsx
+++ b/src/components/weather.tsx
@@ -20,7 +20,7 @@ export function Weather() {
   const { TempIcon, temp } = getTempIcon(weather.temperature);
 
   return (
-    <div className="flex items-center gap-x-4 text-sm text-gray-700">
+    <div className="flex items-center gap-x-4 text-sm text-muted-foreground">
       <div className="flex items-center gap-1">
         {TempIcon && <TempIcon className="text-md opacity-80" />}
         <span>{temp}°C</span>
diff --git a/src/hooks/use-sun-dark-mode.ts b/src/hooks/use-sun-dark-mode.ts
new file mode 100644
index 0000000..3f85045
--- /dev/null
+++ b/src/hooks/use-sun-dark-mode.ts
@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import SunCalc from "suncalc";
+
+export const useSunDarkMode = () => {
+  useEffect(() => {
+    const updateTheme = () => {
+      const lat = 60.39299;
+      const lon = 5.32415;
+
+      const now = new Date();
+      const times = SunCalc.getTimes(now, lat, lon);
+
+      const shouldBeDark = now > times.sunset || now < times.sunrise;
+      document.documentElement.classList.toggle("dark", shouldBeDark);
+    };
+
+    updateTheme();
+
+    setInterval(() => {
+      updateTheme();
+    }, 60000);
+  }, []);
+};
diff --git a/src/index.css b/src/index.css
index 9f46ccf..3ba1470 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,7 +17,21 @@
 
 .valentines {
   --border: 338, 68%, 63%;
-  --primary: 338, 68%, 63%
+  --primary: 338, 68%, 63%;
+}
+
+.dark {
+  --background: 24 10% 7%;
+  --foreground: 0 0% 96%;
+
+  --muted: 230 18% 8%;
+  --muted-foreground: 215 15% 70%;
+
+  --border: 230 15% 18%;
+  --valentines-border: 338 70% 60%;
+
+  --primary: 185 70% 12%;
+  --secondary: 42 60% 18%;
 }
 
 @theme inline {
@@ -41,3 +55,7 @@
 body {
   @apply text-foreground/90 font-sans bg-gradient-to-tl from-primary/50 to-secondary/50 h-screen;
 }
+
+.dark body {
+  @apply bg-none bg-background;
+}
diff --git a/src/pages/message-screen.tsx b/src/pages/message-screen.tsx
index d2311e7..1041946 100644
--- a/src/pages/message-screen.tsx
+++ b/src/pages/message-screen.tsx
@@ -9,13 +9,11 @@ export const MessageScreen = () => {
   return (
     <div className="flex flex-col items-center justify-center w-full">
       <div className="bg-background/80 border-2 shadow-lg rounded-2xl p-8 max-w-5xl w-full text-center max-h-[600px] overflow-hidden">
-        <h1 className="text-3xl font-semibold text-gray-700 mb-6">Hovedstyret taler!</h1>
+        <h1 className="text-3xl font-semibold mb-6">Hovedstyret taler!</h1>
 
-        {message?.title && (
-          <h2 className="text-5xl font-bold text-gray-900 mb-6">{message.title}</h2>
-        )}
+        {message?.title && <h2 className="text-5xl font-bold mb-6">{message.title}</h2>}
 
-        <p className="text-2xl leading-relaxed text-gray-800 whitespace-pre-line">
+        <p className="text-2xl leading-relaxed text-muted-foreground whitespace-pre-line">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{message?.body}</ReactMarkdown>
         </p>
       </div>