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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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