Doomの派生テーマを作る

Transcript

1. Doomの派生テーマを作る
   2019.07.24 Emacs七夕まつり
   @grugrut
   

   View Slide

2. @grugrut/Masanori Mano
   都内SIer勤務
   昔はeclipseのプラグイン書く仕事、今はyamlを書く仕事をしてます
   といいつつ、パワポとExcelばっかり使ってたり。。。
   org-modeでメモとったり、日曜プログラミングでは大活躍
   みなさん好きなテーマはありますか？
   solarized? dracula? zenburn?
   私が好きなテーマは、もちろん
   manoj-dark
   です
   

   View Slide

3. manoj-dark
   Emacsにはじめから入っているテーマ
   Manoj Srivastava氏が作成。
   コメントによると
   ● ライトテーマってずっと見てると目が疲れるよね
   ● コントラスト上げたいけどごちゃごちゃするの嫌よね
   ● 色系列で彩度をかえずに色をかえてるから見やすいよ
   というのがウリ
   自分はコントラスト高いのが好みなので使ってた
   https://pawelbx.github.io/emacs-theme-gallery/
   

   View Slide

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使ってたけど、もっとハイコントラストなものが欲しい
   

   View Slide

5. 作ればいいじゃん
   

   View Slide

6. 作りました
   

   View Slide

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列に分割
   

   View Slide

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を呼ぶ
   配布するテーマで設定するケースは
   あまりなさそう(フォントまで指定しちゃう？)
   

   View Slide

9. doom-themeの便利な仕様・機能
   

   View Slide

10. その1 必須項目だけ設定すれば、それなりのものができる
    doom-theme-base.elで、かなりのfaceが定義されている
    先に説明した必須の色定義を使っているので、必須項目を設定するだけで
    それなりに見えるものができる
    Face定義の読みこみ優先順位は以下のとおり
    ユーザの.emacs > 個別のテーマのextra faces > doom-theme-base.el
    私もとりあえず必須だけ設定、その後気になるところを上書きで進めています
    

    View Slide

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’と書くのが重要
    

    View Slide

12. テーマ作りで役にたった機能
    M-x describe-face
    カーソル位置のfaceがわかる
    M-x list-face-display
    faceの一覧がわかる
    rainbow-mode
    色がプレビューできる
    もちろんcss等書くときにも使える
    

    View Slide

13. 難しかったところ
    ● 今回は、manoj-darkを模すのが目的
    ○ ここってmanoj-darkどうだっけ。。。？
    ○ ふたつemacs起動して見比べるの面倒
    ○ 作りかたが違うものなのでごそっとコピーしてもそんなにうまくいかない
    ● M-x describe-faceは確かに便利
    ○ 便利なんだけど、本当にどのfaceが使われてるか知りたいのってカーソルがあたらない
    ○ helm-xxx-faceとか、magit-xxx-faceとか、どれ変えればいいんだ。。。！！
    

    View Slide

14. ぜひオリジナルテーマ作ってみましょう
    

    View Slide