前言

先祝福大家雙十快樂 😆
又一個快樂的三天連假要放啦～

今天要來介紹的是 Animate UI 1.0 更新後的新元件 -- Theme Toggler，與 Day 4 所介紹的 Dark Mode 非常類似，但是多了一點動畫，讓深淺色模式在切換時感覺更高級 🌝

Theme Toggler

1. 使用 Shadcn CLI 加入 Theme Toggler

   npx shadcn@latest add @animate-ui/components-buttons-theme-toggler
   

2. 深色模式安裝請參考 Day4 - Dark Mode

3. Import 元件並將元件放在想要的位置上

   import {
       ThemeTogglerButton,
       type ThemeTogglerButtonProps,
   } from '@/components/animate-ui/components/buttons/theme-toggler';
   
   

   const { theme, setTheme } = useTheme();
   const hasSystemMode = true;    // 若沒有系統模式，則不顯示系統模式按鈕
   

   <ThemeTogglerButton
       modes={hasSystemMode ? ['light', 'dark', 'system'] : ['light', 'dark']}
   />
   

4. 這時你可能會出現錯誤，少了 @/lib/get-strict-context 檔案

   

   這時請至 Animate UI Github Repo 複製這個檔案至 /util 目錄下，並且命名為 get-strict-context.tsx

   

   

5. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

ThemeTogglerButtonProps

小結

冷知識

今年十月上班日跟十一月的上班日是一樣多的哦 🤪

這次介紹的 Animate UI – Theme Toggler，不只是單純的「亮／暗模式切換鈕」，更像是網站氣氛的調光師，並且一步步了解如何透過 shadcn cli 安裝、調整各種參數，以及實際踩到的坑與修正方式，讓整個切換流程更順暢、更聰明。

無論你想打造沉穩的深夜模式，還是陽光灑落的白天風格，Theme Toggler 都能幫你輕鬆掌握整體視覺節奏 🎨。

Reference

• Animate UI Theme Toggler