Themes

Currently our windows and linux clients are themable. The clients themselves will report where they are reading their themes from in settings -> appearance.

You can add your own theme simply by placing it in the themes directory, the name of the json file will correspond to the theme name. Creating a theme involves selecting 18 colors that our app can draw from based on context.

Themes are new to Lockbook, and they may change schema in the future.

This is our default theme:

{
  "dim": {
    "black": "#101010",
    "grey": "#1D1D1D",
    "red": "#DF2040",
    "green": "#00B371",
    "yellow": "#E6AC00",
    "blue": "#207FDF",
    "magenta": "#7855AA",
    "cyan": "#00BBCC",
    "white": "#FFFFFF"
  },
  "light_prefs": {
    "primary": "blue",
    "secondary": "green",
    "tertiary": "magenta",
    "quaternary": "cyan"
  },
  "bright": {
    "black": "#101010",
    "grey": "#F6F6F6",
    "red": "#FF6680",
    "green": "#67E4B6",
    "yellow": "#FFDB70",
    "blue": "#66B2FF",
    "magenta": "#AC8CD9",
    "cyan": "#6EECF7",
    "white": "#FFFFFF"
  },
  "dark_prefs": {
    "primary": "blue",
    "secondary": "green",
    "tertiary": "magenta",
    "quaternary": "cyan"
  }
}

For reference this is the color palette visualized:

Color	Dim	Bright
black	`#101010`	`#101010`
grey	`#1D1D1D`	`#F6F6F6`
red	`#DF2040`	`#FF6680`
green	`#00B371`	`#67E4B6`
yellow	`#E6AC00`	`#FFDB70`
blue	`#207FDF`	`#66B2FF`
magenta	`#7855AA`	`#AC8CD9`
cyan	`#00BBCC`	`#6EECF7`
white	`#FFFFFF`	`#FFFFFF`

Some hints for designing good themes:

In dark mode we draw from the dim palettes for backgrounds, and bright for foregrounds.
In light mode we do the opposite (brights for backgrounds, dim for foreground).
In dark mode we use black as the tab background, and white for the text.
In light mode we use white for the tab background and white for the text.
We always use grey for the sidebar color (but which grey depends on light/dark).
We interpolate between grey and white or grey and black (depending on light/dark) to extract a handful more neutral colors.
Some ideas are hardcoded to colors, for instance errors generally show up red, and warnings yellow. Other ideas we allow the user to express a preference. For example: the file tree, text selection, and syntax highlighting select colors based on what the user defines as their accent color preferences.

Keyboard shortcuts

Lockbook

Themes