React中的簡易暗模式（和多種顏色主題！）

本指南在React應用程序中展示了直接的黑暗模式實現，重點是易用性和團隊入職。它避免了複雜的CSS策略，並利用CSS變量和數據屬性，以提供乾淨，高效的解決方案。

在大型反應項目中管理樣式和實施黑暗模式的挑戰通常會導致複雜的解決方案。儘管存在許多選項，但它們經常依靠特定的CSS方法或框架。這種方法優先考慮簡單性和速度，使其非常適合各種技能水平的團隊。

一種改進的方法，將CSS變量與useLocalStorage掛鉤相結合，提供了強大且用戶友好的主題系統。該教程使您通過從頭開始設置和運行此系統，展示其在新的React應用程序中的有效性。此外，它證明了與增強CSS組織的react-scoped-css集成。

項目設置

本指南假定對CSS，JavaScript和React的基本熟悉。確保您安裝了節點和NPM。使用以下方式創建一個新的React應用程序：

 npx create-react-app易於反應主題 -  themplate打字稿

（用您的項目名稱替換easy-react-themes ；省略--template typescript ）。在您的代碼編輯器中打開項目（例如，使用cd easy-react-themes; code . ）並啟動開發服務器（ npm start ）。最後，安裝use-local-storage ：

 npm i使用本地存儲

代碼實現

清除App.css的內容。在index.css中，使用CSS變量定義主題：

 ：根 {
   - 背景：白色；
  -Text-primary：黑色；
  -Text-ecredary：RoyalBlue；
   - 成年：紫色；
}
[data-theme ='dark'] {
   - 背景：黑色；
  -Text-primary：白色；
   - 文本中學：灰色；
   -  accent：darkred;
}

這利用CSS自定義屬性（變量）和數據屬性。當數據主題屬性設置為'dark'時，[data- data-theme [data-theme='dark']選擇器覆蓋了:root變量。

在App.tsx中，導入useLocalStorage ：

從“使用本地存儲”導入USELEACALSTOORY；

然後，管理主題狀態：

 const defaultDark = window.matchmedia（'（prefers-color-scheme：dark）'）。
const [theme，settheme] = uselocalstorage（'主題'，defaultdark？'dark'：'light'）;

這使用useLocalStorage來跨會話持續主題選擇，從而尊重瀏覽器首選項。 data-theme屬性應用於頂級<div>：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/ *您的應用程序內容在這裡 */} &lt;/div&gt;</pre><div class="contentsignin">登入後複製</div></div> <p>使用CSS變量在<code>App.css中樣式組件：

 .應用程式 {
  顏色：var（ - 文本主要）;
  背景色：var（ - 背景）;
  / * ...其他樣式... */
  過渡：全.5；
}
按鈕 {
  / * ...使用CSS變量的按鈕樣式... */
  過渡：全.5；
}

這確保樣式在主題更改時會順利更新。添加一個按鈕以切換主題。

擴展應用程序

添加一個新組件（例如，一個彩色正方形），以演示系統的可擴展性。將此組件導入App.tsx 。

獎勵：與React範圍範圍集成CSS

為了改善CSS組織，可以整合react-scoped-css 。按照Craco和craco-plugin-scoped-css的安裝說明。重命名您的CSS文件（例如， app.css到app.scoped.css ），並相應地更新導入。至關重要的是，請留下index.css ，以確保CSS變量的全局應用。

這種方法為實施黑暗模式和反應應用中的多個主題提供了一種簡單，有效且可維護的解決方案。 GitHub存儲庫和實時演示提供了更多資源。

以上是React中的簡易暗模式（和多種顏色主題！）的詳細內容。更多資訊請關注PHP中文網其他相關文章！