実装したいダークテーマとライトテーマを動的に切り替えるAntデザインv4を使用。
ここに書かれているように、他の CSS/LESS インポートを使用してテーマをカスタマイズすることも可能です。https://ant.design/docs/react/customize-theme#ダークテーマの使用
しかし、コードからこれらのテーマを動的に切り替える方法がわかりません。React アプリ ( darkMode
) に、現在ダーク テーマが使用されているかどうかを示す変数があります。この変数が変更されたときには、正しい CSS ファイルを提供する必要があります。ただし、インポートの仕組みが間違っているため、ある条件が満たされた場合にのみ CSS を動的にインポートすることはできません。
次のコードのように面倒なことをしようとしましたrequire
が、これは非常に悪いアプローチであり、まだ適切に動作していません (CSS は挿入されますが、削除されない可能性があるためです)。
const Layout = () => {
...
useEffect(() => {
if (darkMode === true) {
require("./App.dark.css")
} else {
require("./App.css")
}
}, [darkMode])
return (
<Home />
)
}
Antのデザインドキュメントにすでに実装されているので、何らかの方法でテーマを切り替えることは可能であるはずです(https://ant.design/components/button/):
どうすればいいか分かりますか?
ありがとう!
ベストアンサー1
私が今使っているのはこれです -
追伸 -
- これによって最適なバンドル サイズが得られるかどうかはわかりません。
- テーマを変更するとページが再読み込みされます。
「themes」というフォルダを作成します。このフォルダには、dark-theme.css、dark-theme.jsx、light-theme.css、light-theme.jsx、use-theme.js、theme-provider.jsx の 6 つのファイルが含まれます。それぞれについて、以下で説明します。
ダークテーマ.css
import "~antd/dist/antd.dark.css";
ダークテーマ.jsx
import "./dark-theme.css";
const DarkTheme = () => <></>;
export default DarkTheme;
ライトテーマ.css
@import "~antd/dist/antd.css";
ライトテーマ.jsx
import "./light-theme.css";
const LightTheme = () => <></>;
export default LightTheme;
テーマを使用するさまざまなコンポーネントが使用できるカスタムフック-
import { useEffect, useState } from "react";
const DARK_MODE = "dark-mode";
const getDarkMode = () => JSON.parse(localStorage.getItem(DARK_MODE)) || false;
export const useTheme = () => {
const [darkMode, setDarkMode] = useState(getDarkMode);
useEffect(() => {
const initialValue = getDarkMode();
if (initialValue !== darkMode) {
localStorage.setItem(DARK_MODE, darkMode);
window.location.reload();
}
}, [darkMode]);
return [darkMode, setDarkMode];
};
テーマプロバイダー.jsx
import { lazy, Suspense } from "react";
import { useTheme } from "./use-theme";
const DarkTheme = lazy(() => import("./dark-theme"));
const LightTheme = lazy(() => import("./light-theme"));
export const ThemeProvider = ({ children }) => {
const [darkMode] = useTheme();
return (
<>
<Suspense fallback={<span />}>
{darkMode ? <DarkTheme /> : <LightTheme />}
</Suspense>
{children}
</>
);
};
index.jsを次のように変更します -
ReactDOM.render(
<React.StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);
さて、ナビゲーションバーにテーマを切り替えるスイッチがあるとします。これは次のようになります -
const [darkMode, setDarkMode] = useTheme();
<Switch checked={darkMode} onChange={setDarkMode} />