lens/docs/extensions/capabilities/color-reference.md

Theme Color Reference

You can use theme-based CSS Variables to style an extension according to the active theme.

Base Colours

• --blue: blue colour.
• --magenta: magenta colour.
• --golden: gold/yellow colour.
• --halfGray: grey with some opacity applied.
• --primary: Lens brand (blue) colour.
• --colorSuccess: successful operations colour.
• --colorOk: successful operations (bright version) colour.
• --colorInfo: informational, in-progress colour.
• --colorError: critical error colour.
• --colorSoftError: error colour.
• --colorWarning: warning colour.
• --colorVague: soft grey colour for notices, hints etc.
• --colorTerminated: terminated, closed, stale colour.
• --boxShadow: semi-transparent box-shadow colour.

Text Colours

• --textColorPrimary: foreground text colour.
• --textColorSecondary: foreground text colour for different paragraphs, parts of text.
• --textColorAccent: foreground text colour to highlight its parts.

Border Colours

• --borderColor: border colour.
• --borderFaintColor: fainted (lighter or darker, which depends on the theme) border colour.

Layout Colours

• --mainBackground: main background colour for the app.
• --contentColor: background colour for panels contains some data.
• --layoutBackground: background colour for layout parts.
• --layoutTabsBackground: background colour for general tabs.
• --layoutTabsActiveColor: foreground colour for general tabs.
• --layoutTabsLineColor: background colour for lines under general tabs.

Sidebar Colours

• --sidebarLogoBackground: background colour behind logo in sidebar.
• --sidebarActiveColor: foreground colour for active menu items in sidebar.
• --sidebarSubmenuActiveColor: foreground colour for active submenu items in sidebar.
• --sidebarBackground: background colour for sidebar.

Button Colours

• --buttonPrimaryBackground: button background colour for primary actions.
• --buttonDefaultBackground: default button background colour.
• --buttonAccentBackground: accent button background colour.
• --buttonDisabledBackground: disabled button background colour.

Table Colours

• --tableBgcStripe: background colour for odd rows in table.
• --tableBgcSelected: background colour for selected row in table.
• --tableHeaderBackground: background colour for table header.
• --tableHeaderBorderWidth: border width under table header.
• --tableHeaderBorderColor: border colour for line under table header.
• --tableHeaderColor: foreground colour for table header.
• --tableSelectedRowColor: foreground colour for selected row in table.

Dock Colours

• --dockHeadBackground: background colour for dock's header.
• --dockInfoBackground: background colour for dock's info panel.
• --dockInfoBorderColor: border colour for dock's info panel.

Helm Chart Colours

• --helmLogoBackground: background colour for chart logo.
• --helmImgBackground: background colour for chart image.
• --helmStableRepo: background colour for stable repo.
• --helmIncubatorRepo: background colour for incubator repo.
• --helmDescriptionHr: Helm chart description separator line colour.
• --helmDescriptionBlockqouteColor: Helm chart description block-quote colour.
• --helmDescriptionBlockqouteBorder: Helm chart description block-quote border colour.
• --helmDescriptionBlockquoteBackground: Helm chart description block-quote background colour.
• --helmDescriptionHeaders: Helm chart description headers colour.
• --helmDescriptionH6: Helm chart description header foreground colour.
• --helmDescriptionTdBorder: Helm chart description table cell border colour.
• --helmDescriptionTrBackground: Helm chart description table row background colour.
• --helmDescriptionCodeBackground: Helm chart description code background colour.
• --helmDescriptionPreBackground: Helm chart description pre background colour.
• --helmDescriptionPreColor: Helm chart description pre foreground colour.

Terminal Colours

• --terminalBackground: Terminal background colour.
• --terminalForeground: Terminal foreground colour.
• --terminalCursor: Terminal cursor colour.
• --terminalCursorAccent: Terminal cursor accent colour.
• --terminalSelection: Terminal selection background colour.
• --terminalBlack: Terminal black colour.
• --terminalRed: Terminal red colour.
• --terminalGreen: Terminal green colour.
• --terminalYellow: Terminal yellow colour.
• --terminalBlue: Terminal blue colour.
• --terminalMagenta: Terminal magenta colour.
• --terminalCyan: Terminal cyan colour.
• --terminalWhite: Terminal white colour.
• --terminalBrightBlack: Terminal bright black colour.
• --terminalBrightRed: Terminal bright red colour.
• --terminalBrightGreen: Terminal bright green colour.
• --terminalBrightYellow: Terminal bright yellow colour.
• --terminalBrightBlue: Terminal bright blue colour.
• --terminalBrightMagenta: Terminal bright magenta colour.
• --terminalBrightCyan: Terminal bright cyan colour.
• --terminalBrightWhite: Terminal bright white colour.

Dialog Colours

• --dialogHeaderBackground: background colour for dialog header.
• --dialogFooterBackground: background colour for dialog footer.

Detail Panel (Drawer) Colours

• --drawerTitleText: drawer title foreground colour.
• --drawerSubtitleBackground: drawer subtitle foreground colour.
• --drawerItemNameColor: foreground colour for item name in drawer.
• --drawerItemValueColor: foreground colour for item value in drawer.

Misc Colours

• --logsBackground: background colour for pod logs.
• --clusterMenuBackground: background colour for cluster menu.
• --clusterMenuBorderColor: border colour for cluster menu.
• --clusterSettingsBackground: background colour for cluster settings.
• --addClusterIconColor: add cluster button background colour.
• --iconActiveColor: active cluster icon foreground colour.
• --iconActiveBackground: active cluster icon background colour.
• --filterAreaBackground: page filter area (where selected namespaces are lister) background colour.
• --chartStripesColor: bar chart zebra stripes background colour.
• --chartCapacityColor: background colour for capacity values in bar charts.
• --pieChartDefaultColor: default background colour for pie chart values.
• --selectOptionHoveredColor: foreground colour for selected element in dropdown list.
• --lineProgressBackground: background colour for progress line.
• --radioActiveBackground: background colour for active radio buttons.
• --menuActiveBackground: background colour for active menu items.

In most cases you would only need base, text and some of the layout colours.