Karo/dark mode

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",

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(

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>

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>

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);
+  }, []);
+};

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;
+}

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>