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.background#FDF6E3
  • activityBar.border#DDD6C1
  • activityBar.foreground#584c27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • editor.background#FDF6E3
  • editor.foreground#657B83
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editorCursor.foreground#657B83
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#FDF6E3
  • editorGroupHeader.tabsBorder#DDD6C1
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.activeBackground1#081E2580
  • editorIndentGuide.background1#586E7580
  • editorLineNumber.activeForeground#567983
  • editorSuggestWidget.background#EEE8D5
  • editorSuggestWidget.border#EEE8D5
  • editorSuggestWidget.foreground#657B83
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#b494716e
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#d1cbb87a
  • list.activeSelectionForeground#6C6C6C
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#d1cbb87a
  • minimap.selectionHighlight#EEE8D5
  • minimapSlider.activeBackground#99937954
  • minimapSlider.background#99937954
  • minimapSlider.hoverBackground#99937954
  • notebook.cellEditorBackground#F7F0E0
  • panel.border#DDD6C1
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#2AA19899
  • progressBar.background#B58900
  • quickInputList.focusBackground#DFCA8866
  • scrollbar.shadow#d1cbb84b
  • scrollbarSlider.activeBackground#d1cbb84b
  • scrollbarSlider.background#d1cbb84b
  • scrollbarSlider.hoverBackground#d1cbb84b
  • selection.background#878b9180
  • sideBar.background#FDF6E3
  • sideBar.border#DDD6C1
  • sideBarSectionHeader.background#FDF6E3
  • sideBarSectionHeader.border#DDD6C1
  • sideBarTitle.foreground#586E75
  • statusBar.background#FDF6E3
  • statusBar.border#DDD6C1
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.focusBorder#DDD6C1
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • statusBarItem.remoteBackground#AC9D57
  • tab.activeBackground#dbd0b256
  • tab.activeBorder#DDD6C1
  • tab.activeForeground#586E75
  • tab.activeModifiedBorder#cb4b16
  • tab.border#DDD6C1
  • tab.inactiveBackground#FDF6E3
  • tab.inactiveForeground#586E75
  • tab.lastPinnedBorder#FDF6E3
  • terminal.`ansiBrightWhite`#FDF6E3
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#FDF6E3
  • titleBar.activeBackground#FDF6E3
  • titleBar.border#DDD6C1
  • titleBar.inactiveBackground#FDF6E3
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#3e4b53—
console.error#ca0000ff—
console.input#00ae50ff—
console.prompt#b651bcffbold
console.warning#cd6600ff—
console.debug#5d6666ff—
hyperlink#0d1171ff—
markup.deleted#ffffffff—
markup.inserted#000000ff—
markup.changed#f8f8f8ff—
markup.underline—underline
markup.bold—bold
markup.italic—italic
property#934b3cff—
comment#666
constant#864bff—
constant.other.placeholder.py#7b0000ff—
entity#cc3611ff—
entity.name.type#6c65b0ff—
entity.other.inherited-class#000000ff—
entity.name.function#db7800ff—
entity.name.function.argument#a28d00ff—
entity.name.tag#2265adbold
entity.other.attribute-name#cb2d01ff—
keyword#577909bold
keyword.control#d0104cbold
storage#DC1376bold
token.storage.js,token.storage.ts#DC1376bold
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js#577909bold
meta.selector#577909bold
string | punctuation.definition.string#14909D—
string, entity.other.inherited-class#14909D—
Number#9f1bf1—
#9f1bf1—
support#3c7a03ff—
variable#20814D—
variable.parameter#ca7300—
keyword.operator#0f95b0
keyword.operator.logical.js,keyword.operator.logical.ts#ca004b—
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts#2598da—
invalid.deprecated#cb2d01
invalid.illegal#333333ff—
string source#080808ff—
String constant#696969ff—
string variable#234a97ff—
string.regexp#cf5628ff—
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#cf5628ff—
string.regexp constant.character.escape#811f24ff—
text source#080808ff—
function name#ae7a00ff—
function argument#99a600ff—
support.function#ca004bff—
support.constant#c44f00ff—
support.variable#295502ff—
entity.name.type.namespace#b18534—
support.class, entity.name.type.class#b18534—
entity.name.class.identifier.namespace.type#b18534—
entity.name.class#4090f3—
entity.name.type#b18534—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#cf8f3bbold
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#cf8f3bbold
support.type.vendored.property-name.css#56b6c2—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#499504—
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts#b18534—
variable.other.readwrite.js,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts#126bb2—
support.constant.json.js,support.constant.json.ts#cf8f3b—
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#577909
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#577909
support.type.object.console.js,support.type.object.console.ts#499504—
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts#1D79EC—
keyword.operator.js,keyword.operator.ts#56b6c2—
support.type.object.dom.js,support.type.object.dom.ts#56b6c2—
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts,#499504—
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#41aeb6—
markup.list#7d451cff—
markup.heading | markup.heading entity.name#142b5aff—
markup.quote#0b6125ff—
Markup.italic#080808ff—
markup.bold#080808ffbold
markup.underline#080808ffunderline
markup.link#234a97ffunderline
markup.raw#234a97ff—
markup.deleted#47565fff—
markup.inserted#cc0000ff—
markup.changed#ffffffff—