Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

現在許多網頁都提供了明亮與黑暗主題的切換功能,這能夠讓使用者享受更佳的瀏覽體驗。如果也想在自家網頁中加入此功能,但又不想花費大量時間重新設計與實現 Dark Mode 切換,那麼可以考慮使用 Theme Toggles。Theme Toggles 是一個提供 Dark Mode 切換範本程式碼的網站,每個範例都可直接操作,如果覺得適合,使用者可以輕鬆將所需的 HTML 語法和 React 程式碼複製到自家網站中使用。Theme Toggles 是一個開放原始碼項目,適用於各種 CSS 框架,例如 Tailwindcss,所有範例均已模組化,可根據不同的需求進行客製化。透過 Theme Toggles,讓網站添加 Dark Mode 切換功能將變得更加輕鬆和便捷。

§相關文章,還可以參閱:

Theme Toggles 網站使用方式:

1.開啟 Theme Toggles 網站,可以看到所提供的範例。

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

2.每個範例都可以點擊操作,以 Classic 這個範例來說,點擊圖示後,會有圖示切換範例。

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

3.點擊「See the code」按鈕,可以切換到網頁上直接操作。

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

在圖示下方可以直接取得 HTML 所需要用到的 button、div 及 checkbox 語法。

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

4.切換到 React 頁籤,則可以取得 Javascript 程式碼。

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

Theme Toggles 由 Toggles.dev 網站所提供,使用方法在 Documentation 中均有所說明,可以點擊前往。

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

整體來說,如果想在網頁中提供 light and dark modes 切換,強化瀏覽體驗,Theme Toggles 提供的範例可以協助開發者不需從頭設計及撰寫程式碼的過程,僅需複製套用或簡單的修改就可以實現網頁有能有 light and dark modes 功能。

對不會寫的數學題目,如果只給答案,對學習者來說幫助不大。但,如果能在給答案之外,還能夠提供解題步驟,那麼,將會對其學習有更大的幫助。AI Math是一個免費的線上工具,主要利用人工智慧來解答數學問題。使用者只需輸入數學題目,AI Math 便會詳細列出解題步驟和過程,並附上解說,幫助使用者了解整個計算過程。AI Math 的能力涵蓋從基礎數學到高等數學,如微積分、統計和微分方程都能作答。此外,AI Math 不須註冊即可使用,也沒有使用次數限制,對於學生和家長而言,絕對是最佳的數學學習夥伴。

Reading Coach 是微軟推出的免費線上英文學習工具,利用 AI 生成故事供使用者閱讀,同時反饋閱讀時間和詞彙發音的準確率。除了 AI 生成的故事外,還可閱讀網站精選文章或是自行輸入內容。不論是 AI 生成的還是精選文章,使用者都能根據自身的英文程度選擇不同難度等級。在閱讀之前,可以開啟音節輔助功能,調整字體大小、間距和顏色,還可以將不同的詞類標註不同顏色,如名詞為紫色,動詞為紅色等。此外,使用者還可以先聽正確的發音再進行練習。Reading Coach 不僅提供了豐富的閱讀材料和方便的自訂功能,更能夠有效提升英文閱讀能力。