SCSS를 사용하여 React 앱에서 다크 모드 구현

안녕하세요 👋,
오늘 저는 sass(css-pre-processor)를 사용하여 create-react-app에서 어두운 테마를 구현할 수 있는 가장 쉬운 방법 중 하나를 보여드리겠습니다. 흥미롭지 않나요?😊
사실 이것은이 플랫폼의 첫 번째 게시물입니다. 사랑을 보여주세요.
너무 많은 이야기는 하지 말고 시작합시다.

"참고: 이것은 완벽한 방법이 아닐 수 있으며 적용할 수 있는 다른 방법이 있지만 매우 작은 앱을 빌드하는 경우 이 방법이 적합할 수 있습니다."

먼저 유형을 사용하여 반응 앱을 설정합니다.npx create-react-app react-dark-mode 명령줄에서 node-sass를 설치하겠습니다.npx install node-sass우리 앱이 설정되었고 갈 수 있습니다.App.js 파일에 마크업을 작성할 것입니다.

import React from 'react';

const App = () => {
  return (
    <div className="app">
      <h1>Developers Blog</h1>
      <p>your journey to becoming a better software engineer</p>
      <section>
        <div className="card">
          <h2>News Post One</h2>
          <p>Html crash course</p>
        </div>
        <div className="card">
          <h2>News Post Two</h2>
          <p>Css beginners guide</p>
        </div>
        <div className="card">
          <h2>News Post Three</h2>
          <p>introduction to javascript for beginners</p>
        </div>
      </section>
    </div>
  );
}

export default App;

마크업 스타일을 지정하기 위해 styles.scss라는 새 파일을 생성해 보겠습니다. 스타일은 다음과 같습니다.

$bg-dark-mode: #000;
$grey-dark-mode: rgba(66, 66, 66, 0.712);
$white-text: #fff;
$primary:rgb(0, 132, 255);

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.7;
  font-size: 1rem;
}

body.dark-mode {
  background-color: $bg-dark-mode;
  color: $white-text;
  .card {
    background-color: $grey-dark-mode;
    box-shadow: none;
  }
}

.app {
  text-align: center;
  margin: 1rem auto;
  h1 {
    font-weight: 800;
    font-size: 2rem;
    color:$primary;
  }
  p {
    margin: 2rem 4rem ;
  }
}

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  .card {
    margin: 4rem .5rem;
    box-shadow: 2px 1px 3px 2px rgb(240, 240, 240);
    p{
      word-break: break-all;
    }
  }
}

이제 내가 명명한 다크모드 테마ThemeChanger.js를 처리할 구성요소를 생성하겠습니다. reactHooks(useState 및 useEffect)를 사용하여 상태를 저장하고 또한 localstorage를 사용하여 브라우저를 새로고침할 때마다 이전 테마가 계속 표시되도록 할 것입니다. 테마 모드 상태.

import React, { useState, useEffect } from 'react'

const ThemeChanger = () => {
  const [themeState, setThemeState] = useState(false);

  const handleChange = () => {
    setThemeState(!themeState);
    if (themeState) {
      localStorage.setItem('Theme', 'dark');
      document.body.classList.add('dark-mode');
    } else {
      localStorage.setItem('Theme', 'light');
      document.body.classList.remove('dark-mode');
    }
  }
  useEffect(() => {
    const getTheme = localStorage.getItem('Theme');
    if (getTheme === 'dark') return  document.body.classList.add('dark-mode');
  })
  return (
    <div>
      <button onClick={handleChange}>{themeState ? 'Light Mode' : 'Dark Mode'}</button>
    </div>
  )
}

export default ThemeChanger;

import ThemeChanger 및 styles.scss를 App.js 구성 요소로 가져오면 코드가 다음과 같이 표시됩니다.

import React from 'react';
import ThemeMode from './ThemeChanger';
import './scss/styles.scss';

const App = () => {
  return (
    <div className="app">
      <h1>Developers Blog</h1>
      <ThemeMode/>
      <p>your journey to becoming a better software engineer</p>
      <section>
        <div className="card">
          <h2>News Post One</h2>
          <p>Html crash course</p>
        </div>
        <div className="card">
          <h2>News Post Two</h2>
          <p>Css beginners guide</p>
        </div>
        <div className="card">
          <h2>News Post Three</h2>
          <p>introduction to javascript for beginners</p>
        </div>
      </section>
    </div>
  );
}

export default App;

완벽한!!
이 시점에서 우리는 끝났습니다 😊
도움이 되셨다면 댓글을 남겨주세요.