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.activeBackground#2D322D
  • activityBar.activeBorder#FF5D62
  • activityBar.background#121622
  • activityBar.border#2D322D
  • activityBar.foreground#A0A8B7
  • activityBarBadge.background#89DDFF
  • activityBarBadge.foreground#1A1F1A
  • editor.background#1A1E23
  • editor.findMatchBackground#4E5E5399
  • editor.findMatchHighlightBackground#4E5E5366
  • editor.foreground#D4D9E4
  • editor.lineHighlightBackground#2A303A
  • editor.selectionBackground#303540
  • editor.selectionHighlightBackground#37423c
  • editor.wordHighlightBackground#3D454080
  • editor.wordHighlightStrongBackground#4E5E5380
  • editorBracketMatch.background#3D454080
  • editorBracketMatch.border#5D6963
  • editorCursor.foreground#FFCC66
  • editorGroup.border#2D322D
  • editorGroup.dropBackground#3D454080
  • editorGroupHeader.noTabsBackground#1A1F1A
  • editorGroupHeader.tabsBackground#1A1F1A
  • editorGroupHeader.tabsBorder#2D322D
  • editorIndentGuide.activeBackground#3D4540
  • editorIndentGuide.background#2D322D
  • editorLineNumber.activeForeground#BBD99E
  • editorLineNumber.foreground#5D6963
  • editorRuler.foreground#3D4540
  • editorWhitespace.foreground#3D4540
  • gitDecoration.conflictingResourceForeground#BB80FF
  • gitDecoration.deletedResourceForeground#F07178
  • gitDecoration.ignoredResourceForeground#5D6963
  • gitDecoration.modifiedResourceForeground#FFCC66
  • gitDecoration.untrackedResourceForeground#BBD99E
  • list.activeSelectionBackground#32393680
  • list.activeSelectionForeground#D4D7D6
  • list.focusBackground#32393680
  • list.highlightForeground#89DDFF
  • list.hoverBackground#32393680
  • list.inactiveSelectionBackground#2D322D
  • panel.background#1A1F1A
  • panel.border#2D322D
  • panelTitle.activeForeground#D4D7D6
  • panelTitle.inactiveForeground#8B9891
  • scrollbarSlider.activeBackground#5D696380
  • scrollbarSlider.background#3D454080
  • scrollbarSlider.hoverBackground#4E5E5380
  • sideBar.background#151A20
  • sideBar.border#2D322D
  • sideBar.foreground#A0A8B7
  • sideBarSectionHeader.background#1A1F1A
  • sideBarSectionHeader.border#2D322D
  • sideBarSectionHeader.foreground#8B9891
  • sideBarTitle.foreground#D4D7D6
  • statusBar.background#151A20
  • statusBar.border#2D322D
  • statusBar.debuggingBackground#FF9D8F
  • statusBar.debuggingForeground#1A1F1A
  • statusBar.foreground#A0A8B7
  • statusBar.noFolderBackground#1A1F1A
  • statusBarItem.activeBackground#2D322D
  • statusBarItem.hoverBackground#2D322D
  • statusBarItem.prominentBackground#89DDFF33
  • statusBarItem.prominentHoverBackground#89DDFF66
  • tab.activeBackground#1E2330
  • tab.activeBorder#89DDFF
  • tab.activeForeground#D4D9E4
  • tab.border#1A1F1A
  • tab.hoverBackground#2D322D
  • tab.inactiveBackground#151A20
  • tab.inactiveForeground#8B9891
  • tab.unfocusedActiveBorder#5D6963
  • tab.unfocusedActiveForeground#8B9891
  • tab.unfocusedInactiveForeground#8B9891
  • terminal.ansiBlack#1A1F1A
  • terminal.ansiBlue#89DDFF
  • terminal.ansiBrightBlack#5D6963
  • terminal.ansiBrightBlue#7DCFFF
  • terminal.ansiBrightCyan#7DCFFF
  • terminal.ansiBrightGreen#BBD99E
  • terminal.ansiBrightMagenta#BB80FF
  • terminal.ansiBrightRed#F07178
  • terminal.ansiBrightWhite#D4D7D6
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#BBD99E
  • terminal.ansiMagenta#BB80FF
  • terminal.ansiRed#F07178
  • terminal.ansiWhite#D4D7D6
  • terminal.ansiYellow#E5C07B
  • terminal.background#151A20
  • terminal.foreground#D4D9E4
  • titleBar.activeBackground#1A1F1A
  • titleBar.activeForeground#8B9891
  • titleBar.border#2D322D
  • titleBar.inactiveBackground#1A1F1A
  • titleBar.inactiveForeground#5D6963

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#D4D7D6—
comment#5D6963
comment punctuation, comment.block punctuation, comment string.quoted, comment punctuation.definition, comment punctuation.definition.string#5D6963—
string#E5C07B—
constant.numeric#C3E88D—
constant.language#FF9CAC—
constant.character, constant.other#BB80FF—
variable#C8DFFF—
keyword#29BFFF—
storage#29BFFF—
storage.type#29BFFF
entity.name.class#7DCFFF—
entity.other.inherited-class#7DCFFFunderline
entity.name.function#FF9D8F—
variable.parameter#E4AA7A
entity.name.tag#F07178—
entity.other.attribute-name#BBD99E—
support.function#7DCFFF—
support.constant#BB80FF—
support.type, support.class#7DCFFF
support.other.variable#F07178—
invalid#D4D7D6—
invalid.deprecated#D4D7D6—
support.type.property-name.json#7DCFFF—
string.quoted.double.json, constant.numeric.json, constant.language.json#E5C07B—
entity.name.import, entity.name.package#E5C07B—
entity.name#7DCFFF—
meta.object-literal.key, meta.object.member, meta.structure.dictionary.key#F07178—
variable.other.constant, variable.other.object.property, variable.other.property#C8DFFF—
meta.type.parameters.ts, meta.type.parameters.tsx, meta.type.annotation#7DCFFF—
meta.object-literal.key, entity.name.function.method#F07178—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#E5C07B—
string.regexp, constant.regexp#89DDFF—
support.type.object.console, support.function.console#F07178—
storage.type.function.arrow.ts, storage.type.function.arrow.js#FF5D62—
string.template punctuation.definition.string#89DDFF—
variable.language.this#FF9CAC
markup.heading#89DDFF—
markup.bold#F07178bold
markup.italic#BBD99E
markup.underline.link, string.other.link#7DCFFF—
meta.function.decorator.python, meta.decorator.python#BB80FF—
meta.selectionset.graphql variable#E5C07B—