Next: , Previous: , Up: DomTerm   [Contents]

Styling

The appearance of a DomTerm window is controlled by CSS stylesheets.

You can place stylesheet rules in the settings.ini file. For example:

style.user=
 |div.domterm { background-color: azure }

You can also change the stylesheets using domterm add-style or domterm load-stylesheet sub-commands. For example:

$ domterm add-style "div.domterm { background-color: azure }"

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 a light-colored text on a dark background.

You can enable reverse-video mode using the command:

$ domterm reverse-video on

or in the settings.ini file:

style.dark=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 command), because that selects a consistent whole.

Color variables

DomTerm makes uses of CSS Variables, which is supported by most modern browsers. The following variables define 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}

The mc file browser by default sets the background to blue. You can adjust the shade of blue used like this:

div.domterm {--dt-blue: #4040a0 }

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}

Fonts

The main monospace text font is set by the --monospace-family variable. For example:

div.domterm { --monospace-family: "FreeMono","DejaVu Sans Mono" }

Prompt, input and error output

The std attribute of a <span> element is used to indicate the logical kind of output. The attribute std='prompt' marks a prompt before an input line, while std='prompt' marks the input line itself. (These attribute can be set using escape sequences in the prompt.) You can change the colors used like this:

span[std="prompt"] { background-color: lightgray }
span[std="input"] { color: blue; background-color: inherit }

Note the use of inherit to override the setting in the default stylesheet.

If you want to change the style of the entire input line, you can use the input-line property:

div.input-line { background-color: #FFFFE8 }

An application or library can use escape sequences to distinguish the error output (stderr) from regular output (stdout). (Most programs don’t emit these escape sequences. It is difficult to do this reliably without modifying the program or the tty subsystem.) If so, by default, the text color is red; to turn this off, do:

span[std="error"] { color: inherit }

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.

Text caret (input cursor)

You can change the look of the caret (text input cursor) using the style.caret setting in settings.ini.

style.caret = value

The value can be one of these (unquoted) words: block, blinking-block, underline, blinking-underline, bar, or blinking-bar. If can also be native, which uses the native text caret (a vertical bar, typically), but that is not recommended as it interacts awkwardly with the selection.

The default is blinking-block. Note that blinking-block, blinking-underline, and blinking-bar only blink 20 times after each change or focus. To change the number of blinks set the CSS variable --caret-blink-count. For example to blink indefinitely, add this to settings.ini:

style.user= div.domterm { --caret-blink-count: infinite }

You can also change the caret style with an escape sequence (DECSCUSR). For example this shell command:

echo -en "\e[3 q"

changes the style to blinking-underline. Instead of 3, you can use 0 (default - reset to settings.ini value, if any), 1 (blinking-block), 2 (steady block), 3 (blinking-underline), 4 (steady underline), 5 (blinking-bar), 6 (steady bar), or 7 (native),

Example: A “solarized” theme

The Solarized colorscheme aims for muted balanced colors for both light and dark styles. Put the following in your Settings for a solarized dark look.

style.dark=yes
style.user=
 | div.domterm { --solar-base03: #002b36; --solar-base02: #073642;
 |   --solar-base01: #586e75; --solar-base00: #657b83;
 |   --solar-base0: #839496; --solar-base1: #93a1a1;
 |   --solar-base2: #eee8d5; --solar-base3: #fdf6e3;
 |   --solar-yellow: #b58900; --solar-orange:  #cb4b16; --solar-red: #dc322f;
 |   --solar-magenta: #d33682; --solar-violet: #6c71c4;
 |   --solar-blue: #268bd2; --solar-cyan: #2aa198; --solar-green: #859900 }
 | div.domterm {  --main-light-color: var(--solar-base3);
 |   --main-dark-color: var(--solar-base03) }
 | div.domterm[reverse-video] { --background-color: var(--solar-base03);
 |   --foreground-color: var(--solar-base0) }
 | div.domterm span[std="input"] { background-color: var(--solar-base2) }
 | div.domterm[reverse-video] span[std="input"] {
 |   background-color: var(--solar-base02) }
 | div.domterm-spacer {background: none }
 | div.domterm div.input-line, div.domterm[reverse-video] div.input-line {
 |   background-color: var(--background-color); }

The above is merely a suggested start. The last few lines are optional. You might want to tweak prompt and error colors. You could also change the “standard” colors, for example:

 | div.domterm {--dt-blue: var(--solar-blue) }

For a light solarized look, change the style.dark=yes to style.dark=no.

Session-specific styles

Each “session” (terminal window) has a session number and an optional settable session name. See Names and titles for the details. The session number sets the session-number attribute in the top-level <div class="domterm"> element, while the session name sets the session-name attribute.

You can use these to set different styles for different terminal windows. For example:

div.domterm { background-color: #FFE }
div.domterm[session-number="1"] { background-color: #FEE }
div.domterm[session-name="compile"] { background-color: #EEF }
div.input-line { background-color: inherit }

Next: , Previous: , Up: DomTerm   [Contents]