Doomの派生テーマを作る

Transcript

1. Doomの派生テーマを作る 2019.07.24 Emacs七夕まつり @grugrut
2. @grugrut/Masanori Mano 都内SIer勤務 昔はeclipseのプラグイン書く仕事、今はyamlを書く仕事をしてます といいつつ、パワポとExcelばっかり使ってたり。。。 org-modeでメモとったり、日曜プログラミングでは大活躍 みなさん好きなテーマはありますか？ solarized? dracula? zenburn? 私が好きなテーマは、もちろん manoj-dark です
3. manoj-dark Emacsにはじめから入っているテーマ Manoj Srivastava氏が作成。 コメントによると • ライトテーマってずっと見てると目が疲れるよね • コントラスト上げたいけどごちゃごちゃするの嫌よね • 色系列で彩度をかえずに色をかえてるから見やすいよ というのがウリ 自分はコントラスト高いのが好みなので使ってた https://pawelbx.github.io/emacs-theme-gallery/
4. doom-modeline / doom-theme モードラインのカスタマイズも沼 powerline → smart-modeline → spacelineと渡り歩き今はdoom-modeline all-the-iconsとの相性がよい。spaceline-all-the-icons結構つらかった。 同じ名前でひかれたdoom-theme visual bellをモードライン点滅にできたりして便利 ※実はdoom-themeとdoom-modelineは無関係 ただ、doom-themeのテーマにmanoj-darkっぽいのない。薄味なものが多い。 doom-one使ってたけど、もっとハイコントラストなものが欲しい
5. 作ればいいじゃん
6. 作りました
7. def-doom-themeで実装 (def-doom-theme doom-manoj-dark "A dark theme from Manoj for doom-theme" ;; name gui 256 16 ((bg '("#000000" nil nil)) (bg-alt '("#4d4d4d" nil nil)) (base0 '("#0000ff" nil nil)) (base1 '("#b4eeb4" nil nil)) (base2 '("#4d4d4d" nil nil)) (base3 '("#525252" nil nil)) (base4 '("#f5deb3" nil nil)) (base5 '("#b3b3b3" nil nil)) (base6 '("#b3b3b3" nil nil)) (base7 '("#98fb98" nil nil)) (base8 '("#ff7f24" nil nil)) (fg '("#f5f5f5" nil nil)) (fg-alt '("#cccccc" nil nil)) (red '("#ff0000" nil nil)) (grey '("#a9a9a9" nil nil)) (dark-blue '("#00008b" nil nil)) (green '("#00ff00" nil nil)) (blue '("#0000ff" nil nil)) (violet '("#ee82ee" nil nil)) (magenta '("#ff00ff" nil nil)) (yellow '("#ffff00" nil nil)) (orange '("#ff4500" nil nil)) (cyan '("#00ffff" nil nil)) (teal '("#98fb98" nil nil)) (dark-cyan '("#008b8b" nil nil)) ;; face categories (region '("#0000cd" nil nil)) (highlight '("#fdf5e6" nil nil)) (vertical-bar '("#696969" nil nil)) (error '("#ff4500" nil nil)) (warning '("#ffa500" nil nil)) (builtin '("#b0c4de" nil nil)) (comments '("#ff7f24" nil nil)) (doc-comments '("#f08080" nil nil)) (constants '("#8470ff" nil nil)) (functions '("#00fa9a" nil nil)) (keywords '("#00ffff" nil nil)) (strings '("#ffc1c1" nil nil)) (type '("#63b8ff" nil nil)) (variables '("#7fffd4" nil nil)) (operators '("#6495ed" nil nil)) (selection '("#0000ff" nil nil)) (vc-modified '("#f0e68c" nil nil)) (vc-added '("#00ff00" nil nil)) (vc-deleted '("#ff8c69" nil nil)) (methods '("#00fa9a" nil nil)) (numbers '("#ffa07a" nil nil)) ) ;; extra faces ((font-lock-constant-face :foreground constants :bold t) (cursor :background "#da70d6") (mode-line :background "#bfbfbf" :foreground blue) (doom-modeline-buffer-file :foreground "#ff0000" :weight 'bold) (doom-modeline-project-dir :foreground magenta) (doom-modeline-bar :background blue) (magit-section-heading :foreground "LightGoldenrod2" :weight 'bold) (rainbow-delimiters-depth-1-face :foreground "grey55") (rainbow-delimiters-depth-2-face :foreground "#93a8c6") (rainbow-delimiters-depth-3-face :foreground "#b0b1a3") (rainbow-delimiters-depth-4-face :foreground "#97b098") (rainbow-delimiters-depth-5-face :foreground "#aebed8") (rainbow-delimiters-depth-6-face :foreground "#b0b0b3") (rainbow-delimiters-depth-7-face :foreground "#90a890") (rainbow-delimiters-depth-7-face :foreground "#a2b6da") (rainbow-delimiters-depth-7-face :foreground "#9cb6ad") ) ;; --- extra variables -------------------- ;; () ) ↗ ↗ ↗ ↗ ※1列で書ききれないので3列に分割
8. def-doom-themeで実装 (def-doom-theme doom-manoj-dark "A dark theme from Manoj for doom-theme" ;; name gui 256 16 ((bg '("#000000" nil nil)) (bg-alt '("#4d4d4d" nil nil)) (base0 '("#0000ff" nil nil)) (base1 '("#b4eeb4" nil nil)) (base2 '("#4d4d4d" nil nil)) (base3 '("#525252" nil nil)) (base4 '("#f5deb3" nil nil)) (base5 '("#b3b3b3" nil nil)) (base6 '("#b3b3b3" nil nil)) (base7 '("#98fb98" nil nil)) (base8 '("#ff7f24" nil nil)) (fg '("#f5f5f5" nil nil)) (fg-alt '("#cccccc" nil nil)) (red '("#ff0000" nil nil)) (grey '("#a9a9a9" nil nil)) (dark-blue '("#00008b" nil nil)) (green '("#00ff00" nil nil)) (blue '("#0000ff" nil nil)) (violet '("#ee82ee" nil nil)) (magenta '("#ff00ff" nil nil)) (yellow '("#ffff00" nil nil)) (orange '("#ff4500" nil nil)) (cyan '("#00ffff" nil nil)) (teal '("#98fb98" nil nil)) (dark-cyan '("#008b8b" nil nil)) ;; face categories (region '("#0000cd" nil nil)) (highlight '("#fdf5e6" nil nil)) (vertical-bar '("#696969" nil nil)) (error '("#ff4500" nil nil)) (warning '("#ffa500" nil nil)) (builtin '("#b0c4de" nil nil)) (comments '("#ff7f24" nil nil)) (doc-comments '("#f08080" nil nil)) (constants '("#8470ff" nil nil)) (functions '("#00fa9a" nil nil)) (keywords '("#00ffff" nil nil)) (strings '("#ffc1c1" nil nil)) (type '("#63b8ff" nil nil)) (variables '("#7fffd4" nil nil)) (operators '("#6495ed" nil nil)) (selection '("#0000ff" nil nil)) (vc-modified '("#f0e68c" nil nil)) (vc-added '("#00ff00" nil nil)) (vc-deleted '("#ff8c69" nil nil)) (methods '("#00fa9a" nil nil)) (numbers '("#ffa07a" nil nil)) ) ;; extra faces ((font-lock-constant-face :foreground constants :bold t) (cursor :background "#da70d6") (mode-line :background "#bfbfbf" :foreground blue) (doom-modeline-buffer-file :foreground "#ff0000" :weight 'bold) (doom-modeline-project-dir :foreground magenta) (doom-modeline-bar :background blue) (magit-section-heading :foreground "LightGoldenrod2" :weight 'bold) (rainbow-delimiters-depth-1-face :foreground "grey55") (rainbow-delimiters-depth-2-face :foreground "#93a8c6") (rainbow-delimiters-depth-3-face :foreground "#b0b1a3") (rainbow-delimiters-depth-4-face :foreground "#97b098") (rainbow-delimiters-depth-5-face :foreground "#aebed8") (rainbow-delimiters-depth-6-face :foreground "#b0b0b3") (rainbow-delimiters-depth-7-face :foreground "#90a890") (rainbow-delimiters-depth-7-face :foreground "#a2b6da") (rainbow-delimiters-depth-7-face :foreground "#9cb6ad") ) ;; --- extra variables -------------------- ;; () ) ↗ ↗ ↗ ↗ TrueColor, 256, 16 terminalで使う色を 指定 基本となる色を定義 ソースコード用face の定義 ここまで必須項目 ※doomのウリがソースを 見やすいテーマなので 追加で指定もできる custom-theme-set-facesを呼ぶ 他の見るとほぼ使われてない custom-theme-set-variablesを呼ぶ 配布するテーマで設定するケースは あまりなさそう(フォントまで指定しちゃう？)
9. doom-themeの便利な仕様・機能
10. その1 必須項目だけ設定すれば、それなりのものができる doom-theme-base.elで、かなりのfaceが定義されている 先に説明した必須の色定義を使っているので、必須項目を設定するだけで それなりに見えるものができる Face定義の読みこみ優先順位は以下のとおり ユーザの.emacs > 個別のテーマのextra faces > doom-theme-base.el 私もとりあえず必須だけ設定、その後気になるところを上書きで進めています
11. その2 色に統一感もたせるための便利機能 (font-lock-constant-face :foreground constants :bold t) こんな感じで定義した色定義を利用できるだけでなく加工する関数もある • doom-blend (color1, color2, alpha) ◦ color1, color2をalphaの割合で混ぜる • doom-lighten(color1, alpha) ◦ color1を明るくする(alphaの割合で#FFFFFFとdoom-blend) • doom-darken(color1, alpha) ◦ color1を暗くする(alphaの割合で#000000とdoom-blend) この関数を使うためには、色を#RRGGBBで書かないといけない 例: `chocolate1’ではなく`#FF7F24’と書くのが重要
12. テーマ作りで役にたった機能 M-x describe-face カーソル位置のfaceがわかる M-x list-face-display faceの一覧がわかる rainbow-mode 色がプレビューできる もちろんcss等書くときにも使える
13. 難しかったところ • 今回は、manoj-darkを模すのが目的 ◦ ここってmanoj-darkどうだっけ。。。？ ◦ ふたつemacs起動して見比べるの面倒 ◦ 作りかたが違うものなのでごそっとコピーしてもそんなにうまくいかない • M-x describe-faceは確かに便利 ◦ 便利なんだけど、本当にどのfaceが使われてるか知りたいのってカーソルがあたらない ◦ helm-xxx-faceとか、magit-xxx-faceとか、どれ変えればいいんだ。。。！！
14. ぜひオリジナルテーマ作ってみましょう