When I'm not coding, wathing youtube videos or playing game, you'll find me cooking, working out in the park or drinking somewhere.

この間ブログにダークモードを実装してみた。
Reactでは結構簡単にできたのでサンプルコードを含めてできるだけ解説する。

## ダークモードとは

> It means that, instead of the default dark text showing up against a light screen (known as ‘light mode’), a light colour text (white or grey) is presented against a dark or black screen.

普段使われる明るい背景に暗い文字ではなく、暗い背景に明るい文字を表示させること。
自分はウェブやアプリ関係なくダークモードで設定するのが好きだが、今更自分のブログにダークモードがなかったのでNext.jsで簡単に作ってみた。

[forbes | what is dark mode](https://www.forbes.com/uk/advisor/mobile-phones/what-is-dark-mode-and-should-you-be-using-it/)

## モードを設定する

ブログにモードの設定をしていればその設定に従い、設定がなければユーザーのブラウザの設定に従う。
ここは好みだが、どっちも __設定されてなければデフォルトでdarkにする__ 

```JSX
import React from "react";

export default function ThemeScript() {
  return (
    <script
      dangerouslySetInnerHTML={{
        __html: blockingSetInitialColorMode,
      }}></script>
  );
}

const blockingSetInitialColorMode = `(function() {
	${setInitialColorMode.toString()}
	setInitialColorMode();
})()
`;

function setInitialColorMode() {
  function getInitialColorMode() {
    const persistedColorPreference = window.localStorage.getItem("theme");
    const hasPersistedPreference = typeof persistedColorPreference === "string";

    if (hasPersistedPreference) {
      return persistedColorPreference;
    }

    const mql = window.matchMedia("(prefers-color-scheme: dark)");
    const hasMediaQueryPreference = typeof mql.matches === "boolean";

    if (hasMediaQueryPreference) {
      return mql.matches ? "dark" : "light";
    }

    return "dark";
  }

  const colorMode = getInitialColorMode();
  const root = document.documentElement;
  root.style.setProperty("--initial-color-mode", colorMode);

  if (colorMode === "dark") document.documentElement.setAttribute("data-theme", "dark");
}
```

アプリケーションのテーマの設定は __localStorageに保存しておく__ 。
localStorageに入れておくことで、再訪問時にも前回と同様なモードで見ることができる。

ユーザーのブラウザなどの設定を読みことのが __prefers-color-scheme__ 
モダーンブラウザではサポートされているので使うのに問題はないと思う。

### スクリプト配置

ドキュメント(_document)に このスクリプトを入れておく。
画面のRenderingの前に設定をするのでbodyの先頭に入れておく。

```JSX
export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <ThemeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

## モードを適応させる

設置したモードをアプリケーション側で使うには、 __Contextを使って、下のレイヤーで参照する__

一つ目の `useEffect` で、設定されたモードをモードとして使わせる。
二つ目の `useEffect` で、document側にモードを設定させることで実際の色を切り替えることができる。 これはこの後のモードごとに色を設定する部分で実際に使われる。

下位のレイヤーでこのコンテキストを使って色を切り替えるので、colorModeを変更する __toggleColorMode__ 関数も用意しておく。そうすることで他のComponentでは色の変更処理を意識することなく、関数を呼び出すだけで色がしてできる。

__prefers-color-scheme__ を使ってユーザーの設定を読み込んでるのでアプリ内で切り替えるのは無駄かもしてないが、ブラウザによっては設定できないようなのであっても良いと思う。

```JSX
import React, { createContext, useEffect, useState } from "react";

type ContextProps = {
  colorMode: string;
  toggleColorMode: () => void;
};

export const ThemeContext = createContext({} as ContextProps);

export const ThemeProvider = ({ children }) => {
  const [colorMode, setColorMode] = useState(undefined);

  useEffect(() => {
    const root = window.document.documentElement;
    const initialColorValue = root.style.getPropertyValue("--initial-color-mode");
    setColorMode(initialColorValue);
  }, []);

  useEffect(() => {
    if (colorMode !== undefined) {
      if (colorMode === "dark") {
        document.documentElement.setAttribute("data-theme", "dark");
      } else {
        document.documentElement.removeAttribute("data-theme");
      }
    }
  }, [colorMode]);

  const toggleColorMode = () => {
    const theme = colorMode === "dark" ? "light" : "dark";

    window.localStorage.setItem("theme", theme);
    setColorMode(theme);
  };

  return <ThemeContext.Provider value={{ colorMode, toggleColorMode }}>{children}</ThemeContext.Provider>;
};
```

### ThemeProviderを配置

Providerは _appの下に配置しておく。

```JSX
function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
```

## モードごとに色を切り替える

これは使うCSSのライブラリーによって使い方は変わると思うが、自分はEmotionを使って説明する。
上記の手順でモードをアプリ側に適応させることはできてるので、色を指定することが簡単にできる。

```JSX
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <Global styles={color} />
      </Head>
      <ThemeProvider>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

const color = css`
  :root {
    --color-text: black;
    --color-background: white;
  }

  [data-theme="dark"] {
    --color-text: white;
    --color-background: black;
  }
`;
```

ThemeProviderでドキュメント側に __data-theme="dark"__ の設置をしているので、CSS側では簡単にVariablesをしてして、それを読み込ませるだけ。

使う側では `color: var(--color-text);` のように書くだけで良い。

## モードを切り替える

モードを切り替える際は、ThemeContextで作った __toggleColorMode__ を呼び出すだけ。

```JSX
import React, { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

export default function ToggleTheme() {
  const { colorMode, toggleColorMode } = useContext(ThemeContext);

  return (
    <label>
      <input
        type="checkbox"
        checked={colorMode === 'dark'}
        onChange={() => toggleColorMode()}
      />{' '}
      Dark
    </label>
  );
}
```

## まとめ

ダークモードが本当に良いか否かの議論はあるものの、個人的には好きなのでまぁ良いかなって感じに作ってみた。

完全に余談だけど、実装自体は簡単だったが、ダークモードは色が限られるのでデザインが難しいと感じた。

> コックスによれば、読みやすさにとって重要なのは、配色よりも文字と背景のコントラストを強くすることだという。通常モードでもダークモードでも、コントラストが同じなら、おそらく読みやすさに違いはない。しかしわたしたちは、白い背景に黒い文字という組み合わせに慣れているため、通常モードのほうが、やや読みやすく感じるかもしれないとコックスは話す。

こんな感じに読みやすいようなデザインをするのって本当に難しいと今回実装しながら思った。

[How to add dark mode to a Gatsby site](https://www.joshwcomeau.com/react/dark-mode/)
[「ダークモード」は、本当に“目に優しい”のか？](https://wired.jp/2019/10/05/dark-mode-chrome-android-ios-science/)

Next.jsでブログにダークモードを作ったので簡単に解説する

 ダークモードっていいよね

開発を初めて、最初はMaterialUIで書いていたが、色々モヤモヤしてたので移行した。
その中でモヤモヤした点、移行する際に気にしてた点をまとめる。

## Material UIからemotionに移行
当初Material UIで書いていたけど、なんか色々気に入らない。
気に入らない点は２つだった。

- CSS-in-JSの書き方が気に入らない
- Material UIのデフォルトのスタイルが邪魔

### CSS-in-JSの書き方が気に入らない
```css
.text {
  text-align: center;
  font-size: 2rem;
  color: red;
}
```
こんな感じのCSSをMaterialUIを使って、Componentにスタイルを当ててみる。

#### Hooks式
`@material-ui/core/styles` の `makeStyles` を使う。
styleを定義したfunctionを、Componentで呼び出してclassNameに渡してあげる。

```jsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  text: {
    textAlign: center,
    fontSize: 2rem,
    color: red
  }
});

export default function StyledText() {
  const classes = useStyles();
  return (
    <p className={classes.text}>
      Test
    </p>
  );
}
```

#### Styled Component式
`@material-ui/core/styles` の `styled` を使う。

```jsx
import React from 'react';
import { styled } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const CustomText = styled(Typography)({
  text: {
    textAlign: center,
    fontSize: 2rem,
    color: red
  }
});

export default function StyledText() {
  return (
    <CustomText>Test</CustomText>
  );
}
```

個人的にスタイルのためのComponentを作るのは好きじゃないのでHooks式の書き方を採用。
それで書いてはいたけど、CSS プロパティ名をキャメルで書くのにすごい違和感&不便だった。。
ネットで調べた __このスタイル良さそう！ コピペしよう__ ができない。
レスポンシブの対応も簡単にできるのか@mediaとかではないので若干の違和感がある。

### Material UIのデフォルトのスタイルが邪魔
これは良いところでもあり、悪いところでもあるかも。
Material-UIは単純にCSS-in-JSのライブラリーではないからこれで怒るのは自分が悪いきもするけど、まぁ色々邪魔だった。
確かにあまり気にしなくても簡単に綺麗な画面が作れるのは確かにそうだけど、もうちょっと細かくスタイルをいじるときが問題になっていた。
Material-UIはかなり大きいフレームワークだから思ったよりスタイルを頑張ってくれてたので個人的に今回のブログは自分の勉強目的もあったから自分でスタイルも頑張ってみたいから他のライブラリーを選ぶとした。

## emotionを採用する
そこで色々調べて、何個か候補を出してみて選ぶとした。

1. 諦めてMaterial-UIを使い続ける
2. かの有名なStyled Component
3. emotion
4. tailwind css

そこで1はまぁないでしょと思ってそもそも除外。
上にも書いているが、スタイルだけのためのComponentは個人的に好きじゃないので2も除外した。
4のtailwind cssも一瞬考えたけど、スタイルの勉強にもならないし、これも他プロジェクトでスタイルを共有したりするときに再利用性もないので諦めた。

消去法に見えるが、emotionは結構気に入ったので採用。
それでこのブログは現在emotionでスタイルが書かれている。

### emotionの書き方
emotionの場合、cssのブロックにしてあげてcomponentのcssに渡してあげる。
Sassで書けるので非常に書きやすい。
cssのpropsはReactにはないので色々設定しないといけないけど、他のCSS-in-JSのライブラリーとあまり差はないので気になるほどではなかった。
Styled Componenet見たいにCompoenetを作る方法もあるが、好みじゃないので使ってない。

```
import React from 'react';
import { css } from "@emotion/react";

const text = css`
  text-align: center;
  font-size: 2rem;
  color: red;
`

export default function StyledText() {
  return (
    <p css={text}>
      Test
    </p>
  );
}
```

vscodeだとStyled Component用のプラグインを入れたらスタイルの補完もしてくれるので非常に満足しなが楽しく書いている。
