Styling

The appearance of a DomTerm window is controlled by CSS stylesheets. You can change the stylesheets using the dt-util command. If you use qtdomterm, see its documentation.

Reverse video (dark vs light)

By default DomTerm uses uses dark-colored (black) foreground (text) on a light-colored (off-white) background. Reverse video switches these, by using alight-colored text on a dark background.

You can enable reverse-video mode using the dt-util command:

dt-util reverse-video on

Enabling reverse-video does not change stylesheet rules, but instead sets the reverse-video attribute on the top-level domterm element. This is used to select differe stylesheet rules for reverse-video. For example to change the background color input input lines to a dark brown do this:

div.domterm[reverse-video] span[std="input"] { background-color: #808200 }

“Reverse-video mode” is any style where the background is darker than the foreground. You can tweak individual style elements to achieve such a style, but its better to first explicitly set reverse-video mode (perhaps using the above dt-util command), because that selects a consistent whole.

Color variables

DomTerm works best on a browser that supports CSS Variables, which include Firefox, Google Chrome, and (soon) Edge. The following variables defined the main colors.

--main-light-color

A light color used for the default background in normal mode, or used for default foreground (text) in reverse-video mode.

--main-dark-color

A dark color used for the default foreground (text) in normal mode, or used for default background in reverse-video mode.

--background-color

The color currently used for the main background. Defaults to --main-light-color normally, or --main-dark-color in reverse-video mode (or after the SGR reverse-videa escape-sequence).

--foreground-color

The color currently used for the main background (text). Defaults to --main-dark-color normally, or --main-light-color in reverse-video mode (or after the SGR reverse-videa escape-sequence).

A common desire is to change the default background color. You can do any one of:

div.domterm { --main-light-color: azure } /* recommended method */
div.domterm { --background-color: azure }
div.domterm { background-color: azure }

Using --main-light-color is recommended because it integrates better with the rest of the default stylesheets.

If you want to change to a dark background color, it is recommended to you enable reverse-video mode instead (or in addition).

The following color variables define the standard 16 “ANSI colors”: --dt-black, --dt-red, --dt-green, --dt-yellow, --dt-blue, --dt-magenta, --dt-cyan, --dt-lightgray, --dt-darkgray, --dt-lightred, --dt-lightgreen, --dt-lightyellow, --dt-lightblue, --dt-lightmagenta, --dt-lightcyan, --dt-white. The default definitions mostly match xterm. For example cyan is #00CDCD. It you can to change it to the standard VGA color, you can add an override rule:

div.domterm {--dt-cyan: #00AAAA}

End-of-file background

DomTerm indicates the bottom area past the written data with pale “zebra stripes”. If you want to disable this, do:

div.domterm-spacer {background: none }

The spacer stripes alternatate between transparent and the value of --spacer-color. You can change it thus:

div.domterm-spacer {--spacer-color: LemonChiffon}

Background image

Setting a background image:

/* Note: browser security may disallow file: URLs. */
div.domterm {
  background-image: url('file:/usr/share/backgrounds/gnome/Mirror.jpg');
  opacity: 0.4 }
div.domterm-spacer {background: none } /* optional but recommended */

You can reduce the opacity to make the text more visible.

Note browsers may restrict the use of file: URLs because of the same-origin policy. Work-arounds are being considered; please contact the maintainer if this is a feature you want.