React 및 localStorage가 있는 간단한 암흑 모드 스위치

웹 사이트나 응용 프로그램에서 암흑 모드를 사용하는 것이 이미 매우 유행하고 있다.많은 대형 사이트와 응용 프로그램이 자신의 버전을 내놓았다. 만약 당신이 자신의 React 응용 프로그램을 만들고 싶다면, 당신은 소량의 자바스크립트 코드와 약간의 맞춤형 CSS만 있으면 쉽게 실현할 수 있다.
간단하지만 일반적인 React 구성 요소를 만드는 방법을 보여 드리겠습니다. 웹 사이트의 패턴을 명암에서 전환할 수 있습니다.필요하면 나중에 여러 응용 프로그램의 모양새나 테마를 처리하기 위해 확장할 수 있습니다.
비디오 버전을 좋아한다면 유튜브에서 만든 이 어두운 모드 구성 요소를 볼 수 있습니다.
새 create react 프로그램 프로젝트를 시작했고 프로그램 구성 요소에 HTML을 추가해서 수정했습니다.간단한 내비게이션 표시줄, 텍스트 단락, 이미지div가 있습니다. 서로 다른 페이지 모드에서 이미지 배경을 전환하는 방법을 보여 드리겠습니다.
components 폴더에 새 구성 요소를 만들고 DarkMode라고 이름을 붙였습니다.js.스타일을 설정하기 위한 CSS 파일도 추가됩니다. 이를 DarkMode라고 합니다.css.응용 프로그램 구성 요소에서 바로 가져올 수 있습니다.

import React from "react"
import "./styles/App.css"
import DarkMode from "./components/DarkMode"

function App() {
  return (
    <div className="App">
      <nav>
        <a href="/">Home</a>
        <a href="/">Projects</a>
        <a href="/">About</a>
        <a href="/">Contact</a>
        <DarkMode />
      </nav>
      <h1>Hello World</h1>
      <div id="image"></div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget
        scelerisque neque, quis scelerisque erat. Quisque venenatis molestie
        sapien, dapibus viverra nulla hendrerit eget. Pellentesque egestas
        ultrices accumsan. Ut ac magna vel ex maximus ultricies. Nulla facilisi.
        Suspendisse gravida sem eu odio mattis ullamcorper. Curabitur feugiat
        ipsum vel vulputate ultricies.
      </p>
      <p>
        Praesent pulvinar faucibus risus in iaculis. Sed erat felis, pretium sit
        amet ultricies non, porta et lacus. Curabitur a urna mi. Sed eleifend
        sed erat eget viverra. Quisque sit amet purus viverra massa posuere
        congue. Suspendisse efficitur venenatis enim, id hendrerit enim ultrices
        sed. Nam sed dapibus nisi.
      </p>
    </div>
  )
}
export default App

구성 요소를 상수로 설정하고 입력하지 않았으며 기본값으로 내보낼 것입니다.그것의 기본 기능은 단추 요소를 되돌려주는 것입니다. 우리는 그것을 사용하여 모드나 테마를 변경할 것입니다.지금 CSS 파일을 가져오고 나중에 내용을 변경하겠습니다.

import React from "react";
import "../styles/DarkMode.css";

const DarkMode = () => {
  return (
    <button></button>
  );
};

export default DarkMode;

모든 것이 순조롭게 진행되기 위해서 우리는 약간의 부동산을 세워야 한다.

import React from "react";
import "../styles/DarkMode.css";

const DarkMode = () => {
  let clickedClass = "clicked";
  const body = document.body;
  const lightTheme = "light";
  const darkTheme = "dark";
  let theme;

  return (
    <button></button>
  );
};

export default DarkMode;

본문은 문서의 본문 요소입니다.어둠 모드 단추를 누르면 다른 스타일을 적용할 수 있도록 인용이 필요합니다.빛 주제와 어두운 주제는 우리가 몸에 응용할 유명이 될 것이다.Theme은 현재 선택한 주제 또는 모드를 처리하는 데 사용되는 로컬 속성입니다.
클릭한 클래스는 우리가 단추를 눌렀을 때 이 단추에 적용됩니다.이렇게 하면 우리는 상태가 바뀌는 신호를 보낼 수 있다.기왕 우리가 상태를 언급한 이상, 당신은 우리가 React의 상태를 사용하여 논리를 설정할 수 있는지 알고 싶을 수도 있습니다. 답은 부정적입니다. 우리는 그럴 수 없습니다.우리는 할 수 있지만, 이것은 매우 간단한 용례로, 그것을 필요로 하지 않는다.우리가 해야 할 일은 로컬 저장소를 사용하는 것이다. 이것은 브라우저의 내부 저장 공간으로 이런 물건을 위해 전문적으로 설계한 것이다.메모리 용량이 제한되어 안전하다고 여겨지지 않지만, 이 경우 단일 속성의 값만 추적할 수 있습니다.로컬 저장소도 페이지를 전환하거나 브라우저를 완전히 닫을 때 값이 변하지 않기 때문에 삭제되거나 만료될 염려가 없이 설정할 수 있습니다.
JavaScript의 경우 로컬 저장소는 하나의 대상이며, window 대상의 일부이기 때문에 직접 접근해서 그 안에 저장된 항목을 찾을 수 있습니다.이를 위해 getItem 함수를 사용하고 찾을 속성을 전송합니다.

import React from "react";
import "../styles/DarkMode.css";

const DarkMode = () => {
  let clickedClass = "clicked";
  const body = document.body;
  const lightTheme = "light";
  const darkTheme = "dark";
  let theme;

  if (localStorage) {
    theme = localStorage.getItem("theme");
  }

  if (theme === lightTheme || theme === darkTheme) {
    body.classList.add(theme);
  } else {
    body.classList.add(lightTheme);
  }

  return (
    <button></button>
  );
};

export default DarkMode;

이 예에서, 우리는 두 개의 값 중 하나를 찾고 싶다. 밝거나 어둡다. 이것은 우리가 로컬 저장소에 설정할 값이기 때문이다.이러한 값을 찾으면 문서체에 CSS 클래스를 추가합니다.없으면 라이트 클래스를 설정해서 어둠 모드를 사용하지 않습니다.물론, 어두운 모드가 기본값이 되기를 원한다면, 이렇게 할 수도 있습니다.
단추를 눌렀을 때 뭔가를 하기 위해서, 단추를 눌렀을 때 이벤트를 설정해야 합니다. switchTheme 함수를 호출할 것입니다.앞으로 더 쉽게 스타일 설정을 할 수 있도록 id를 추가할 것입니다. 어둠 모드가 열리면 클릭 클래스를 추가할 것입니다.

import React from "react";
import "../styles/DarkMode.css";

const DarkMode = () => {
  let clickedClass = "clicked";
  const body = document.body;
  const lightTheme = "light";
  const darkTheme = "dark";
  let theme;

  if (localStorage) {
    theme = localStorage.getItem("theme");
  }

  if (theme === lightTheme || theme === darkTheme) {
    body.classList.add(theme);
  } else {
    body.classList.add(lightTheme);
  }

  const switchTheme = (e) => {
    if (theme === darkTheme) {
      body.classList.replace(darkTheme, lightTheme);
      e.target.classList.remove(clickedClass);
      localStorage.setItem("theme", "light");
      theme = lightTheme;
    } else {
      body.classList.replace(lightTheme, darkTheme);
      e.target.classList.add(clickedClass);
      localStorage.setItem("theme", "dark");
      theme = darkTheme;
    }
  };

  return (
    <button
      className={theme === "dark" ? clickedClass : ""}
      id="darkMode"
      onClick={(e) => switchTheme(e)}
    ></button>
  );
};

export default DarkMode;

주제 전환 기능은 현재 활성 상태인 주제를 확인하고 해당 주제에 따라 여러 작업을 수행합니다.어둠 모드가 현재 활성화되어 있으면, 어둠 테마 주체류를 광명 모드로 바꿉니다.이것은 '어두운 모드' 단추에서 클릭한 클래스를 삭제하고 '로컬 저장 테마' 속성을 '밝기' 로 설정합니다.마지막으로, 테마 속성을light theme로 설정합니다. 어둠 모드가 더 이상 활성화되지 않기 때문입니다.
만약 어둠 모드가 이미 닫혔다면, 우리는 그것을 열어야 한다.이 점을 하려면 우리는 거의 이전과 같은 일을 할 것이다.우리는 짙은 색의 테마 주체 클래스로 옅은 색의 테마 주체 클래스를 바꾸고 단추를 클릭으로 표시하며 로컬 저장 속성을 짙은 색으로 설정하고 마지막으로 테마를 짙은 색으로 설정합니다.
이렇게 하면 우리의 구성 요소가 완성되고 응용 프로그램 구성 요소에 가져올 수 있습니다.이제 CSS를 설정해야 합니다.

#darkMode {
  background: transparent url("../moon.png") no-repeat center;
  background-size: 30px 30px;
  width: 45px;
  height: 45px;
  filter: grayscale(100%);
  border: none;
  border-radius: 50%;
  transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
}

#darkMode:hover,
#darkMode:focus {
  filter: none;
  background-color: black;
  cursor: pointer;
}

#darkMode.clicked {
  filter: none !important;
  background-color: black;
}

우리의 단추는 어두운 모드 Id가 있기 때문에, 우리는 그것을 사용하여 스타일을 설계할 것이다.배경 이미지에 대해 moon icon that I found on flaticon.com를 사용했습니다.크기와 테두리를 둥글게 설정하고 있습니다. 그레이스케일 필터를 추가해서 기본적으로 누르지 않은 상태에서 회색으로 표시합니다.
정지와 초점 상태에 대해 필터를 제거하고 배경을 검은색으로 설정하기 때문에 아이콘은 밤하늘의 노란색 달과 별처럼 보입니다.clicked button 클래스에 대해 동일한 작업을 수행합니다.
구성 요소 CSS가 이미 설정되어 있습니다. 두 개의 신체 클래스를 처리해야 합니다. 하나는 어둠 모드이고, 하나는 광명 모드입니다.두 모양새 사이를 전환하려면 CSS 변수를 사용합니다.만약 바디 요소가 그것들에 접근할 수 있다면, 어느 곳에서든지 그것들을 설명할 수 있다.우선, 루트 선택기에 두 개의 색 변수를 추가할 것입니다.

:root {
  --blue: rgb(26, 57, 87);
  --white: rgb(236, 236, 236);
}

이 예를 간소화하기 위해서, 나는 밝은 모드에서 흰색을 배경으로 하고, 파란색을 텍스트로 하며, 어두운 모드를 열 때, 우리는 그것들 사이를 전환할 것이다.이를 위해 light 클래스 선택기에 더 많은 CSS 변수를 추가하고 루트의 변수를 사용합니다.테마를 전환할 때 글꼴 크기와 Hello World 제목의 배경 그림을 수정합니다.이것은 내가 제안한 일이 아니다. 특히 배경 그림에 대해서는. 그러나 만약 당신이 그것을 가지고 놀고 싶다면, 이것은 옵션이다.

body.light {
  --background-color: var(--white);
  --text-color: var(--blue);
  --font-weight: 400;
  --image: url("../day.jpg");
}

암흑 모드 수업에 대해 우리는 비슷한 일을 할 것이다.배경과 텍스트의 색을 전환해서 글꼴의 무게를 높이고 야간 그림을 사용합니다.

body.dark {
  --background-color: var(--blue);
  --text-color: var(--white);
  --font-weight: 500;
  --image: url("../night.jpg");
}

현재 우리는 어둠과 광명 모드류를 설치했기 때문에 신체 선택기가 그것을 사용하도록 해야 한다. 이것은 매우 간단하다.올바른 CSS 변수를 사용하려면 속성을 설정합니다.우리는 또한 배경과 색 전환을 설정할 수 있다. 이렇게 하면 모드 전환이 그렇게 갑작스럽지 않을 것이다.

body {
  background: var(--background-color);
  color: var(--text-color);
  font-weight: var(--font-weight);
  transition: background 0.3s ease-in-out, color 0.6s ease-in-out;
}

물론 이미지 변수를 사용하기 위해 이미지 용기를 설정해야 합니다.

#image {
  width: 100%;
  height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.7s ease-in-out;
  background-image: var(--image);
}

만약 우리가 더 나아가고 싶다면, 우리는 내비게이션 표시줄을 설정하여 서로 다른 모드에서 배경과 텍스트 색을 변경할 수 있다.

nav {
  padding: 1rem 25%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--text-color);
}

nav a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--background-color);
}

만약 당신이 모든 일을 완성했다면, 당신은 지금 자신의 기능으로 맞춤형 어둠 모드 스위치 내장 반응을 가지고 있어야 한다.프로젝트 코드를 더 자세히 보려면 GitHub 의 원본 파일과 내가 사용하는 모든 그림을 캡처할 수 있습니다.
이 자습서의 비디오 버전을 좋아한다면, 유튜브에서 이 어두운 모드 구성 요소를 만드는 것을 볼 수 있습니다.