# **「Expoテーマ設定・システムカラー検出」**

Expoを使ったReact Native開発環境の構築手順と、Webフロントエンドにおけるシステムテーマ検出の実装パターンをまとめたページ。ReactNativeはiOS/Android向けクロスプラットフォーム開発フレームワークで、ExpoはCLIベースの簡易セットアップを提供する。テーマ設定では`prefers-color-scheme`メディアクエリでダーク/ライトモードを検出し、`localStorage`に保存、変更イベントをリッスンして動的に切り替える実装が示されている。また、PWA（standalone）とブラウザの表示モード判定、GTMデータレイヤーへのユーザーID付与、Twemojiの条件適用など、Webアプリ初期化スクリプトのパターンも含む。

## ポイント
- Expoはejectなしでほとんどのユースケースをカバーし、`expo init` → `expo start`の3コマンドで環境構築完了
- `window.matchMedia('(prefers-color-scheme: dark)')`でシステムテーマを検出し、`localStorage`の値を優先しつつ`change`イベントで動的同期
- `display-mode: standalone`と`navigator.standalone`の両方を確認することでiOS SafariのPWAも正しく判定できる
- expo snack（https://snack.expo.io/）でブラウザ上のPlaygroundが利用可能
- 実機確認はExpo ClientアプリでQRコードをスキャン、初回バンドルに約1分かかる

## 関連概念（未作成）
`React Native CLI vs Expo比較` `prefers-color-scheme メディアクエリ実装` `PWA表示モード判定` `GTMデータレイヤー設計` `Twemoji条件適用パターン`