> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replit テーマ

> カスタムテーマ、カラースキーム、シンタックスハイライトでプロジェクトエディターをパーソナライズする方法について学びましょう。

Replit のテーマでは、背景色やUI要素からコードのシンタックスハイライトまで、プロジェクトエディターの外観をカスタマイズできます。可読性の向上、目の疲れの軽減、より楽しいコーディング体験のために、開発環境をパーソナライズしましょう。

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=c281da129853b7482f8c89f75777f415" alt="カラーカスタマイズオプションを表示する Replit テーマエディターのスクリーンショット" width="1920" height="1080" data-path="images/workspace/themes.jpg" />
</Frame>

## カスタムテーマの作成

独自のテーマを作成してカスタマイズするには、以下の手順に従ってください：

1. [設定](https://replit.com/settings)を開き、**ユーザー** → **パーソナライゼーション**（または**テーマ**セクション）に移動します
2. **新しいテーマを作成**を選択します
3. タイトルを入力し、カラースキーム（ライトまたはダーク）を選択して、説明（省略可能）を追加します
4. **テーマを作成**を選択してテーマエディターを開きます

グローバルテーマ設定では、UIの全体的な外観を制御します：

* **背景**：ほとんどのUI表面の基本色を設定します
* **アウトライン**：ボーダーと区切り線の色を制御します
* **前景**：テキストとアイコンの色を決定します
* **プライマリ**：ボタンとインタラクティブ要素の色を定義します
* **ポジティブ**：**実行**ボタンなどの成功インジケーターに適用されます
* **ネガティブ**：エラーと破壊的な操作の警告に表示されます

**テーマを適用**を選択して、カスタムテーマをすぐに使用し始めます。

## シンタックスハイライト

可読性と理解度を向上させるために、さまざまなコード要素の表示方法をカスタマイズします。

<Tip>
  適切なシンタックスハイライトにより、コードを一目でスキャンして理解しやすくなります。相性が良く、背景に対して十分なコントラストを持つ色を選びましょう。
</Tip>

<Accordion title="シンタックスハイライトの要素">
  | 要素          | 説明                                               |
  | ----------- | ------------------------------------------------ |
  | **変数名**     | 宣言キーワードが使用されていない変数に適用されます                        |
  | **変数定義**    | `const` や `var` などのキーワードで定義された変数名に色を付けます         |
  | **関数参照**    | 関数を呼び出す際に適用されます                                  |
  | **関数定義**    | 宣言時の関数名に色を付けます                                   |
  | **キーワード**   | `import`、`function`、`return` などの言語キーワードをハイライトします |
  | **プロパティ名**  | 変数からのプロパティアクセスに色を付けます                            |
  | **プロパティ定義** | オブジェクトプロパティの定義時に使用されます                           |
  | **関数プロパティ** | オブジェクト上のメソッドを呼び出す際に適用されます                        |
  | **タグ名**     | HTMLおよびJSXタグに使用されます                              |
  | **型名**      | 型付き言語での型アノテーションに色を付けます                           |
  | **クラス名**    | クラスの宣言と参照に適用されます                                 |
  | **属性名**     | HTMLおよびJSX属性をハイライトします                            |
  | **コメント**    | すべてのコードコメントに適用されます                               |
  | **文字列**     | 文字列リテラルに色を付けます                                   |
  | **数値**      | 数値をハイライトします                                      |
  | **ブール値**    | ブール値（`true`/`false`）を整形します                       |
  | **正規表現**    | 正規表現パターンに色を付けます                                  |
  | **演算子**     | `+`、`-`、`*`、`/` などの演算子をハイライトします                  |
  | **括弧**      | 適切な場合に角括弧と山括弧に色を付けます                             |
</Accordion>

## テーマデザインのベストプラクティス

以下のガイドラインに従って、視覚的に魅力的で機能的なテーマを作成してください：

### 色とコントラスト

* **コントラストのバランスを取る**：背景と前景要素の間に十分な差異を確保します
* **一貫したパレットを作る**：衝突するのではなく、互いに補完し合う色を選びます
* **一定の明るさを維持する**：シンタックス要素全体で似た明るさレベルを保ちます
* **アクセシビリティを考慮してデザインする**：低コントラストの組み合わせを避けて、視覚障害のあるユーザーを配慮します

<Warning>
  よくあるテーマデザインの問題を避けましょう：

  * シンタックス要素間の過度な明るさの差
  * 視覚的な不和を生む色の組み合わせ
  * コードと背景の間の不十分なコントラスト
</Warning>

## テーマの管理

[設定](https://replit.com/settings)の**ユーザー** → **パーソナライゼーション**（または**テーマ**セクション）で、インストールされているすべてのテーマにアクセスして管理できます。

### テーマの切り替え

テーマのタイトルの横にあるボタンを選択して、現在のテーマとして有効にします。

### テーマの編集

三点メニューを選択して**編集**をクリックすることで、カスタムテーマを変更できます。

<Note>
  編集または削除できるのは、自分で作成したカスタムテーマのみです。デフォルトテーマや他のユーザーが作成したテーマは変更できません。
</Note>

### テーマの削除

三点メニューから**削除**を選択してカスタムテーマを削除します。

## コミュニティテーマの探索

[テーマ探索ページ](https://replit.com/themes)で Replit コミュニティが作成したテーマを見つけましょう。

### テーマの検索

* 名前で検索して「Atom One Dark」などの特定のテーマを見つけます
* 作成者でフィルタリングして特定のクリエイターのテーマを探索します
* カラースキームでブラウズしてライトまたはダークテーマを見つけます
* 特定の色で検索して好みに合わせます

テーマをインストールする前にプレビューして、プロジェクトエディターでどのように見えるかを確認できます。

## VS Codeからの移植

テーマ作成プロセス中に同等の色をマッピングすることで、お気に入りの VS Code テーマを Replit にインポートします。

<Frame>
  <iframe width="100%" height="400" src="https://www.loom.com/embed/ba4eb90eb3dd4ec7802954bf695b9c82?sid=4a5274a2-cfd7-4f2b-9c11-f54d7a56eb7f" frameborder="0" allowfullscreen />
</Frame>

## テーマの公開

カスタムテーマを Replit コミュニティと共有するには、以下の手順に従ってください：

1. カスタムテーマのテーマエディターを開きます
2. **公開**ボタンを選択します
3. タイトルと説明フィールドに入力します
4. テーマを送信します

公開後、テーマはテーマ探索ページに表示され、他のユーザーがプレビューしてインストールできるようになります。

## 関連リソース

* [プロジェクトエディター機能](/references/workspace-tools/console) - Console、Shell、Multiplayer などの他のプロジェクトエディター機能を探索します
* [User Settings](/ja/references/editor/user-settings) - プロジェクトエディターの設定を構成します
* [キーボードショートカット](/ja/references/editor/keyboard-shortcuts) - キーボードショートカットでワークフローを効率化します
* [チームメンバーを招待](/ja/build/invite-teammates) - チームメンバーとリアルタイムで共同作業します