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.
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.
You can change the font and background colours used in the beorg text editor.
The following variables can be used:
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")
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")
library.org doesn’t define these variables you need to use
define and not
Each variable name starts with
ui- followed by either
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:
Customising the UI in this way is not for the faint hearted and will require some trial and error.
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!
Download now for iPhone and iPad