Emotionでdarkmodeを実装する

Copy
yarn add @emotion/core @emotion/react gatsby-plugin-emotion

Copy
// テーマを定義する
const lightTheme = {
  background: '#ffffff',
  color: '#000000',
};

const darkTheme = {
  background: '#222639',
  color: '#f0f5fa',
};

// 使用するテーマを返す関数
// 引数としてはuseStateの値を受け取る
export default function getTheme(colorMode) {
  // mode受けてテーマ返す
  switch (colorMode) {
    case 'light':
      return lightTheme;
    case 'dark':
      return darkTheme;
    default:
      return lightTheme;
  }
}

Copy
// themeContext.ts
// React useContextで現在のモードを管理する
import { createContext, useContext } from 'react';

// interface ThemeContextType {
//   colorMode: ColorMode;
//   setColorMode: () => void;
// }

// コンテキストのデフォルト値
const defaultContext = {
  colorMode: 'light', // 現在のモードを管理
  setColorMode: () => {}, // colorMode書き換え用の関数を渡す
};

// コンテキスト作成
export const ThemeContext = createContext(defaultContext);
// useThemeでコンテキストを取得できるようにする
export const useTheme = () => useContext(ThemeContext);

Copy
// ThemeProvider.tsx

import React, { useState } from 'react';
import { ThemeProvider as EmotionProvider } from '@emotion/react';
import { ThemeContext } from './themeContext';
import getTheme from './theme_emotion';

const ThemeProvider = ({ children }) => {
  // useStateでモードを管理する（stateの値をcontextProviderに渡す）
  const [colorMode, setColorMode] = useState('light');

  // モードを切り替える関数
  const toggleColorMode = () => {
    // colorMode切り替え用関数
    setColorMode(colorMode === 'light' ? 'dark' : 'light');
  };
  return (
    // emotion-themingのthemeProvider
    //stateのcolorModeが変わるとthemeが切り替わる
    <EmotionProvider  theme={getTheme(colorMode)}>
      {/* useContextのprivderにモードを管理してるstateを渡し
        子のcomponentでsetColorModeでstateを変更した場合、
        EmotionProviderに渡しているcolorModeが切り替わる
        colorModeが切り替れば、getThemeで取得されるthemeも変わり、
        darkmodeまたはlightモードに切り替わる
     */}
      <ThemeContext.Provider
        value={{
          colorMode,
          setColorMode: toggleColorMode,
        }}
      >
        {children}
      </ThemeContext.Provider>
    </EmotionProvider>
  );
};

export default ThemeProvider;

Copy
import React from "react";
import { graphql, Link } from "gatsby";
import _ from "lodash";
import tw, { css } from "twin.macro";
import BlogCardList from "../components/blogCardList";
import TagList from "../components/tagList";
import Layout from "../layout";
import ThemeProvider from "../layout_emotion/theme_emotionProvider";

const Home = ({ data }) => {
  const blogPostList = data.allContentfulBlogPost.edges;
  const { group } = data.tags;
  return (
    <Layout>
      <ThemeProvider>
        <BlogCardList posts={blogPostList} />
      </ThemeProvider>
    </Layout>
  );
};

export default Home;

Copy
import React from 'react';
import tw, { css, styled } from 'twin.macro';
import BlogCard from '../blogCard';
import { useTheme } from '../../layout_emotion/themeContext';

// propsでEmotionProviderのthemeを受け取ることができる
const Container = styled.div`
  height: 100%;
  background: ${props => props.theme.background};
  color: ${props => props.theme.color};
`;

const BlogCardList = ({ posts }) => {
  const { colorMode, setColorMode } = useTheme();

  return (
    <>
      {/* themeで切り替わる部分 */}
      <Container>
        <p>
          current color mode:
          {colorMode}
        </p>
        <button onClick={setColorMode}>toggle color mode</button>
      </Container>
    </>
  );
};

export default BlogCardList;

Copy
import React from 'react';
import tw, { css, styled } from 'twin.macro';
import BlogCard from '../blogCard';
import { useTheme } from '../../layout_emotion/themeContext';

// theme（名前はなんでもいい）でEmotionProviderのthemeを受け取ることができる
const container = theme =>
  css`
    height: 100%;
    background-color: ${theme.background};
    color: ${theme.color};
  `;

const BlogCardList = ({ posts }) => {
  const { colorMode, setColorMode } = useTheme();

  return (
    <>
      {/* themeで切り替わる部分 */}
      <div css={container}>
        <p>
          current color mode:
          {colorMode}
        </p>
        <button onClick={setColorMode}>toggle color mode</button>
      </div>
    </>
  );
};

export default BlogCardList;

Copy
const container = (theme, color) => [
  css`
    height: 100%;
    background-color: ${theme.background};
    color: ${color};
  `,
];

const BlogCardList = ({ posts }) => {
  const { colorMode, setColorMode } = useTheme();

  return (
    <>
      {/* themeで切り替わる部分 */}
      <div css={[theme => container(theme, 'red')]}>
        <p>
          current color mode:
          {colorMode}
        </p>
        <button onClick={setColorMode}>toggle color mode</button>
      </div>
    </>
  );
};

export default BlogCardList;