Свет / темный режим переключается в React JS с помощью контекста API

Привет Dev , Сейчас дни большинство сайтов имеют Темный и легкий режим Отказ В этом посте мы узнаем, как это сделать в вашем приложении React, используя Контекст API Отказ

Пакеты:

React-Switch Для реализации Toggle Switch (вы можете использовать кнопку) также)
React-Icons Использовать солнечный и лунный значок (вы можете использовать любой значок пакеты)

Быстрый Демо

Чтобы получить доступ к репо здесь

Концепция, чтобы понять здесь:

Контекст API – провайдер и потребитель.
Поставщик действует как глобальное государство. Таким образом, корневой компонент проекта должен быть завернутый поставщиком
Доступ к значениям, хранящимся в провайдере, используя потребителя в любом месте вашего компонента
Поставщик всегда содержит значение (состояние) и методы, которые изменяют состояние

Сначала создайте Provider.js

Provider.js.

import React, { useState, createContext } from "react";

export const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [mode, setTheme] = useState("light");
  return (
     setTheme(mode === "dark" ? "light" : "dark")
      }}
    >
      {children}
    
  );
};

export default ThemeProvider;

CreateContext () Создает объект контекста. Затем определить Государство назван Режим По умолчанию это как свет ценность. И SetTheMee это действие, которое изменяет Режим ценность. Затем создание компонента поставщика по умолчанию он принимает ценность как опоры. Обратите внимание, что: ценность упорочно имеет Режим и SetTheMee характеристики.

Компонент поставщика возвращает дети Отказ то, где когда-либо мы охватываем этот провайдер, что компонент будет рассматриваться как root этого контекста поставщика.

Из вышеуказанного кода мы инициализированы IMECONTEXT и создал наш Темапровидер Отказ

Создать тему.js.

Тема.js.

export const theme = {
  light: {
    color: "#03dac5",
    backgroundColor: "#ffffff",
    highlight: "#fdb813"
  },
  dark: {
    color: "#bb86fc",
    backgroundColor: "#121212",
    highlight: "#ffffff"
  }
};

Тема просто объект содержащие значения, соответствующие модам.

Оберните темупроводов в корневой компонент

index.js.

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

import ThemeProvider from "./Provider";

const rootElement = document.getElementById("root");
ReactDOM.render(
  
    
      
    
  ,
  rootElement
);

Здесь корневой компонент – index.js Отказ Теперь поставщик доступен во всем мире, мы можем использовать потребителя в любом месте внутри наших компонентов для доступа к ценность от провайдера.

Доступ к значениям от провайдера

App.js.

import React, { useContext } from "react";

import { theme } from "./theme";

import { ThemeContext } from "./Provider";

const getStyles = (mode) => ({
  header: {
    fontSize: 34,
    fontWeight: "400"
  },
  app: {
    height: "100%",
    width: "100%",
    padding: 16,
    backgroundColor: theme[mode].backgroundColor
  },
  text: {
    fontWeight: "200",
    color: theme[mode].color
  },
  theme: {
    color: theme[mode].highlight
  }
});

export default function App() {
  const { mode } = useContext(ThemeContext);
  const styles = getStyles(mode);
  return (
    
      
        Have a nice day... DEV!
      
      
        Current theme is {mode} mode
      
    
  );
}

Из вышеуказанного кода мы пытаемся получить доступ к Режим ценность. Поэтому сначала мы должны сказать, какой объект контекста мы пытаемся получить доступ (IMECONTEXT).

Вы замечаете, что Режим значение передается Стили , здесь на основе Режим Мы меняем цвет текста и цвет фона.

Время создать тумблер

Themeswitch.js.

import React, { useContext } from "react";

import Switch from "react-switch";
import { IoMdSunny, IoMdMoon } from "react-icons/all";

import { ThemeContext } from "./Provider";

const getStyles = (mode) => ({
  switch: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
    fontSize: 35,
    paddingLeft: mode === "dark" ? 30 : 10
  }
});

const ThemeSwitch = () => {
  const { setTheme, mode } = useContext(ThemeContext);
  const styles = getStyles(mode);
  return (
    
      }
      uncheckedIcon={
        
      }
      onChange={setTheme}
    />
  );
};

export default ThemeSwitch;

Здесь мы обрабатываем SetTheMee Метод, когда переключатель Toggle нажат. И основываясь на Режим Мы обновляем иконы и цвета.

Наконец добавьте переключатель тумблера внутри компонента

App.js.

import React, { useContext } from "react";

import { theme } from "./theme";

import { ThemeContext } from "./Provider";
import ThemeSwitch from "./ThemeSwitch";

const getStyles = (mode) => ({
  header: {
    fontSize: 34,
    fontWeight: "400"
  },
  app: {
    height: "100%",
    width: "100%",
    padding: 16,
    backgroundColor: theme[mode].backgroundColor
  },
  text: {
    fontWeight: "200",
    color: theme[mode].color
  },
  theme: {
    color: theme[mode].highlight
  }
});

export default function App() {
  const { mode } = useContext(ThemeContext);
  const styles = getStyles(mode);
  return (
    
      Have a nice day... DEV!
      
        Current theme is {mode} mode
      
      
    
  );
}

Добавлено в App.js Отказ Теперь играйте с Toggle Switch, чтобы заметить изменения.

Вот и все, вы можете добавить это Темасвич Компонент любой, где внутри вашего проекта менять тему.

🎉 TADA … Мы сделали…

Спасибо 😃 для чтения …

Перепасть a ♥ ️ Если этот контент полезен …

Предложения и сомнения всегда приветствуются в разделе комментариев …

Оригинал: “https://dev.to/gayathrithedev/light-dark-mode-toggle-in-react-js-using-context-api-m7i”