Skip to content
This repository has been archived by the owner on Oct 22, 2021. It is now read-only.
Gaby edited this page Apr 29, 2019 · 11 revisions

Themes are .json files that sets the UI's fonts and colors. You can quickly switch themes by navigating to the userData/themes folder and clicking/tapping a theme file on the filesystem display, but you will need to edit your settings file to make any change permanent.

Included themes

As of this writing there are 5 themes included in eDEX (see this directory for more up-to-date information). They are mirrored in the userData/themes folder. If you want to create your own theme, you should save it as a new file instead of overwriting an included theme, otherwise it will get removed the next time you launch eDEX.

Theme names

Themes are identified by their filename, without the .json extension.

A "valid" name is any provided themes' name, and/or the name of any user-provided theme you might have copied in the userData/themes folder.

Provided themes' names might or might not be references to science-fiction movies.

Themes structure


colors
r Red value for the main color.
g Green value for the main color.
b Blue value for the main color.
black Fallback all-black color. You should set this to white for an inverted (bright) theme.
light_black Background color.
grey Color used for the background dots effect.

cssvars
font_main Main font.*
font_main_light Lighter font used for subtitles.*

terminal
fontFamily (Monospace) font used for the terminal.*
fontSize Terminal font size in pixels. Default to 15.
fontWeight Font weight, defined using CSS values. Default to normal.
fontWeightBold Font weight for text signaled as bold. Setting this to the same value as fontWeight will disable bold text in the terminal.
letterSpacing Additional space between letters in pixels. Default to 0.
lineHeight Line height multiplier. Default to 1.
cursorStyle One of underline, block, bar.
cursorBlink (Boolean) Whether the cursor should blink or not.
foreground Color for regular terminal text.**
background Terminal background. If set to a transparent value you must set allowTransparency to true.
cursor Color of the cursor.
cursorAccent Accent color for the cursor.
selection Color for selected text. Using a semi-transparent rgba value is recommended.
allowTransparency (boolean) Whether to allow the background to be (semi-)transparent.

globe
base Base color for the continents.
marker Color for the position marker.
pin Color for the pins on the globe representing the current location and the locations of remote connections.
satellite Color for satellites orbiting the globe.

*Please see the Fonts page for more information about available fonts.

**Please see this comment if you're interested in more in-depth customization of the terminal color scheme. You can also use terminal color filters.

injectCSS: hack away

In addition to the values listed above, a theme file can also provide an injectCSS string - this is where the fun begins.

As the name suggest, this string will be embedded in a <style> element by the theme loader script. Note that any < character will be converted to an html code to avoid HTML/JS injection.

This gives you total control over the styling of eDEX and allows for advanced themes. Here are some suggestions if you want to start experimenting:

  • Change the background to something more funky than a dots grid - perhaps an embedded image?
  • Change the page's layout (perhaps put the terminal on the right edge of the screen so it's aligned with the keyboard?)
  • Scale the keyboard to make it the perfect size for using eDEX on the tactile screen of your choice
Clone this wiki locally