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#291e1e
  • activityBar.border#493435
  • activityBar.foreground#f3aeb0
  • activityBar.inactiveForeground#a16a79
  • activityBarBadge.background#53b0ae
  • activityBarBadge.foreground#f5f1f2
  • badge.background#f3aeb0
  • badge.foreground#241a1a
  • breadcrumb.activeSelectionForeground#e3d4d8
  • breadcrumb.focusForeground#e3d4d8
  • breadcrumb.foreground#a16a79
  • button.background#f3aeb0
  • button.foreground#241a1a
  • button.hoverBackground#f4b6b8
  • button.secondaryBackground#352627
  • button.secondaryForeground#e3d4d8
  • descriptionForeground#a16a79
  • dropdown.background#291e1e
  • dropdown.border#493435
  • dropdown.foreground#e3d4d8
  • editor.background#1d1515
  • editor.findMatchBackground#9063cd66
  • editor.findMatchHighlightBackground#9063cd33
  • editor.foreground#e3d4d8
  • editor.inactiveSelectionBackground#f3aeb026
  • editor.lineHighlightBackground#f3aeb01a
  • editor.lineHighlightBorder#f3aeb000
  • editor.selectionBackground#f3aeb04d
  • editor.wordHighlightBackground#f3aeb033
  • editorBracketMatch.background#f3aeb040
  • editorBracketMatch.border#f3aeb099
  • editorCursor.foreground#f3aeb0
  • editorError.foreground#dd4132
  • editorGroup.border#493435
  • editorGroupHeader.tabsBackground#291e1e
  • editorGroupHeader.tabsBorder#493435
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e3d4d833
  • editorIndentGuide.background#e3d4d814
  • editorInfo.foreground#53b0ae
  • editorLineNumber.activeForeground#e3d4d8
  • editorLineNumber.foreground#a16a79
  • editorRuler.foreground#e3d4d814
  • editorSuggestWidget.selectedBackground#f3aeb040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e3d4d81a
  • editorWidget.background#291e1e
  • editorWidget.border#493435
  • focusBorder#f3aeb099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a16a79
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a16a79
  • input.background#291e1e
  • input.border#493435
  • input.foreground#e3d4d8
  • input.placeholderForeground#a16a79
  • inputOption.activeBorder#f3aeb0
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#53b0ae
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f3aeb04d
  • list.activeSelectionForeground#e3d4d8
  • list.focusBackground#f3aeb033
  • list.highlightForeground#f3aeb0
  • list.hoverBackground#f3aeb026
  • list.inactiveSelectionBackground#f3aeb026
  • minimap.background#1d1515
  • minimap.findMatchHighlight#9063cd99
  • minimap.selectionHighlight#f3aeb066
  • notificationLink.foreground#f3aeb0
  • notifications.background#352627
  • notifications.foreground#e3d4d8
  • panel.background#291e1e
  • panel.border#493435
  • panelTitle.activeBorder#f3aeb0
  • panelTitle.activeForeground#e3d4d8
  • panelTitle.inactiveForeground#a16a79
  • peekView.border#f3aeb0
  • peekViewEditor.background#291e1e
  • peekViewResult.background#352627
  • peekViewTitle.background#291e1e
  • progressBar.background#f3aeb0
  • scrollbar.shadow#18111245
  • scrollbarSlider.activeBackground#e3d4d859
  • scrollbarSlider.background#e3d4d81f
  • scrollbarSlider.hoverBackground#e3d4d840
  • selection.background#f3aeb04d
  • sideBar.background#352627
  • sideBar.border#493435
  • sideBar.foreground#e3d4d8
  • sideBarSectionHeader.background#f3aeb026
  • sideBarSectionHeader.foreground#e3d4d8
  • sideBarTitle.foreground#e3d4d8
  • statusBar.background#92686a
  • statusBar.border#493435
  • statusBar.debuggingBackground#53b0ae
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f8ced0
  • statusBar.noFolderBackground#291e1e
  • statusBarItem.hoverBackground#f3aeb04d
  • statusBarItem.remoteBackground#f3aeb0
  • statusBarItem.remoteForeground#241a1a
  • tab.activeBackground#1d1515
  • tab.activeBorder#f3aeb0
  • tab.activeBorderTop#f3aeb000
  • tab.activeForeground#e3d4d8
  • tab.border#493435
  • tab.inactiveBackground#291e1e
  • tab.inactiveForeground#a16a79
  • terminal.ansiBlack#1d1515
  • terminal.ansiBlue#817d99
  • terminal.ansiBrightBlack#a16a79
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e3d4d8
  • terminal.ansiYellow#efc050
  • terminal.background#291e1e
  • terminal.foreground#e3d4d8
  • terminalCursor.foreground#f3aeb0
  • textLink.activeForeground#6dbcba
  • textLink.foreground#53b0ae
  • titleBar.activeBackground#291e1e
  • titleBar.activeForeground#e3d4d8
  • titleBar.border#493435
  • titleBar.inactiveBackground#291e1e
  • titleBar.inactiveForeground#a16a79

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a16a79italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f3aeb0bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f3aeb0bold
storage.type, storage.modifier#f3aeb0bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#53b0ae
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f3aeb0
string.regexp#53b0ae
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#996fd1
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e8d4e2bold
variable.other.constant, variable.other.enummember#e8d4e2bold
constant.character.escape#f5babc
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#f5b5c8italic
entity.name.type.parameter#f5b5c8italic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#e3d4d8
variable.parameter#e3d4d8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#f3aeb0italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e3d4d8
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#f3aeb0bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f5babc
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a16a79
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f5b5c8italic
support.type.property-name.css, support.type.vendored.property-name.css#f5b5c8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#e8d4e2
keyword.other.unit.css#996fd1
support.type.property-name.json#f5b5c8
markup.heading, markup.heading entity.name, entity.name.section.markdown#f3aeb0bold
markup.bold#e8d4e2bold
markup.italic#f5b5c8italic
markup.inline.raw, markup.raw#53b0ae
markup.underline.link#76ff7b
markup.quote#a16a79italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050