Skip to content

DIY Make Org block colors more or less colorful

This is one of our practical examples to override the semantic colors of the Modus themes (Stylistic variants using palette overrides). Here we show how to change the presentation of Org blocks (and other such blocks like Markdown fenced code sections, though the exact presentation depends on each major mode).

The default style of Org blocks is a subtle gray background for the contents and for the delimiter lines (the ‘#+begin_’ and ‘#+end_’ parts). The text of the delimiter lines is a subtle gray foreground color.

Make inline code in prose use alternative styles.

emacs-lisp
;; Make code blocks (in Org, for example) use a more colorful style
;; for their delimiter lines as well as their contents.  Give this a
;; purple feel.  Make the delimiter lines distinct from the contents.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-magenta-nuanced)
        (bg-prose-block-delimiter bg-lavender)
        (fg-prose-block-delimiter fg-main)))

;; As above, but with a more blue feel.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-blue-nuanced)
        (bg-prose-block-delimiter bg-lavender)
        (fg-prose-block-delimiter fg-main)))

;; As above, but with a green feel.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-green-nuanced)
        (bg-prose-block-delimiter bg-sage)
        (fg-prose-block-delimiter fg-main)))

;; As above, but with a yellow/gold feel.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-yellow-nuanced)
        (bg-prose-block-delimiter bg-ochre)
        (fg-prose-block-delimiter fg-main)))

;; As above, but with a slightly more red feel.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-red-nuanced)
        (bg-prose-block-delimiter bg-ochre)
        (fg-prose-block-delimiter fg-main)))

The previous examples differentiate the delimiter lines from the block’s contents. Though we can mimic the default aesthetic of a uniform background, while changing the applicable colors. Here are some nice combinations:

emacs-lisp
;; Solid green style.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-green-nuanced)
        (bg-prose-block-delimiter bg-green-nuanced)
        (fg-prose-block-delimiter green-warmer)))

;; Solid yellow style.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-yellow-nuanced)
        (bg-prose-block-delimiter bg-yellow-nuanced)
        (fg-prose-block-delimiter yellow-cooler)))

;; Solid cyan style.
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents bg-cyan-nuanced)
        (bg-prose-block-delimiter bg-cyan-nuanced)
        (fg-prose-block-delimiter cyan-cooler)))

[ Combine the above with a suitable mode line style for maximum effect (DIY Make the active mode line colorful). ]

Finally, the following makes code blocks have no distinct background. The minimal styles are applied to the delimiter lines, which only use a subtle gray foreground. This was the default for the Modus themes up until version 4.3.0.

emacs-lisp
;; Make code blocks more minimal, so that (i) the delimiter lines have
;; no background, (ii) the delimiter foreground is a subtle gray, and
;; (iii) the block contents have no distinct background either.  This
;; was the default in versions of the Modus themes before 4.4.0
(setq modus-themes-common-palette-overrides
      '((bg-prose-block-contents unspecified)
        (bg-prose-block-delimiter unspecified)
        (fg-prose-block-delimiter fg-dim)))

DIY Use colored Org source blocks per language.