Mencipta Sistem Tema dalam React dengan SCSS dan Redux

Pernahkah anda mahu mengusahakan apl dengan berbilang tema tetapi tidak tahu cara melakukannya? Terdapat banyak cara

Pasang pergantungan

mari mulakan dengan memasang semua yang kami perlukan. Untuk ini, kami memerlukan SCSS dan Redux:

yarn add sass
yarn add @reduxjs/toolkit

Hanya menjalankan skrip ini akan memasang semua yang anda perlukan dan akan membolehkan kami bermula.

Bahagian 1: Persediaan

SCSS

Mari mulakan dengan mencipta folder theme.scss, yang sebenarnya tidak akan memegang tema kita, sebaliknya semua sass vars, yang akan kita tetapkan kepada css vars.

Inilah kod untuk fail theme.scss kami:

$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...

ini hanyalah beberapa var permulaan untuk contoh saya, tetapi ini adalah premisnya.
sekarang, untuk setiap fail .scss kita perlu memasukkan theme.scss fle ini menggunakan @use "/path/to/theme";
Di sini saya telah mencipta beberapa kod asas untuk index.scss untuk menambah gaya asas yang ringkas kepada semua elemen saya, seperti saiz kotak dan mengatasi kebanyakan jidar/lapik lalai:

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

Tema

Sekarang mari kita mulakan dengan tema. Untuk bermula, dalam direktori baharu bernama tema buat fail. Anda boleh membuat lebih banyak selepas itu, tetapi saya hanya akan membuat 2 (menjadi gelap dan terang) untuk tutorial ini. Anda sentiasa boleh mengembangkan topik/idea ini dan saya benar-benar menggalakkan anda untuk mencuba.

Inilah templat asas (ini akan menjadi tema gelap saya):

@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;
}

Dan inilah cahaya saya, jika anda tertanya-tanya:

@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;
}

Saya menambahkan tema saya pada fail index.scss saya, yang akan kelihatan seperti ini:

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

Redux

Mari mulakan dengan menyediakan kedai redux kami.
Dalam direktori projek, di bawah src, buat folder baharu bernama stor dengan subdirektori bernama slices. Mari mulakan dengan fail store.js kami dalam direktori kedai.

Inilah yang sepatutnya kelihatan seperti:

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

  },
});

Sebelum kita bermula, mari kita sambungkan projek kita kepada redux. Beginilah rupa fail main.jsx saya dan fail anda sepatutnya kelihatan serupa:

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>,);

sekarang mari buat kepingan. dalam direktori slices buat fail bernama themeSlice.js.

Berikut adalah kandungannya:

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;

Dari sini, mari kembali ke kedai kami dan tambah kepingan tema kami sebagai pengurang.

Begini rupa out store.js sekarang:

yarn add sass
yarn add @reduxjs/toolkit

Bahagian 2: Kefungsian

Fungsinya sangat mudah. Apa yang kami buat sekarang ialah 2 kelas dengan pembolehubah css mereka sendiri, dan keadaan redux untuk menahan ini. kita boleh mengubah keadaan kita dengan menjalankan dispatch(setTheme(/*theme here*/));
Untuk menggunakan tema kami, kami boleh menggunakan kesan untuk menukar nama kelas badan kepada tema kami, dan untuk perlindungan ralat, kami boleh menambah semakan untuk memastikan ia adalah tema yang sah dan bukan tema lain.

Inilah yang akan kelihatan seperti:

$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...

Bahagian 3: Akhir

Terima kasih kerana membaca!
Berikut adalah pautan

Atas ialah kandungan terperinci Mencipta Sistem Tema dalam React dengan SCSS dan Redux. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!