SCSS と Redux を使用した React でのテーマ システムの作成

複数のテーマを含むアプリに取り組みたいと思ったことはありますが、その方法がわかりませんでした。

にはさまざまな方法があります

依存関係をインストールする

必要なものをすべてインストールして始めましょう。このためには、SCSS と Redux が必要になります:

yarn add sass
yarn add @reduxjs/toolkit

このスクリプトを実行するだけで、必要なものがすべてインストールされ、開始できるようになります。

パート 1: セットアップ

SCSS

まずは、theme.scss フォルダーを作成します。このフォルダーには、実際にはテーマではなく、CSS 変数に設定するすべての Sass 変数が含まれます。

テーマ.scss ファイルのコードは次のとおりです。

$bg1: var(--bg1);
$bg2: var(--bg2);
$bg3: var(--bg3);
$bg4: var(--bg4);
$ui1: var(--ui1);
$ui2: var(--ui2);
$ui3: var(--ui3);
$ui4: var(--ui4);
$h1: var(--h1);
$h2: var(--h2);
$p1: var(--p1);
$p2: var(--p2);
$border-rad: var(--border-rad);
$border-clr: var(--border-clr);
$font: var(--font);//etc...

これは私の例のスターター変数にすぎませんが、これが前提です。
ここで、すべての .scss ファイルに対して、 @use "/path/to/theme";
を使用してこの theme.scss ファイルを含める必要があります。 ここでは、ボックスのサイズ変更や、ほとんどのデフォルトのマージン/パディングのオーバーライドなど、すべての要素に単純な基本スタイルを追加するために、index.scss の基本コードを作成しました。

@use "theme";
//--------------------
html * {
  box-sizing: border-box;
  margin: none;
  padding: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: theme.$font;
}

テーマ

それでは実際にテーマから始めましょう。まず、新しいディレクトリに「主題」という名前のファイルを作成します。後でさらに作成することもできますが、このチュートリアルでは (ダークとライトの) 2 つだけ作成します。これらのトピックやアイデアはいつでも拡張できます。試してみることを強くお勧めします。

基本的なテンプレートは次のとおりです (これが私のダークテーマになります)。

@import url('https://fonts.cdnfonts.com/css/br-segma');
.dark {
  --bg1: #202020;
  --bg2: #171717;
  --bg3: #131313;
  --bg4: #101010;
  --ui1: #252525;
  --ui2: #303030;
  --ui3: #353535;
  --ui4: #404040;
  --h1: #f5f5f5;
  --h2: #f0f0f0;
  --p1: #e0e0e0;
  --p2: #d5d5d5;
  --active: #671dc9;
  --active2: #1b1fec;
  --border-rad: 10px;
  --border-clr: #45454590;
  --font: "",sans-serif;
  --color-scheme: dark;
}

疑問に思っている方のために、これが私の意見です。

@import url('https://fonts.cdnfonts.com/css/br-segma');
.light {
  --bg1: #f0f0f0;
  --bg2: #e5e5e5;
  --bg3: #e0e0e0;
  --bg4: #d5d5d5;
  --ui1: #e2e2e2;
  --ui2: #efefef;
  --ui3: #f2f2f2;
  --ui4: #f9f9f9;
  --h1: #070707;
  --h2: #101010;
  --p1: #131313;
  --p2: #171717;
  --active: #ae70ff;
  --active2: #797bff;
  --border-rad: 10px;
  --border-clr: #45454590;
  --font: "",sans-serif;
  --color-scheme: light;
}

テーマをindex.scssファイルに追加しました。これは次のようになります:

@use "theme";
@use "themes/dark";
@use "themes/light";
//--------------------
//etc...

リダックス

redux ストアをセットアップすることから始めましょう。
プロジェクト ディレクトリの src の下に、slices という名前のサブディレクトリを持つ、store という名前の新しいフォルダーを作成します。ストアディレクトリにあるstore.jsファイルから始めましょう。

これは次のようになります。

import { configureStore } from '@reduxjs/toolkit'
export const store=configureStore({
  reducer:{

  },
});

始める前に、実際にプロジェクトを redux に接続しましょう。これは私の main.jsx ファイルのように見えるもので、あなたのファイルも同様に見えるはずです:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import "./index.scss";
import { store } from './store/store';
import { Provider } from 'react-redux';
createRoot(document.getElementById('root'))
  .render(<StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,);

今度はスライスを作成しましょう。スライス ディレクトリに、themeSlice.js.

という名前のファイルを作成します。

内容は次のとおりです。

import { createSlice } from '@reduxjs/toolkit'
export const themeSlice=createSlice({
  name: 'theme',
  initialState:"dark",
  reducers: {
    setTheme:(state,action)=>{
      return action.payload;
    },
  },
})
export const { 
  setTheme 
}=themeSlice.actions;
export default themeSlice.reducer;

ここからストアに戻り、テーマのスライスをリデューサーとして追加しましょう。

Store.js は次のようになります。

yarn add sass
yarn add @reduxjs/toolkit

パート 2: 機能

機能は非常にシンプルです。私たちが今作成したのは、独自の CSS 変数を持つ 2 つのクラスと、これを保持する redux 状態です。状態を変更するには、dispatch(setTheme(/*theme here*/));
を実行します。 テーマを適用するには、エフェクトを使用して本体の className をテーマに変更します。また、エラー保護のために、他のテーマではなく有効なテーマであることを確認するチェックを追加できます。

これは次のようになります。

$bg1: var(--bg1);
$bg2: var(--bg2);
$bg3: var(--bg3);
$bg4: var(--bg4);
$ui1: var(--ui1);
$ui2: var(--ui2);
$ui3: var(--ui3);
$ui4: var(--ui4);
$h1: var(--h1);
$h2: var(--h2);
$p1: var(--p1);
$p2: var(--p2);
$border-rad: var(--border-rad);
$border-clr: var(--border-clr);
$font: var(--font);//etc...

パート 3: 最終回

読んでいただきありがとうございます!
こちらがリンクです

以上がSCSS と Redux を使用した React でのテーマ システムの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。