소개

이 기사는 htps : // / ch-b ぉg. 요시키 오시시. 그래서 v / posts / s rt는 tsby-b-g입니다.의 교차 게시물 기사입니다.

이 기사는 Gatsby이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다.

Gatsby 시작할 때까지

Gatsby에 공유 기능, OGP 태그 추가

태그 기능, 카테고리 기능을 붙인다(기초편)

태그 기능, 카테고리 기능을 붙인다(응용편)

Gatsby에 TableOfContents(목차)를 추가

DarkMode 켜기 (본 기사)

내용

DarkMode 멋지네요. 대부분의 앱 테마를 DarkMode로 사용하고 있습니다. 여러분은 어떻습니까? 눈에 좋고 쉽게 세련된 DarkMode를 블로그에 도입합시다!

이런 내용이 되고 있습니다.

Gatsby Plugin에서 적용

기본 CSS를 사용하는 방법

SCSS에서도 적용 할 수있는 방법

Gatsby의 Plugin에서 적용

이것이 가장 빠르지 않을 수 있습니다.

gatsby-plugin-dark-mode 설치

yarn add gatsby-plugin-dark-mode

// gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-dark-mode'],
}

사용법

ThemeToggler를 가져온 구성 요소를 만듭니다.

import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'

class MyComponent extends React.Component {
  render() {
    return (
      <ThemeToggler>
        {({ theme, toggleTheme }) => (
          <label>
            <input
              type="checkbox"
              onChange={e => toggleTheme(e.target.checked ? 'dark' : 'light')}
              checked={theme === 'dark'}
            />{' '}
            Dark mode
          </label>
        )}
      </ThemeToggler>
    )
  }
}

이 Plugin은 LocalStorage에서 Dark인지 그렇지 않은지를 판단하고 있는 것 같습니다.

global.css 수정

global.css가 없는 경우 body 태그에서 기본 색상을 제어하는 ​​파일을 찾아 다음과 같이 수정합니다.

/* global.css */

body {
  --bg: white;
  --textNormal: #222;
  --textTitle: #222;
  --textLink: blue;
  --hr: hsla(0, 0%, 0%, 0.2);

  background-color: var(--bg);
}

body.dark {
  -webkit-font-smoothing: antialiased;

  --bg: darkslategray;
  --textNormal: rgba(255, 255, 255, 0.88);
  --textTitle: white;
  --textLink: yellow;
  --hr: hsla(0, 0%, 100%, 0.2);
}

Layout.js 수정

CSS까지 적용한 후에는 그 변수를 사용하면 됩니다. Layout.js를 변경합시다.

class Layout extends React.Component {
  render() {
    return (
      <div
        style={{
          backgroundColor: 'var(--bg)',
          color: 'var(--textNormal)',
          transition: 'color 0.2s ease-out, background 0.2s ease-out',
        }}
      >
        ...
      </div>
    )
  }
}

기본 CSS를 사용하는 방법

이 방법은 CSS를 동적으로 변경할 수 없지만 사용자 장치의 설정에 따라 테마를 변경할 수 있습니다.

장점으로는 「소의 CSS로 구성되어 있다, 비용이 낮기 때문에 우선 도입하고 싶다」가 됩니다.

CSS 변경

우선 여러분의 프로젝트의 body 태그 혹은 root:에 설정되어 있는 CSS를 확인해 주세요.

확인이 끝나면 다음 CSS를 추가합시다.

@media (prefers-color-scheme: light) {
  --theme-base: white;
  --theme-font: black;
  --theme-accent: red;
}

@media (prefers-color-scheme: dark) {
  --theme-base: black;
  --theme-font: white;
  --theme-accent: pink;
}

body {
  background-color: var(--them-base);
  color: var(--them-font);
}

prefers-color-scheme은 CSS의 미디어 특성으로 사용자가 시스템에 요청한 색상 테마가 밝거나 어두운지 여부를 감지하는 데 사용됩니다.

그래서 각 장치의 설정 상황에 따라 prefers-color-scheme의 설정 값이 바뀐다는 것입니다. 유저 디바이스에 준거하기 때문에 이 CSS만으로는 수동으로 변경할 수 없습니다만, 최저한의 대응으로서는 좋다고 생각합니다.

IE는. . .

역시인가라고 할까 IE는 비대응이라는 것이므로 어쩔 수 없다. . . 라고 할까 무시합시다! w

SCSS에서도 적용할 수 있는 방법 이전의 CSS 변수를 사용한 응용이 됩니다. CSS 변수를 SCSS 변수에 래핑해 주면 됩니다. // variables.scss :root{ @media (prefers-color-scheme: light) { --color-base: #222; --color-primary: #5D93FF; --color-secondary: #F7A046; --color_background-base: #FFF; } @media (prefers-color-scheme: dark) { --color-base: #FFF; --color-primary: #5D93FF; --color-secondary: #F7A046; --color_background-base: #282828; } @media (prefers-color-scheme: no-preference) { --color-base: #FFF; --color-primary: #5D93FF; --color-secondary: #F7A046; --color_background-base: #282828; } } $color-base: var(--color-base); $color-primary: var(--color-primary); $color-secondary: var(--color-secondary); $color_background-base: var(--color_background-base); 해봤어 Mac이 DarkMode일 때 Mac이 LightMode일 때 요약 어땠습니까? 이번 Gatsby에 한하지 않고 일반 CSS에서도 사용할 수 있는 방법도 함께 소개했습니다. 상황에 따라 필요한 것을 저비용으로 실현할 수 있으면 시간도 걸리지 않기 때문에 좋네요! 일단 Gatsby 특집은 끝납니다만, 조금 스스로 커스터마이즈 해 나갈 예정이므로 그때마다 소개할 수 있으면 좋겠습니다~. 그럼 또. 참고

gatsby-plugin-dark-mode