Help us understand the problem. What is going on with this article?

【Python】自分の好きなデスクトップ画像を元に、自動で良い感じに合うターミナル/Vim/VSCodeのテーマを1コマンドで作ろう

例えばこんな感じ

91911058-435f2500-eceb-11ea-98c3-45ee1aab066a-min.png

92177661-e34bb880-ee7b-11ea-83bc-63149f6051bb-min.png

ss2.gif

好きなデスクトップ画像さえあれば、1コマンドですぐに反映できます。

これらは実際に私のデスクトップ画像を元に、自動であうテーマを1コマンドで生成/反映したテーマです。

(私の他のテーマはこちらに10種類ほど置いています。  https://github.com/ryuta69/dotfiles )

やり方

1: Python3をインストール

Macであれば標準でPythonがインストールされていますが、そうでない場合はこちらからPython3をインストールしてください。
https://www.python.org/downloads/

2: imagemagickをインストール

## MacOS
brew install imagemagick
## Windows
https://imagemagick.org/script/download.php#windows からダウンロード
## Linux系
https://imagemagick.org/script/download.php#unix からダウンロード

3: Pywalをインストール

git clone https://github.com/dylanaraps/pywal
cd pywal
pip3 install .

4: Pywalを実行してみる

まず、実行したあと反映されたかどうかがわかりやすいように、ターミナルやvimを開いた状態にしておくことをオススメします。準備ができたら、下記のコマンドを実行してみてください。

wal -i xxxxx(デスクトップ画像)

実行した瞬間、 下のgifのように、ターミナルもvimもテーマが反映されましたでしょうか?

ss2.gif

5: Pywalは既存設定を上書きしないようにできてるので(安心)、ターミナル起動時に常時読み込むようにする

Pywalは既存のiTermの設定やvimのテーマが上書きしているわけではなく、~/.cache/wal配下にキャッシュが保存されてここからカラーセットを読み込むようになっています(だから安全)。

なので、反映させたあとにiTermを終了して再起動すると、もともとのテーマに戻っていることがわかります。

この状態からもう一度pywalで生成したテーマを読み込むには下記のコマンドを実行します。

wal -R

このコマンドを、.bashrcや.zshrcに追記しておくとターミナルが起動するたびに自動でテーマを読み込んでくれます。

VimやVSCodeにも、Pywalで作成したテーマを自動で反映させる

Vimはwal.vimをインストールする

下記の文を、.vimrcに追記してください

.vimrc
"" vim-plugを使っている場合
Plug 'dylanaraps/wal.vim'
"" deinを使っている場合
call dein#add('dylanaraps/wal.vim')
"" neobundleを使っている場合
NeoBundle 'dylanaraps/wal.vim'

set notermguicolors
colorscheme wal

これ以外に設定はいりません。これだけで自動反映されます。

VSCodeはWal Themeをインストールする

こちらからインストールしてください。これだけで自動反映されます。
https://marketplace.visualstudio.com/items?itemName=dlasagno.wal-theme

発展1:fzfを介して、いつでも1コマンドでテーマを切り替える

fzfについてはこちらの記事が詳しいです。
おい、peco もいいけど fzf 使えよ

# ~/.theme配下に、自作のテーマフォルダが何個もある想定
# 例:https://github.com/ryuta69/dotfiles/tree/master/dotfiles/.themes
alias swtm='wal -i `ls -d ~/.theme/* | fzf`'

swtmと打てば、テーマ一覧を選択する状態となり、選択すればそのテーマに即時変更してくれます。(previewにranger入れるのもアリ。imgcatは動かない。)

発展2:themerを介して、SlackやChromeやFirefox用テーマを作る

themerについてはこちらの記事が詳しいです。
VSCode、Vim、iTerm、Slackなどのカラーテーマが簡単に作れるWebサイト 「themer.dev」

themerはそのままの状態では対応色が少ない為(Accent9がcursorとtextで被っちゃうなど)、vimやvscodeなどはpywalの方がオススメです。しかし、対応アプリの幅が非常に広いため「pywalで色生成→themerで魔合成」するコンボで様々なアプリにカラーセットを反映できます。

その方法ですが、~/.cache/wal/colorsからカラーセット16色を確認して、https://themer.dev/ にアクセスして、ポチポチ色を入れていく・・・ といった手段が必要になりこれは非常に面倒です。ということで簡素なpywal→themerの変換PRを作成しました。

まだマージされてませんが、このブランチのpywalを用いればcolors-themer.jsというCUI版themer用設定ファイルが生成されます。これを用いて

npm install -g themer @themer/slack @themer/chrome @themer/firefox-addon @themer/vim @themer/vscode

themer -c colors-themer.js \
    -t @themer/slack \
    -t @themer/chrome \
    -t @themer/firefox-addon \
    -t @themer/vim -t @themer/vscode

とすれば各テーマファイルが生成されます。

まとめ(一番書きたかったこと)

余談ですが、こういった「活かした開発環境の見た目を作る」カテゴリを海外では「UnixPorn / VimPorn」と呼んでいます。

ちょっとだけこちらの、色々な人が自分のUnixPornを投稿してる、Redditのサイトを見てみてください。
https://www.reddit.com/r/unixporn/

ss.png

・・・・・最高じゃないですか!?いやもう本当大好きすぎて(ry

あとこのPinterestも見てみてください。
https://www.pinterest.jp/pin/333196072430758602/

ss 1.png

いや本っっっっ当最高じゃないですか!!??
・・・・って感じで自分は完全にハマってしまいまして、「自分も作りたいなぁ」と今年は色々自作テーマを試行錯誤して作ってました。でもやはりデザインセンスがなくってどれも全然ハマらなかったんですね・・・そんなときにこのpywalに出会いました。pywalのおかげでベースとなる配色をすぐに作ることができて、発見がたくさんあったりデザインの参考を作ることができました。

そしてついに、
冒頭にあげた画像の1枚目は憧れだったUnixPornのHot1位を
https://www.reddit.com/r/unixporn/comments/irl7i5/rectangle_ubersicht_orange_sunset_theme/

冒頭にあげた画像の2枚目はVimPornのHot1位を獲得することができました。
https://www.reddit.com/r/vimporn/comments/imlyg6/cowboy_bebop_brown_original_theme/

日本でもUnixPorn流行れ!お願いします!めっちゃ他の人のも見たい!めっちゃ開発環境いい感じにしたい!」という、強い強い思いを込めて記事を締めたいと思います。

(なにか質問あればコメントにてお願いします。Requirementsはこちらの公式ドキュメントを参照してください。)

ryuta69
ᓚᘏᗢ zzz...。oO
https://github.com/ryuta69
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした