資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中使用 Tailwind CSS 新增暗黑模式？
近年來，暗黑模式已成為人們認為的重要美學補充之一。它提供了許多好處，例如減少眼睛疲勞、改善可訪問性和現代美學。這可能會足以誘惑您將此功能新增到您的網頁中。這甚至可能比您想象的要容易得多。透過結合兩個最廣泛使用的框架 ReactJS 和 Tailwind CSS，您可以快速輕鬆地將暗黑模式新增到您的網頁中。
useState() 鉤子
useState 是 React 中的一個鉤子，允許您向函式元件新增狀態。狀態是一個物件，它儲存隨著時間推移而可能發生變化的資料，它用於儲存和管理影響元件行為或渲染的元件資料。
語法
const [state, setState] = useState(initialValue);
以下是語法的每個部分的作用：
useState − 您用來向元件新增狀態的鉤子。
stateVariable − 您要建立的狀態變數的名稱。這是 useState 返回的陣列中的第一個值。
setStateVariable − 用於更新狀態的函式。這是 useState 返回的陣列中的第二個值。
initialValue − 狀態的初始值。這是您在呼叫鉤子時傳遞給 useState 的引數。初始值用於在元件首次渲染時初始化狀態。
useState 返回一個包含兩個值的陣列：當前狀態值和一個用於更新它的函式。
useEffect 是 React 中的一個鉤子，它允許您將元件與外部系統（例如後端 API、計時器或滑鼠事件處理程式）同步。它可以幫助您管理副作用，副作用是在元件掛載、更新或解除安裝時可以修改或更新應用程式狀態或其他部分的函式。
useEffect() 鉤子
語法
useEffect(() => {
// Your code here
return () => {
// Clean up code here (optional)
};
}, [dependency1, dependency2, ...]);
useEffect 接受兩個引數：
一個將在元件更新時執行的回撥函式。
一個依賴項列表，告訴 useEffect 何時執行回撥函式。
方法
我們將使用一個自定義元件來新增，它將負責在暗黑模式和亮模式之間切換。在這個元件中，我們將使用上面提到的 useState() 鉤子來跟蹤當前模式（亮或暗），並使用 useEffect() 鉤子在模式更改時更新文件的 body 類。我們將使用 Tailwind CSS 為所有模式下的不同元件提供樣式。
示例
以下示例的實現分為幾個檔案：index.js、index.css、App.js、DarkModeToggle.js 和 dark-mode.css。在 index.js 中，匯入了 React、ReactDOM 和兩個 CSS 檔案。App.js 使用暗黑模式切換按鈕和內容設定應用程式的結構。DarkModeToggle.js 返回一個帶有 bg-gray-500 類的按鈕作為背景，以及其他用於文字和邊框屬性的類。dark-mode.css 定義了暗黑模式的外觀，包括背景和文字顏色。darkMode 狀態使用 useState 鉤子切換，並將主容器的類名更改為 light 或 dark。此實現演示瞭如何使用 Tailwind CSS 輕鬆地將暗黑模式新增到 ReactJS 中。
步驟 1 − 我們將從構思 React 應用程式開始。
npx create-react-app dark-mode
步驟 2 − 現在我們將切換到應用程式目錄。
cd dark-mode
步驟 3 − 現在讓我們安裝 Tailwind CSS。
npm install tailwindcss
以下是本示例中修改的 src 資料夾中所有檔案的完整程式碼：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './dark-mode.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
App.js
import React, { useState } from 'react';
import DarkModeToggle from './DarkModeToggle';
function App() {
const [darkMode, setDarkMode] = useState(false);
return (
<div className={`${darkMode ? 'dark' : 'light'} mode-container`}>
<div style={{margin: "10px"}}>
<DarkModeToggle darkMode={darkMode} setDarkMode={setDarkMode}/>
h1>How to Add Dark Mode in ReactJS using Tailwind CSS?</h1>
<br/>
<br/>
<p>This is some text.</p>
<br/>
<p>This is some more text.</p>
</div>
</div>
);
}
export default App;
DarkModeToggle.js
import React from 'react';
function DarkModeToggle({ darkMode, setDarkMode }) {
return (
<button
className={`bg-gray-500 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md ${darkMode ? 'active' : ''}`}
onClick={() => setDarkMode(!darkMode)}
>
{darkMode ? 'Light Mode' : 'Dark Mode'}
</button>
);
}
export default DarkModeToggle;
dark-mode.css
.mode-container {
background-color: #f5f5f5;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
.dark {
background-color: #222222;
color: #f5f5f5;
}
.light {
background-color: #f5f5f5;
color: #222222;
}
輸出
檔案輸出 dark mode.gif 將插入此處
結論
總而言之，在您的 ReactJS 應用程式中利用 Tailwind CSS 整合暗黑模式方面可以增強使用者體驗，併為那些偏好昏暗環境的使用者提供更舒適的瀏覽體驗。本文中提供的步驟指南有助於以最少的程式碼修改來實現此功能。ReactJS 生態系統中可用的大量高階工具和庫使開發人員能夠構建吸引人且身臨其境的應用程式，這些應用程式可以適應各種使用者偏好。因此，在您的 Web 應用程式中整合這個經常被忽視的屬性體現了您致力於提供全面且獨特的使用者體驗的承諾，最終使您能夠從競爭對手中脫穎而出。
3K+ 閱讀量
