Make dashboard change background based on time of day

src/components/Dashboard/Dashboard.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import Flatastic from "@/components/Flatastic/Flatastic";
 import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
 import Timetable from "@/components/Timetable/Timetable";
@@ -8,8 +10,32 @@ import Footer from "@/components/Footer/Footer";
 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>

src/components/Dashboard/style.module.css

@@ -2,9 +2,24 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    transition: 0.5s;
+}
+
+/* 7 to 16  */
+.day {
     background-color: #007c7d;
 }
 
+/* 16 to 23 */
+.evening {
+    background-color: #3b5773;
+}
+
+/* 23 to 8 */
+.night {
+    background-color: #2a3f55;
+}
+
 .cardWrapper {
     margin: 30px;
     height: 100%;
@@ -29,30 +44,30 @@
 }
 
 .cardHeader {
-  height: 30px;
-  color: white;
-  background-color: #000082;
-  text-align: left;
-  padding-left: 5px;
-  font-weight: bold;
+    height: 30px;
+    color: white;
+    background-color: #000082;
+    text-align: left;
+    padding-left: 5px;
+    font-weight: bold;
 }
 
 .cardHeaderInactive {
-  height: 30px;
-  color: #c0c0c0;
-  background-color: #808080;
-  text-align: left;
-  padding-left: 5px;
-  font-weight: bold;
+    height: 30px;
+    color: #c0c0c0;
+    background-color: #808080;
+    text-align: left;
+    padding-left: 5px;
+    font-weight: bold;
 }
 
 .clock {
-  width: 45%;
+    width: 45%;
 }
 
 .terminal {
 }
 
 .footer {
-  background-color: #c0c0c0;
+    background-color: #c0c0c0;
 }

src/index.css

@@ -4,8 +4,6 @@
     font-weight: 400;
 
     color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -13,15 +11,6 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
-}
-
 body {
     margin: 0;
     display: flex;
@@ -34,35 +23,3 @@ h1 {
     font-size: 3.2em;
     line-height: 1.1;
 }
-
-button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-}
-button:hover {
-    border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-    a:hover {
-        color: #747bff;
-    }
-    button {
-        background-color: #f9f9f9;
-    }
-}