LoginSignup
1
5

More than 5 years have passed since last update.

@Lay_code

【Atom】Atomエディターの色の変更方法【自分用】

Last updated at Posted at 2019-01-22

Atomエディターの色を自分好みの明るいテーマに変更したいと思い、今回はライトテーマを制作しました。

完成した見た目

n123_125331_proc.jpg
javascript の function が 好きな紫色になるようにまず決めました。
そこから決めていき、次に if をピンク色にしました。
紫、ピンク、と決めて次に好きな青を目立つものに当てていきます。
文字色はクッキリとした色にしました。
コメントも読みやすさを意識して濃い目にしました。

事前準備

n122_162135_proc.jpg

  1. パッケージの pigments をインストールします。上画像のように色が見やすくなりますので必須ですね。
    n122_161452_proc.jpg

  2. 「ファイル > 環境設定」を開き、「テーマ > シンタックステーマ」 で基本となるテーマを選択します。

  3. 「ファイル > スタイルシート」を開きます。このファイルに記述します。

  4. シンタックスを設定したい見本となる javascript、html、css などのファイルを開きます。

個人的な好みのエディタの設定

フォント：Source Han Code JP Medium
フォントサイズ：13
行の高さ：2.3

color 色

まずは基本カラーを好きなだけ設定します。
今回は虹色になるようにいくつか決めました。
Atomエディターは LESS で色を設定されていますので、次のような感じにしました。
今回は基本の色を決め、それに対して(統一感を出すために)色合いとトーンで調節をし、使用カラーを制作します。

/* color 基本となる色 */
@cyan-origin:     #00ffac;
@blue-origin:     #0080ff;
@purple-origin:   #8000ff;
@orange-origin:   #ff8000;
@yellow-origin:   #fbfc00;
@green-origin:    #80ff00;
@red-origin:      #ff0000;
@pink-origin:     #ff0080;

/* hue 色合い (数値は好みで調節) */
@hue:             #fff;
@cyan-hue:        mix( @cyan-origin, @hue, 30%);
@blue-hue:        mix( @blue-origin, @hue, 30%);
@purple-hue:      mix( @purple-origin, @hue, 30%);
@orange-hue:      mix( @orange-origin, @hue, 30%);
@yellow-hue:      mix( @yellow-origin, @hue, 30%);
@green-hue:       mix( @green-origin, @hue, 30%);
@red-hue:         mix( @red-origin, @hue, 30%);
@pink-hue:        mix( @pink-origin, @hue, 30%);

/* tone トーン(色深度) (数値は好みで調節) */
@tone:            black;
@light-tone:      @hue;
@white:           lighten(@tone, 80%);
@very-light-gray: lighten(@tone, 60%);
@light-gray:      lighten(@tone, 40%);
@gray:            lighten(@tone, 20%);
@dark-gray:       lighten(@tone, 10%);
@very-dark-gray:  lighten(@tone,  1%);

@cyan-tone:       saturate(mix( @cyan-hue, @tone, 44%), 99%);
@blue-tone:       saturate(mix( @blue-hue, @tone, 44%), 99%);
@purple-tone:     saturate(mix( @purple-hue, @tone, 44%), 99%);
@orange-tone:     saturate(mix( @orange-hue, @tone, 44%), 99%);
@yellow-tone:     saturate(mix( @yellow-hue, @tone, 44%), 99%);
@green-tone:      saturate(mix( @green-hue, @tone, 44%), 99%);
@red-tone:        saturate(mix( @red-hue, @tone, 44%), 99%);
@pink-tone:       saturate(mix( @pink-hue, @tone, 44%), 99%);

/* 使用カラー */
@light-cyan:      saturate(mix( @cyan-hue, @tone, 55%), 99%);
@cyan:            @cyan-tone;
@light-blue:      saturate(mix( @blue-hue, @tone, 55%), 99%);
@blue:            @blue-tone;
@dark-blue:       saturate(mix( @blue-hue, @tone, 22%), 99%);
@light-purple:    saturate(mix( @purple-hue, @tone, 55%), 99%);
@purple:          @purple-tone;
@light-orange:    saturate(mix( @orange-hue, @tone, 55%), 99%);
@orange:          @orange-tone;
@yellow:          @yellow-tone;
@light-green:     saturate(mix( @green-hue, @tone, 50%), 99%);
@green:           @green-tone;
@light-red:       saturate(mix( @red-hue, @tone, 55%), 99%);
@red:             @red-tone;
@light-pink:      saturate(mix( @pink-hue, @tone, 55%), 99%);
@pink:            @pink-tone;

@EditorText:            rgb(7, 1, 23);
@Editorcoment:    rgba(7, 1, 23, 0.7);
@EditorBackground:            #fbfbfc;

色合いやトーンは基本的に同じに揃えますと簡単です。
最後に使用カラーの項目で微調整し、その色を使用します。
（使いまわしているコードなので、今回使用していない色なども含んでいます。）

色の適用箇所

Atomの「表示 > 開発 > デベロッパーツール」でデベロッパーモードにし、エディター内の色を変更したい文字をセレクタ―でセレクトし、デベロッパーツール上のstyle項目に出てきたcssを編集し、確認します。

n122_160947_proc.jpg
n122_160956_proc.jpg
クラスがたくさんついているものは、上画像のように、今選択している要素にかかっているクラスが、他のクラス名よりも濃くなっていますので、その部分だけをコピーして使用します。

以下はだいたい網羅していると思われるシンタックスの適用箇所になります。

・背景の色
・選択範囲の背景の色
・選択行の背景の色
・シンタックスハイライト
　・テキストの色
　・コメントの色
　・javascript
　・hthml
　・css

(追加)
(クッキリさを出すためにテキストシャドウを追加しました。)

/* 全てにクッキリ感を追加 */
*{text-shadow: 1px 1px 1px rgba(1,1,1,.1);}

/* テキストと背景色 */
atom-text-editor {
  color: @EditorText;
  background-color: @EditorBackground;
}

/* 1.コメントの色 と
   2.ダブルスラッシュの色
    http://tech-tokyobay.manju.tokyo/archives/905 */
atom-text-editor .syntax--comment {
    color: @Editorcoment;
    font-style: normal;
}

/*  1.選択範囲の背景色
    2.検索にヒットした単語のボーダー
    http://blog.nocorica.jp/2015/06/atom-selection-color */
atom-text-editor::shadow {
  .highlights {
    .selection .region {
      background: fade(pink, 30%);
    }
    .find-result .region {
      border: 1px solid fade(pink, 100%);
    }
  }
}

/* 選択行の背景色 */
atom-text-editor::shadow {
  // The cursor line important to use rgba for opacity, also requires !important
  // to override any theme.
  .line.highlight-line {
    background: rgba(170, 90, 255, 0.055) !important;
      background: #faf6fe !important;
  }
}

/* Atom でインデントをわかりやすく表示するパッケージ
   indent-guide-improved
   https://loumo.jp/wp/archive/20161206120012/ */
.indent-guide-improved {
  background-color: hsl(0, 0%, 98%);
  &.indent-guide-stack {
    background-color: hsl(0, 0%, 98%);
    &.indent-guide-active {
      background-color: hsl(0, 0%, 94%);
    }
  }
}

/* 好みのシンタックスハイライト */

/* javascript */
.syntax--storage.syntax--type { color:@light-purple; font-style: normal;}
.syntax--keyword { color:@light-pink; font-style: normal;}
.syntax--variable { color:@cyan; }
.syntax--entity.syntax--name.syntax--function { color:@light-blue; }
.syntax--string { color:@green; }
.syntax--string { color:@green; }
.syntax--punctuation { color:@dark-blue; }
.syntax--keyword.syntax--operator { color:@light-blue; }
.syntax--string.syntax--regexp { color:@cyan; }
.syntax--keyword.syntax--control { font-style: normal; }

/* html */
.syntax--entity.syntax--name.syntax--tag {color:@light-purple;}
.syntax--entity.syntax--other.syntax--attribute-name {color:@pink;}
.syntax--constant.syntax--character {color:@light-red;}
.syntax--constant.syntax--numeric {color:@light-orange;}

/* css */
.syntax--markup.syntax--underline {color:@orange;}
.syntax--keyword.syntax--other.syntax--unit {color:@orange;text-decoration: none;}
.syntax--variable.syntax--parameter {color:@cyan;}
.syntax--support.syntax--constant {color:@green;}
.syntax--source.syntax--css .syntax--support.syntax--type {color:@light-blue;}
.syntax--entity.syntax--other.syntax--attribute-name.syntax--class {color:@dark-blue;}
.syntax--meta .syntax--string.syntax--quoted{color:@purple;}
.syntax--keyword.syntax--operator.syntax--logical{color:@cyan;}

/* ハイライト [追加:その他の自分用の項目] */
atom-text-editor .highlights {
  .highlight-selected .region {
    border-color: #ddd;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
  }
  .highlight-selected.background .region {
    background-color: rgba(155, 149, 0, 0.6);
  }
  .highlight-selected.light-theme .region {
    border-color: rgba(255, 128, 64, 0.4);
  }
  .highlight-selected.light-theme.background .region {
    background-color: rgba(255, 128, 64, 0.2);
  }
  }
.highlight-selected-marker-layer.scroll-marker-layer {
  .scroll-marker {
    background-color: #ffff00
  }
}
.highlight-selected-selected-marker-layer.scroll-marker-layer {
  .scroll-marker {
    background-color: #f71010
  }
}

コピペ用の全部

時間がありませんでしたのでちゃんと確認していませんが、コピペ用のものを載せました。上記と(だいたい)同じです。
普通に使用できているので今はよしとしておきます。
（余力があるときに確認）

/*///////////////////////////////////////////////////
//  使いまわす色の定義
///////////////////////////////////////////////////*/


/* color 基本となる色 */
@cyan-origin:     #00ffac;
@blue-origin:     #0080ff;
@purple-origin:   #8000ff;
@orange-origin:   #ff8000;
@yellow-origin:   #fbfc00;
@green-origin:    #80ff00;
@red-origin:      #ff0000;
@pink-origin:     #ff0080;

/* hue 色合い (数値は好みで調節) */
@hue:             #fff;
@cyan-hue:        mix( @cyan-origin, @hue, 30%);
@blue-hue:        mix( @blue-origin, @hue, 30%);
@purple-hue:      mix( @purple-origin, @hue, 30%);
@orange-hue:      mix( @orange-origin, @hue, 30%);
@yellow-hue:      mix( @yellow-origin, @hue, 30%);
@green-hue:       mix( @green-origin, @hue, 30%);
@red-hue:         mix( @red-origin, @hue, 30%);
@pink-hue:        mix( @pink-origin, @hue, 30%);

/* tone トーン(色深度) (数値は好みで調節) */
@tone:            black;
@light-tone:      @hue;
@white:           lighten(@tone, 80%);
@very-light-gray: lighten(@tone, 60%);
@light-gray:      lighten(@tone, 40%);
@gray:            lighten(@tone, 20%);
@dark-gray:       lighten(@tone, 10%);
@very-dark-gray:  lighten(@tone,  1%);

@cyan-tone:       saturate(mix( @cyan-hue, @tone, 44%), 99%);
@blue-tone:       saturate(mix( @blue-hue, @tone, 44%), 99%);
@purple-tone:     saturate(mix( @purple-hue, @tone, 44%), 99%);
@orange-tone:     saturate(mix( @orange-hue, @tone, 44%), 99%);
@yellow-tone:     saturate(mix( @yellow-hue, @tone, 44%), 99%);
@green-tone:      saturate(mix( @green-hue, @tone, 44%), 99%);
@red-tone:        saturate(mix( @red-hue, @tone, 44%), 99%);
@pink-tone:       saturate(mix( @pink-hue, @tone, 44%), 99%);

/* 使用カラー */
@light-cyan:      saturate(mix( @cyan-hue, @tone, 55%), 99%);
@cyan:            @cyan-tone;
@light-blue:      saturate(mix( @blue-hue, @tone, 55%), 99%);
@blue:            @blue-tone;
@dark-blue:       saturate(mix( @blue-hue, @tone, 22%), 99%);
@light-purple:    saturate(mix( @purple-hue, @tone, 55%), 99%);
@purple:          @purple-tone;
@light-orange:    saturate(mix( @orange-hue, @tone, 55%), 99%);
@orange:          @orange-tone;
@yellow:          @yellow-tone;
@light-green:     saturate(mix( @green-hue, @tone, 50%), 99%);
@green:           @green-tone;
@light-red:       saturate(mix( @red-hue, @tone, 55%), 99%);
@red:             @red-tone;
@light-pink:      saturate(mix( @pink-hue, @tone, 55%), 99%);
@pink:            @pink-tone;

@EditorText:            rgb(7, 1, 23);
@Editorcoment:    rgba(7, 1, 23, 0.7);
@EditorBackground:            #fbfbfc;

/* 全てにクッキリ感を追加 */
*{text-shadow: 1px 1px 1px rgba(1,1,1,.1);}

/* テキストと背景色 */
atom-text-editor {
  color: @EditorText;
  background-color: @EditorBackground;
}

/* 1.コメントの色 と
   2.ダブルスラッシュの色
    http://tech-tokyobay.manju.tokyo/archives/905 */
atom-text-editor .syntax--comment {
    color: @Editorcoment;
    font-style: normal;
}

/*  1.選択範囲の背景色
    2.検索にヒットした単語のボーダー
    http://blog.nocorica.jp/2015/06/atom-selection-color */
atom-text-editor::shadow {
  .highlights {
    .selection .region {
      background: fade(pink, 30%);
    }
    .find-result .region {
      border: 1px solid fade(pink, 100%);
    }
  }
}

/* 選択行の背景色 */
atom-text-editor::shadow {
  // The cursor line important to use rgba for opacity, also requires !important
  // to override any theme.
  .line.highlight-line {
    background: rgba(170, 90, 255, 0.055) !important;
      background: #faf6fe !important;
  }
}

/* Atom でインデントをわかりやすく表示するパッケージ
   indent-guide-improved
   https://loumo.jp/wp/archive/20161206120012/ */
.indent-guide-improved {
  background-color: hsl(0, 0%, 98%);
  &.indent-guide-stack {
    background-color: hsl(0, 0%, 98%);
    &.indent-guide-active {
      background-color: hsl(0, 0%, 94%);
    }
  }
}

/* 好みのシンタックスハイライト */

/* javascript */
.syntax--storage.syntax--type { color:@light-purple; font-style: normal;}
.syntax--keyword { color:@light-pink; font-style: normal;}
.syntax--variable { color:@cyan; }
.syntax--entity.syntax--name.syntax--function { color:@light-blue; }
.syntax--string { color:@green; }
.syntax--string { color:@green; }
.syntax--punctuation { color:@dark-blue; }
.syntax--keyword.syntax--operator { color:@light-blue; }
.syntax--string.syntax--regexp { color:@cyan; }
.syntax--keyword.syntax--control { font-style: normal; }

/* html */
.syntax--entity.syntax--name.syntax--tag {color:@light-purple;}
.syntax--entity.syntax--other.syntax--attribute-name {color:@pink;}
.syntax--constant.syntax--character {color:@light-red;}
.syntax--constant.syntax--numeric {color:@light-orange;}

/* css */
.syntax--markup.syntax--underline {color:@orange;}
.syntax--keyword.syntax--other.syntax--unit {color:@orange;text-decoration: none;}
.syntax--variable.syntax--parameter {color:@cyan;}
.syntax--support.syntax--constant {color:@green;}
.syntax--source.syntax--css .syntax--support.syntax--type {color:@light-blue;}
.syntax--entity.syntax--other.syntax--attribute-name.syntax--class {color:@dark-blue;}
.syntax--meta .syntax--string.syntax--quoted{color:@purple;}
.syntax--keyword.syntax--operator.syntax--logical{color:@cyan;}

/* ハイライト [追加:その他の自分用の項目] */
atom-text-editor .highlights {
  .highlight-selected .region {
    border-color: #ddd;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
  }
  .highlight-selected.background .region {
    background-color: rgba(155, 149, 0, 0.6);
  }
  .highlight-selected.light-theme .region {
    border-color: rgba(255, 128, 64, 0.4);
  }
  .highlight-selected.light-theme.background .region {
    background-color: rgba(255, 128, 64, 0.2);
  }
  }
.highlight-selected-marker-layer.scroll-marker-layer {
  .scroll-marker {
    background-color: #ffff00
  }
}
.highlight-selected-selected-marker-layer.scroll-marker-layer {
  .scroll-marker {
    background-color: #f71010
  }
}
1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
5