Styling the GUI and web pages

&dactyl.appName; allows you to apply custom CSS styling to the web pages you view as well as to the browser itself. Although it is possible to style any user interface element via the :style command, most &dactyl.appName; elements can be styled more easily by means of the more specialized :highlight command.

E185 :colo :colorscheme :colorscheme name

Load a color scheme. name is found by searching the runtimepath for the first file matching colors/name.&dactyl.fileExt;.

The ColorScheme autocommand is triggered after the color scheme has been sourced.

:hi :highlight :highlight! groupselector :highlight! -append groupselector css

Highlight group with css. css is one or more semicolon-separated CSS declarations (E.g. color: blue; background-color: red). selector, if provided, may be any valid CSS selector (such as :hover or [href]), and will restrict the highlighting to matching elements.

Valid groups include:

Bell
&dactyl.appName;'s visual bell
Boolean
A JavaScript Boolean object
CmdLine
The command line
CmdOutput
The output of commands executed by :run
CompDesc
The description column of the completion list
CompGroup
The top-level container for a group of completion results
CompIcon
The favicon of a completion row
CompItem
A row of completion list
CompItem[selected]
    A selected row of completion list
CompLess::after
The character of indicator shown when completions may be scrolled up
CompLess
The indicator shown when completions may be scrolled up
CompMore::after
The character of indicator shown when completions may be scrolled down
CompMore
The indicator shown when completions may be scrolled down
CompMsg
The message which may appear at the top of a group of completion results
CompResult
The result column of the completion list
CompTitle
Completion row titles
Disabled
Text indicating disabled status, such as of an extension or style group
Enabled
Text indicating enabled status, such as of an extension or style group
ErrorMsg
Error messages
Filter
The matching text in a completion list
FrameIndicator
The indicator shown when a new frame is selected
Function
A JavaScript Function object
Gradient
The gradient dividers used in the completion lists
GradientLeft
The color to the left of the Gradient
GradientRight
The color to the right of the Gradient
Hint
A hint indicator. See :help hints
HintActive
The hint element of link which will be followed by
HintElem
The hintable element
HintImage
The indicator which floats above hinted images
Indicator
The # and % in the :buffers list
InfoMsg
Information messages
Key
Generally a keyword used in syntax highlighting.
Keyword
A bookmark keyword for a URL
LineNr
The line number of an error
Message
A message as displayed in :messages
ModeMsg
The mode indicator in the command line
MoreMsg
The indicator that there is more text to view
NonText
The ~ indicators which mark blank lines in the completion list
Normal
Normal text in the command line
Null
A JavaScript Null object
Number
A JavaScript Number object
Object
A JavaScript Object
Preview
The completion preview displayed in the command line
Question
A prompt for a decision
Search
Highlighted search results in a web page
StatusLine
The status bar
StatusLineBroken
The status bar for a broken web page
StatusLineExtended
    The status bar for a secure web page with an Extended Validation (EV) certificate
StatusLineSecure
The status bar for a secure web page
String
A JavaScript String object
TabClose
The close button of a browser tab
TabIcon
The icon of a browser tab
TabIconNumber
The number of a browser tab, over its icon
TabNumber
The number of a browser tab, next to its icon
TabText
The text of a browser tab
Tag
A bookmark tag for a URL
Title
The title of a listing, including :pageinfo, :jumps
URL
A URL
WarningMsg
A warning message

The help system also has a comprehensive set of styling groups which are not explained here, but many of which are described along with writing-docs.

Every invocation completely replaces the styling of any previous invocation, unless -append (short option: -a) is provided, in which case css is appended to its current value. If css is not provided, any styles beginning with group are listed.

:highlight-clear :highlight clear group

Reset the highlighting for group to its default value. If group is not given, reset all highlighting groups.

:sty :style :style! -name=name -append filter css

Add CSS styles to the browser or to web pages. filter is a comma-separated list of URLs to match. URLs ending with * are matched as prefixes, URLs not containing any : or / characters are matched as domains. css is a full CSS rule set (e.g., body { color: blue; }).

The following options are available:

-append
If provided along with -name, css and filter are appended to its current value. (short name: -a)
-agent
If provided, the style is installed as an Agent sheet, which applies to contents user interface widgets as well as normal elements. (short name -A)
-name=name
If provided, any existing style with the same name is overridden, and the style may later be deleted using name. (short name -n)

If css isn't provided, matching styles are listed.

 :dels :delstyle :delstyle -name=name -index=index filter css

Delete any matching styles. If filter is provided, only matching elements of the filter are disabled. For instance, when run with a filter mozilla.org, an existing style with a filter www.google.com,mozilla.org, will result in a style for www.google.com.

The available options are:

-name
The name provided to :style (short option: -n)
-index
For unnamed styles, the index listed by :style (short option: -i)
 :styleenable :stylee :styenable :stye :styledisable -name=name -index=index filter css

Enable any matching styles. Arguments are the same as for :delstyle

 :styledisable :styled :stydisable :styd :styleenable -name=name -index=index filter css

Disable any matching styles. Arguments are the same as for :delstyle

 :styletoggle :stylet :stytoggle :styt :styletoggle -name=name -index=index filter css

Toggle any matching styles. Arguments are the same as for :delstyle