変更効果を確認するには、原子をリロードするだけです（CMD Alt Ctrl Lまたは「View」＆gt; "Developer"＆gt; "Reload"を使用）。 Atom Settings（CMD、）＆GT; "Theme"で、エディターの構文テーマを新しく作成したテーマに設定します。

テーマを青に設定します

colors.lessファイルを開きます（styles＆gt; colors.less）。 @very-dark-grayの値を持つ#1d1f21という名前の変數(shù)を見ることができます。ダークブルーに変更します#1d1f33。リロード原子（CMD Alt Ctrl Lまたは「View」＆gt; "Developer"＆gt; "reload"）。テキスト領域の背景色が変更されている必要があります。

詳細なコードの説明

index.lessImportbase.less。 base.less CSSと同様に、変數(shù)が少ない（@シンボルから始まる）が使用されます。

編集者の背景色は次のコードで定義されています。

@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}

の定義@syntax-background-color：syntax-variables.less

@import "colors";

// ...

@syntax-background-color: @very-dark-gray;

は@very-dark-grayで定義されているため、colors.lessの値を変更して、エディターの背景色を変更します。 colors.less @very-dark-gray

スタイルシート変數(shù)がどのように編成されるかは、個人的な好みに依存します。 Atomの自動生成テンプレートは、同じ色のアイテムのグループ化を推奨して、

の各変數(shù)に値を割り當てます。ただし、色はbase.lessで直接定義することもできます。 syntax-variables.less base.less

変數(shù)とインポートに加えて、他のいくつかの機能がいくつかあります。

ネストされたスタイル

＆operator
ネストされたスタイル

ネストされたスタイルをサポートしません。たとえば、

これは次のとおりです

.container {
  .red-block {
    a {
      color: red;
    }
  }
}

＆operator

a.container .red-block {
  color: red;
}

＆オペレーターは、親セレクターを簡素化します。

すべての変數(shù)名をダークブルーに設定し、ホバリング時にアンダースコアを追加します： Atomは、コードエディター內(nèi)のすべての変數(shù)に

クラスのスタイルを変更する必要があります。

.variable現(xiàn)在の行番號.variable

.variable {
  color: #336699;
  &:hover {
    text-decoration: underline;
  }
  // ...
}

in

：

colors.less@deep-sky-blue: #009ACD;概要base.less

.gutter {
  // ...

  .line-number {
    &.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: lighten(@deep-sky-blue, 10%);
    }

    &.cursor-line-no-selection {
      color: @deep-sky-blue;
    }
  }
}

リソース

1. より少ない
での色操作関數(shù)
2. アトムテーマを公開
3. ATOMユーザーマニュアル

faq

（元のテキストのFAQセクションは、これらの質(zhì)問がトピックの擬似オリジナルの目標と一致せず、より長いため、ここでは省略されています。）