ハカセノオト

moon indicating dark mode
sun indicating light mode

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

July 11, 2020

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/


hnishi のブログ
技術系の記事など。
綺麗に書こうとすると続かない気がするので、割と雑に、備忘録的に書いていく方針。
内容に誤りがあった場合などのご連絡は、Twitter の DM などで頂けると幸いです。