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#5D6963italic
comment punctuation, comment.block punctuation, comment string.quoted, comment punctuation.definition, comment punctuation.definition.string#5D6963—
string#E5C07B—
constant.numeric#C3E88D—
constant.language#FF9CAC—
support.function.builtin, support.function.math, support.function.dom, support.function.console#7DCFFFitalic
constant.language#FF9CACitalic
constant.character, constant.other#BB80FF—
variable#C8DFFF—
keyword#29BFFF—
support.class.component, entity.name.tag.js.jsx, entity.name.tag.tsx#F07178italic
keyword.control, keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.control.import, keyword.control.export, keyword.control.return, keyword.control.try#29BFFFitalic
keyword.operator.expression, keyword.operator.new, keyword.operator.logical, keyword.operator.typeof, keyword.operator.instanceof#29BFFFitalic
storage#29BFFF—
storage.type#29BFFFitalic
entity.name.class#7DCFFF—
entity.other.inherited-class#7DCFFFitalic
entity.name.function#FF9D8F—
variable.parameter#E4AA7Aitalic
entity.name.tag#F07178—
entity.other.attribute-name#BBD99E—
support.function#7DCFFF—
support.constant#BB80FF—
support.type, support.class#7DCFFFitalic
support.other.variable#F07178—
invalid#D4D7D6—
invalid.deprecated#D4D7D6—
support.type.property-name.json#F07178—
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.object.property, variable.other.property, meta.object-literal.key#C8DFFFitalic
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#FF9CACitalic
markup.heading#89DDFF—
markup.bold#F07178bold
markup.italic#BBD99Eitalic
markup.underline.link, string.other.link#7DCFFF—
meta.function.decorator.python, meta.decorator.python#BB80FF—
meta.selectionset.graphql variable#E5C07B—