밤의 전사가 되어라(쉿! 다크모드다)

요즘 모든 사람들은 앱에 다크 모드 기능이 필요합니다. 왜요? 글쎄, 사람들은 눈이 아프지 않고 눈에 띄지 않게 사용할 수 있는 것을 사용하는 것을 좋아합니다(예, 밤 올빼미 여러분을 보고 있습니다)

이제 질문은 처음부터 어둡게 만들지 않는 이유는 무엇입니까?
그래서 답은 다크모드를 사용하는 것을 불편하게 느끼는 사람들이 있어서 접근성 문제가 발생한다는 것입니다.

그래서 저는 세 가지 다른 앱을 만드는 작업을 하고 있었고 어두운 모드 토글도 유지해야 한다고 결정했습니다.

헤더

일반적으로 토글은 헤더에 배치됩니다. 따라서 테마를 전환하기 위한 버튼을 보유할 React 구성 요소를 생성합니다.

React hooks, useState, useEffect를 사용하여 다크 모드에 대한 클래스를 추가/제거할 상태 및 부작용을 만듭니다.

function Header() {
  const [ darkMode, setDarkMode ] = React.useState(false)

  React.useEffect(() => {
    const body = document.body
    const toggle = document.querySelector('.toggle-inner')

    // If dark mode is enabled - adds classes to update dark-mode styling.
    // Else, removes and styling is as normal.
    if( darkMode === true ) {
      body.classList.add('dark-mode')
      toggle.classList.add('toggle-active')
    } else {
      body.classList.remove('dark-mode')
      toggle.classList.remove('toggle-active')
    }
  }, [darkMode])

  return (
    <header>
      <div
        id="toggle"
        onClick={() => darkMode === false ? setDarkMode(true) : setDarkMode(false)}
      >
        <div className="toggle-inner"/>
      </div>
    </header>
  )
}

앱

페이지에 약간의 콘텐츠를 만들기 위해 일부 텍스트를 추가했습니다.
헤더 구성 요소를 가져오고 있습니다.

function App() {
  return (
    <main>
      <Header />
      <div id="container">
        <h1>React Dark Mode</h1>
        <p>Uses state to set a class on the body if dark mode is enabled.</p>
        <p>Implementation is done due to a side effect</p>
      </div>
    </main>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

CSS

구성 요소 작업을 마친 후에는 약간의 스타일을 지정해야 합니다.
기본 설정은 여백과 패딩을 제거하고 요소의 전체 너비와 높이를 상자 크기로 조정하는 것입니다.

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

그런 다음 페이지에 기본 배경, 높이 및 너비를 제공합니다.

body {
  color: #1a202c;
  transition: color 0.2s ease-in;
}

#app {
  height: 100vh;
  width: 100%;
}

그런 다음 메인 섹션과 헤더의 스타일을 지정해야 합니다.
흥미로운 추가 기능은 transition 속성입니다. 이렇게 하면 배경색이 부드럽게 변경됩니다. 그리고 다른 요소와 겹칠 수 있도록 헤더에 position: absolute;를 추가합니다.

main {
  background-color: #f7fafc;
  height: 100%;
  width: 100%;
  padding: 20px;
  transition: background-color 0.2s ease-in;
}

header {
  position: absolute;
  right: 2rem;
}

그런 다음 우리가 작성한 작은 텍스트를 포함하는 컨테이너에 스타일이 지정됩니다. 너무 화려하지 않고 창 중앙에 놓고 제목과 단락에 몇 가지 색상 변형을 적용합니다.

#container {
     display: flex;
     height: 100%;
     width: 100%;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

#container h1 {
     padding: 0;
     margin: 0 0 10px 0;
}

#container p {
     opacity: 0.8;
}

이 작업을 마치면 60%가 완료된 것입니다. 토글 및 다크 모드 변형에 대한 스타일을 구현하기만 하면 됩니다.

그런 다음 토글로 이동해 보겠습니다.

#toggle {
     width: 50px;
     display: flex;
     padding: 5px;
     background-color: #1a202c;
     border-radius: 1000px;
     cursor: pointer;
     box-shadow: 0px 5px 20px -10px #000;
     transition: background-color 0.2s ease-in;
}

#toggle .toggle-inner {
     width: 20px;
     height: 15px;
     background-color: white;
     border-radius: 1000px;
     transition: margin-left 0.2s ease-in, background-color 0.2s ease-in;
}

#toggle .toggle-active {
     margin-left: 20px;
}

마지막으로 다크모드 스타일링은 아래와 같이 합니다. 배경 색상과 텍스트 색상만 변경합니다. 그게 다야

.dark-mode {
     color: white;
}

.dark-mode main {
     background-color: #1a202c;
}

.dark-mode #toggle {
     background-color: white;
}

.dark-mode #toggle .toggle-inner {
     background-color: #1a202c;
}

그게 다야. 저와 마찬가지로 다음 프로젝트에 큰 도움이 될 것입니다. 이제 같은 것을 위해 다른 펜을 계속 확인할 필요가 없습니다 xD.

그것을 사용자 정의하고 재미있게 보내십시오!