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#27080f
  • activityBar.border#400d19
  • activityBar.foreground#bb2649
  • activityBar.inactiveForeground#90415a
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#bb2649
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#dfcad1
  • breadcrumb.focusForeground#dfcad1
  • breadcrumb.foreground#90415a
  • button.background#bb2649
  • button.foreground#f5f1f2
  • button.hoverBackground#c23c5b
  • button.secondaryBackground#310a13
  • button.secondaryForeground#dfcad1
  • descriptionForeground#90415a
  • dropdown.background#27080f
  • dropdown.border#400d19
  • dropdown.foreground#dfcad1
  • editor.background#1e060c
  • editor.findMatchBackground#a3af8666
  • editor.findMatchHighlightBackground#a3af8633
  • editor.foreground#dfcad1
  • editor.inactiveSelectionBackground#bb264926
  • editor.lineHighlightBackground#bb26491a
  • editor.lineHighlightBorder#bb264900
  • editor.selectionBackground#bb26494d
  • editor.wordHighlightBackground#bb264933
  • editorBracketMatch.background#bb264940
  • editorBracketMatch.border#bb264999
  • editorCursor.foreground#bb2649
  • editorError.foreground#dd4132
  • editorGroup.border#400d19
  • editorGroupHeader.tabsBackground#27080f
  • editorGroupHeader.tabsBorder#400d19
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dfcad133
  • editorIndentGuide.background#dfcad114
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#dfcad1
  • editorLineNumber.foreground#90415a
  • editorRuler.foreground#dfcad114
  • editorSuggestWidget.selectedBackground#bb264940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dfcad11a
  • editorWidget.background#27080f
  • editorWidget.border#400d19
  • focusBorder#bb264999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#90415a
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#90415a
  • input.background#27080f
  • input.border#400d19
  • input.foreground#dfcad1
  • input.placeholderForeground#90415a
  • inputOption.activeBorder#bb2649
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#bb26494d
  • list.activeSelectionForeground#dfcad1
  • list.focusBackground#bb264933
  • list.highlightForeground#bb2649
  • list.hoverBackground#bb264926
  • list.inactiveSelectionBackground#bb264926
  • minimap.background#1e060c
  • minimap.findMatchHighlight#a3af8699
  • minimap.selectionHighlight#bb264966
  • notificationLink.foreground#bb2649
  • notifications.background#310a13
  • notifications.foreground#dfcad1
  • panel.background#27080f
  • panel.border#400d19
  • panelTitle.activeBorder#bb2649
  • panelTitle.activeForeground#dfcad1
  • panelTitle.inactiveForeground#90415a
  • peekView.border#bb2649
  • peekViewEditor.background#27080f
  • peekViewResult.background#310a13
  • peekViewTitle.background#27080f
  • progressBar.background#bb2649
  • scrollbar.shadow#13040745
  • scrollbarSlider.activeBackground#dfcad159
  • scrollbarSlider.background#dfcad11f
  • scrollbarSlider.hoverBackground#dfcad140
  • selection.background#bb26494d
  • sideBar.background#310a13
  • sideBar.border#400d19
  • sideBar.foreground#dfcad1
  • sideBarSectionHeader.background#bb264926
  • sideBarSectionHeader.foreground#dfcad1
  • sideBarTitle.foreground#dfcad1
  • statusBar.background#70172c
  • statusBar.border#400d19
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#d67d92
  • statusBar.noFolderBackground#27080f
  • statusBarItem.hoverBackground#bb26494d
  • statusBarItem.remoteBackground#bb2649
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#1e060c
  • tab.activeBorder#bb2649
  • tab.activeBorderTop#bb264900
  • tab.activeForeground#dfcad1
  • tab.border#400d19
  • tab.inactiveBackground#27080f
  • tab.inactiveForeground#90415a
  • terminal.ansiBlack#1e060c
  • terminal.ansiBlue#653965
  • terminal.ansiBrightBlack#90415a
  • 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#dfcad1
  • terminal.ansiYellow#efc050
  • terminal.background#27080f
  • terminal.foreground#dfcad1
  • terminalCursor.foreground#bb2649
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#27080f
  • titleBar.activeForeground#dfcad1
  • titleBar.border#400d19
  • titleBar.inactiveBackground#27080f
  • titleBar.inactiveForeground#90415a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#90415aitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ca5671bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ca5671bold
storage.type, storage.modifier#ca5671bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ca5671
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a3af86
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#decdbebold
variable.other.constant, variable.other.enummember#decdbebold
constant.character.escape#ca5670
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#f7cac9italic
entity.name.type.parameter#f7cac9italic
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#dfcad1
variable.parameter#dfcad1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ca5671italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dfcad1
entity.name.class, entity.name.type.class, support.class#996fd1bold italic
entity.other.inherited-class#996fd1italic
entity.name.tag, punctuation.definition.tag#ca5671bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ca5670
punctuation, punctuation.separator, punctuation.terminator, meta.brace#90415a
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f7cac9italic
support.type.property-name.css, support.type.vendored.property-name.css#f7cac9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#996fd1bold
support.constant.property-value.css, support.constant.color.css#decdbe
keyword.other.unit.css#a3af86
support.type.property-name.json#f7cac9
markup.heading, markup.heading entity.name, entity.name.section.markdown#ca5671bold
markup.bold#decdbebold
markup.italic#f7cac9italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#76ff7b
markup.quote#90415aitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050