このサイトはMacを使って processing の動作や活用法を学びます。

3 Mac Processing IDE ダークテーマに変更

日頃の文章やプログラム作成は、背景色が黒いダークテーマを使用しています。このため、Processing IDE だけが白く目立ち違和感がありました。そこで Processing IDE の背景も下のように黒に変更します。

 

 

ダークテーマのインストール

Macnの場合、/Applications/Processing.app/Contents/Java/lib/ にある

を変更すれば実現できるようです。残念ながらGUIで色見本を見ながら変更する色を選べる環境ではありません。そこで、先人の方々が苦労して設定した成果を利用させていただくことにしました。

適切に変更されたファイルが、 github に掲載されているのでそのファイルを使います。変更手順は以下の通り

  1. github から、ファイルをダウンロード
  2. 現行の libフォルダーの該当フォルダとファイルをバックアップ
  3. ダウンロードした 該当フォルダとファイルに置き換える

 

githubから、ファイルをダウンロード

github DarkProcessingTheme_3.0 を開き、[Code] ボタンをクリックします。

ポップアップウインドウが開くので [Download Zip] をクリックし、ZipファイルをPCにダウンロードします。Zipファイルを解凍して footer、status、toolbar フォルダ と theme.txt を取り出します。

 

 

 

 

 

libフォルダ内の該当ファイルの置き換え

Mac では、関連ファイルは、Processing.app の中に保存されています。Processing.app をMacのアプリケーションに 置いている場合、Processing.app を右クリックし「パッケージの内容を表示」を選びます。

  /Applications/Processing.app/Contents/Java/lib/ 

と開けば フォルダ・ファイルが見つかるのでバックアップします。

 

その後、ダウンロードした  footer、status、toolbar フォルダ と theme.txt を上書きします。

 

ダークテーマの確認

Processing.app を起動します。下のように背景が黒になりダークテーマが確認できます。

しかし、残念ながら私には、コメントの明るさや、各キーワードの色合いがあまり好みではありませんでした。

 

 

エディタで表示される文字色を変更

デフォルトの設定では、コメント文字の明るさや、各キーワードの色合いが薄く読み取りづらいので変更します。これらの色を指定しているのは、preferences.txt ファイルです。以下の手順でファイルを変更します。

  1. Processing.appを閉じる
  2. preferences.txtをバックアップする
  3. preferences.txt 内容のeditor.token に関わる色コードを変更する
  4. Processing.appを再起動させ変化を確認する

Processing.appを閉じる

Processing.appは実行終了したときにapp内で使用していたデータをpreferences.txt に上書きします。preferences.txt の変更は、Processing.appを閉じた後に実施します。

preferences.txtをバックアップする

変更した内容をいつでも元に戻せるようバクアップは必ず行いましょう。

Macでは、

  /Users/xxx/Library/Processing/preferences.txt

に保存されています。(xxx はユーザー名)

この /Library/ は隠しフォルダーなので、⇧  ⌘ + . [ドット] の3キーを同時に押し隠しフォルダーを表示させてからFinderで選択します。

editor.token に関わる色コードを変更する

テキストエディットなどで、preferences.txt を開き 23行目からの色コードを変更してください。色コードは、RBG順の8bit x 3を 16進で表したものです。ご自身の好みの色コードに変更してください。


変更前

				editor.token.comment1.style=#666666,plain
				editor.token.comment2.style=#666666,plain
				editor.token.function1.style=#006699,plain
				editor.token.function2.style=#006699,plain
				editor.token.function3.style=#669900,plain
				editor.token.function4.style=#006699,bold
				editor.token.invalid.style=#666666,bold
				editor.token.keyword1.style=#33997e,plain
				editor.token.keyword2.style=#33997e,plain
				editor.token.keyword3.style=#669900,plain
				editor.token.keyword4.style=#d94a7a,plain
				editor.token.keyword5.style=#e2661a,plain
				editor.token.keyword6.style=#33997e,plain
				editor.token.label.style=#666666,bold
				editor.token.literal1.style=#7D4793,plain
				editor.token.literal2.style=#718a62,plain
				editor.token.operator.style=#006699,plain
				

変更後

				editor.token.comment1.style=#aaaaaa,plain
				editor.token.comment2.style=#aaaaaa,plain
				editor.token.function1.style=#ff8800,plain
				editor.token.function2.style=#88ff00,plain
				editor.token.function3.style=#88ff00,plain
				editor.token.function4.style=#88ff00,bold
				editor.token.invalid.style=#aaaaaa,bold
				editor.token.keyword1.style=#00caca,plain
				editor.token.keyword2.style=#00caca,plain
				editor.token.keyword3.style=#00caca,plain
				editor.token.keyword4.style=#00caca,plain
				editor.token.keyword5.style=#00caca,plain
				editor.token.keyword6.style=#00caca,plain
				editor.token.label.style=#aaaaaa,bold
				editor.token.literal1.style=#009999,plain
				editor.token.literal2.style=#009999,plain
				editor.token.operator.style=#006699,plain

				

Processing.appを再起動させ変化を確認する

OSの重要ファイルを間違えて変更しないように、⇧  ⌘ + . [ドット] の3キーを同時に押し再び隠しフォルダーを非表示にします。

Processing.appを再起動さます。

見やすくなりました。

 


 

以上で、 Processing IDE のダークテーマへの変更が完了しました。

次回は、日本語表示のためのフォント設定をします。