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#3c2729
  • activityBar.border#3c2729
  • activityBar.dropBackground#3c2729
  • activityBar.foreground#fbbea3
  • activityBarBadge.background#7c6966
  • activityBarBadge.foreground#fbbea3
  • badge.background#b09f9c
  • badge.foreground#3c2729
  • button.background#7c696680
  • button.foreground#fbbea3
  • button.hoverBackground#7c696660
  • button.secondaryBackground#3c272980
  • button.secondaryForeground#fbbea3
  • button.secondaryHoverBackground#b7665c60
  • debugToolBar.background#3c2729
  • diffEditor.insertedTextBackground#f1968130
  • diffEditor.removedTextBackground#b7665c30
  • dropdown.background#3c2729
  • dropdown.border#3c2729
  • dropdown.foreground#fbbea3
  • editor.background#3c2729
  • editor.findMatchBackground#b09f9c70
  • editor.findMatchHighlightBackground#f1968130
  • editor.findRangeHighlightBackground#b09f9c70
  • editor.foreground#fbbea3
  • editor.hoverHighlightBackground#7c696650
  • editor.lineHighlightBackground#3c272960
  • editor.lineHighlightBorder#3c272900
  • editor.selectionBackground#7c696640
  • editor.selectionHighlightBackground#b09f9c20
  • editorBracketHighlight.foreground1#fbbea3
  • editorBracketHighlight.foreground2#b09f9c
  • editorBracketHighlight.foreground3#7c6966
  • editorBracketHighlight.foreground4#b7665c
  • editorBracketHighlight.foreground5#f19681
  • editorBracketHighlight.foreground6#fbbea3
  • editorBracketMatch.background#b7665c80
  • editorBracketMatch.border#3c272900
  • editorCodeLens.foreground#b09f9c90
  • editorCursor.foreground#fbbea3
  • editorError.foreground#b7665c
  • editorGroup.background#3c2729
  • editorGroup.border#3c2729
  • editorGroup.dropBackground#3c272960
  • editorGroupHeader.noTabsBackground#3c2729
  • editorGroupHeader.tabsBackground#3c2729
  • editorGroupHeader.tabsBorder#3c2729
  • editorGutter.addedBackground#f19681
  • editorGutter.background#3c272900
  • editorGutter.deletedBackground#b7665c
  • editorGutter.modifiedBackground#b09f9c
  • editorHoverWidget.background#3c2729
  • editorHoverWidget.border#3c2729
  • editorIndentGuide.activeBackground#b09f9c50
  • editorIndentGuide.background#b09f9c20
  • editorInfo.foreground#7c6966
  • editorLineNumber.activeForeground#fbbea3
  • editorLineNumber.foreground#4e4442
  • editorLink.activeForeground#fbbea3
  • editorOverviewRuler.addedForeground#b09f9c
  • editorOverviewRuler.border#3c272900
  • editorOverviewRuler.commonContentForeground#b7665c
  • editorOverviewRuler.currentContentForeground#7c6966
  • editorOverviewRuler.deletedForeground#b09f9c
  • editorOverviewRuler.errorForeground#b7665c
  • editorOverviewRuler.findMatchForeground#b09f9c
  • editorOverviewRuler.incomingContentForeground#7c6966
  • editorOverviewRuler.infoForeground#b09f9c
  • editorOverviewRuler.modifiedForeground#b09f9c
  • editorOverviewRuler.rangeHighlightForeground#b09f9c
  • editorOverviewRuler.selectionHighlightForeground#4e4442
  • editorOverviewRuler.warningForeground#f19681
  • editorOverviewRuler.wordHighlightForeground#4e4442
  • editorOverviewRuler.wordHighlightStrongForeground#4e4442
  • editorRuler.foreground#b09f9c40
  • editorSuggestWidget.background#3c2729
  • editorSuggestWidget.border#3c2729
  • editorSuggestWidget.foreground#fbbea3
  • editorSuggestWidget.highlightForeground#7c6966
  • editorSuggestWidget.selectedBackground#3c272960
  • editorWarning.foreground#f19681
  • editorWhitespace.foreground#b09f9c20
  • editorWidget.background#3c2729
  • editorWidget.border#3c2729
  • errorForeground#b7665c
  • extensionButton.prominentBackground#f1968180
  • extensionButton.prominentHoverBackground#f1968130
  • focusBorder#3c2729
  • foreground#fbbea3
  • gitDecoration.conflictingResourceForeground#b7665c
  • gitDecoration.deletedResourceForeground#b7665c
  • gitDecoration.ignoredResourceForeground#4e4442
  • gitDecoration.modifiedResourceForeground#f19681
  • gitDecoration.untrackedResourceForeground#f19681
  • input.background#fbbea305
  • input.border#3c2729
  • input.foreground#fbbea3
  • input.placeholderForeground#fbbea360
  • inputOption.activeBorder#fbbea360
  • inputValidation.errorBackground#b7665c80
  • inputValidation.errorBorder#b7665c
  • inputValidation.infoBackground#7c696680
  • inputValidation.infoBorder#b09f9c
  • inputValidation.warningBackground#f1968180
  • inputValidation.warningBorder#fbbea3
  • list.activeSelectionBackground#3c272980
  • list.activeSelectionForeground#b09f9c
  • list.dropBackground#3c2729
  • list.focusBackground#3c2729
  • list.focusForeground#fbbea3
  • list.highlightForeground#7c6966
  • list.hoverBackground#3c272980
  • list.hoverForeground#fbbea3
  • list.inactiveSelectionBackground#3c272980
  • list.inactiveSelectionForeground#7c6966
  • menu.separatorBackground#3c2729
  • merge.border#3c272900
  • merge.currentContentBackground#7c696620
  • merge.currentHeaderBackground#7c696640
  • merge.incomingContentBackground#7c696620
  • merge.incomingHeaderBackground#7c696640
  • notification.background#3c2729
  • notification.buttonBackground#4e4442
  • notification.buttonForeground#fbbea3
  • notification.buttonHoverBackground#4e444250
  • notification.errorBackground#b7665c
  • notification.errorForeground#3c2729
  • notification.foreground#fbbea3
  • notification.infoBackground#b09f9c
  • notification.infoForeground#3c2729
  • notification.warningBackground#fbbea3
  • notification.warningForeground#3c2729
  • notificationsErrorIcon.foreground#b7665c
  • notificationsInfoIcon.foreground#b09f9c
  • notificationsWarningIcon.foreground#fbbea3
  • panel.border#3c2729
  • panelTitle.activeForeground#fbbea3
  • peekView.border#3c2729
  • peekViewEditor.background#3c272950
  • peekViewEditorGutter.background#3c272950
  • peekViewResult.background#3c272950
  • peekViewResult.fileForeground#fbbea3
  • peekViewResult.matchHighlightBackground#b09f9c30
  • peekViewResult.selectionBackground#b09f9c30
  • peekViewResult.selectionForeground#b09f9c30
  • peekViewTitle.background#3c272950
  • peekViewTitleDescription.foreground#b09f9c
  • peekViewTitleLabel.foreground#fbbea3
  • progressBar.background#7c6966
  • scrollbar.shadow#3c2729
  • scrollbarSlider.activeBackground#7c6966
  • scrollbarSlider.background#4e444299
  • scrollbarSlider.hoverBackground#4e4442
  • selection.background#7c696680
  • sideBar.background#3c2729
  • sideBar.border#3c2729
  • sideBar.foreground#fbbea3
  • sideBarSectionHeader.background#3c272900
  • sideBarSectionHeader.foreground#fbbea3
  • sideBarTitle.foreground#fbbea3
  • statusBar.background#3c2729
  • statusBar.border#3c2729
  • statusBar.debuggingBackground#f19681
  • statusBar.debuggingBorder#3c272900
  • statusBar.debuggingForeground#3c2729
  • statusBar.foreground#fbbea3
  • statusBar.noFolderBackground#3c2729
  • statusBar.noFolderBorder#3c272900
  • statusBar.prominentBackground#7c6966
  • statusBar.prominentHoverBackground#7c696670
  • symbolIcon.arrayForeground#b09f9c
  • symbolIcon.booleanForeground#b09f9c
  • symbolIcon.classForeground#fbbea3
  • symbolIcon.colorForeground#fbbea3
  • symbolIcon.constantForeground#b09f9c
  • symbolIcon.constructorForeground#b09f9c
  • symbolIcon.enumeratorForeground#b09f9c
  • symbolIcon.enumeratorMemberForeground#b09f9c
  • symbolIcon.eventForeground#fbbea3
  • symbolIcon.fieldForeground#fbbea3
  • symbolIcon.fileForeground#fbbea3
  • symbolIcon.folderForeground#fbbea3
  • symbolIcon.functionForeground#f19681
  • symbolIcon.interfaceForeground#fbbea3
  • symbolIcon.keyForeground#f19681
  • symbolIcon.keywordForeground#b7665c
  • symbolIcon.methodForeground#f19681
  • symbolIcon.moduleForeground#b09f9c
  • symbolIcon.namespaceForeground#b09f9c
  • symbolIcon.nullForeground#b09f9c
  • symbolIcon.numberForeground#b09f9c
  • symbolIcon.objectForeground#b09f9c
  • symbolIcon.operatorForeground#f19681
  • symbolIcon.packageForeground#b09f9c
  • symbolIcon.propertyForeground#b09f9c
  • symbolIcon.referenceForeground#b09f9c
  • symbolIcon.snippetForeground#fbbea3
  • symbolIcon.stringForeground#f19681
  • symbolIcon.structForeground#fbbea3
  • symbolIcon.textForeground#fbbea3
  • symbolIcon.typeParameterForeground#b09f9c
  • symbolIcon.unitForeground#fbbea3
  • symbolIcon.variableForeground#b09f9c
  • tab.activeBackground#4e4442
  • tab.activeBorder#7c6966
  • tab.activeForeground#fbbea3
  • tab.border#3c272900
  • tab.inactiveBackground#3c2729
  • tab.inactiveForeground#b09f9c
  • tab.unfocusedActiveBorder#3c272900
  • tab.unfocusedActiveForeground#b09f9c
  • tab.unfocusedInactiveForeground#b7665c
  • terminal.ansiBlack#3c2729
  • terminal.ansiBlue#7c6966
  • terminal.ansiBrightBlack#b7665c
  • terminal.ansiBrightBlue#b09f9c
  • terminal.ansiBrightCyan#b09f9c
  • terminal.ansiBrightGreen#f19681
  • terminal.ansiBrightMagenta#b09f9c
  • terminal.ansiBrightRed#b7665c
  • terminal.ansiBrightWhite#fbbea3
  • terminal.ansiBrightYellow#fbbea3
  • terminal.ansiCyan#7c6966
  • terminal.ansiGreen#f19681
  • terminal.ansiMagenta#b7665c
  • terminal.ansiRed#b7665c
  • terminal.ansiWhite#b09f9c
  • terminal.ansiYellow#f19681
  • terminal.background#3c2729
  • terminal.foreground#fbbea3
  • textLink.activeForeground#7c6966
  • textLink.foreground#b09f9c
  • titleBar.activeBackground#3c2729
  • titleBar.activeForeground#fbbea3
  • titleBar.inactiveBackground#3c2729
  • widget.shadow#3c272930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#b09f9c
#fbbea3
meta.block#fbbea3
emphasisitalic
strongbold
header#7c6966
comment, punctuation.definition.comment#b7665citalic
constant, support.constant, variable.arguments#b09f9c
constant.rgb-value#fbbea3
entity.name.selector#b09f9c
entity.other.attribute-name#fbbea3
entity.name.tag, punctuation.tag#b09f9c
invalid, invalid.illegal#b7665c
invalid.deprecated#b7665c
meta.selector#b09f9c
meta.preprocessor#f19681
meta.preprocessor.string#f19681
meta.preprocessor.numeric#f19681
meta.header.diff#f19681
storage#b7665c
storage.modifier#f19681
string#f19681
string.tag#f19681
string.value#f19681
string.regexp#f19681
string.escape#b7665c
string.quasi#b09f9c
string.entity#f19681
object#fbbea3
module.node#b09f9c
support.type.property-name#7c6966
keyword#b7665c
keyword.control#b7665c
keyword.control.module#b09f9c
keyword.control.less#f19681
keyword.operator#b09f9c
keyword.operator.new#f19681
keyword.other.unit#f19681
metatag.php#f19681
support.function.git-rebase#7c6966
constant.sha.git-rebase#f19681
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#fbbea3
variable.this, support.variable#b09f9c
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#fbbea3
storage.type.function, entity.function, entity.name.function.static#b09f9c
entity.name.function.function-call#b09f9c
support.function.builtin#f19681
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#7c6966
brace#fbbea3
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#b09f9c
prototype#b09f9c
storage.type.class#b7665c
punctuation#b09f9c
punctuation.quoted#fbbea3
punctuation.quasi#b7665c
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#b09f9c
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#b7665c
meta.function-call.generic#b09f9c
meta.function-call.arguments#fbbea3
entity.name.function.decorator#fbbea3bold
constant.other.capsbold
keyword.operator.logical#b7665c
punctuation.definition.logical-expression#f19681
string.inperpolated.dollar.shell#f19681
string.interpolated.dollar.shell, string.interpolated.backtick.shell#b09f9c
keyword.control.directive#b09f9c
support.function.C99#fbbea3
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#f19681
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#b09f9c
keyword.other.this.cs, keyword.other.base.cs#b09f9c
meta.scope.prerequisites#fbbea3
entity.name.function.target#f19681bold
storage.modifier.import.java, storage.modifier.package.java#b09f9c
keyword.other.import.java, keyword.other.package.java#b09f9c
storage.type.java#fbbea3
storage.type.annotation#b09f9cbold
keyword.other.documentation.javadoc#b09f9c
comment.block.javadoc variable.parameter.java#f19681bold
source.java variable.other.object, source.java variable.other.definition.java#fbbea3
meta.function-parameters.lisp#fbbea3
markup.underlineunderline
string.other.link.title.markdown#b7665cunderline
markup.underline.link#b09f9c
markup.bold#f19681bold
markup.heading#f19681bold
markup.italicitalic
markup.inserted#f19681
markup.deleted#b7665c
markup.changed#f19681
markup.punctuation.quote.beginning#f19681
markup.punctuation.list.beginning#b09f9c
markup.inline.raw, markup.fenced_code.block#b09f9c
string.quoted.double.json#b09f9c
source.json meta.structure.dictionary.json support.type.property-name.json#f19681
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b09f9c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b09f9c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f19681
entity.other.attribute-name.css#f19681
source.css meta.selector#fbbea3
support.type.property-name.css#f19681
entity.other.attribute-name.class#f19681
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#b7665c
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#b7665c
entity.name.tag.cssnormal
punctuation.definition.tag#b09f9c
text.html entity.name.tag, text.html punctuation.tag#b09f9cbold
source.js variable.language#f19681
source.ts variable.language#f19681
source.go storage.type#fbbea3
source.go entity.name.import#f19681
source.go keyword.package, source.go keyword.import#b09f9c
source.go keyword.interface, source.go keyword.struct#b09f9c
source.go entity.name.type#fbbea3
source.go entity.name.function#b09f9c
keyword.control.cucumber.table#b09f9c
source.reason string.double, source.reason string.regexp#f19681
source.reason keyword.control.less#b09f9c
source.reason entity.name.function#b09f9c
source.reason support.property-value, source.reason entity.name.filename#f19681
source.powershell variable.other.member.powershell#f19681
source.powershell support.function.powershell#fbbea3
source.powershell support.function.attribute.powershell#b09f9c
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#f19681