Erstellen von Themensystemen in React mit SCSS und Redux

Wollten Sie schon immer an einer App mit mehreren Themen arbeiten, wissen aber nicht, wie Sie das anstellen sollen? Es gibt viele Möglichkeiten,

Abhängigkeit installieren

Lassen Sie uns damit beginnen, alles zu installieren, was wir brauchen. Dafür benötigen wir SCSS und Redux:

yarn add sass
yarn add @reduxjs/toolkit

Durch einfaches Ausführen dieses Skripts wird alles installiert, was Sie benötigen, und wir können loslegen.

Teil 1: Einrichtung

SCSS

Lasst uns damit beginnen, einen Ordner „theme.scss“ zu erstellen, der eigentlich nicht unser Theme enthält, sondern alle Sass-Variablen, die wir auf CSS-Variablen setzen werden.

Hier ist der Code für unsere theme.scss-Datei:

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

Dies sind nur einige Starter-Variablen für mein Beispiel, aber das ist die Voraussetzung.
Jetzt müssen wir für jede .scss-Datei diese theme.scss-Datei mit @use "/path/to/theme";
einbinden Hier habe ich einen grundlegenden Code für index.scss erstellt, um allen meinen Elementen einen einfachen Grundstil hinzuzufügen, z. B. die Boxgröße und das Überschreiben der meisten Standardränder/-abstände:

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

Themen

Jetzt beginnen wir eigentlich mit den Themen. Erstellen Sie zunächst in einem neuen Verzeichnis mit dem Namen „themes“ eine Datei. Sie können danach noch mehr machen, aber ich mache für dieses Tutorial nur zwei (dunkel und hell). Sie können diese Themen/Ideen jederzeit erweitern, und ich ermutige Sie ausdrücklich, zu experimentieren.

Hier ist die Grundvorlage (dies wird mein dunkles Thema sein):

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

Und hier ist mein Licht, falls Sie sich fragen:

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

Ich habe meine Themes an meine index.scss-Datei angehängt, die so aussehen wird:

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

Redux

Beginnen wir mit der Einrichtung unseres Redux-Stores.
Erstellen Sie im Projektverzeichnis unter src einen neuen Ordner namens „store“ mit einem Unterverzeichnis namens „slices“. Beginnen wir mit unserer Datei „store.js“ im Store-Verzeichnis.

So sollte es aussehen:

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

  },
});

Bevor wir beginnen, verbinden wir unser Projekt tatsächlich mit Redux. So sieht meine main.jsx-Datei aus, und Ihre sollte ähnlich aussehen:

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

Jetzt erstellen wir unser Slice. Erstellen Sie im Slice-Verzeichnis eine Datei mit dem Namen themeSlice.js.

Hier der Inhalt:

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;

Von hier aus gehen wir zurück zu unserem Shop und fügen unser Themen-Slice als Reduzierung hinzu.

So sollte unser Store.js jetzt aussehen:

yarn add sass
yarn add @reduxjs/toolkit

Teil 2: Funktionalität

Die Funktionalität ist super einfach. Was wir jetzt erstellt haben, sind zwei Klassen mit ihren eigenen CSS-Variablen und einem Redux-Status, um diese zu speichern. Wir können unseren Zustand halbieren, indem wir „dispatch(setTheme(/*theme here*/));
“ ausführen Um unsere Themen anzuwenden, können wir einen Effekt verwenden, um den Klassennamen des Körpers in unser Thema zu ändern, und zum Schutz vor Fehlern können wir eine Prüfung hinzufügen, um sicherzustellen, dass es sich um ein gültiges Thema und nicht um etwas anderes handelt.

So würde das aussehen:

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

Teil 3: Finale

Danke fürs Lesen!
Hier ist ein Link

Das obige ist der detaillierte Inhalt vonErstellen von Themensystemen in React mit SCSS und Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!