fix: always call hook

Author: debater-coder

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.5.1-beta",
+  "version": "1.5.2-beta",
   "scripts": {
     "dev": "npm-run-all --parallel dev:*",
     "dev:run": "FORCE_COLOR=1 vite",

apps/client/src/routes/Main/Home/Countdown.tsx

@@ -18,6 +18,8 @@ export default function Countdown({
 }) {
   const { data: dtt } = useDtt();
   const isLoaded = !!dtt;
+  const bgColor =
+    useToken("colors", useColorModeValue("gray.300", "gray.700")) + "55";
 
   const activeIndex = dtt?.periods.findIndex(
     ({ startTime, endTime }) =>
@@ -45,9 +47,7 @@ export default function Countdown({
       <Flex
         direction={"column"}
         p={3}
-        bg={
-          useToken("colors", useColorModeValue("gray.300", "gray.700")) + "55"
-        }
+        bg={bgColor}
         rounded={"lg"}
         align={"center"}
       >