@senkenmaru/theme

senkenmaru の Unistyles v3 設定と Provider。

インストール

bun add @senkenmaru/theme react-native-unistyles

前提: React 19+ / React Native 0.78+ / New Architecture 有効

使い方（最小）

// app/_layout.tsx
import { SenkenmaruProvider } from '@senkenmaru/theme';

export default function Root({ children }) {
  return <SenkenmaruProvider>{children}</SenkenmaruProvider>;
}

SenkenmaruProvider が初回レンダー時に Unistyles を設定します（冪等）。

使い方（詳細）

初期テーマを指定

<SenkenmaruProvider initialTheme="dark">
  {children}
</SenkenmaruProvider>

OS のダーク/ライト設定に追従

<SenkenmaruProvider adaptiveThemes>
  {children}
</SenkenmaruProvider>

Provider を使わず設定したい場合

import { configureSenkenmaru } from '@senkenmaru/theme';

configureSenkenmaru({ adaptiveThemes: true });

プラットフォーム別セットアップ

Expo

app.json で New Architecture を有効化：

{
  "expo": {
    "newArchEnabled": true
  }
}

babel.config.js に Unistyles Babel プラグインを追加：

module.exports = (api) => {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [['react-native-unistyles/plugin', { root: 'app' }]],
  };
};

Vite SPA（Web 専用）

vite.config.ts の @vitejs/plugin-react に Unistyles plugin を追加し、react-native → react-native-web のエイリアスを設定。apps/examples/vite-spa/vite.config.ts を参考に。

加えて、Web 環境では entry で 互換 CSS を読み込んでください：

// src/main.tsx の先頭
import '@senkenmaru/theme/web.css';

web.css は senkenmaru を Web で動かすための最小限の調整（OS color-scheme 対応、ブラウザ既定 focus outline の無効化など）を含みます。Native 環境では不要（CSS は無視される）。

Next.js は現在対応外（Unistyles v3 の Babel plugin が SWC ベースの Next.js と相性悪い）。

提供されるもの

• SenkenmaruProvider — 推奨の設定エントリ
• configureSenkenmaru(options) — Provider を使わない場合の関数
• lightTheme / darkTheme — 生の theme オブジェクト（カスタム theme 派生用）
• breakpoints — レスポンシブブレイクポイント定義
• web.css — Web 環境向けの互換 CSS（@senkenmaru/theme/web.css で import）
• 型: SemanticTheme / SenkenmaruThemeName / ConfigureOptions 等

デザイントークン

本パッケージ内の tokens/ に 3 層セマンティック (primitive / semantic / component) で定義されています。SemanticTheme 型と lightTheme / darkTheme を直接 import すれば外部からも参照可能。詳細はルートの AGENTS.md を参照。