Themes

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