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#2E352C
  • activityBar.activeBorder#BCBC62
  • activityBar.background#232922
  • activityBar.foreground#D3D9D2
  • activityBarBadge.background#BCBC62
  • activityBarBadge.foreground#232922
  • badge.background#BCBC62
  • badge.foreground#232922
  • button.background#BCBC62ee
  • button.foreground#232922
  • button.hoverBackground#BCBC62
  • button.secondaryBackground#889985
  • button.secondaryForeground#D3D9D2
  • button.secondaryHoverBackground#D3D9D267
  • charts.blue#889985
  • charts.foreground#D3D9D2
  • charts.green#D3D9D3
  • charts.lines#BCBC62
  • charts.orange#A96E55
  • charts.purple#D3D9D3
  • charts.red#A96E55
  • charts.yellow#BCBC62
  • debugConsole.errorForeground#A96E55
  • debugConsole.infoForeground#BCBC62
  • debugConsole.sourceForeground#D3D9D3
  • debugConsole.warningForeground#BCBC62
  • debugConsoleInputIcon.foreground#889985
  • debugExceptionWidget.background#D3D9D267
  • debugExceptionWidget.border#232922
  • debugToolBar.background#2E352C
  • descriptionForeground#D3D9D2e6
  • diffEditor.insertedTextBackground#88998522
  • diffEditor.removedTextBackground#A96E554d
  • dropdown.background#2E352C
  • dropdown.border#2E352C
  • dropdown.foreground#D3D9D2
  • editor.background#232922
  • editor.findMatchBackground#88998522
  • editor.findMatchHighlightBackground#88998522
  • editor.findRangeHighlightBackground#88998522
  • editor.focusedStackFrameHighlightBackground#D3D9D3
  • editor.foreground#D3D9D2
  • editor.hoverHighlightBackground#2E352C
  • editor.inactiveSelectionBackground#D3D9D267
  • editor.inlineValuesBackground#D3D9D267
  • editor.inlineValuesForeground#ebdfc1
  • editor.lineHighlightBackground#2E352C
  • editor.lineHighlightBorder#2E352C
  • editor.rangeHighlightBackground#88998522
  • editor.selectionBackground#88998522
  • editor.selectionHighlightBackground#88998522
  • editor.stackFrameHighlightBackground#D3D9D3
  • editor.wordHighlightBackground#88998522
  • editor.wordHighlightStrongBackground#88998522
  • editorBracketMatch.background#23292200
  • editorBracketMatch.border#BCBC62
  • editorCodeLens.foreground#D3D9D267
  • editorCursor.foreground#D3D9D2
  • editorError.border#A96E5500
  • editorError.foreground#A96E55
  • editorGroup.border#2E352C01
  • editorGroup.dropBackground#2E352C99
  • editorGroupHeader.border#2E352C00
  • editorGroupHeader.noTabsBackground#232922
  • editorGroupHeader.tabsBackground#232922
  • editorGroupHeader.tabsBorder#2E352C00
  • editorGutter.addedBackground#D3D9D3
  • editorGutter.background#232922
  • editorGutter.deletedBackground#A96E55
  • editorGutter.modifiedBackground#BCBC62
  • editorHint.border#BCBC6200
  • editorHint.foreground#BCBC62
  • editorHoverWidget.background#2E352C
  • editorHoverWidget.border#2E352C
  • editorIndentGuide.activeBackground#88998544
  • editorIndentGuide.background#88998522
  • editorLineNumber.activeForeground#D3D9D2
  • editorLineNumber.foreground#D3D9D267
  • editorLink.activeForeground#BCBC62
  • editorMarkerNavigation.background#D3D9D3c0
  • editorMarkerNavigationError.background#A96E55c0
  • editorMarkerNavigationWarning.background#BCBC62c0
  • editorOverviewRuler.addedForeground#D3D9D3
  • editorOverviewRuler.border#2E352C
  • editorOverviewRuler.currentContentForeground#2E352C
  • editorOverviewRuler.deletedForeground#A96E55
  • editorOverviewRuler.errorForeground#A96E55
  • editorOverviewRuler.findMatchForeground#BCBC6266
  • editorOverviewRuler.incomingContentForeground#2E352C
  • editorOverviewRuler.infoForeground#889985
  • editorOverviewRuler.modifiedForeground#BCBC62
  • editorOverviewRuler.rangeHighlightForeground#BCBC6266
  • editorOverviewRuler.selectionHighlightForeground#BCBC6266
  • editorOverviewRuler.warningForeground#BCBC62
  • editorOverviewRuler.wordHighlightForeground#BCBC6266
  • editorOverviewRuler.wordHighlightStrongForeground#BCBC6266
  • editorRuler.foreground#889985
  • editorSuggestWidget.background#232922
  • editorSuggestWidget.border#2E352C
  • editorSuggestWidget.focusHighlightForeground#BCBC62
  • editorSuggestWidget.foreground#D3D9D2
  • editorSuggestWidget.highlightForeground#BCBC62
  • editorSuggestWidget.selectedBackground#88998522
  • editorSuggestWidget.selectedForeground#D3D9D2
  • editorWarning.border#BCBC6200
  • editorWarning.foreground#BCBC62
  • editorWhitespace.foreground#D3D9D267
  • editorWidget.background#232922
  • editorWidget.border#2E352C
  • errorForeground#A96E55
  • extensionButton.prominentBackground#889985
  • extensionButton.prominentForeground#D3D9D2
  • extensionButton.prominentHoverBackground#D3D9D267
  • focusBorder#2E352C
  • foreground#D3D9D2
  • gitDecoration.conflictingResourceForeground#D3D9D3
  • gitDecoration.deletedResourceForeground#A96E55
  • gitDecoration.ignoredResourceForeground#D3D9D266
  • gitDecoration.modifiedResourceForeground#BCBC62
  • gitDecoration.stageDeletedResourceForeground#A96E55
  • gitDecoration.stageModifiedResourceForeground#BCBC62
  • gitDecoration.submoduleResourceForeground#C5C581
  • gitDecoration.untrackedResourceForeground#D3D9D3
  • input.background#2E352C
  • input.border#2E352C
  • input.foreground#D3D9D2
  • input.placeholderForeground#D3D9D299
  • inputOption.activeBackground#88998522
  • inputOption.activeBorder#D3D9D3
  • inputOption.activeForeground#ebdfc1
  • inputValidation.errorBackground#A96E55
  • inputValidation.errorBorder#A96E55
  • inputValidation.infoBackground#889985
  • inputValidation.infoBorder#889985
  • inputValidation.warningBackground#A96E55
  • inputValidation.warningBorder#A96E55
  • keybindingLabel.background#D3D9D267
  • keybindingLabel.border#D3D9D267
  • keybindingLabel.bottomBorder#D3D9D267
  • keybindingLabel.foreground#D3D9D2
  • list.activeSelectionBackground#88998522
  • list.activeSelectionForeground#D3D9D2
  • list.dropBackground#BCBC6299
  • list.errorForeground#A96E55
  • list.focusBackground#88998522
  • list.focusForeground#D3D9D2
  • list.focusHighlightForeground#BCBC62
  • list.highlightForeground#BCBC62
  • list.hoverBackground#2E352C
  • list.hoverForeground#ebdfc1
  • list.inactiveFocusBackground#88998522
  • list.inactiveSelectionBackground#88998522
  • list.inactiveSelectionForeground#D3D9D2
  • list.warningForeground#BCBC62
  • merge.border#2E352C00
  • merge.currentContentBackground#8899854d
  • merge.currentHeaderBackground#88998522
  • merge.incomingContentBackground#C5C5814d
  • merge.incomingHeaderBackground#C5C58166
  • minimap.background#232922
  • minimap.errorHighlight#A96E55cc
  • minimap.findMatchHighlight#BCBC62
  • minimap.selectionHighlight#BCBC62cc
  • minimap.warningHighlight#BCBC62cc
  • minimapGutter.addedBackground#D3D9D3
  • minimapGutter.deletedBackground#A96E55
  • minimapGutter.modifiedBackground#BCBC62
  • minimapSlider.activeBackground#889985aa
  • minimapSlider.background#88998599
  • minimapSlider.hoverBackground#889985aa
  • notificationCenter.border#2E352C00
  • notificationCenterHeader.background#232922
  • notificationCenterHeader.foreground#BCBC62
  • notificationLink.foreground#BCBC62
  • notifications.background#2E352C
  • notifications.border#232922
  • notifications.foreground#D3D9D2
  • notificationToast.border#2E352C00
  • panel.background#232922
  • panel.border#2E352C
  • panelTitle.activeBorder#BCBC6200
  • panelTitle.activeForeground#BCBC62
  • panelTitle.inactiveForeground#D3D9D2
  • peekView.border#D3D9D267
  • peekViewEditor.background#232922
  • peekViewEditor.matchHighlightBackground#BCBC624d
  • peekViewEditorGutter.background#232922
  • peekViewResult.background#232922
  • peekViewResult.fileForeground#BCBC62
  • peekViewResult.lineForeground#D3D9D266
  • peekViewResult.matchHighlightBackground#BCBC62cc
  • peekViewResult.selectionBackground#889985
  • peekViewResult.selectionForeground#D3D9D2
  • peekViewTitle.background#2E352C
  • peekViewTitleDescription.foreground#D3D9D2
  • peekViewTitleLabel.foreground#BCBC62
  • pickerGroup.border#2E352C
  • pickerGroup.foreground#BCBC62
  • progressBar.background#BCBC62
  • quickInputList.focusBackground#88998522
  • quickInputList.focusForeground#D3D9D2
  • sash.hoverBorder#BCBC62
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#88998533
  • scrollbarSlider.background#88998523
  • scrollbarSlider.hoverBackground#88998533
  • selection.background#BCBC6299
  • sideBar.background#232922
  • sideBar.border#2E352C
  • sideBar.foreground#D3D9D2
  • sideBarSectionHeader.background#2E352C
  • sideBarSectionHeader.foreground#D3D9D2
  • sideBarTitle.foreground#D3D9D2
  • statusBar.background#2E352C
  • statusBar.border#2E352C00
  • statusBar.debuggingBackground#88998522
  • statusBar.debuggingForeground#D3D9D2
  • statusBar.foreground#D3D9D2
  • statusBar.noFolderBackground#88998522
  • statusBar.noFolderForeground#D3D9D2
  • statusBarItem.activeBackground#D3D9D267
  • statusBarItem.errorBackground#88998522
  • statusBarItem.errorForeground#A96E55
  • statusBarItem.hoverBackground#88998533
  • statusBarItem.prominentBackground#88998522
  • statusBarItem.prominentHoverBackground#889985
  • tab.activeBackground#2E352C
  • tab.activeBorder#BCBC6200
  • tab.activeBorderTop#BCBC6200
  • tab.activeForeground#D3D9D2
  • tab.border#2E352C00
  • tab.hoverBackground#2E352Ccc
  • tab.hoverBorder#BCBC6200
  • tab.inactiveBackground#232922
  • tab.inactiveForeground#D3D9D266
  • tab.lastPinnedBorder#D3D9D267
  • tab.unfocusedActiveBorder#BCBC6200
  • tab.unfocusedActiveBorderTop#BCBC6200
  • tab.unfocusedActiveForeground#D3D9D299
  • tab.unfocusedHoverBackground#2E352Cb3
  • tab.unfocusedHoverBorder#BCBC6200
  • tab.unfocusedInactiveForeground#D3D9D266
  • terminal.ansiBlack#2E352C
  • terminal.ansiBlue#889985
  • terminal.ansiBrightBlack#D3D9D267
  • terminal.ansiBrightBlue#889985
  • terminal.ansiBrightCyan#C5C581
  • terminal.ansiBrightGreen#BCBC62FF
  • terminal.ansiBrightMagenta#D3D9D3
  • terminal.ansiBrightRed#A96E55
  • terminal.ansiBrightWhite#ebdfc1
  • terminal.ansiBrightYellow#BCBC62
  • terminal.ansiCyan#BCBC62
  • terminal.ansiGreen#BCBC62FF
  • terminal.ansiMagenta#D3D9D3
  • terminal.ansiRed#A96E55
  • terminal.ansiWhite#D3D9D2
  • terminal.ansiYellow#BCBC62
  • terminal.background#232922
  • terminal.foreground#D3D9D2
  • textBlockQuote.background#2E352C
  • textBlockQuote.border#889985
  • textCodeBlock.background#D3D9D267
  • textLink.activeForeground#BCBC62
  • textLink.foreground#BCBC62
  • textPreformat.foreground#C5C581
  • textSeparator.foreground#ebdfc1
  • titleBar.activeBackground#232922
  • titleBar.activeForeground#D3D9D2
  • titleBar.border#23292200
  • titleBar.inactiveBackground#232922
  • titleBar.inactiveForeground#D3D9D266
  • tree.indentGuidesStroke#D3D9D3
  • walkThrough.embeddedEditorBackground#232922
  • welcomePage.buttonBackground#889985
  • welcomePage.buttonHoverBackground#D3D9D267
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
comment#889985B3
constant.character#BCBC62
constant.character.escape#BCBC62
constant.language#889985
constant.numeric#D3D9D3
constant.regexp#BCBC62
entity.name.class, entity.name.type.class#C5C581
entity.name.function#BCBC62
entity.name.tag#BCBC62
entity.other.attribute-name#C5C581
entity.other.inherited-class#C5C581bold
invalid.deprecated#D3D9D2
invalid.illegal#D3D9D2
keyword#889985
keyword.operator#889985
keyword.other.new#889985
markup.boldbold
markup.changed#BCBC62
markup.deleted#A96E55
markup.inserted#D3D9D3
meta.preprocessor#D3D9D3
punctuation, meta.brace.round, meta.brace.square#D8D8AB
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#D8D8AB
punctuation.definition.tag#889985
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#889985B3
punctuation.section#D8D8AB
punctuation.section.embedded.begin, punctuation.section.embedded.end#889985
punctuation.terminator#889985
punctuation.definition.variable#889985
storage#889985
string#D3D9D3
string.regexp#BCBC62
support.class#BCBC62
support.constant#889985
support.function#BCBC62
support.function.construct#889985
support.type#C5C581
support.type.exception#C5C581
token.debug-token#D3D9D3
token.error-token#A96E55
token.info-token#BCBC62
token.warn-token#BCBC62
variable.other#C5C581
variable.language#889985
variable.parameter#C5C581
punctuation.separator.pointer-access.c#889985
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#C5C581
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#D3D9D3bold
source.css constant.other.color.rgb-value#D3D9D3
source.css meta.property-value#BCBC62
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#A96E55
source.css punctuation.definition.keyword#889985
source.css support.type.property-name#D3D9D2
source.diff meta.diff.range.context#C5C581
source.diff meta.diff.header.from-file#C5C581
source.diff punctuation.definition.from-file#C5C581
source.diff punctuation.definition.range#C5C581
source.diff punctuation.definition.separator#889985
entity.name.type.module.elixir#C5C581
variable.other.readwrite.module.elixir#D3D9D2bold
constant.other.symbol.elixir#D3D9D2bold
variable.other.constant.elixir#C5C581
source.go constant.other.placeholder.go#BCBC62
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#889985
source.java constant.other#D3D9D2
source.java keyword.other.documentation#C5C581
source.java keyword.other.documentation.author.javadoc#C5C581
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#C5C581
source.java keyword.other.documentation.see.javadoc#C5C581
source.java meta.method-call meta.method#BCBC62
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#C5C581
source.java meta.tag.template.value.javadoc#BCBC62
source.java punctuation.definition.keyword.javadoc#C5C581
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#D3D9D3
source.java storage.modifier.import#C5C581
source.java storage.modifier.package#C5C581
source.java storage.type#C5C581
source.java storage.type.annotation#A96E55
source.java storage.type.generic#C5C581
source.java storage.type.primitive#889985
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#A96E55
source.js meta.object-literal.key#BCBC62
source.js storage.type.class.jsdoc#C5C581
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#889985
source.js string.quoted.template meta.method-call.with-arguments#D8D8AB
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#D3D9D2
source.js support.type.primitive#889985
source.js variable.other.object#D3D9D2
source.js variable.other.readwrite.alias#C5C581
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#D8D8AB
punctuation.definition.tag, keyword.operator.assignment, punctuation.section.embedded.begin, punctuation.section.embedded.end#889985B3
text.html.basic constant.character.entity.html#BCBC62
text.html.basic constant.other.inline-data#A96E55italic
text.html.basic meta.tag.sgml.doctype#D3D9D3
text.html.basic punctuation.definition.entity#889985
source.properties entity.name.section.group-title.ini#BCBC62
source.properties punctuation.separator.key-value.ini#889985
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#C5C581
markup.heading#BCBC62
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#C5C581
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#889985
text.html.markdown beginning.punctuation.definition.quote#C5C581
text.html.markdown markup.quote#D3D9D3
text.html.markdown constant.character.math.tex#889985
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#D3D9D3
text.html.markdown punctuation.definition.function.math.tex#BCBC62
text.html.markdown punctuation.math.operator.latex#889985
text.html.markdown punctuation.definition.heading#889985
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#889985
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#BCBC62
source.perl punctuation.definition.variable#D3D9D2
source.php meta.function-call, source.php meta.function-call.object#BCBC62
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#A96E55
source.python meta.function-call.generic#BCBC62
source.python support.type#BCBC62
source.python variable.parameter.function.language#D3D9D2
source.python meta.function.parameters variable.parameter.function.language.special.self#889985
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#889985
source.css.scss variable.interpolation#D3D9D2italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#A96E55
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#D3D9D2
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#BCBC62
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#C5C581
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#C5C581
source.ts support.variable, source.tsx support.variable#D3D9D2
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#D8D8AB
text.xml entity.name.tag.namespace#C5C581
text.xml keyword.other.doctype#D3D9D3
text.xml meta.tag.preprocessor entity.name.tag#D3D9D3
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#A96E55italic
source.yaml entity.name.tag#C5C581