fix: show light/dark button according to site setting

Author: satnaing

src/components/Header.astro

@@ -117,22 +117,22 @@ const isActive = (path: string) => {
               <span class="sr-only">Search</span>
             </LinkButton>
           </li>
-          <li class="col-span-1 flex items-center justify-center">
-            <button
-              id="theme-btn"
-              class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
-              title="Toggles light & dark"
-              aria-label="auto"
-              aria-live="polite"
-            >
-              <IconMoon
-                class="absolute top-[50%] left-[50%] -translate-[50%] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
-              />
-              <IconSunHigh
-                class="absolute top-[50%] left-[50%] -translate-[50%] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
-              />
-            </button>
-          </li>
+          {
+            SITE.lightAndDarkMode && (
+              <li class="col-span-1 flex items-center justify-center">
+                <button
+                  id="theme-btn"
+                  class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
+                  title="Toggles light & dark"
+                  aria-label="auto"
+                  aria-live="polite"
+                >
+                  <IconMoon class="absolute top-[50%] left-[50%] -translate-[50%] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+                  <IconSunHigh class="absolute top-[50%] left-[50%] -translate-[50%] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+                </button>
+              </li>
+            )
+          }
         </ul>
       </nav>
     </div>