featuredImage {
	childImageSharp {
		gatsbyImageData(width: 2000, placeholder: BLURRED)
	}
}

let featuredImg = getImage(posts.frontmatter.featuredImage?.childImageSharp?.gatsbyImageData)

{featuredImg && (
<div className={styles.featuredImg}>
	<GatsbyImage image={featuredImg} />
</div>
)}

yarn add gatsby-plugin-use-dark-mode use-dark-mode

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

npm i use-dark-mode --legacy-peer-deps
```5
</section>

<section style="margin-bottom: 5em;">

## 三分岐のダークモードが欲しい。

三畳半の作業部屋では、LED電球2つ以外は真っ暗にしてモニターを見ているわたくし。<br>
生活がダークモードですが、このサイトのデフォルトは白でした。<br>

で、自分がよく見にいく2つのサイトが生粋のダークモード対応でOSに倣うタイプ。<br>
MacをLightモードにするのはきついし、ブラウザも同じく。<br>
たまーにOSをLightモードにして読んだりもするけど、暗い場所で明るいモードを見たい個人的な好みからすると[MDN](https://developer.mozilla.org/ja/)の3択が理想。

外観としては、Codepenで見かけた[Light / Dark / Black Theme](https://codepen.io/havardob/pen/dyOJyje)が全員嬉しい感。

<img src="asset/2023-06-19-3.png" width="100%" alt="3ThemeMode">

ダークモードでも発色ゼロの漆黒Blackじゃないと目にきびしいという方もいれば、私は逆に「#000000」は、きつすぎてエディターのテーマなどでも敬遠します。<br>
「濃灰色」止まり。

このCodepenのをlocalStorage保存つきで実装できれば便利だと思うものの、書けない。
</section>

<section style="margin-bottom: 5em;">
既存のプラグインのコードを見ると、表題の三項演算子が大活躍なんですよね。<br>
二択はONとOFF、

disable
enable

true
false　だから確実であり小難しくないし、我儘なやつ以外はそれで十分と思われているダークモードはさておき。
</section>

<section style="margin-bottom: 6em;">
前記事でGatsby Head APIに移行した際に、それまで私はこの「三項演算子」をIF文だと思い込んで見てたんです。実態を知ると（おもしろいなー）となり、これ四項はないの？と冗談のようなことを考えて探しにいき、
あぁやっぱり 
<strong>
if-elseif-else
</strong>
なんだ ーな書き方を知りました。

[条件式が複数ある三項演算子に混乱した話 - Qiita](https://qiita.com/riekure/items/e510dba2e507403d990a?utm_source=pocket_saves)

```js
String str = 条件式1 ? 条件式2 ? "A" : "B" : "C";

String str = "";
if (条件式1) & (条件式2):正 {
	str = "A";
} elseif (条件式1:正) {
	str = "B";
} else {
	str = "C";
}

String str = "";
if (条件式1) & (条件式2):正 {
	str = "A";
} elseif (条件式1:正) {
	str = "B";
} elseif (条件式1) & (条件式2):負 {
	str = "C";
} elseif (条件式2:正) {
	str = "C";
}