黑暗模式與React和Themeprovider切換

本文演示瞭如何使用樣式組件為React應用程序創建暗模式切換。它涵蓋設置項目，創建淺色和深色主題，實現切換功能，構建可重複使用的切換組件以及利用用戶的首選配色方案。讓我們完善文本以清晰和簡潔。

現在，許多網站都提供黑暗模式，提高可讀性並減少眼睛勞累。該教程指導您使用樣式組件和自定義掛鉤為您的React應用程序構建暗模式切換。

設置項目

首先使用create-react-app創建一個新的React項目：

 npx create-react-app my-app
CD my-app
紗線開始

安裝樣式組件：

紗線添加了樣式的組件

為主題變量創建theme.js ：

 // theme.js
導出const lighttheme = {
  身體：'＃e2e2e2'，
  文字：'＃363537'，
  toggleBorder：'#fff'，
  漸變：“線性學位（＃39598a，＃79d7ed）”，
};

導出const darktheme = {
  身體：'＃363537'，
  文字：'#fafafa'，
  toggleBorder：'＃6B8096'，
  漸變：“線性級別（＃091236，＃1E215D）”，
};

和用於基礎樣式的global.js ：

 // global.js
從“樣式組件”中導入{createGlobalStyle}；

導出const globalstyles = createGlobalStyle`
  *， *， *::之後， *:: {box-sige：border-box; }
  身體 {
    準項目：中心；
    背景：$ {（{theme}）=> theme.body};
    顏色：$ {（{theme}）=> theme.text};
    顯示：Flex;
    撓性方向：列；
    Jusify-content：中心；
    身高：100VH；
    保證金：0;
    填充：0;
    font-family：blinkmacsystemfont，-apple-system，“ segoe ui”，roboto，helvetica，arial，sans-serif;
    過渡：所有0.25 s線性；
  }
`;

初始化您的App.js ：

 // app.js
從“反應”中導入反應；
從“樣式組件”導入{themeprovider}；
從'./theme'導入{lighttheme};
從'./global'導入{globalstyles};

功能應用程序（）{
  返回 （
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1 id="這是一個輕巧的主題">這是一個輕巧的主題！</h1>
    </themeprovider>
  ）；
}

導出默認應用；

實現切換

導入useState並添加主題切換邏輯：

 // app.js
導入React，{usestate}來自“ React”；
// ...其他進口

功能應用程序（）{
  const [theme，settheme] = usestate（'light'）;
  const toggletheme =（）=> setTheme（them ==='light'？'dark'：'light'）;

  const themode = theme ==='light'？ Lighttheme：Darktheme;

  返回 （
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">切換主題</button>
      <h1 id="這是一個-主題-light-light-dark-主題">這是一個{主題==='light'？ 'light'：'dark'}主題！</h1>
    </themeprovider>
  ）；
}

GlobalStyles動態應用主題顏色。

創建可重複使用的切換組件

創建Toggle.js （並且可選地Toggle.styled.js用於樣式）：

 // toggle.js
從“反應”中導入反應；
從“ prop-types”導入預售；
從“樣式組件”中導入樣式；
從'./icons/moon.svg'導入{ReactComponent as Moonicon}; //導入您的SVG
從'./icons/sun.svg'導入{reactComponent as sunicon};


const togglecontainer = styplet.button`
  / * ...上一個示例的樣式... */
`;

const toggle =（{theme，toggletheme}）=> {
  const islight = them ==='light';
  返回 （
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  ）；
};

toggle.proptypes = {
  主題：proptypes.string.isrequired，
  toggletheme：proptypes.func.isrequired，
};

導出默認切換;

更新App.js使用Toggle組件：

 // app.js
從'./toggle'導入切換'; //導入您的切換組件

// ...內部應用功能...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

切記用實際的SVG圖標路徑代替佔位符。

持續的黑暗模式，帶有useDarkMode鉤

創建useDarkMode.js ：

 // underarkmode.js
從“ react”導入{useffect，usestate};

導出const usedarkmode =（）=> {
  const [theme，settheme] = usestate（localstorage.getItem（'theme'）||'light'）;
  const [componentMounted，setComponentMounted] = usestate（false）;

  const setMode =（mode）=> {
    localstorage.setItem（'主題'，模式）;
    setTheme（mode）;
  };

  const toggletheme =（）=> setMode（them ==='light'？'dark'：'light'）;

  useeffect（（）=> {
    setComponentMounted（true）;
  }，[]）;

  返回[主題，toggletheme，componentMounted];
};

更新App.js使用鉤子：

 // app.js
從'./ usedarkmode'導入{underarkmode};

// ...內部應用功能...
const [theme，toggletheme，componentMounted] = underarkmode（）;
const themode = theme ==='light'？ Lighttheme：Darktheme;

如果（！componentMounted）返回<div></div>; //防止閃光主題

// ...其餘的返回語句...

這樣可以確保主題在會議上持續存在。

使用用戶的首選配色方案（可選）

增強useDarkMode.js以尊重用戶的OS偏好：

 // underarkmode.js
// ...其他進口...

useeffect（（）=> {
  const localtheme = localstorage.getItem（'theme'）;
  const userprefersdark = window.matchmedia && window.matchmedia（'（prefers-color-scheme：dark）'）。匹配;

  如果（localtheme）{
    settheme（localtheme）;
  } else if（userprefersdark）{
    setMode（'dark'）;
  } 別的 {
    setMode（'light'）;
  }
  setComponentMounted（true）;
}，[]）;

// ...其餘代碼...

這增加了對prefers-color-scheme媒體查詢的支持，從而優先考慮用戶設置而不是默認行為。切記為所使用的圖標添加信用。這種修訂後的響應提供了一種更簡化，更有效的方法來實現暗模式切換。

以上是黑暗模式與React和Themeprovider切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！