ダークモード対応

ダークモードに対応。

公式ドキュメントに方法が載ってたのでそのまま使用。

https://docs.astro.build/ja/tutorial/6-islands/2/

:root に変数としてカラーを定義しているのでそれを崩さないようにする。

Astroではコンポーネント毎にstyleを書いてコンポーネント内でのみ使用するようにできるので、globalでは全体的なテーマカラーのみを定義する。

global.css

:root {
  --accent: #2337ff;
  --accent-dark: #000d8a;
  --black: 15, 18, 25;
  --gray: 96, 115, 159;
  --gray-light: 199, 200, 203;
  --gray-dark: 34, 41, 57;
  --gray-gradient: rgba(var(--gray-light), 50%), #fff;
  --box-shadow: 0 2px 6px rgba(var(--gray), 25%),
    0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: rgb(var(--gray-light));
}

html.dark body {
  background: #1a202c;
  color: rgb(var(--gray-light));
}