nativecn-uiは、美しく高度にカスタマイズ可能なReact Nativeコンポーネントライブラリです。このライブラリのテーマシステムを利用することで、開発者はブランドの視覚ガイドラインに従ったモバイルアプリケーションのインターフェースを作成することができます。ここでは、nativecn-uiのテーマシステムを利用して、企業のビジュアル規範に沿ったモバイルアプリケーションを作成する方法について詳しく説明します。

なぜテーマをカスタマイズする必要があるのか？

モバイルアプリケーション開発において、ブランドスタイルの一貫性を保つことは非常に重要です。nativecn-uiが提供するテーマシステムにより、開発者は以下のことが可能となります：

• アプリ全体のカラースキーム、フォント、スペースを統一
• ライトモードとダークモードを簡単に切り替え
• 異なるブランド要件への迅速な適応
• CSSの冗長性の削減と開発効率の向上

テーマシステムの基礎

nativecn-uiのテーマシステムは、シンプルで直感的な設定ファイルに基づいています。主に、styles/theme.tsで定義されています。デフォルトでは、ライトモードとダークモードの2つの基本テーマが提供されています：

export const theme = {
  light: {
    background: 'hsl(0, 0%, 100%)',
    foreground: 'hsl(222.2, 47.4%, 11.2%)',
  },
  dark: {
    background: 'hsl(224, 71% 4%)',
    foreground: 'hsl(213, 31% 91%)',
  },
};

これらのテーマ変数は、RadioGroup.tsxやSwitch.tsxなどのコンポーネントによって参照され、アプリ全体の視覚的な一貫性を確保します。

テーマのカスタマイズ開始

ステップ1：テーマ設定の拡張

まず、styles/theme.tsでデフォルトテーマを拡張し、カスタムカラー、フォント、スペースを追加します：

export const theme = {
  light: {
    // デフォルトのライトテーマ
    background: 'hsl(0, 0%, 100%)',
    foreground: 'hsl(222.2, 47.4%, 11.2%)',
    // カスタムブランドカラー
    primary: '#2563eb', // メインカラーとして青を使用
    secondary: '#f97316', // サブカラーとしてオレンジを使用
    // カスタムスペース
    spacing: {
      sm: 4,
      md: 8,
      lg: 16,
      xl: 24,
    }
  },
  // ダークテーマの設定...
};

ステップ2：Tailwindサポートの設定

taiwind.config.jsファイルを修正して、カスタムテーマ変数がTailwindによって認識されるようにします：

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: theme.light.primary,
        secondary: theme.light.secondary,
      },
      spacing: theme.light.spacing,
    },
  },
};

ステップ3：テーマ切り替え機能の実装

nativecn-uiはNativeWindと組み合わせて、テーマ切り替え機能を提供しています。コンポーネントにテーマ切り替えボタンを追加します：

import { colorScheme, useColorScheme } from "nativewind";
import { Button } from "./components/Button";

export function ThemeToggle() {
  const { colorScheme, setColorScheme } = useColorScheme();

  return (
    <Button
      variant="outline"
      onClick={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}
    >
      {colorScheme === "dark" ? "ライトモード" : "ダークモード"}に切り替え
    </Button>
  )
}

テーマの効果表示

カスタムテーマを適用すると、コンポーネントは統一されたブランドスタイルを表示します。以下は、異なるテーマモードでのインターフェースの比較です：

• nativecn-ui ライトテーマの例 - カスタムブルーカラーとオレンジのサブカラーを使用
• nativecn-ui ダークテーマの例 - ブランドカラーを維持しつつ、暗い環境での読みやすさを最適化

高度なテーマカスタマイズテクニック

コンポーネントレベルでのテーマのオーバーライド

特殊なスタイルが必要なコンポーネントに対して、グローバルテーマをpropsで上書きできます：

<Button 
  style={{ backgroundColor: theme.light.secondary }}
  textStyle={{ color: 'white' }}
>
  カスタムボタン
</Button>

動的テーマ切り替え

ユーザーのテーマ設定を永続的に保存するためにAsyncStorageを利用します：

// ユーザーのテーマ設定を保存
async function saveThemePreference(selectedTheme) {
  await AsyncStorage.setItem('theme', selectedTheme);
}

// ユーザーのテーマ設定を読み込み
async function loadThemePreference() {
  return await AsyncStorage.getItem('theme') || 'light';
}

テーマ変数の型定義

型安全性を確保するために、lib/utils.tsでテーマ変数の型定義を追加します：

export type Theme = {
  light: {
    background: string;
    foreground: string;
    primary: string;
    secondary: string;
    spacing: {
      sm: number;
      md: number;
      lg: number;
      xl: number;
    };
  };
  dark: typeof theme.light;
};

よくある問題の解決策

テーマ切り替えが効かない

darkMode: "class"がTailwindの設定に含まれていることを確認し、NativeWindのuseColorSchemeフックが正しくインポートされているかを確認してください。

カスタムカラーが適用されない

テーマ設定が正しくエクスポートされているか、そしてTailwind設定がテーマ変数を正しく参照しているかを確認してください。

コンポーネントスタイルの衝突

カスタムスタイルがデフォルトテーマと競合する場合、!important修飾子を使用してカスタムスタイルを強制的に適用します：

<Card style={{ backgroundColor: 'red !important' }}>
  強制的に赤い背景のカード
</Card>