Création de systèmes de thèmes dans React avec SCSS et Redux

Avez-vous déjà eu envie de travailler sur une application avec plusieurs thèmes mais vous ne savez pas comment vous y prendre ? Il existe de nombreuses façons de

Installer la dépendance

commençons par installer tout ce dont nous aurons besoin. Pour cela, nous aurons besoin de SCSS et Redux :

yarn add sass
yarn add @reduxjs/toolkit

L'exécution simple de ce script installera tout ce dont vous aurez besoin et nous permettra de commencer.

Partie 1 : Configuration

SCSS

Commençons par créer un dossier theme.scss, qui ne contiendra pas réellement notre thème, mais plutôt toutes les variables sass, que nous définirons sur les variables css.

Voici le code de notre fichier theme.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...

ce ne sont que quelques variables de démarrage pour mon exemple, mais c'est le principe.
maintenant, pour chaque fichier .scss, nous devrons inclure ce fichier theme.scss en utilisant @use "/path/to/theme";
Ici, j'ai créé du code de base pour index.scss afin d'ajouter un style de base simple à tous mes éléments, tels que la taille des boîtes et le remplacement de la plupart des marges/paddings par défaut :

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

Thèmes

Commençons maintenant par les thèmes. Pour commencer, dans un nouveau répertoire nommé thèmes, créez un fichier. Vous pouvez en faire plus après, mais je n'en ferai que 2 (sombre et clair) pour ce tutoriel. Vous pouvez toujours développer ces sujets/idées, et je vous encourage vivement à expérimenter.

Voici le modèle de base (ce sera mon thème sombre) :

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

Et voici ma lumière, si vous vous demandez :

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

J'ai ajouté mes thèmes à mon fichier index.scss, qui ressemblera à ceci :

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

Redux

Commençons par créer notre boutique redux.
Dans le répertoire du projet, sous src, créez un nouveau dossier nommé store avec un sous-répertoire nommé slices. Commençons par notre fichier store.js dans le répertoire du magasin.

Voici à quoi cela devrait ressembler :

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

  },
});

Avant de commencer, connectons notre projet à Redux. Voici à quoi ressemble mon fichier main.jsx, et le vôtre devrait ressembler :

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

créons maintenant notre tranche. dans le répertoire slices, créez un fichier nommé themeSlice.js.

Voici le contenu :

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;

À partir de là, retournons à notre magasin et ajoutons notre tranche de thème comme réducteur.

Voici à quoi devrait ressembler notre fichier store.js maintenant :

yarn add sass
yarn add @reduxjs/toolkit

Partie 2 : Fonctionnalité

La fonctionnalité est super simple. Ce que nous avons créé maintenant, ce sont 2 classes avec leurs propres variables CSS et un état redux pour les contenir. nous pouvons modifier notre état en exécutant dispatch(setTheme(/*theme here*/));
Pour appliquer nos thèmes, nous pouvons utiliser un effet pour changer le nom de classe du corps en notre thème, et pour la protection contre les erreurs, nous pouvons ajouter une vérification pour nous assurer qu'il s'agit d'un thème valide et pas d'autre chose.

Voici à quoi cela ressemblerait :

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

Partie 3 : Finale

Merci d'avoir lu !
Voici un lien

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!