Make dashboard change background based on time of day

src/components/Dashboard/Dashboard.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
@@ -7,8 +9,32 @@ import Timetable from "@/components/Timetable/Timetable";
 import style from "./style.module.css";
 
 export default function Dashboard() {
+    const schemes = [style.day, style.evening, style.night];
+    const [scheme, setScheme] = useState(style.day);
+
+    // change background color based on time of day
+    const time = useEffect(() => {
+        const timer = setInterval(
+            () => {
+                let d = new Date();
+                let hour = d.getHours();
+                if (hour >= 7 && hour < 16) {
+                    setScheme(style.day);
+                } else if (hour < 23) {
+                    setScheme(style.evening);
+                } else {
+                    setScheme(style.night);
+                }
+            },
+            20 * 60 * 1000,
+        );
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
     return (
-        <div className={style.dashboard}>
+        <div className={`${style.dashboard} ${scheme}`}>
             <div className={style.cardWrapper}>
                 <div className={style.card}>
                     <div className={style.cardHeaderInactive}>🚊 Timetable</div>