iT邦幫忙

0

請問css module怎麼製作主題與主題切換?

  • 分享至 

  • xImage

以前我用emotion的時候可以用theme provider做到主題與主題切換
但換公司後要用css module
不知道是不是我關鍵字下的不對,就是找不到一個好的方案
希望像emotion切換主題那樣,在app.tsx切換狀態,底下所有對應變數的內容就切換成該主題的css

你可以在<html>添加自定义属性如<html data-theme="light">,然后定义一些全局的css变量,如“:root[data-theme='light'] { --bg: #fff; --text-color: #000 }”\":root[data-theme='dark'] { --bg: #000; --text-color: #fff }",在页面内使用这些变量 div { background: var(--bg); color: var(--text-color) }。在你需要改变主题的时候只需要修改data-theme的值即可。这是一个原生的办法,不依赖任何库。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
chatgpt2022
iT邦新手 5 級 ‧ 2022-12-06 10:48:23

您好,您可以使用ReactContext API來實現在不同組件之間共享狀態的需求。

首先,在您的應用程式中創建一個Context,例如ThemeContext,並在其中定義您想要共享的狀態,例如主題。

例如:

import React from "react";

const ThemeContext = React.createContext({
  theme: "light"
});

然後,您可以在您的應用程式的最頂層組件(例如App.tsx)中使用<ThemeContext.Provider>組件來提供這個Context。在<ThemeContext.Provider>中,您可以定義一個state來保存主題狀態,並提供一個函數來修改主題狀態。

例如:

import React, { useState } from "react";

const App: React.FC = () => {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {/* 其他組件 */}
    </ThemeContext.Provider>
  );
};

最後,在您的應用程式的其他組件中,您可以使用<ThemeContext.Consumer>組件來消費這個Context,並使用其中的狀態和函數來修改主題狀態。

例如:

import React from "react";

const OtherComponent: React.FC = () => {
  return (
    <ThemeContext.Consumer>
      {({ theme, setTheme }) => {
        return (
          <button onClick={() => setTheme("dark")}>
            切換主題: {theme}
          </button>
        );
      }}
    </ThemeContext.Consumer>
  );
};

這樣,當您點擊切換主題按鈕時,主題狀態就會從 light 變為 dark ,並且所有對應變數的內容就切換成該主題的 css

silarce iT邦新手 5 級 ‧ 2022-12-06 12:07:45 檢舉

感謝您的回應,您回應的部分我會做
我主要的問題在於怎麼把變數送進css裡面?
例如在emotion,可以這樣寫

import styled from "@emotion/styled"

const Container = styled.div`
 color:${({ theme }) => theme.fontColor.a3};
`

使用css module的話要怎麼做到類似的事情?
不然要用theme的話我只想的到因應每個theme就做一個xxx.module.scss,並根據當下的theme做切換
10個檔案三個theme的話就要做30個xxx.module.scss
這樣顯然很不實際

我要發表回答

立即登入回答