Theme Toggles網頁Dark Mode明暗模式切換直接複製程序碼

Theme Toggles是一項提供Dark Mode切換範本程序碼的在線服務，專為在淺色和深色模式之間切換而設計，是一個模塊化庫，可以輕鬆將所需的HTML語法和React程序碼複製到網站中使用。

Theme Toggles是一個開放原始碼項目，為您提供一種快速而輕鬆的方法來實現精心設計的切換。對每個切換都使用SVG，並通過CSS製作動畫。使用SVG而不是像Div這樣的HTML元素，能夠儘量減少標記，同時保持圖標的高質量和可擴展性，旨在根據需要提供充分的自定義功能，可以與TailwindCSS等CSS框架完美結合。

官方網站：https://www.toggles.dev

Theme Toggles首頁可以看到所提供的範例，每個範例都可以點擊操作。以Classic範例來說，點擊圖標後，會有圖標切換範例。點擊「See the code」查看代碼，可以切換到網頁上直接操作。在圖標下方可以直接獲取HTML所需要用到的Button、Div及CheckBox語法。切換到React頁籤，則可以獲取JavaScript程序碼。使用方法在Documentation中均有所說明，可以點擊前往。

整體來說，如果想在網頁中提供Light and Dark Modes切換，強化瀏覽體驗，Theme Toggle提供的範例可以協助開發者無需從頭設計及編寫程序碼，僅需複製套用或簡單的修改就可以實現網頁擁有Light and Dark Modes功能。