개츠비 사이트 테마 설정 방법

가장 먼저.

다음 아이디어는 React를 사용하는 모든 종류의 사이트에 적용될 수 있습니다. Gatsby은 웹 사이트 및 앱을 만들기 위한 React 기반 오픈 소스 프레임워크라는 것을 알아야 합니다.

주요 아이디어 💡

테마는 특정 테마를 선택할 때 변경되는 CSS 속성임을 알아야 합니다. 예.

          <button type="button" onClick={handleToggle} style={styles(theme).toggle}>
            { theme === themes.light ? '☽' : '☼' }
          </button>

어두운 ☽ 및 밝은 ☼ 테마를 만듭니다.

import { createContext, useState } from 'react'

export const themes = {
  light: {
    foreground: 'rebeccapurple',
    background: 'white'
  },
  dark: {
    foreground: 'white',
    background: 'rebeccapurple'
  }
};
export const ThemeContext = createContext();

현재 테마의 상태를 관리하기 위해 후크도 만들어야 합니다.

export const useThemes = () => {
  const [mode, setMode] = useState(themes.light);

  const toggleMode = () => { 
    if (mode === themes.light) {
      setMode(themes.dark);
    } else {
      setMode(themes.light);
    }
  };

  return [mode, toggleMode]
};

앱을 래핑할 컨텍스트를 만드세요.

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import { ThemeContext, themes, useThemes } from './Context/Theme'

import Header from "./Header"
import "./layout.css"

const Layout = ({ children }) => {

Import and create only one instance of our theme, this is a kind of singleton pattern.

  const [theme, handleToggle ] = useThemes();

  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
console.log(theme.foreground);
  return (

    <ThemeContext.Provider value={themes}>
      <Header siteTitle={data.site.siteMetadata.title} handleToggle={handleToggle} theme={theme}/>

      <div
        style={{
          color: theme.foreground,
          background: theme.background,
          margin: `0 auto`,
          maxWidth: 960,
          padding: `10rem 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>

    </ThemeContext.Provider>

  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

헤더 구성 요소는 다음과 같습니다.

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React, { useContext } from "react"
import {styles} from './styles'
import { ThemeContext } from "../Context/Theme";

I will use Context to compare what is the current theme and handleToggle function to change between themes.

function Header({ siteTitle, handleToggle, theme }) {
  const themes = useContext(ThemeContext);

  return (
    <header
      style={styles(theme).header}
    >
      <div
        style={styles(theme).navbar}
      >
        <h1 style={styles(theme).title}>
          <Link
            to="/"
            style={styles(theme).link}
          >
            {siteTitle}
          </Link>
        </h1>
        <div style={styles(theme).buttonContainer}>

          <button type="button" onClick={handleToggle} style={styles(theme).toggle}>
            { theme === themes.light ? '☽' : '☼' }
          </button>

        </div>
      </div>
    </header>
  );
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

마무리

주요 아이디어는 이것을 모든 사이트에 적용할 수 있다는 것을 아는 것입니다 ;)