<< Click to Display Table of Contents >> Navigation:  »No topics above this level« Themes

Themes are defined in webui.themes.css file.

 

File contains color for two themes - light (default) and dark. To switch to a dark theme, add dark class to body element.

Default index.html file displays theme toggle icon at left bottom corner.

 

Theme colors are defined using CSS varianbles. Example:

 
  body.dark {
    --Canvas: #404245;
    --CanvasText: #eaecef;
    --SelectedItem: #4f565a;
    --SelectedItemText: #bef;
    --Highlight: #e19557;
    --HighlightText: var(--CanvasText);
    --AccentColor: #3c3f42;
    --AccentColorText: #f2f4f6;
    --ButtonBorder: #505254;
    --ButtonFace: #464a4f;
    --ButtonText: var(--CanvasText);
    --Field: #252830;
    --FieldText: var(--HighlightText);
    --GrayText: #909090;
    --MarkedText: #acdaea;