gatsby-theme-blog のテーマカラー、背景色、文字色、フォントを変える

gatsby-theme-blog は gatsby-plugin-theme-ui を利用している。
したがって、この plugin の shadowing を行う。

以下のファイルを作成する。
src/gatsby-plugin-theme-ui/index.js

例えば、

import merge from "deepmerge"
import defaultTheme from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/index"

const whiteGreen = `#E8F5E9`
const lightBlue = `#66E0FF`
const blueGray = `#282c35`
const teal = `#009688`

export default merge(defaultTheme, {
  colors: {
    text: blueGray,
    primary: teal,
    heading: blueGray,
    background: whiteGreen,
    modes: {
      dark: {
        background: `black`,
        primary: lightBlue,
        highlight: lightBlue,
      },
    },
  },
  fonts: {
    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: "Inter, sans-serif",
    monospace: "Menlo, monospace",
  },
})

この記事書いたあとで、以下の公式チュートリアルにやり方書いてあることに気がついた。

Using a Theme

最近、gatsby-theme-blog が update されたらしい。
そして、gatsby-theme-blog は version が上がって、darkmode がデフォルトでは削除されたらしい。
こんど、新しいバージョンを試してみたい。

References

theme-ui の詳細、使い方は以下を参照
Getting Started – Theme UI

shadowing に関しては、以下の公式チュートリアルで手を動かすと、理解が捗る。
https://www.gatsbyjs.org/tutorial/using-multiple-themes-together/