Theme

Theme Options (theme)

This setting defines the dashboard’s theme. It only effects the presentation of the dashboard, not the data. Currently, the theme only defines colors. To control how table columns and preview pane display for the views, use the defaults, prSections, and issueSections settings.

The default colors for the theme in the schema are for dark mode terminals. The dashboard actually has different defaults for light mode terminals, but the schema can’t represent a dynamic default. The informational text for each color also enumerates the light mode color.

To define any color for your dashboard, you must define every color. All properties are required properties. Every color for the dashboard’s theme must be a valid hex color, like #a3c or #aa33cc.

To find hex colors to use in your dashboard, visit color-hex.com. You can browse colors, inspect a given color, get alternate shades and tints for a color, derive a color palette, and more.

Metadata

ID

https://dlvhdr.github.io/gh-dash/configuration/theme/schema.json

Type

object

JSON Schema

Definition
{
  "$id": "https://dlvhdr.github.io/gh-dash/configuration/theme/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "default": {
    "colors": {
      "background": {
        "selected": "#808080"
      },
      "border": {
        "faint": "#000000",
        "primary": "#808080",
        "secondary": "#c0c0c0"
      },
      "text": {
        "faint": "#8a8a8a",
        "inverted": "#303030",
        "primary": "#ffffff",
        "secondary": "#c6c6c6",
        "success": "#008000",
        "warning": "#800000"
      }
    },
    "ui": {
      "sectionsShowCount": true,
      "table": {
        "compact": false,
        "showSeparators": true
      }
    }
  },
  "description": "Theme settings for gh-dash\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/",
  "properties": {
    "colors": {
      "description": "Defines text, background, and border colors for the dashboard.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#colors",
      "properties": {
        "background": {
          "description": "Defines the background colors for the dashboard.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#background",
          "properties": {
            "selected": {
              "default": "#808080",
              "description": "Defines the background color for selected items. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#selected",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Selected Background Color",
              "type": "string"
            }
          },
          "required": [
            "selected"
          ],
          "title": "Background Colors",
          "type": "object"
        },
        "border": {
          "description": "Defines the border colors for the dashboard.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#border",
          "properties": {
            "faint": {
              "default": "#000000",
              "description": "Defines the border color between rows in the table. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#faint",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Faint Border Color",
              "type": "string"
            },
            "primary": {
              "default": "#808080",
              "description": "Defines the border color for primary elements. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#primary",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Primary Border Color",
              "type": "string"
            },
            "secondary": {
              "default": "#c0c0c0",
              "description": "Defines the border color for secondary elements. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#secondary",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Secondary Border Color",
              "type": "string"
            }
          },
          "required": [
            "primary",
            "secondary",
            "faint"
          ],
          "title": "Border Colors",
          "type": "object"
        },
        "text": {
          "description": "Defines the foreground (text) colors for the dashboard.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#text",
          "properties": {
            "faint": {
              "default": "#8a8a8a",
              "description": "Specifies the color for informational text. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#faint",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Faint Text Color",
              "type": "string"
            },
            "inverted": {
              "default": "#303030",
              "description": "Specifies the color for text on an inverted background. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#inverted",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Inverted Text Color",
              "type": "string"
            },
            "primary": {
              "default": "#ffffff",
              "description": "Specifies the color for active text. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#primary",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Primary Text Color",
              "type": "string"
            },
            "secondary": {
              "default": "#c6c6c6",
              "description": "Specifies the color for important text. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#secondary",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Secondary Text Color",
              "type": "string"
            },
            "success": {
              "default": "#008000",
              "description": "Specifies the color for success text. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#success",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Success Text Color",
              "type": "string"
            },
            "warning": {
              "default": "#800000",
              "description": "Specifies the color for warning or error text. Must be a valid hex color, like `#a3c` or `#aa33cc`.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#warning",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "title": "Warning Text Color",
              "type": "string"
            }
          },
          "required": [
            "primary",
            "secondary",
            "inverted",
            "faint",
            "warning",
            "success"
          ],
          "title": "Text Colors",
          "type": "object"
        }
      },
      "required": [
        "text",
        "background",
        "border"
      ],
      "title": "Theme Colors",
      "type": "object"
    },
    "ui": {
      "properties": {
        "table": {
          "properties": {
            "compact": {
              "default": false,
              "description": "Whether to show table rows in a compact way or not\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#compact",
              "title": "Compact",
              "type": "boolean"
            },
            "sectionsShowCount": {
              "default": true,
              "description": "Whether the number of results show up next to each section's title in the tab bar.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#sectionsShowCount",
              "title": "Sections Show Count",
              "type": "boolean"
            },
            "showSeparators": {
              "default": true,
              "description": "Whether to show the separators between lines in the prs/issues tables.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#showSeparators",
              "title": "Show Separators",
              "type": "boolean"
            }
          },
          "title": "Table Settings",
          "type": "object"
        }
      },
      "title": "UI Settings",
      "type": "object"
    }
  },
  "required": [
    "colors"
  ],
  "title": "Theme Options",
  "type": "object"
}

<h2 id="theme.default">Default Value</h2>

colors:
  background:
    selected: &#39;#808080&#39;
  border:
    faint: &#39;#000000&#39;
    primary: &#39;#808080&#39;
    secondary: &#39;#c0c0c0&#39;
  text:
    faint: &#39;#8a8a8a&#39;
    inverted: &#39;#303030&#39;
    primary: &#39;#ffffff&#39;
    secondary: &#39;#c6c6c6&#39;
    success: &#39;#008000&#39;
    warning: &#39;#800000&#39;
ui:
  sectionsShowCount: true
  table:
    compact: false
    showSeparators: true

Required Properties

UI Settings (ui)

Metadata

Type

object

JSON Schema

Definition
{
  "properties": {
    "table": {
      "properties": {
        "compact": {
          "default": false,
          "description": "Whether to show table rows in a compact way or not\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#compact",
          "title": "Compact",
          "type": "boolean"
        },
        "sectionsShowCount": {
          "default": true,
          "description": "Whether the number of results show up next to each section's title in the tab bar.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#sectionsShowCount",
          "title": "Sections Show Count",
          "type": "boolean"
        },
        "showSeparators": {
          "default": true,
          "description": "Whether to show the separators between lines in the prs/issues tables.\n\nhttps://dlvhdr.github.io/gh-dash/configuration/theme/#showSeparators",
          "title": "Show Separators",
          "type": "boolean"
        }
      },
      "title": "Table Settings",
      "type": "object"
    }
  },
  "title": "UI Settings",
  "type": "object"
}

Table Settings (table)

Metadata

Type

object

Show Separators (showSeparators)

Whether to show the separators between lines in the prs/issues tables.

Metadata

Type

boolean

Sections Show Count (sectionsShowCount)

Whether the number of results show up next to each section’s title in the tab bar.

Metadata

Type

boolean

Compact (compact)

Whether to show table rows in a compact way or not

Metadata

Type

boolean

Theme Colors (colors)

This setting defines a map of colors for the dashboard’s text, background, and border colors.

The following elements can’t be styled through your configuration and have their colors set as:

ElementColor
Search input terms when inactiveTerminal default (faint)
Search input terms when activeTerminal default
Inactive section names in the tab listTerminal default
The status icon for open issues and PRs#42A0FA
The status icon for closed issues#C38080
The status icon for closed PRs#C38080
The status icon for merged PRs#A371F7
Metadata

Type

object

Required Properties

Border Colors (border)

Defines the border colors for the dashboard.

Metadata

Type

object

Required Properties

Primary Border Color (primary)

This setting determines the color for the following elements in the dashboard UI:

  • The border beneath the section tabs
  • The border around the search input
  • The border between the table and the preview pane
  • The border above the command help info

The default for dark mode terminals is #808080. The default for light mode terminals is #ff00ff.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Secondary Border Color (secondary)

This setting determines the color for the following elements in the dashboard UI:

  • The borders that separate the sections in the tab list

The default for dark mode terminals is #c0c0c0. The default for light mode terminals is #808080.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Faint Border Color (faint)

This setting determines the color for the following elements in the dashboard UI:

  • The border between rows in the table

The default for dark mode terminals is #000000. The default for light mode terminals is #e4e4e4.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Background Colors (background)

Defines the background colors for the dashboard. By default, the background color for all elements in the dashboard UI is the terminal’s background color.

Metadata

Type

object

Required Properties

Selected Background Color (selected)

This setting determines the background color for the following elements in the dashboard UI:

  • The active section’s name in the tab list
  • The active view’s name
  • The active entry in the section’s work item table.

The default for dark mode terminals is #808080. The default for light mode terminals is #c0c0c0.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Text Colors (text)

Defines the foreground (text) colors for the dashboard.

Metadata

Type

object

Required Properties

Primary Text Color (primary)

This setting determines the color of the text for the following elements in the dashboard UI:

  • The active section’s name in the tab list
  • The active view’s name
  • The column headers for the section’s table of work items
  • Open work item entries in the table except when a column’s icon has an alternate color.
  • The keybindings in the help view
  • The title of the work item in the preview pane heading
  • The comments and checks headers in the preview pane.
  • The username for comment authors in the preview pane.

The default for dark mode terminals is #ffffff. The default for light mode terminals is black #000000.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Secondary Text Color (secondary)

This setting determines the color of the text for the following elements in the dashboard UI:

  • The search icon, is:pr, and is:issue components of the search bar
  • The inactive view’s name
  • The work item number in the table entries
  • The work item number and repository name in the preview pane heading
  • The base and target branch in the preview pane for PRs

The default for dark mode terminals is #c6c6c6. The default for light mode terminals is #808080.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Inverted Text Color (inverted)

This setting determines the color of the text for the following elements in the dashboard UI:

  • The work item status in the preview pane
  • Work item labels

The default for dark mode terminals is #303030. The default for light mode terminals is #ffffff.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Faint Text Color (faint)

This setting determines the color of the text for the following elements in the dashboard UI:

  • Closed work item entries in the table
  • The current time, active/total work item count, and fetched work item count beneath the table
  • The help text for the keybinding commands
  • The percentage scrolled at the bottom of the preview pane
  • The date/time information on comments in the preview pane
  • The review status icon when a PR is waiting for a review

The default for dark mode terminals is #8a8a8a. The default for light mode terminals is #c0c0c0.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Warning Text Color (warning)

This setting determines the color of the text for the following elements in the dashboard UI:

  • The icon for the reviewStatus column’s icon when a PR has requested changes
  • The icon for the ci column’s icon when a PR has failing checks
  • The icon for failing checks for PRs in the preview pane
  • Error messages for commands, like when the dashboard fails to fetch work items.

The default for dark mode terminals is #800000. The default for light mode terminals is #800000.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

Success Text Color (success)

This setting determines the color of the text for the following elements in the dashboard UI:

  • The icon for the reviewStatus column’s icon when a PR is approved
  • The icon for the ci column’s icon when a PR’s checks are all passing
  • The icon for passing checks for PRs in the preview pane
  • Success messages for commands, like when the dashboard fetches work items.

The default for dark mode terminals is #008000. The default for light mode terminals is #008000.

Metadata

Type

string

Required regex pattern

^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$