AWS Cloud9 Integrated Development Environment (IDE) でテーマを操作する - AWS Cloud9

AWS Cloud9 Integrated Development Environment (IDE) でテーマを操作する

テーマは、IDE 全体の色を定義します。これは、IAM ユーザーに関連付けられたすべての AWS Cloud9 開発環境 をまたいで適用されます。テーマを変更すると、AWS Cloud9 は、これらの変更をクラウドにプッシュし、IAM ユーザーに関連付けます。また、AWS Cloud9 は IAM ユーザーに関連付けられたテーマの変更をクラウドで継続的にスキャンし、これらの変更を現行の 環境 に適用します。

定義したカスタムテーマの上書きを他のユーザーと共有できます。

テーマの表示または変更

  1. メニューバーで、[AWS Cloud9]、[Preferences (設定)] の順に選択します。

  2. すべての関連付けられている 環境 にまたがってテーマを表示するには、[Preferences (設定)] タブのサイドナビゲーションペインで、[Themes (テーマ)] を選択します。

  3. すべての関連付けられている 環境 にまたがってテーマを変更するには、[Themes (テーマ)] ペインで目的の設定を変更します。コードを使用してテーマの一部を変更するには、[your stylesheet (スタイルシート)] リンクを選択します。

  4. いずれかの関連付けられている 環境 に変更を適用するには、その 環境 を開くだけです。その 環境 が既に開いている場合は、その 環境 のウェブブラウザタブを最新の情報に更新します。

変更可能なテーマの全体的な設定

[Preferences (設定)] タブの [Themes (テーマ)] ペインで、以下の種類の全体的なテーマ設定を変更できます。

Flat Theme (フラットテーマ)

AWS Cloud9 IDE に組み込みのフラットテーマを適用します。

Classic Theme (クラシックテーマ)

AWS Cloud9 IDE に選択した組み込みのクラシックテーマを適用します。

Syntax Theme (構文テーマ)

選択したテーマを AWS Cloud9 IDE のコードファイルに適用します。

コードで定義できるテーマの上書き

AWS Cloud9 IDE でテーマ全体の一部を上書きすることができます。これらのオーバーライドは、AWS Cloud9 IDE で全体のテーマ自体を変更しても変わりません。

たとえば、AWS Cloud9 IDE に現在適用されている現在の全体テーマの関連設定に関係なく、開いているタブのタイトルの背景色を黄色に変更したいとします。

まず、ウェブブラウザの開発者ツールを使用して、変更したいテーマの部分の CSS クラスを決定します。たとえば、Google Chrome の場合は次のように入力します。

  1. [Google Chrome の設定]、[その他のツール]、[デベロッパーツール] の順に選択します。

  2. [デベロッパーツール] ペインで、[Select an element in the page to inspect it] を選択します。

  3. 変更する IDE の部分にマウスを置きます。この例では、開いているタブのタイトルの上にマウスを置きます。

  4. CSS クラス名を記録します。この例では、開いているタブのタイトル CSS のクラス名は sessiontab_title です。

次に、対応する CSS クラスセレクタを styles.css ファイルに追加します。

  1. メニューバーで、[AWS Cloud9]、[Preferences (設定)] の順に選択します。サイドナビゲーションペインで、[Themes (テーマ)] を選択します。次に、[your stylesheet (スタイルシート)] リンクを選択します。

  2. styles.css ファイルに、以下の CSS クラスセレクタを追加します。この例では、.sessiontab_title セレクタを使用して background-coloryellow に設定します。

    .sessiontab_title { background-color: yellow; }

最後に、styles.css ファイルを保存し、テーマに変更を書き留めます。この例では、開いているタブのタイトルの背景色が黄色に変わります。AWS Cloud9 IDE の全体的なテーマを変更しても、styles.css ファイルの CSS の上書きは保持されます。

注記

このテーマの上書きを元に戻すには、styles.css ファイルから以前のコードを削除して、ファイルを再度保存します。

テーマの上書きを他のユーザーと共有する

  1. ソースとターゲットの両方の 環境 で、AWS Cloud9 IDE のメニューバーの [AWS Cloud9]、[Open Your Stylesheet (スタイルシートを開く)] の順に選択します。

  2. ソース 環境 で、表示される [styles.css] タブの内容をコピーします。

  3. ターゲット 環境 で、[styles.css] タブの内容を、ソース 環境 からコピーした内容で上書きします。

  4. ターゲット 環境 で、[styles.css] タブを保存します。