Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#00E5FF
  • activityBar.background#0B0D1F
  • activityBar.foreground#8A92A6
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0B0D1F
  • badge.background#00E5FF
  • badge.foreground#0B0D1F
  • button.background#0B0D1F
  • button.foreground#CED2E0
  • button.hoverBackground#00E5FF33
  • dropdown.background#0B0D1F
  • dropdown.border#3A3A3A
  • dropdown.foreground#CED2E0
  • editor.background#0B0D1F
  • editor.findMatchBackground#00E5FF4D
  • editor.findMatchHighlightBackground#00E5FF1A
  • editor.foreground#CED2E0
  • editor.lineHighlightBackground#00E5FF1A
  • editor.lineHighlightBorder#00E5FF4D
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#00E5FF1A
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B0D1F
  • editorIndentGuide.activeBackground#3A3A3ACC
  • editorIndentGuide.background#3A3A3A4D
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#3A3A3A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#8A92A6
  • gitDecoration.deletedResourceForeground#8A92A6
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#00FFC8
  • input.background#0B0D1F
  • input.border#3A3A3A
  • input.foreground#CED2E0
  • input.placeholderForeground#8A92A6
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#00E5FF33
  • list.activeSelectionForeground#CED2E0
  • list.focusBackground#00E5FF33
  • list.highlightForeground#00E5FF
  • list.hoverBackground#00E5FF1A
  • minimap.background#0B0D1F
  • minimapSlider.activeBackground#00E5FF4D
  • minimapSlider.background#00E5FF1A
  • minimapSlider.hoverBackground#00E5FF33
  • panel.background#0B0D1F
  • panel.border#3A3A3A
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#8A92A6
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#3A3A3ACC
  • scrollbarSlider.background#3A3A3A4D
  • scrollbarSlider.hoverBackground#3A3A3A80
  • sideBar.background#0B0D1F
  • sideBar.foreground#CED2E0
  • sideBarSectionHeader.background#0B0D1F
  • sideBarSectionHeader.foreground#8A92A6
  • sideBarTitle.foreground#8A92A6
  • statusBar.background#0B0D1F
  • statusBar.debuggingBackground#00E5FF
  • statusBar.foreground#CED2E0
  • statusBar.noFolderBackground#0B0D1F
  • statusBarItem.hoverBackground#00E5FF20
  • tab.activeBackground#0B0D1F
  • tab.activeBorder#00E5FF
  • tab.activeForeground#CED2E0
  • tab.border#0B0D1F
  • tab.inactiveBackground#0B0D1F
  • tab.inactiveForeground#8A92A6
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#00FFC8
  • terminal.ansiBrightGreen#00FFC8
  • terminal.ansiBrightMagenta#8A92A6
  • terminal.ansiBrightRed#8A92A6
  • terminal.ansiBrightYellow#8A92A6
  • terminal.ansiCyan#00FFC8
  • terminal.ansiGreen#00FFC8
  • terminal.ansiMagenta#8A92A6
  • terminal.ansiRed#8A92A6
  • terminal.ansiYellow#8A92A6
  • terminal.background#0B0D1F
  • terminal.foreground#CED2E0
  • titleBar.activeBackground#0B0D1F
  • titleBar.activeForeground#CED2E0
  • titleBar.inactiveBackground#0B0D1F
  • titleBar.inactiveForeground#8A92A6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#333333italic
string, string.quoted, string.template#00FFAA—
keyword, storage.type, storage.modifier#00A8FFbold
keyword.operator, punctuation.accessor#00A8FF—
variable, variable.other#E0E0E0—
variable.parameter#A0A0A0italic
entity.name.function, support.function#00A8FF—
meta.function-call#E0E0E0—
entity.name.class, entity.name.type.class, support.class#00A8FFbold
entity.name.type, support.type#00A8FF—
entity.name.type.interface#00FFAAitalic
constant.numeric#00FFAA—
constant, constant.language, constant.character#00FFAA—
constant.language.boolean#00FFAAbold
variable.other.property, support.variable.property#E0E0E0—
meta.object-literal.key#00A8FF—
entity.name.tag, punctuation.definition.tag#00A8FF—
entity.other.attribute-name#00FFAAitalic
punctuation, meta.brace#555555—
string.regexp#00FFAA—
constant.character.escape#00FFAA—
meta.decorator, punctuation.decorator#00A8FF—
invalid, invalid.illegal#555555strikethrough
markup.heading, entity.name.section#00A8FFbold
markup.bold#00FFAAbold
markup.italic#00FFAAitalic
markup.underline.link#00A8FF—
markup.inline.raw, markup.fenced_code#00FFAA—
support.type.property-name.json#00A8FF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00FFAA—
support.type.property-name.css#00A8FF—
support.constant.property-value.css#00FFAA—