This article is for beorg 2.12.1 and above. It was published before the release of beorg 2.12.1.

You should be familiar with customising beorg using an init.org file before continuing. Take a look at this article for an introduction.

Specifying colours

When specifying a colour in your init.org you need to use a hex code. For example FF0000 is red and FFFFFF is white. There are lots of articles on the web introducing you to writing colours this way which are worth reading if you haven’t done so before before. Hexadecimal Colours on Math Is Fun.

The text editor

You can change the font and background colours used in the beorg text editor.

The following variables can be used:

• editor-background-color - the colour used for the background of the editor area
• editor-text-color-default - this is the colour for text which is not syntax highlighted (i.e. not a headline)
• editor-text-color-level1 - first level headline (e.g. “* Holiday Planning”)
• editor-text-color-level2 - second level headline (e.g. “* Summer 2019”)
• editor-text-color-level3, …

For example to set a black background with white text you would add these lines to your init.org:

(set! editor-background-color "#000000")
(set! editor-text-color-default "#FFFFFF")

The main beorg UI

In addition to defining colours in the text editor you can also change most of the colours in the beorg user interface itself.

Any custom UI colours will require that you restart beorg as the UI theme is constructed only when the app starts. Whereas the editor colours described above can be experimented with from the REPL.

Beorg currently has light and dark themes specified. What you are overriding in Scheme are the colours used for different UI components in one of these themes.

Here is an example of changing the background colour of the navigation bar (and related bars such as the bar which allows you to change the week in the agenda):

(define ui-light-navigationBar-background "FF0000")

Since library.org doesn’t define these variables you need to use define and not set!.

Each variable name starts with ui- followed by either light or dark. There is then the name of the component, for example navigationBar. Finally either background, foreground or tint. Not all components support all three colour types.

Here is a complete list of the component for which you can customise the colour:

• navigationBar
• tabBar
• groupedTableView
• groupedTableViewHeroHeader
• tableViewLargeHeader
• tableViewSmallHeader
• cellTitle
• cellSubtitle
• cellBackground
• overdue
• document
• primaryButton
• secondaryButton
• button
• tableHeaderButton
• text
• separator
• textField
• textView
• datePicker
• picker
• searchBar

Customising the UI in this way is not for the faint hearted and will require some trial and error.

An example UI color scheme

Solarized is a popular color scheme that is easy on the eyes. Here is an example of defining a Solarized light color scheme for the beorg UI. Try adding this to your own init.org - it will be a good base for defining your own color scheme.

* Styling UI
#+BEGIN_SRC scheme
  (define color-base03 "002b36")
  (define color-base02 "073642")
  (define color-base01 "586e75")
  (define color-base00 "657b83")
  (define color-base0 "839496")
  (define color-base1 "93a1a1")
  (define color-base2 "eee8d5")
  (define color-base3 "fdf6e3")
  (define color-yellow "b58900")
  (define color-orange "cb4b16")
  (define color-red "dc322f")
  (define color-magenta "d33682")
  (define color-violet "6c71c4")
  (define color-blue "268bd2")
  (define color-cyan "2aa198")
  (define color-green "859900")
  (define ui-light-navigationBar-background color-base2)
  (define ui-light-navigationBar-foreground color-base01)
  (define ui-light-navigationBar-tint color-violet)
  (define ui-light-tabBar-background color-base2)
  (define ui-light-tabBar-foreground color-base01)
  (define ui-light-tabBar-tint color-violet)
  (define ui-light-groupedTableView-background color-base2)
  (define ui-light-groupedTableViewHeroHeader-foreground color-cyan)
  (define ui-light-tableViewLargeHeader-foreground color-green)
  (define ui-light-tableViewSmallHeader-foreground color-green)
  (define ui-light-cellTitle-foreground color-base01)
  (define ui-light-cellSubtitle-foreground color-base0)
  (define ui-light-cellBackground-background color-base3)
  (define ui-light-overdue-foreground color-red)
  (define ui-light-document-background color-base3)
  (define ui-light-document-foreground color-base01)
  (define ui-light-primaryButton-background color-violet)
  (define ui-light-primaryButton-foreground color-base2)
  (define ui-light-secondaryButton-background color-cyan)
  (define ui-light-secondaryButton-foreground color-base2)
  (define ui-light-button-background color-base2)
  (define ui-light-button-foreground color-base01)
  (define ui-light-tableHeaderButton-background color-base2)
  (define ui-light-tableHeaderButton-foreground color-base00)
  (define ui-light-text-foreground color-base01)
  (define ui-light-separator-foreground color-base3)
  (define ui-light-textField-background color-base3)
  (define ui-light-textField-foreground color-base01)
  (define ui-light-textView-background color-base2)
  (define ui-light-textView-foreground color-base01)
  (define ui-light-datePicker-foreground color-base01)
  (define ui-light-picker-foreground color-base01)
  (define ui-light-searchBar-background color-base2)
  (define ui-light-searchBar-foreground color-base01)
#+END_SRC

If you come up with any good colour schemes post your init.org snippets in the comments below!

See list of all articles