{"id":2519,"date":"2019-08-05T12:53:00","date_gmt":"2019-08-05T19:53:00","guid":{"rendered":"https:\/\/www.stevenbrown.ca\/blog\/?p=2519"},"modified":"2019-08-05T13:33:16","modified_gmt":"2019-08-05T20:33:16","slug":"refactoring-an-emacs-theme","status":"publish","type":"post","link":"https:\/\/www.stevenbrown.ca\/blog\/archives\/2519","title":{"rendered":"Refactoring an Emacs theme"},"content":{"rendered":"

I’m gradually working on a custom theme for emacs, and I wanted to make it easier to update and read. (It’s not quite ready to share, but I look forward to doing just that when it is.) Surprising no-one, the theme format on emacs is not incredibly … “clean.” It’s basically a command that passes in a huge list of lists (of lists… this is lisp<\/i>, after all). That command is custom-theme-set-faces<\/code>. <\/p>\n

\n
(custom-theme-set-faces\n 'my-cool-theme                         ;<\/span>theme name<\/span>\n '(\n   (FACE SPEC)\n   (FACE SPEC)\n   ))\n<\/pre>\n<\/div>\n
 FACE<\/code> is the symbol for a particular element, for example default<\/code> for default text or error<\/code> which is used for error messages.  Easy.  SPEC<\/code>, however is a bit more complicated.  SPEC<\/code> is a list of DISPLAY<\/code> ATTS<\/code> pairs, each list of attributes pertaining to its paired display.  If this were CSS, I think it would be similar to including the @media<\/code> selector for each rule. <\/p>\n
 (DISPLAY<\/code> can simply be default<\/code> to apply to all displays, but I haven’t seen this used much and am trying to follow suit.) <\/p>\n
 So now we have this. <\/p>\n
\n
(custom-theme-set-faces\n 'my-cool-theme                         ;<\/span>theme name<\/span>\n '(\n   (FACE ((DISPLAY ATTS) (DISPLAY ATTS)))\n   (FACE ((DISPLAY ATTS) (DISPLAY ATTS)))\n   ))\n<\/pre>\n<\/div>\n
 ATTS<\/code> is property list, where you can specify the width, height, etc. for the font face, on that display. <\/p>\n
 So plugging in some actual values, we have the following: <\/p>\n
\n
(custom-theme-set-faces\n 'my-cool-theme                         ;<\/span>theme name<\/span>\n '(\n   ;; <\/span>error face, using default DISPLAY (simpler)<\/span>\n   (error<\/span> ( (default (:foreground<\/span> \"red\"<\/span> :background<\/span> \"black\"<\/span>)) ) )\n\n   ;; <\/span>default face using DISPLAY specified by a a list of conditions (less simpler)<\/span>\n   ;; <\/span>In this case, a color terminal that supports at least 89 colors.<\/span>\n   (default ( ( ((class color) (min-colors 89)) (:foreground<\/span> \"white\"<\/span> :background<\/span> \"black\"<\/span>)) ) )\n   ))\n<\/pre>\n<\/div>\n
 I was working with a bunch of lines that basically looked like the second case.  There was some substitution, but it was still painful to see all that repetition. <\/p>\n
\n
(let<\/span>\n    ((class '((class color) (min-colors 89))))\n  ;; <\/span>...<\/span>\n  `(default ((,class (:foreground<\/span> \"white\"<\/span> :background<\/span> \"black\"<\/span>))))\n  ;; <\/span>...<\/span>\n)\n<\/pre>\n<\/div>\n
 I wanted to remove the DISPLAY<\/code> component completely and just add it later using code.  This would mean a cleaner and easier to maintain theme.  The excellent emacs-doom-themes<\/a> has a very elegant solution<\/a>, but I didn’t quite understand all the elisp and thought I could roll a simpler version myself as a good learning experience. <\/p>\n
 Lots of fumbling around elisp ensued, but I now have something I’m happy with. <\/p>\n
\n
;; <\/span>the simple-faces are bound to a list `<\/span>two-fifteen-simple-faces<\/span>'<\/span>\n(default (:background<\/span> ,bg1 :foreground<\/span> ,fg1))\n(error<\/span>   (:foreground<\/span> \"red\"<\/span> :background<\/span> \"black\"<\/span>))\n;; <\/span>...<\/span>\n\n;; <\/span>Add the display to the simple-faces<\/span>\n(while<\/span> two-fifteen-simple-faces\n  (let*<\/span>\n      ((simple-face (car two-fifteen-simple-faces))\n       (fname (car simple-face))\n       (fattrs (cadr simple-face)))\n    (setq<\/span> two-fifteen-simple-faces (cdr two-fifteen-simple-faces))\n    (setq<\/span> built-faces (append\n                       built-faces\n                       `((,fname ((,class ,fattrs))))))))\n\n;; <\/span>apply custom-theme-set-faces to built-faces<\/span>\n(apply #'custom-theme-set-faces 'two-fifteen built-faces)\n<\/pre>\n<\/div>\n
 Next up is making a palette with re-usable colours, which I’ve started w\/the bg1<\/code> and fg1<\/code>. <\/p>\n
 Here are some functions and modes I’m finding extremely helpful when working on the theme: <\/p>\n