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#404238
  • activityBar.activeBorder#E0BD68
  • activityBar.background#34362D
  • activityBar.foreground#CECEB5
  • activityBarBadge.background#E0BD68
  • activityBarBadge.foreground#34362D
  • badge.background#E0BD68
  • badge.foreground#34362D
  • button.background#E0BD68ee
  • button.foreground#34362D
  • button.hoverBackground#E0BD68
  • button.secondaryBackground#B6B691
  • button.secondaryForeground#CECEB5
  • button.secondaryHoverBackground#CECEB567
  • charts.blue#B6B691
  • charts.foreground#CECEB5
  • charts.green#CECEB6
  • charts.lines#E0BD68
  • charts.orange#A96E55
  • charts.purple#CECEB6
  • charts.red#A96E55
  • charts.yellow#E0BD68
  • debugConsole.errorForeground#A96E55
  • debugConsole.infoForeground#E0BD68
  • debugConsole.sourceForeground#CECEB6
  • debugConsole.warningForeground#E0BD68
  • debugConsoleInputIcon.foreground#B6B691
  • debugExceptionWidget.background#CECEB567
  • debugExceptionWidget.border#34362D
  • debugToolBar.background#404238
  • descriptionForeground#CECEB5e6
  • diffEditor.insertedTextBackground#B6B69122
  • diffEditor.removedTextBackground#A96E554d
  • dropdown.background#404238
  • dropdown.border#404238
  • dropdown.foreground#CECEB5
  • editor.background#34362D
  • editor.findMatchBackground#B6B69122
  • editor.findMatchHighlightBackground#B6B69122
  • editor.findRangeHighlightBackground#B6B69122
  • editor.focusedStackFrameHighlightBackground#CECEB6
  • editor.foreground#CECEB5
  • editor.hoverHighlightBackground#404238
  • editor.inactiveSelectionBackground#CECEB567
  • editor.inlineValuesBackground#CECEB567
  • editor.inlineValuesForeground#ebdfc1
  • editor.lineHighlightBackground#404238
  • editor.lineHighlightBorder#404238
  • editor.rangeHighlightBackground#B6B69122
  • editor.selectionBackground#B6B69122
  • editor.selectionHighlightBackground#B6B69122
  • editor.stackFrameHighlightBackground#CECEB6
  • editor.wordHighlightBackground#B6B69122
  • editor.wordHighlightStrongBackground#B6B69122
  • editorBracketMatch.background#34362D00
  • editorBracketMatch.border#E0BD68
  • editorCodeLens.foreground#CECEB567
  • editorCursor.foreground#CECEB5
  • editorError.border#A96E5500
  • editorError.foreground#A96E55
  • editorGroup.border#40423801
  • editorGroup.dropBackground#40423899
  • editorGroupHeader.border#40423800
  • editorGroupHeader.noTabsBackground#34362D
  • editorGroupHeader.tabsBackground#34362D
  • editorGroupHeader.tabsBorder#40423800
  • editorGutter.addedBackground#CECEB6
  • editorGutter.background#34362D
  • editorGutter.deletedBackground#A96E55
  • editorGutter.modifiedBackground#E0BD68
  • editorHint.border#E0BD6800
  • editorHint.foreground#E0BD68
  • editorHoverWidget.background#404238
  • editorHoverWidget.border#404238
  • editorIndentGuide.activeBackground#B6B69144
  • editorIndentGuide.background#B6B69122
  • editorLineNumber.activeForeground#CECEB5
  • editorLineNumber.foreground#CECEB567
  • editorLink.activeForeground#E0BD68
  • editorMarkerNavigation.background#CECEB6c0
  • editorMarkerNavigationError.background#A96E55c0
  • editorMarkerNavigationWarning.background#E0BD68c0
  • editorOverviewRuler.addedForeground#CECEB6
  • editorOverviewRuler.border#404238
  • editorOverviewRuler.currentContentForeground#404238
  • editorOverviewRuler.deletedForeground#A96E55
  • editorOverviewRuler.errorForeground#A96E55
  • editorOverviewRuler.findMatchForeground#E0BD6866
  • editorOverviewRuler.incomingContentForeground#404238
  • editorOverviewRuler.infoForeground#B6B691
  • editorOverviewRuler.modifiedForeground#E0BD68
  • editorOverviewRuler.rangeHighlightForeground#E0BD6866
  • editorOverviewRuler.selectionHighlightForeground#E0BD6866
  • editorOverviewRuler.warningForeground#E0BD68
  • editorOverviewRuler.wordHighlightForeground#E0BD6866
  • editorOverviewRuler.wordHighlightStrongForeground#E0BD6866
  • editorRuler.foreground#B6B691
  • editorSuggestWidget.background#34362D
  • editorSuggestWidget.border#404238
  • editorSuggestWidget.focusHighlightForeground#E0BD68
  • editorSuggestWidget.foreground#CECEB5
  • editorSuggestWidget.highlightForeground#E0BD68
  • editorSuggestWidget.selectedBackground#B6B69122
  • editorSuggestWidget.selectedForeground#CECEB5
  • editorWarning.border#E0BD6800
  • editorWarning.foreground#E0BD68
  • editorWhitespace.foreground#CECEB567
  • editorWidget.background#34362D
  • editorWidget.border#404238
  • errorForeground#A96E55
  • extensionButton.prominentBackground#B6B691
  • extensionButton.prominentForeground#CECEB5
  • extensionButton.prominentHoverBackground#CECEB567
  • focusBorder#404238
  • foreground#CECEB5
  • gitDecoration.conflictingResourceForeground#CECEB6
  • gitDecoration.deletedResourceForeground#A96E55
  • gitDecoration.ignoredResourceForeground#CECEB566
  • gitDecoration.modifiedResourceForeground#E0BD68
  • gitDecoration.stageDeletedResourceForeground#A96E55
  • gitDecoration.stageModifiedResourceForeground#E0BD68
  • gitDecoration.submoduleResourceForeground#D6BE81
  • gitDecoration.untrackedResourceForeground#CECEB6
  • input.background#404238
  • input.border#404238
  • input.foreground#CECEB5
  • input.placeholderForeground#CECEB599
  • inputOption.activeBackground#B6B69122
  • inputOption.activeBorder#CECEB6
  • inputOption.activeForeground#ebdfc1
  • inputValidation.errorBackground#A96E55
  • inputValidation.errorBorder#A96E55
  • inputValidation.infoBackground#B6B691
  • inputValidation.infoBorder#B6B691
  • inputValidation.warningBackground#A96E55
  • inputValidation.warningBorder#A96E55
  • keybindingLabel.background#CECEB567
  • keybindingLabel.border#CECEB567
  • keybindingLabel.bottomBorder#CECEB567
  • keybindingLabel.foreground#CECEB5
  • list.activeSelectionBackground#B6B69122
  • list.activeSelectionForeground#CECEB5
  • list.dropBackground#E0BD6899
  • list.errorForeground#A96E55
  • list.focusBackground#B6B69122
  • list.focusForeground#CECEB5
  • list.focusHighlightForeground#E0BD68
  • list.highlightForeground#D6BE81
  • list.hoverBackground#404238
  • list.hoverForeground#ebdfc1
  • list.inactiveFocusBackground#B6B69122
  • list.inactiveSelectionBackground#B6B69122
  • list.inactiveSelectionForeground#CECEB5
  • list.warningForeground#E0BD68
  • merge.border#40423800
  • merge.currentContentBackground#B6B6914d
  • merge.currentHeaderBackground#B6B69122
  • merge.incomingContentBackground#D6BE814d
  • merge.incomingHeaderBackground#D6BE8166
  • minimap.background#34362D
  • minimap.errorHighlight#A96E55cc
  • minimap.findMatchHighlight#E0BD68
  • minimap.selectionHighlight#E0BD68cc
  • minimap.warningHighlight#E0BD68cc
  • minimapGutter.addedBackground#CECEB6
  • minimapGutter.deletedBackground#A96E55
  • minimapGutter.modifiedBackground#E0BD68
  • minimapSlider.activeBackground#B6B691aa
  • minimapSlider.background#B6B69199
  • minimapSlider.hoverBackground#B6B691aa
  • notificationCenter.border#40423800
  • notificationCenterHeader.background#34362D
  • notificationCenterHeader.foreground#E0BD68
  • notificationLink.foreground#E0BD68
  • notifications.background#404238
  • notifications.border#34362D
  • notifications.foreground#CECEB5
  • notificationToast.border#40423800
  • panel.background#34362D
  • panel.border#404238
  • panelTitle.activeBorder#E0BD6800
  • panelTitle.activeForeground#E0BD68
  • panelTitle.inactiveForeground#CECEB5
  • peekView.border#CECEB567
  • peekViewEditor.background#34362D
  • peekViewEditor.matchHighlightBackground#E0BD684d
  • peekViewEditorGutter.background#34362D
  • peekViewResult.background#34362D
  • peekViewResult.fileForeground#E0BD68
  • peekViewResult.lineForeground#CECEB566
  • peekViewResult.matchHighlightBackground#E0BD68cc
  • peekViewResult.selectionBackground#B6B691
  • peekViewResult.selectionForeground#CECEB5
  • peekViewTitle.background#404238
  • peekViewTitleDescription.foreground#CECEB5
  • peekViewTitleLabel.foreground#E0BD68
  • pickerGroup.border#404238
  • pickerGroup.foreground#E0BD68
  • progressBar.background#E0BD68
  • quickInputList.focusBackground#B6B69122
  • quickInputList.focusForeground#CECEB5
  • sash.hoverBorder#E0BD68
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#B6B69133
  • scrollbarSlider.background#B6B69123
  • scrollbarSlider.hoverBackground#B6B69133
  • selection.background#E0BD6899
  • sideBar.background#34362D
  • sideBar.border#404238
  • sideBar.foreground#CECEB5
  • sideBarSectionHeader.background#404238
  • sideBarSectionHeader.foreground#CECEB5
  • sideBarTitle.foreground#CECEB5
  • statusBar.background#404238
  • statusBar.border#40423800
  • statusBar.debuggingBackground#B6B69122
  • statusBar.debuggingForeground#CECEB5
  • statusBar.foreground#CECEB5
  • statusBar.noFolderBackground#B6B69122
  • statusBar.noFolderForeground#CECEB5
  • statusBarItem.activeBackground#CECEB567
  • statusBarItem.errorBackground#B6B69122
  • statusBarItem.errorForeground#A96E55
  • statusBarItem.hoverBackground#B6B69133
  • statusBarItem.prominentBackground#B6B69122
  • statusBarItem.prominentHoverBackground#B6B691
  • tab.activeBackground#404238
  • tab.activeBorder#E0BD6800
  • tab.activeBorderTop#E0BD6800
  • tab.activeForeground#CECEB5
  • tab.border#40423800
  • tab.hoverBackground#404238cc
  • tab.hoverBorder#E0BD6800
  • tab.inactiveBackground#34362D
  • tab.inactiveForeground#CECEB566
  • tab.lastPinnedBorder#CECEB567
  • tab.unfocusedActiveBorder#E0BD6800
  • tab.unfocusedActiveBorderTop#E0BD6800
  • tab.unfocusedActiveForeground#CECEB599
  • tab.unfocusedHoverBackground#404238b3
  • tab.unfocusedHoverBorder#E0BD6800
  • tab.unfocusedInactiveForeground#CECEB566
  • terminal.ansiBlack#404238
  • terminal.ansiBlue#B6B691
  • terminal.ansiBrightBlack#CECEB567
  • terminal.ansiBrightBlue#B6B691
  • terminal.ansiBrightCyan#D6BE81
  • terminal.ansiBrightGreen#E0BD68FF
  • terminal.ansiBrightMagenta#CECEB6
  • terminal.ansiBrightRed#A96E55
  • terminal.ansiBrightWhite#ebdfc1
  • terminal.ansiBrightYellow#E0BD68
  • terminal.ansiCyan#E0BD68
  • terminal.ansiGreen#E0BD68FF
  • terminal.ansiMagenta#CECEB6
  • terminal.ansiRed#A96E55
  • terminal.ansiWhite#CECEB5
  • terminal.ansiYellow#E0BD68
  • terminal.background#34362D
  • terminal.foreground#CECEB5
  • textBlockQuote.background#404238
  • textBlockQuote.border#B6B691
  • textCodeBlock.background#CECEB567
  • textLink.activeForeground#E0BD68
  • textLink.foreground#E0BD68
  • textPreformat.foreground#D6BE81
  • textSeparator.foreground#ebdfc1
  • titleBar.activeBackground#34362D
  • titleBar.activeForeground#CECEB5
  • titleBar.border#34362D00
  • titleBar.inactiveBackground#34362D
  • titleBar.inactiveForeground#CECEB566
  • tree.indentGuidesStroke#CECEB6
  • walkThrough.embeddedEditorBackground#34362D
  • welcomePage.buttonBackground#B6B691
  • welcomePage.buttonHoverBackground#CECEB567
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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