5.21 Decrease mode line height

By default, the mode line of the Modus themes is set to 1 pixel width for its ‘:box’ attribute. In contrast, the mode line of stock Emacs is -1 pixel. This small difference is considered necessary for the purposes of accessibility as our out-of-the-box design has a prominent color around the mode line (a border) to make its boundaries clear. With a negative width the border and the text on the mode line can feel a bit more difficult to read under certain scenaria.

Furthermore, the user option modus-themes-mode-line (Option for mode line presentation) does not allow for such a negative value because there are many edge cases that simply make for a counter-intuitive set of possibilities, such as a ‘0’ value not being acceptable by the underlying face infrastructure, and negative values greater than ‘-2’ not being particularly usable.

For these reasons, users who wish to decrease the overall height of the mode line must handle things on their own by implementing the methods for face customization documented herein.

Basic face customization.

One such method is to create a function that configures the desired faces and hook it to modus-themes-after-load-theme-hook so that it persists while switching between the Modus themes with the command modus-themes-toggle.

This one simply disables the box altogether, which will reduce the height of the mode lines, but also remove their border:

(defun my-modus-themes-custom-faces ()
  (set-face-attribute 'mode-line nil :box nil)
  (set-face-attribute 'mode-line-inactive nil :box nil))

(add-hook 'modus-themes-after-load-theme-hook #'my-modus-themes-custom-faces)

The above relies on the set-face-attribute function, though users who plan to reuse colors from the theme and do so at scale are better off with the more streamlined combination of the modus-themes-with-colors macro and custom-set-faces.

Face customization at scale.

As explained before in this document, this approach has a syntax that is consistent with the source code of the themes, so it probably is easier to reuse parts of the design.

The following emulates the stock Emacs style, while still using the colors of the Modus themes (whichever attribute is not explicitly stated is inherited from the underlying theme):

(defun my-modus-themes-custom-faces ()
  (modus-themes-with-colors
    (custom-set-faces
     `(mode-line ((,class :box (:line-width -1 :style released-button))))
     `(mode-line-inactive ((,class :box (:line-width -1 :color ,bg-region)))))))

(add-hook 'modus-themes-after-load-theme-hook #'my-modus-themes-custom-faces)

And this one is like the out-of-the-box style of the Modus themes, but with the -1 height instead of 1:

(defun my-modus-themes-custom-faces ()
  (modus-themes-with-colors
    (custom-set-faces
     `(mode-line ((,class :box (:line-width -1 :color ,fg-alt))))
     `(mode-line-inactive ((,class :box (:line-width -1 :color ,bg-region)))))))

(add-hook 'modus-themes-after-load-theme-hook #'my-modus-themes-custom-faces)

Finally, to also change the background color of the active mode line, such as that it looks like the “accented” variant which is possible via the user option modus-themes-mode-line, the ‘:background’ attribute needs to be specified as well:

(defun my-modus-themes-custom-faces ()
  (modus-themes-with-colors
    (custom-set-faces
     `(mode-line ((,class :box (:line-width -1 :color ,fg-alt) :background ,bg-active-accent)))
     `(mode-line-inactive ((,class :box (:line-width -1 :color ,bg-region)))))))

(add-hook 'modus-themes-after-load-theme-hook #'my-modus-themes-custom-faces)