【Angular】SCSSでの:host-contextでテーマ切り替え

Web

2026.04.24

記事内に広告が含まれています。

:host-context(…) は、コンポーネント外側の祖先要素の状態に応じて、コンポーネント内スタイルを変えるためのセレクタ。
例えば、ルート要素などの祖先要素にclass=”dark-theme”と付けたときに、ダークモードのCSSをつけることができる。

// 例
:host-context(.dark-theme) .title {
  color: #fff;
}

Angular専用というわけではないが、Angularでよく使われるらしい。

ただし、CSS変数（カスタムプロパティ）を使って変数にしたほうがテーマ切り替えでは適切。
host-contextは複雑になりがちで管理がしづらいとされる。

// 例 ルートのファイル

:root {
  --bg: #fff;
  --text: #222;
}
:root.dark {
  --bg: #111;
  --text: #f3f3f3;
}

// 例（個別のComponent）
:host {
  background: var(--bg);
  color: var(--text);
}