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#6AA9D8
  • activityBar.background#151515
  • activityBar.foreground#F5F5F5
  • activityBarBadge.background#A3B977
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A3B977
  • badge.foreground#0A0A0A
  • button.background#6AA9D8
  • button.foreground#0A0A0A
  • button.hoverBackground#89CFF5
  • dropdown.background#151515
  • dropdown.border#2C2C2C
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0A
  • editor.findMatchBackground#6AA9D8AA
  • editor.findMatchHighlightBackground#A3B97755
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2C2C2C
  • editor.lineHighlightBorder#6AA9D8
  • editor.selectionBackground#6AA9D880
  • editor.selectionHighlightBackground#A3B97733
  • editorBracketMatch.background#A3B97733
  • editorBracketMatch.border#A3B977
  • editorCursor.foreground#F5F5F5
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#6AA9D8
  • editorIndentGuide.background#2C2C2C
  • editorLineNumber.activeForeground#F5F5F5
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#6AA9D8
  • gitDecoration.conflictingResourceForeground#D58AD5
  • gitDecoration.deletedResourceForeground#D55F5F
  • gitDecoration.modifiedResourceForeground#6AA9D8
  • gitDecoration.untrackedResourceForeground#A3B977
  • input.background#151515
  • input.border#2C2C2C
  • input.foreground#E0E0E0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#6AA9D8
  • list.activeSelectionBackground#2C2C2C
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#2C2C2C
  • list.highlightForeground#6AA9D8
  • list.hoverBackground#2C2C2C80
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#6AA9D8
  • minimapSlider.background#2C2C2C80
  • minimapSlider.hoverBackground#555555
  • panel.background#0A0A0A
  • panel.border#2C2C2C
  • panelTitle.activeBorder#6AA9D8
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#A3B977
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#6AA9D8
  • scrollbarSlider.background#2C2C2C80
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#151515
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#A3B977
  • sideBarTitle.foreground#F5F5F5
  • statusBar.background#151515
  • statusBar.debuggingBackground#6AA9D8
  • statusBar.foreground#F5F5F5
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.hoverBackground#2C2C2C80
  • tab.activeBackground#151515
  • tab.activeBorder#6AA9D8
  • tab.activeForeground#F5F5F5
  • tab.border#2C2C2C
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#A3B977
  • terminal.ansiBlue#6AA9D8
  • terminal.ansiBrightBlue#89CFF5
  • terminal.ansiBrightCyan#A0E0C2
  • terminal.ansiBrightGreen#C5E07A
  • terminal.ansiBrightMagenta#E0A0E9
  • terminal.ansiBrightRed#E08080
  • terminal.ansiBrightYellow#E0C080
  • terminal.ansiCyan#88D8C0
  • terminal.ansiGreen#A3B977
  • terminal.ansiMagenta#D58AD5
  • terminal.ansiRed#D55F5F
  • terminal.ansiYellow#D5B45F
  • terminal.background#0A0A0A
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#A3B977

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A3B977—
keyword, storage.type, storage.modifier#6AA9D8bold
keyword.operator, punctuation.accessor#6AA9D8—
variable, variable.other#E0E0E0—
variable.parameter#88D8C0italic
entity.name.function, support.function#89CFF5—
meta.function-call#88D8C0—
entity.name.class, entity.name.type.class, support.class#D58AD5bold
entity.name.type, support.type#88D8C0—
entity.name.type.interface#E0A0E9italic
constant.numeric#D5B45F—
constant, constant.language, constant.character#D55F5F—
constant.language.boolean#D55F5Fbold
variable.other.property, support.variable.property#E0E0E0—
meta.object-literal.key#6AA9D8—
entity.name.tag, punctuation.definition.tag#D58AD5—
entity.other.attribute-name#A3B977italic
punctuation, meta.brace#E0E0E0—
string.regexp#D5B45F—
constant.character.escape#D55F5F—
meta.decorator, punctuation.decorator#E0A0E9—
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#6AA9D8bold
markup.bold#6AA9D8bold
markup.italic#88D8C0italic
markup.underline.link#A3B977—
markup.inline.raw, markup.fenced_code#88D8C0—
support.type.property-name.json#6AA9D8—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D58AD5—
support.type.property-name.css#A3B977—
support.constant.property-value.css#88D8C0—