ef-themes: colorful and legible themes

This manual, written by Protesilaos Stavrou, describes the Emacs package called ef-themes, and provides every other piece of information pertinent to it.

The documentation furnished herein corresponds to stable version {{{stable-version}}}, released on {{{release-date}}}. Any reference to a newer feature which does not yet form part of the latest tagged commit, is explicitly marked as such.

Current development target is {{{development-version}}}.

Package name (GNU ELPA): ef-themes
Official manual: https://protesilaos.com/emacs/ef-themes
Change log: https://protesilaos.com/emacs/ef-themes-changelog
Sample pictures: https://protesilaos.com/emacs/ef-themes-pictures
Git repositories:
- GitHub: https://github.com/protesilaos/ef-themes
- GitLab: https://gitlab.com/protesilaos/ef-themes
Backronym: Eclectic Fashion in Themes Hides Exaggerated Markings, Embellishments, and Sparkles.

If you are viewing the README.org version of this file, please note that the GNU ELPA machinery automatically generates an Info manual out of it.

1 COPYING

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, with the Front-Cover Texts being “A GNU Manual,” and with the Back-Cover Texts as in (a) below. A copy of the license is included in the section entitled “GNU Free Documentation License.”

(a) The FSF’s Back-Cover Text is: “You have the freedom to copy and modify this GNU manual.”

2 Installation

2.1 GNU ELPA package

The package is available as ef-themes. Simply do:

M-x package-refresh-contents
M-x package-install

And search for it.

GNU ELPA provides the latest stable release. Those who prefer to follow the development process in order to report bugs or suggest changes, can use the version of the package from the GNU-devel ELPA archive. Read: https://protesilaos.com/codelog/2022-05-13-emacs-elpa-devel/.

2.2 Manual installation

Assuming your Emacs files are found in ~/.emacs.d/, execute the following commands in a shell prompt:

cd ~/.emacs.d

# Create a directory for manually-installed packages
mkdir manual-packages

# Go to the new directory
cd manual-packages

# Clone this repo, naming it "ef-themes"
git clone https://github.com/protesilaos/ef-themes ef-themes

Finally, in your init.el (or equivalent) evaluate this:

;; Make Elisp files in that directory available to the user.
(add-to-list 'load-path "~/.emacs.d/manual-packages/ef-themes")

Everything is in place to set up the package.

3 Sample configuration

;; Make customisations that affect Emacs faces BEFORE loading a theme
;; (any change needs a theme re-load to take effect).
(require 'ef-themes)

;; If you like two specific themes and want to switch between them, you
;; can specify them in `ef-themes-to-toggle' and then invoke the command
;; `ef-themes-toggle'.  All the themes are included in the variable
;; `ef-themes-collection'.
(setq ef-themes-to-toggle '(ef-summer ef-winter))

(setq ef-themes-headings ; read the manual's entry or the doc string
      '((0 variable-pitch light 1.9)
        (1 variable-pitch light 1.8)
        (2 variable-pitch regular 1.7)
        (3 variable-pitch regular 1.6)
        (4 variable-pitch regular 1.5)
        (5 variable-pitch 1.4) ; absence of weight means `bold'
        (6 variable-pitch 1.3)
        (7 variable-pitch 1.2)
        (t variable-pitch 1.1)))

;; They are nil by default...
(setq ef-themes-mixed-fonts t
      ef-themes-variable-pitch-ui t)

;; Disable all other themes to avoid awkward blending:
(mapc #'disable-theme custom-enabled-themes)

;; Load the theme of choice:
(load-theme 'ef-summer :no-confirm)

;; OR use this to load the theme which also calls `ef-themes-post-load-hook':
(ef-themes-select 'ef-summer)

;; The themes we provide are recorded in the `ef-themes-dark-themes',
;; `ef-themes-light-themes'.

;; We also provide these commands, but do not assign them to any key:
;;
;; - `ef-themes-toggle'
;; - `ef-themes-select'
;; - `ef-themes-select-dark'
;; - `ef-themes-select-light'
;; - `ef-themes-load-random'
;; - `ef-themes-preview-colors'
;; - `ef-themes-preview-colors-current'

4 Themes for red-green or blue-yellow color deficiency

Most items in the ef-themes collection are designed to use colors from many parts of the spectrum. Those items generally are inappropriate for users with red-green or blue-yellow color deficiency (deuteranopia and tritanopia, respectively). We do, nonetheless, provide light and dark themes that are optimized for such cases. The names of the themes are:

ef-deuteranopia-dark and ef-deuteranopia-light for red-green color deficiency;
ef-tritanopia-dark and ef-tritanopia-light for blue-yellow color deficiency;

Loading a theme.

5 Customization options

The ef-themes provide a limited set of user options which tweak secondary aspects of the theme. No option affects coloration or the overall character of each theme (Principles).

All customizations need to be evaluated before loading a theme. Any change thus requires a theme re-load (Loading a theme).

5.1 Disable other themes

The user option ef-themes-disable-other-themes controls which themes to disable when loading an Ef theme.

When the value is non-nil, the commands ef-themes-toggle and ef-themes-select will disable all other themes while loading the specified Ef theme. This is done to ensure that Emacs does not blend two or more themes: such blends lead to awkward results that undermine the work of the designer.

When the value is nil, the aforementioned commands will only disable other themes within the Ef collection.

This option is provided because Emacs themes are not necessarily limited to colors/faces: they can consist of an arbitrary set of customizations. Users who use such customization bundles must set this variable to a nil value.

5.2 Toggle between two Ef themes

The user option ef-themes-to-toggle expects two symbols that name items in the Ef themes collection. The variable ef-themes-collection includes a list with all relevant symbols. The user can then switch between the two specified themes by invoking the ef-themes-toggle command.

If ef-themes-to-toggle does not specify two Ef themes, inform the user about it while prompting with completion for a theme among our collection (this is practically the same as the ef-themes-select command).

This command is in addition to the other ways of loading a theme, either with minibuffer completion or at random (Commands to load an Ef theme).

5.3 Rotate among a list of Ef themes

The user option ef-themes-to-rotate defines a list of Ef themes that can be used in rotation. The command ef-themes-rotate reads from that list and switches to the next item. If the next item is the current one, it moves to the one after.

Possible values for ef-themes-to-rotate are any of the themes specified in value of the variable ef-themes-items.

This command is in addition to the other ways of loading a theme, either with minibuffer completion or at random (Commands to load an Ef theme).

5.4 Enable mixed fonts

The user option ef-themes-mixed-fonts controls whether strictly spacing-sensitive constructs inherit from fixed-pitch (a monospaced font family).

By default (a nil value for this user option) no face inherits from fixed-pitch: they all use the default font family, regardless of whether it is monospaced or not.

When ef-themes-mixed-fonts is set to a non-~nil~ value, faces such as for Org tables, inline code, code blocks, and the like, are rendered in a monospaced font at all times. The user can thus set their default font family to a proportionately spaced font without worrying about breaking the alignment of relevant elements, or if they simply prefer the aesthetics of mixed mono and proportionately spaced font families.

A temporary switch to a proportionately spaced font (known in Emacs as variable-pitch) can be enabled in the current buffer with the activation of the built-in variable-pitch-mode.

To get consistent typography, the user may need to edit the font family of the fixed-pitch and variable-pitch faces. The fontaine package on GNU ELPA (by Protesilaos) can be helpful in this regard.

5.5 UI typeface

The user option ef-themes-variable-pitch-ui controls whether the elements of the User Interface (UI) use a proportionately spaced font. By default (a nil value), all UI elements use the default font family. When this user option is set to a non-~nil~ value, all UI elements will inherit the face variable-pitch, thus rendering them in a proportionately spaced font.

In this context, the UI elements are:

header-line
mode-line (active and inactive)
tab-bar-mode
tab-line-mode

To get consistent typography, the user may need to edit the font family of the fixed-pitch and variable-pitch faces. The fontaine package on GNU ELPA (by Protesilaos) can be helpful in this regard.

5.6 Option for headings

The user option ef-themes-headings provides support for individual heading styles for regular heading levels 0 through 8, as well as the Org agenda headings.

This is an alist that accepts a (KEY . LIST-OF-VALUES) combination. The KEY is either a number, representing the heading’s level (0 through 8) or t, which pertains to the fallback style. The named keys agenda-date and agenda-structure apply to the Org agenda.

Level 0 is a special heading: it is used for what counts as a document title or equivalent, such as the #+title construct we find in Org files. Levels 1-8 are regular headings.

The LIST-OF-VALUES covers symbols that refer to properties, as described below. Here is a complete sample with various stylistic combinations, followed by a presentation of all available properties:

(setq ef-themes-headings
      '((1 light variable-pitch 1.5)
        (2 regular 1.3)
        (3 1.1)
        (agenda-date 1.3)
        (agenda-structure variable-pitch light 1.8)
        (t variable-pitch)))

By default (a nil value for this variable), all headings have a bold typographic weight, a font family that is the same as the default face (typically monospaced), and a height that is equal to the default face’s height.

A variable-pitch property changes the font family of the heading to that of the variable-pitch face (normally a proportionately spaced typeface). Also check the fontaine package (by Protesilaos) for tweaking fonts via faces.
The symbol of a weight attribute adjusts the font of the heading accordingly, such as light, semibold, etc. Valid symbols are defined in the variable ef-themes-weights. The absence of a weight means that bold will be used by virtue of inheriting the bold face.
A number, expressed as a floating point (e.g. 1.5), adjusts the height of the heading to that many times the base font size. The default height is the same as 1.0, though it need not be explicitly stated. Instead of a floating point, an acceptable value can be in the form of a cons cell like (height . FLOAT) or (height FLOAT), where FLOAT is the given number.

Combinations of any of those properties are expressed as a list, like in these examples:

(semibold)
(variable-pitch semibold)
(variable-pitch semibold 1.3)
(variable-pitch semibold (height 1.3))   ; same as above
(variable-pitch semibold (height . 1.3)) ; same as above

The order in which the properties are set is not significant.

In user configuration files the form may look like this:

(setq ef-themes-headings
      '((1 light variable-pitch 1.5)
        (2 regular 1.3)
        (3 1.1)
        (t variable-pitch)))

When defining the styles per heading level, it is possible to pass a non-~nil~ non-list value (e.g. t) instead of a list of properties. This will retain the original aesthetic for that level. For example:

(setq ef-themes-headings
      '((1 . t)           ; keep the default style
        (2 variable-pitch 1.2)
        (t variable-pitch))) ; style for all unspecified headings

(setq ef-themes-headings
      '((1 variable-pitch 1.6)
        (2 1.3)
        (t . t))) ; default style for all unspecified levels

5.7 Palette overrides

Each Ef theme specifies a color palette that declares named color values and semantic color mappings:

Named colors consist of a symbol and a string that specifies a hexadecimal RGB value. For example: (blue-warmer "#5250ef").
The semantic color mappings associate an abstract construct with a given named color from the palette, like (prose-done green-cooler). Both elements of the list are symbols, though the cadr (value) can be a string that specifies a color, such as (prose-done "#5250ef").

Both of those subsets can be overridden, thus refashioning the theme. Overrides are either shared, by being stored in the user option ef-themes-common-palette-overrides, or they are specific to the theme they name. In the latter case, the naming scheme of each palette variable is THEME-NAME-palette-overrides, thus yielding:

ef-arbutus-palette-overrides

ef-autumn-palette-overrides

ef-bio-palette-overrides

ef-cherie-palette-overrides

ef-cyprus-palette-overrides

ef-dark-palette-overrides

ef-day-palette-overrides

ef-deuteranopia-dark-palette-overrides

ef-deuteranopia-light-palette-overrides

ef-dream-palette-overrides

ef-duo-dark-palette-overrides

ef-duo-light-palette-overrides

ef-eagle-palette-overrides

ef-elea-dark-palette-overrides

ef-elea-light-palette-overrides

ef-frost-palette-overrides

ef-kassio-palette-overrides

ef-light-palette-overrides

ef-maris-dark-palette-overrides

ef-maris-light-palette-overrides

ef-melissa-dark-palette-overrides

ef-melissa-light-palette-overrides

ef-night-palette-overrides

ef-owl-palette-overrides

ef-reverie-palette-overrides

ef-rosa-palette-overrides

ef-spring-palette-overrides

ef-summer-palette-overrides

ef-symbiosis-palette-overrides

ef-trio-dark-palette-overrides

ef-trio-light-palette-overrides

ef-tritanopia-dark-palette-overrides

ef-tritanopia-light-palette-overrides

ef-winter-palette-overrides

Theme-specific overrides take precedence over the shared ones. It is strongly advised that shared overrides do NOT alter color values, as those will not be appropriate for both dark and light themes. Common overrides are best limited to the semantic color mappings as those use the color value that corresponds to the active theme (e.g. make the cursor blue-warmer in all themes, whatever the value of blue-warmer is in each theme).

The value of any overrides’ variable must mirror a theme’s palette. Palette variables are named after their theme as THEME-NAME-palette. For example, the ef-summer-palette is like this:

(defconst ef-summer-palette
  '(
;;; Basic values

    (bg-main     "#fff2f3")
    (fg-main     "#4f4073")
    (bg-dim      "#f2e4ea")
    (fg-dim      "#786e74")
    (bg-alt      "#efd3e4")
    (fg-alt      "#af4988")

    (bg-active   "#cfb3c4")
    (bg-inactive "#f7ebee")

;;; Basic hues for foreground values

    (red             "#d3303a")
    (red-warmer      "#e00033")
    (red-cooler      "#d50f7f")
    (red-faint       "#c24552")

    ;; ...

    (blue            "#375ce6")
    (blue-warmer     "#5250ef")
    (blue-cooler     "#065fff")
    (blue-faint      "#6060d0")

    ;; ...

;;; Mappings

    ;; ...

;;;; Code mappings

    (builtin magenta)
    (comment yellow-faint)
    (constant red-cooler)
    (fnname magenta-warmer)
    (keyword magenta-cooler)
    (preprocessor green-warmer)
    (docstring cyan-faint)
    (string yellow-warmer)
    (type cyan-warmer)
    (variable blue-warmer)

    ;; ...
    ))

The ef-summer-palette-overrides targets the entries that need to be changed. For example, to make the cursor orange, use a shade of red for comments, and apply a cyan hue to keywords:

(setq ef-summer-palette-overrides
      '((cursor "#ef9050")
        (comment red-faint)
        (keyword cyan-cooler)))

Changes take effect upon theme reload. Overrides are removed by setting their variable to a nil value.

The common accented foregrounds in each palette follow a predictable naming scheme: HUE{,-warmer,-cooler,-faint,-intense}. HUE is one of the six basic colors: red, green, blue, yellow, magenta, cyan.

Named colors that are meant to be used as backgrounds contain bg in their name, such as bg-red-intense. While special purpose foregrounds that are meant to be combined with such backgrounds, contain fg in their name, such as fg-removed which complements bg-removed.

Named colors can be previewed with the ef-themes-preview-colors command. Changes to color values are reflected in the preview of the theme’s palette (Preview theme colors). They are shown at the top of the buffer. In the above example, the first instance of blue-warmer is the override and the second is the original one.

5.8 Stylistic variants using palette overrides

This section contains practical examples of overriding the palette of the themes (Palette overrides). Users can copy the code to their init file, evaluate it, and then re-load the theme for changes to take effect. To apply overrides at startup simply define them before the call that loads the theme.

5.8.1 Make the region more intense

This is one of our practical examples to override the semantic colors of the Ef themes (Stylistic variants using palette overrides). Here we show how to make the region override the underlying text colors(i.e. to be more legible) and how to make the background more intense.

Do not extend the region background.

;; These overrides are common to all Ef themes.  We also provide
;; theme-specific options, such as `ef-summer-palette-overrides'.
;;
;; In general, the theme-specific overrides are better for overriding
;; color values, such as redefining what `blue-faint' looks like.  The
;; common overrides are best used for changes to semantic color
;; mappings, as we show below.
;;
;; Use the command `ef-themes-preview-colors' or its variant
;; `ef-themes-preview-colors-current' to review the available palette
;; entries.


;; Use an intense background combined with the theme's intense
;; foreground.
(setq ef-themes-common-palette-overrides
      '((bg-region bg-magenta-intense)
        (fg-region fg-intense)))

;; Same idea as above, but less pronounced.
(setq ef-themes-common-palette-overrides
      '((bg-region bg-magenta-subtle)
        (fg-region fg-main)))

6 Loading a theme

Emacs can load and maintain enabled multiple themes at once. This typically leads to awkward styling and weird combinations. The theme looks broken and the designer’s intent is misunderstood. Before loading one of the ef-themes, the user is encouraged to disable all others (Disable other themes):

(mapc #'disable-theme custom-enabled-themes)

Then load the theme of choice. For example:

(load-theme 'ef-summer :no-confirm)

The :no-confirm is optional. It simply skips the step where Emacs asks the user whether they are sure about loading the theme.

Consider adding code like the above to the user configuration file, such as init.el.

NOTE: If you plan on using the ef-themes-post-load-hook, the above method will not work. Instead, you need to load the theme from your init file with ef-themes-select (Commands to load an Ef theme). For example:

;; like `load-theme' but also call `ef-themes-post-load-hook'
(ef-themes-select 'ef-summer)

7 Commands to load an Ef theme

The commands mentioned herein call ef-themes-post-load-hook at the end. This is for advanced users who want to trigger some code after an Ef theme is loaded (Use colors from the active Ef theme). The same goes for ef-themes-toggle and ef-themes-rotate.

Toggle between two Ef themes
Rotate among a list of Ef themes
A theme-agnostic hook for theme loading.

The themes can also be loaded interactively. The command ef-themes-select (call it with M-x) prompts with minibuffer completion for a theme among the collection of items we provide. It then loads the selected theme. Internally, ef-themes-select takes care to disable any other Ef theme, though it does not disable other themes. This is by design to let users maintain theme blending when they want it. Otherwise, the user is encouraged to disable all other themes and stick with the Ef themes:

(mapc #'disable-theme custom-enabled-themes)

The ef-themes-select command can also be called from the user’s init file to load the theme of their choice (Loading a theme). For example:

;; like `load-theme' but also call `ef-themes-post-load-hook'
(ef-themes-select 'ef-summer)

When ef-themes-select is called with a prefix argument (C-u by default), it first produces a minibuffer prompt to limit the choice to dark or light themes, and then shows only the relevant subset.

Instead of calling ef-themese-select with a prefix argument, users can invoke either of ef-themes-select-dark, ef-themes-select-light commands. Those behave the same as ef-themes-select except they limit the interaction to dark or light Ef themes, respectively.

The command ef-themes-load-random is for those who appreciate a bit of serendipity in their life. When call interactively with M-x it loads a random theme from the Ef themes collection. The selection excludes the current Ef theme. Calling ef-themes-load-random with a prefix argument (C-u by default) makes the command limit the random selection to either light or dark themes. The user is prompted at the minibuffer to pick among the two sets.

The ef-themes-load-random can also be called from Lisp (e.g. from the init.el file):

(ef-themes-load-random)

This has the effect of loading an Ef theme at random, as described above. It is also possible to limit the set with either of those:

;; Load a light Ef theme at random
(ef-themes-load-random 'light)

;; Load a dark Ef theme at random
(ef-themes-load-random 'dark)

The author of the Ef themes likes to check with their operating system to determine if the desktop environment outside of Emacs is using a light/dark theme and then loads an appropriate Ef theme at random:

;; Check GNOME's gsettings database for the dark theme preference.  If
;; it is enabled, we want to load a dark Ef theme at random.  Otherwise
;; we load a random light theme.
(if (string-match-p
     "dark"
     (shell-command-to-string "gsettings get org.gnome.desktop.interface color-scheme"))
    (ef-themes-load-random 'dark)
  (ef-themes-load-random 'light))

8 Preview theme colors

The command ef-themes-preview-colors uses minibuffer completion to select an item from the Ef themes and then produces a buffer with previews of its color palette entries. The buffer has a naming scheme which reflects the given choice, like ef-summer-preview-colors for the ef-summer theme.

The command ef-themes-preview-colors-current skips the minibuffer selection process and just produces a preview for the current Ef theme.

When called with a prefix argument (C-u with the default key bindings), these commands will show a preview of the palette’s semantic color mappings instead of the named colors.

Aliases for those commands are ef-themes-list-colors and ef-themes-list-colors-current.

Overrides to color values are reflected in the buffers produced by the aforementioned commands (Palette overrides).

Each row shows a foreground and background coloration using the underlying value it references. For example a line with #d3303a (a shade of red) will show red text followed by a stripe with that same color as a backdrop.

The name of the buffer describes the given Ef theme and what the contents are, such as *ef-summer-list-colors* for named colors and *ef-summer-list-mappings* for the semantic color mappings.

9 Use colors from the active Ef theme

Advanced users may want to call color variables from the palette of the active Ef theme. The macro ef-themes-with-colors supplies those to any form called inside of it. For example:

(ef-themes-with-colors
  (list bg-main fg-main bg-mode-line cursor))
;; => ("#fff2f3" "#5f456f" "#ffa4dc" "#cf0090")

The above return value is for ef-summer when that is the active Ef theme. Switching to another theme and evaluating this code anew will give us the relevant results for that theme. The same with ef-winter:

(ef-themes-with-colors
  (list bg-main fg-main bg-mode-line cursor))
;; => ("#0f0b15" "#b8c6d5" "#5f1f5f" "#ff6ff0")

Do-It-Yourself customizations.

The palette of each Ef theme is considered stable. No removals shall be made. Though please note that some tweaks to individual hues or color mapping are still possible. At any rate, we will not outright break any code that uses ef-themes-with-colors.

10 Do-It-Yourself customizations

This section documents how the user can further tweak the Ef themes to their liking.

10.1 Get a single color from the palette

The general approach to advanced DIY changes.

The fuction ef-themes-get-color-value can be called from Lisp to return the value of a color from the active Ef theme palette. It takea a COLOR argument and an optional OVERRIDES.

COLOR is a symbol that represents a named color entry in the palette.

Preview theme colors.

If the value is the name of another color entry in the palette (so a mapping), this function recurs until it finds the underlying color value.

With an optional OVERRIDES argument as a non-nil value, it accounts for palette overrides. Else it reads only the default palette.

Palette overrides.

With optional THEME as a symbol among ef-themes-collection, use the palette of that item. Else use the current Ef theme.

If COLOR is not present in the palette, this function returns the unspecified symbol, which is safe when used as a face attribute’s value.

An example with ef-summer to show how this function behaves with/without overrides and when recursive mappings are introduced.

;; Here we show the recursion of palette mappings.  In general, it is
;; better for the user to specify named colors to avoid possible
;; confusion with their configuration, though those still work as
;; expected.
(setq ef-themes-common-palette-overrides
      '((cursor red)
        (prompt cursor)
        (variable prompt)))

;; Ignore the overrides and get the original value.
(ef-themes-get-color-value 'variable)
;; => "#5250ef"

;; Read from the overrides and deal with any recursion to find the
;; underlying value.
(ef-themes-get-color-value 'variable :overrides)
;; => "#d3303a"

10.2 The general approach to advanced DIY changes

When the user wants to customize Emacs faces there are two considerations they need to make if they care about robustness:

Do not hardcode color values, but instead use the relevant variables from the Ef themes.
Make the changes persist through theme changes between the Ef themes collection.

For point 1 we provide the ef-themes-with-colors macro, while for point 2 we have the ef-themes-post-load-hook.

Use colors from the active Ef theme.

Commands to load an Ef theme.

A theme-agnostic hook for theme loading.

We need to wrap our code in the ef-themes-with-colors and declare it as a function which we then add to the hook. Here we show the general approach of putting those pieces together.

To customize faces in a way that mirrors the Ef themes’ source code, we use the built-in custom-set-faces. The value it accepts has the same syntax as that found in ef-themes.el, specifically the ef-themes-faces constant. It thus is easy to copy lines from there and tweak them. Let’s pick a couple of font-lock faces (used in all programming modes, among others):

(defun my-ef-themes-custom-faces ()
  "My customizations on top of the Ef themes.
This function is added to the `ef-themes-post-load-hook'."
  (ef-themes-with-colors
    (custom-set-faces
     ;; These are the default specifications
     `(font-lock-comment-face ((,c :inherit italic :foreground ,comment)))
     `(font-lock-variable-name-face ((,c :foreground ,variable))))))

;; Using the hook lets our changes persist when we use the commands
;; `ef-themes-toggle', `ef-themes-select', and `ef-themes-load-random'.
(add-hook 'ef-themes-post-load-hook #'my-ef-themes-custom-faces)

Each item in the Ef themes collection has its own color mapping. So the color value of the comment variable will differ from theme to theme. For the purpose of our demonstration, we make variables look like comments and comments like variables:

(defun my-ef-themes-custom-faces ()
  "My customizations on top of the Ef themes.
This function is added to the `ef-themes-post-load-hook'."
  (ef-themes-with-colors
    (custom-set-faces
     `(font-lock-comment-face ((,c :foreground ,variable)))
     `(font-lock-variable-name-face ((,c :inherit italic :foreground ,comment))))))

;; Using the hook lets our changes persist when we use the commands
;; `ef-themes-toggle', `ef-themes-select', and `ef-themes-load-random'.
(add-hook 'ef-themes-post-load-hook #'my-ef-themes-custom-faces)

All changes take effect when a theme is loaded again. As such, it is better to use ef-themes-select at startup so that the function added to the hook gets applied properly upon first load. Like this:

(defun my-ef-themes-custom-faces ()
  "My customizations on top of the Ef themes.
This function is added to the `ef-themes-post-load-hook'."
  (ef-themes-with-colors
    (custom-set-faces
     `(font-lock-comment-face ((,c :foreground ,variable)))
     `(font-lock-variable-name-face ((,c :inherit italic :foreground ,comment))))))

;; Using the hook lets our changes persist when we use the commands
;; `ef-themes-toggle', `ef-themes-select', and `ef-themes-load-random'.
(add-hook 'ef-themes-post-load-hook #'my-ef-themes-custom-faces)

;; Load the theme and run `ef-themes-post-load-hook'
(ef-themes-select 'ef-summer) ; Instead of (load-theme 'ef-summer :no-confirm)

Please contact us if you have specific questions about this mechanism. We are willing to help and shall provide comprehensive documentation where necessary.

10.3 A theme-agnostic hook for theme loading

The themes are designed with the intent to be useful to Emacs users of varying skill levels, from beginners to experts. This means that we try to make things easier by not expecting anyone reading this document to be proficient in Emacs Lisp or programming in general.

Such a case is with the use of the ef-themes-post-load-hook, which is called after the evaluation of any of the commands we provide for loading a theme (Commands to load an Ef theme). We recommend using that hook for advanced customizations, because (1) we know for sure that it is available once the themes are loaded, and (2) anyone consulting this manual, especially the sections on enabling and loading the themes, will be in a good position to benefit from that hook.

Advanced users who have a need to switch between the Ef themes and other items (e.g. my modus-themes) will find that such a hook does not meet their requirements: it only works with the Ef themes and only with the aforementioned functions.

A theme-agnostic setup can be configured thus:

(defvar after-enable-theme-hook nil
   "Normal hook run after enabling a theme.")

(defun run-after-enable-theme-hook (&rest _args)
   "Run `after-enable-theme-hook'."
   (run-hooks 'after-enable-theme-hook))

(advice-add 'enable-theme :after #'run-after-enable-theme-hook)

This creates the after-enable-theme-hook and makes it run after each call to enable-theme, which means that it will work for all themes and also has the benefit that it does not depend on functions such as ef-themes-select and the others mentioned in this manual. The function enable-theme is called internally by load-theme, so the hook works everywhere.

The downside of the theme-agnostic hook is that any functions added to it will likely not be able to benefit from macro calls that read the active theme, such as ef-themes-with-colors (the Modus themes have an equivalent macro). Not all Emacs themes have the same capabilities.

In this document, we always mention ef-themes-post-load-hook though the user can replace it with after-enable-theme-hook should they need to (provided they understand the implications).

10.4 Do not extend the region background

By the default, the background of the region face extends from the end of the line to the edge of the window. To limit it to the end of the line, we need to override the face’s :extend attribute. Adding this to the Emacs configuration file will suffice:

;; Do not extend `region' background past the end of the line.
(custom-set-faces
 '(region ((t :extend nil))))

Make the region more intense.

10.5 Add support for hl-todo

The hl-todo package provides the user option hl-todo-keyword-faces: it specifies an association list of (KEYWORD . COLOR-VALUE) pairs. There are no faces, which the theme could style seamlessly. As such, it rests on the user to specify appropriate color values. This can be done either by hardcoding colors, which is inefficient, or by using the macro ef-themes-with-colors (The general approach to DIY changes). Here we show the latter method.

(defun my-ef-themes-hl-todo-faces ()
  "Configure `hl-todo-keyword-faces' with Ef themes colors.
The exact color values are taken from the active Ef theme."
  (ef-themes-with-colors
    (setq hl-todo-keyword-faces
          `(("HOLD" . ,yellow)
            ("TODO" . ,red)
            ("NEXT" . ,blue)
            ("THEM" . ,magenta)
            ("PROG" . ,cyan-warmer)
            ("OKAY" . ,green-warmer)
            ("DONT" . ,yellow-warmer)
            ("FAIL" . ,red-warmer)
            ("BUG" . ,red-warmer)
            ("DONE" . ,green)
            ("NOTE" . ,blue-warmer)
            ("KLUDGE" . ,cyan)
            ("HACK" . ,cyan)
            ("TEMP" . ,red)
            ("FIXME" . ,red-warmer)
            ("XXX+" . ,red-warmer)
            ("REVIEW" . ,red)
            ("DEPRECATED" . ,yellow)))))

(add-hook 'ef-themes-post-load-hook #'my-ef-themes-hl-todo-faces)

To find the names of the color variables, the user can rely on the commands for previewing the palette (Preview theme colors).

10.6 Make the mode line like the `modus-themes` default

The Ef themes do not use a :box attribute for their mode lines, while the active one has an accented background. Users may prefer the approach that my modus-themes follow by default, where both active and inactive mode lines use shades of gray and have a border around them.

Try something like this, using the approach we have already explained about ef-themes-with-colors (The general approach to DIY changes):

(defun my-ef-themes-mode-line ()
  "Tweak the style of the mode lines."
  (ef-themes-with-colors
    (custom-set-faces
     `(mode-line ((,c :background ,bg-active :foreground ,fg-main :box (:line-width 1 :color ,fg-dim))))
     `(mode-line-inactive ((,c :box (:line-width 1 :color ,bg-active)))))))

(add-hook 'ef-themes-post-load-hook #'my-ef-themes-mode-line)

If you want the active mode line to retain its accented background but also have a border around it, change this line from the above snippet:

(mode-line ((,c :background ,bg-active :foreground ,fg-main :box (:line-width 1 :color ,fg-dim))))

To this:

`(mode-line ((,c :background ,bg-mode-line :foreground ,fg-mode-line :box (:line-width 1 :color ,fg-dim))))

10.7 Configure bold and italic faces

The Ef themes do not hardcode a :weight or :slant attribute in the faces they cover. Instead, they configure the generic faces called bold and italic to use the appropriate styles and then instruct all relevant faces that require emphasis to inherit from them.

This practically means that users can change the particularities of what it means for a construct to be bold/italic, by tweaking the bold and italic faces. Cases where that can be useful include:

The default typeface does not have a variant with slanted glyphs (e.g. Fira Mono/Code as of this writing on 2022-08-23), so the user wants to add another family for the italics, such as Hack.
The typeface of choice provides a multitude of weights and the user prefers the light one by default. To prevent the bold weight from being too heavy compared to the light one, they opt to make bold use a semibold weight.
The typeface distinguishes between oblique and italic forms by providing different font variants (the former are just slanted versions of the upright forms, while the latter have distinguishing features as well). In this case, the user wants to specify the font that applies to the italic face.

To achieve those effects, one must first be sure that the fonts they use have support for those features.

In this example, we set the default font family to Fira Code, while we choose to render italics in the Hack typeface (obviously one needs to pick fonts that work in tandem):

(set-face-attribute 'default nil :family "Fira Code" :height 110)
(set-face-attribute 'italic nil :family "Hack")

And here we play with different weights, using Source Code Pro:

(set-face-attribute 'default nil :family "Source Code Pro" :height 110 :weight 'light)
(set-face-attribute 'bold nil :weight 'semibold)

To reset the font family, one can use this:

(set-face-attribute 'italic nil :family 'unspecified)

Consider the fontaine package on GNU ELPA (by Protesilaos) which provides the means to configure font families via faces.

10.8 Tweak `org-modern` timestamps

The org-modern package uses faces and text properties to make Org buffers more aesthetically pleasing. It affects tables, timestamps, lists, headings, and more.

In previous versions of the Ef themes, we mistakenly affected one of its faces: the org-modern-label. It changed the intended looks and prevented the user option org-modern-label-border from having its desired effect. As such, we no longer override that face.

Users who were used to the previous design and who generally do not configure the user options of org-modern may thus notice a change in how clocktables (or generally tables with timestamps) are aligned. The simplest solution is to instruct the mode to not prettify timestamps, by setting the user option org-modern-timestamp to nil. For example, by adding this to the init file:

(setq org-modern-timestamp nil)

Alignment in tables will also depend on the use of proportionately spaced fonts. Enable the relevant option to work with those without any further trouble (Enable mixed fonts).

For any further issues, you are welcome to ask for help.

10.9 Tweak goto-address-mode faces

The built-in goto-address-mode uses heuristics to identify URLs and email addresses in the current buffer. It then applies a face to them to change their style. Some packages, such as notmuch, use this minor-mode automatically.

The faces are not declared with defface, meaning that it is better that the theme does not modify them. The user is thus encouraged to consider including this in their setup:

(setq goto-address-url-face 'link
      goto-address-url-mouse-face 'highlight
      goto-address-mail-face 'link
      goto-address-mail-mouse-face 'highlight)

My personal preference is to set goto-address-mail-face to nil, because it otherwise adds too much visual noise to the buffer (email addresses stand out more, due to the use of the uncommon @ caharacter but also because they are often enclosed in angled brackets).

11 Faces defined by the Ef themes

The themes define some faces to make it possible to achieve consistency between various groups of faces. For example, all “marks for selection” use the ef-themes-mark-select face. If, say, the user wants to edit this face to include an underline, the change will apply to lots of packages, like Dired, Trashed, Ibuffer.

Do-It-Yourself customizations.

All the faces defined by the themes:

ef-themes-fixed-pitch
ef-themes-heading-0
ef-themes-heading-1
ef-themes-heading-2
ef-themes-heading-3
ef-themes-heading-4
ef-themes-heading-5
ef-themes-heading-6
ef-themes-heading-7
ef-themes-heading-8
ef-themes-key-binding
ef-themes-mark-delete
ef-themes-mark-other
ef-themes-mark-select
ef-themes-ui-variable-pitch
ef-themes-underline-error
ef-themes-underline-info
ef-themes-underline-warning

12 Supported packages or face groups

The ef-themes will only ever support a curated list of packages based on my judgement (Packages that are hard to support). Nevertheless, the list of explicitly or implicitly supported packages already covers everything most users need.

12.1 Explicitly supported packages or face groups

ace-window
all basic faces
all-the-icons
all-the-icons-dired
all-the-icons-ibuffer
ansi-color
auctex
auto-dim-other-buffers
avy
breadcrumb
bongo
bookmark
calendar and diary
cider
centaur-tabs
change-log and log-view (part of VC)
chart
clojure-mode
company
compilation
completions
consult
corfu
corfu-candidate-overlay
csv-mode
custom (M-x customize)
dashboard
denote
dictionary
diff-hl
diff-mode
dired
dired-subtree
diredfl
dirvish
display-fill-column-indicator-mode
doom-modeline
ediff
eglot
eldoc
elfeed
embark
epa
erc
ert
eshell
evil
eww
flycheck
flymake
flyspell
font-lock
forge
git-commit
git-gutter
git-gutter-fr
git-rebase
gnus
helpful [ Part of {{{development-version}}}. ]
hexl-mode
hi-lock (M-x highlight-regexp)
highlight-indentation
ibuffer
image-dired
imenu-list
info
isearch, occur, query-replace
jit-spell
jinx
keycast
lin
line numbers (display-line-numbers-mode and global variant)
magit
man
marginalia
markdown-mode
mct
messages
mode-line
mood-line
mu4e
nerd-icons
nerd-icons-completion
nerd-icons-dired
nerd-icons-ibuffer
neotree
notmuch
olivetti
orderless
org
org-habit
org-modern
outline-mode
outline-minor-faces
package (M-x list-packages)
pdf-tools
perspective
proced
powerline
pulsar
pulse
rainbow-delimiters
rcirc
recursion-indicator
regexp-builder (re-builder)
rst-mode
ruler-mode
shell-script-mode (sh-mode)
shortdoc
show-paren-mode
shr
smerge
spacious-padding [ Part of {{{development-version}}}. ]
tab-bar-mode
tab-line-mode
tempel
term
textsec
tldr
transient
trashed
tree-sitter
tty-menu
vc (vc-dir.el, vc-hooks.el)
vertico
vterm
vundo
wgrep
which-function-mode
which-key
whitespace-mode
widget
window-divider-mode
window-tool-bar-mode
writegood-mode
woman
ztree

12.2 Implicitly supported packages or face groups

Those are known to work with the Ef themes either because their colors are appropriate or because they inherit from basic faces which the themes already cover:

apropos
dim-autoload
hl-todo
icomplete
ido
mct
multiple-cursors
paren-face
sxhkdrc-mode
xref

Note that “implicitly supported” does not mean that they always fit in perfectly. If there are refinements we need to made, then we need to intervene (Explicitly supported packages or face groups).

12.3 Packages that are hard to support

These are difficult to support due to their (i) incompatibility with the design of the ef-themes, (ii) complexity or multiple points of entry, (iii) external dependencies, (iv) existence of better alternatives in my opinion, or (v) inconsiderate use of color out-of-the-box and implicit unwillingness to be good Emacs citizens:

avy: its UI is prone to visual breakage and is hard to style correctly.
calibredb: has an external dependency that I don’t use.
ctrlf: use the built-in isearch or the consult-line command of consult.
dired+: it is complex and makes inconsiderate use of color.
ein (Emacs IPython Notebook): external dependency that I don’t use.
ement.el: has an external dependency that I don’t use.
helm: it is complex and makes inconsiderate use of color. Prefer the vertico, consult, and embark packages.
info+: it is complex and makes inconsiderate use of color.
ivy/counsel/swiper: use the vertico, consult, and embark packages which are designed to be compatible with standard Emacs mechanisms and are modular.
lsp-mode: has external dependencies that I don’t use.
solaire: in principle, it is incompatible with practically every theme that is not designed around it. Emacs does not distinguish between “UI” and “syntax” buffers.
sx: has an external dependency that I don’t use.
telega: has an external dependency that I don’t use (I don’t even have a smartphone).
treemacs: it has too many dependencies and does too many things.
web-mode: I don’t use all those Web technologies and cannot test this properly without support from an expert. It also defines lots of faces that hardcode color values for no good reason.

The above list is non-exhaustive though you get the idea.

13 Principles

No customization options that affect the coloration of individual components like a heading or a construct in the code! Either you like them or you don’t. To change the attributes of individual faces, it is better to do it in user-level configurations (Do-It-Yourself customizations). Report the issue and I can help with the relevant code. Providing customizations that refashion a wide set of themes is not maintainable due to the sheer magnitude of all the possible combinations.
Curated list of supported faces (Supported packages or face groups). I will only cover what I use and/or know is in a well-maintained state. Styling a package requires a lot of work as one must (i) know how the package works, (ii) see all its interfaces in action, (iii) make sure that the color combinations look consistent with the rest of the theme.
Minimum contrast ratio of 4.5:1 against the main background (WCAG AA standard). Emphasis on “minimum” as themes can always have more contrast. Use my modus-themes package (also built into Emacs 28 or higher) if you need top-class accessibility in this regard.
If two elements are functionally distinct, the theme must render this fact conspicuous (Let Org tags inherit the heading color?).
Respect the decisions of the upstream package provider or, else, do not make weird things with faces. I only override the design choice of a package if it is absolutely necessary and then still try to conform with the principle of least surprise.
When there is an inescapable trade-off between usability and aesthetics, I will always opt for the former, without prejudice to the aforementioned principles.

13.1 Minimal VS maximal scope

The ef-themes are meant to be minimal in scope, as opposed to my modus-themes whose accessibility requirements make them maximalist by necessity. The modus-themes are such because:

Accessibility is not a one-size-fits-all. Customisation options are necessary to empower users.
Accessibility is as good as its weakest link. If the user spends all day using FOO package, it needs to be perfectly legible, otherwise the whole theme fails to deliver on its promise.

The ef-themes can afford to be more minimal because they do not have such a lofty accessibility target.

14 FAQ

14.1 What does Ef mean?

“Ef” is a Greek word (ευ), commonly used as a prefix to denote something good, nice, and/or easy. For example, eftopia (ευτοπία) is the opposite of dystopia (δυστοπία): a good place as opposed to a bad place.

14.2 Will you stop using the modus-themes?

No. For my workflow, accessibility is the most important quality. The modus-themes will remain my default choice.

14.3 Then why develop the ef-themes?

Because I think that users deserve “pretty” themes that (i) do make some considerations for legibility, and (ii) are not designed on a whimsy.

The ef-themes are my answer to those who (i) like my modus-themes, (ii) want something with a bit more flair, and (iii) are fine with a bit more relaxed accessibility target.

14.4 Difference between ef-themes and modus-themes?

The main difference between the two projects is that the modus-themes are much more strict with maintaining the highest standard for contrast (I won’t delve into the technicalities, though the manual of the modus-themes does elaborate on the minutiae). Whereas the ef-themes do not have such a commitment: they are legible, but might go a bit below the desired target in certain cases.

For the user who has already narrowed their search to the Modus and Ef themes, the criterion should be the eye test. If any of those items looks good/usable, then that is what matters. A bit of experimentation provides greater insight than tomes on theoretical nuances—no value in overthinking it.

Between the ef-themes and the modus-themes, I provide a broad range of options for users who need varying degrees of legibility. The modus-themes are the ones with the highest contrast.

I have always maintained the view that (i) there is no such thing as a one-size-fits-all for accessibility due to innate differences in color perception between individuals as well as hardware capabilities, and (ii) no theme can handle accessibility on its own, as one needs to consider typography as well as environmental factors.

[ For my preferred typography, check Iosevka Comfy: https://protesilaos.com/emacs/iosevka-comfy-pictures. ]

Technically, the very high contrast of the modus-themes demands that they are not—and can never be—as colorful as the ef-themes. Their colors are less saturated. In terms of presentation, this means that the modus-themes may appear more minimalist (or “clean”) once one gets used to their level of contrast. In general: do not trust initial impressions and give the themes a fair chance (if one is used to low contrast settings, the modus-themes feel hard to get used to, though this is natural as the eye adapts accordingly).

The ef-themes are more colorful, which can make them more/less pleasant to work with, depending on one’s subjectivity. Within the ef-themes, there is considerable diversity, as each of the 20 items has its own character, expressed as a unique color palette and color mapping. No two themes are alike. For example, for light themes ef-summer gives the user a completely different vibe than ef-frost, while for dark themes ef-bio and ef-cherie each have their unique charm.

I cannot possibly say which the “best” is. This is a subjective evaluation. For me personally, both projects are technically excellent in terms of conforming with their stated ends. Aesthetically, I like them all, which is why I develop/maintain them. I am not prioritising one over the others.

Note that I am emphasising legibility, though this should not discount the meticulous work that goes into thematic consistency. I do not write about this topic because it does not really matter to the average user. Consistency is not something that should actively be calling for one’s attention, though it is “there” for those who wish to pay attention. In short: I am not picking random colors and implementing them on a whimsy. Theme development is not easy.

14.5 Too many options, what should I do?

Take a deep breath, drink some water, get some fresh air, and take it one step at a time. You don’t have to try all the themes outright. For a light theme, go with ef-light; for a dark one use ef-dark. They have generic names exactly for this reason. Then make the necessary tweaks to toggle between those two and don’t worry anymore about the abundance of choice (Toggle between two Ef themes). Good luck!

14.6 Let Org tags inherit the heading color?

Upstream Org defines tags in headings to have the same color as the rest of the heading’s text. However, tags are a distinct component of the heading as noted in the doc string of the org-get-heading function. Tags also are functionally different than the ordinary text of the heading: they are a clickable link/button. It thus is a matter of usability to render this distinction clear at the visual level: I do not agree with upstream Org’s design decision.

Normally, we would style a link to have an underline. However, this design does not look right in headings (as it doesn’t look right in, e.g., the headings in a listing of emails or the unread items in the Elfeed list of entries). We thus have to go with the next option, which is to use a distinct foreground color that differentiates the tag from its context, while accounting for theme-wide usability and consistency.

The overarching principle is that when two things function differently, they have to look apart even if the difference is small.

The assumption that tags are right-aligned (per Org’s default behaviour) does not hold, as there exists a user option to disable this effect: org-auto-align-tags. The author of the ef-themes uses this option because the way Org performs this alignment using literal spaces does not work properly with (i) proportionately spaced fonts, (ii) varying heading heights, (iii) different levels of indentation. Realigning tags by inserting spaces also creates noise in version-controlled files, which is undesirable.

14.7 Add something like Nord or Zenburn?

In general, I am not against the idea of drawing inspiration from other themes. Note though that every item in the ef-themes collection is designed from scratch to work in accordance with the principles of this project (Principles).

Each palette is an original implementation. The six basic hues of red, green, blue, yellow, magenta, cyan are implemented as quartets of a base, warmer, cooler, and faint variants.

All themes have their own color mapping, which is conducted in accordance with the exact values of the aforementioned hues and their innate relations.

Copying another project’s palette is generally not possible or not desirable, not even if that is my modus-themes (they, too, have a different set of requirements).

Furthermore, trying to mimic another theme generally is an exercise with prior constraints, as we are always labouring under the expectation of remaining faithful to the original. This can lead to awkward compromises and sub-optimal choices, which make no sense for a project with opinionanted design principles.

15 Acknowledgements

This project is meant to be a collective effort. Every bit of help matters.

Author/maintainer: Protesilaos Stavrou.
Contributions to code or the manual: Alex Lu, Christopher League, Eshel Yaron, Gautier Ponsinet, John Haman, Oleksii (Alex) Koval, Pedro Cunha, Philip Kaludercic, Ryan Kaskel, Walheimat.
Ideas and/or user feedback: Adam Porter (alphapapa), Alan Schmitt, Amo DelBello, Anthony Chavez, Benjamin (zealotrush), Bruno Boal, Daniel Mendler, Federico Stilman, Filippo Argiolas, Iris Garcia, Jean-Philippe Gagné Guay, Len Trigg, Jonas Collberg, Saša Janiška, Spike-Leung, Steve Molitor, Summer Emacs, Sven Seebeck, Thanos Apollo, Zoltán Király, goldfita, marasenna, newhallroad.

16 GNU Free Documentation License

Files

README.org

Latest commit

History