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#23334e
  • activityBar.border#23334e
  • activityBar.dropBackground#23334e
  • activityBar.foreground#f8bd94
  • activityBarBadge.background#61767d
  • activityBarBadge.foreground#f8bd94
  • badge.background#9b968c
  • badge.foreground#23334e
  • button.background#61767d80
  • button.foreground#f8bd94
  • button.hoverBackground#61767d60
  • button.secondaryBackground#23334e80
  • button.secondaryForeground#f8bd94
  • button.secondaryHoverBackground#a7716660
  • debugToolBar.background#23334e
  • diffEditor.insertedTextBackground#c5937c30
  • diffEditor.removedTextBackground#a7716630
  • dropdown.background#23334e
  • dropdown.border#23334e
  • dropdown.foreground#f8bd94
  • editor.background#23334e
  • editor.findMatchBackground#9b968c70
  • editor.findMatchHighlightBackground#c5937c30
  • editor.findRangeHighlightBackground#9b968c70
  • editor.foreground#f8bd94
  • editor.hoverHighlightBackground#61767d50
  • editor.lineHighlightBackground#23334e60
  • editor.lineHighlightBorder#23334e00
  • editor.selectionBackground#61767d40
  • editor.selectionHighlightBackground#cbb39b20
  • editorBracketHighlight.foreground1#f8bd94
  • editorBracketHighlight.foreground2#cbb39b
  • editorBracketHighlight.foreground3#61767d
  • editorBracketHighlight.foreground4#a77166
  • editorBracketHighlight.foreground5#c5937c
  • editorBracketHighlight.foreground6#f8bd94
  • editorBracketMatch.background#a7716680
  • editorBracketMatch.border#23334e00
  • editorCodeLens.foreground#cbb39b90
  • editorCursor.foreground#f8bd94
  • editorError.foreground#a77166
  • editorGroup.background#23334e
  • editorGroup.border#23334e
  • editorGroup.dropBackground#23334e60
  • editorGroupHeader.noTabsBackground#23334e
  • editorGroupHeader.tabsBackground#23334e
  • editorGroupHeader.tabsBorder#23334e
  • editorGutter.addedBackground#c5937c
  • editorGutter.background#23334e00
  • editorGutter.deletedBackground#a77166
  • editorGutter.modifiedBackground#9b968c
  • editorHoverWidget.background#23334e
  • editorHoverWidget.border#23334e
  • editorIndentGuide.activeBackground#cbb39b50
  • editorIndentGuide.background#cbb39b20
  • editorInfo.foreground#61767d
  • editorLineNumber.activeForeground#f8bd94
  • editorLineNumber.foreground#305975
  • editorLink.activeForeground#f8bd94
  • editorOverviewRuler.addedForeground#9b968c
  • editorOverviewRuler.border#23334e00
  • editorOverviewRuler.commonContentForeground#a77166
  • editorOverviewRuler.currentContentForeground#61767d
  • editorOverviewRuler.deletedForeground#9b968c
  • editorOverviewRuler.errorForeground#a77166
  • editorOverviewRuler.findMatchForeground#cbb39b
  • editorOverviewRuler.incomingContentForeground#61767d
  • editorOverviewRuler.infoForeground#9b968c
  • editorOverviewRuler.modifiedForeground#9b968c
  • editorOverviewRuler.rangeHighlightForeground#cbb39b
  • editorOverviewRuler.selectionHighlightForeground#305975
  • editorOverviewRuler.warningForeground#c5937c
  • editorOverviewRuler.wordHighlightForeground#305975
  • editorOverviewRuler.wordHighlightStrongForeground#305975
  • editorRuler.foreground#cbb39b40
  • editorSuggestWidget.background#23334e
  • editorSuggestWidget.border#23334e
  • editorSuggestWidget.foreground#f8bd94
  • editorSuggestWidget.highlightForeground#61767d
  • editorSuggestWidget.selectedBackground#23334e60
  • editorWarning.foreground#c5937c
  • editorWhitespace.foreground#cbb39b20
  • editorWidget.background#23334e
  • editorWidget.border#23334e
  • errorForeground#a77166
  • extensionButton.prominentBackground#c5937c80
  • extensionButton.prominentHoverBackground#c5937c30
  • focusBorder#23334e
  • foreground#f8bd94
  • gitDecoration.conflictingResourceForeground#a77166
  • gitDecoration.deletedResourceForeground#a77166
  • gitDecoration.ignoredResourceForeground#305975
  • gitDecoration.modifiedResourceForeground#c5937c
  • gitDecoration.untrackedResourceForeground#c5937c
  • input.background#f8bd9405
  • input.border#23334e
  • input.foreground#f8bd94
  • input.placeholderForeground#f8bd9460
  • inputOption.activeBorder#f8bd9460
  • inputValidation.errorBackground#a7716680
  • inputValidation.errorBorder#a77166
  • inputValidation.infoBackground#61767d80
  • inputValidation.infoBorder#9b968c
  • inputValidation.warningBackground#c5937c80
  • inputValidation.warningBorder#f8bd94
  • list.activeSelectionBackground#23334e80
  • list.activeSelectionForeground#cbb39b
  • list.dropBackground#23334e
  • list.focusBackground#23334e
  • list.focusForeground#f8bd94
  • list.highlightForeground#61767d
  • list.hoverBackground#23334e80
  • list.hoverForeground#f8bd94
  • list.inactiveSelectionBackground#23334e80
  • list.inactiveSelectionForeground#61767d
  • menu.separatorBackground#23334e
  • merge.border#23334e00
  • merge.currentContentBackground#61767d20
  • merge.currentHeaderBackground#61767d40
  • merge.incomingContentBackground#61767d20
  • merge.incomingHeaderBackground#61767d40
  • notification.background#23334e
  • notification.buttonBackground#305975
  • notification.buttonForeground#f8bd94
  • notification.buttonHoverBackground#30597550
  • notification.errorBackground#a77166
  • notification.errorForeground#23334e
  • notification.foreground#f8bd94
  • notification.infoBackground#9b968c
  • notification.infoForeground#23334e
  • notification.warningBackground#f8bd94
  • notification.warningForeground#23334e
  • notificationsErrorIcon.foreground#a77166
  • notificationsInfoIcon.foreground#9b968c
  • notificationsWarningIcon.foreground#f8bd94
  • panel.border#23334e
  • panelTitle.activeForeground#f8bd94
  • peekView.border#23334e
  • peekViewEditor.background#23334e50
  • peekViewEditorGutter.background#23334e50
  • peekViewResult.background#23334e50
  • peekViewResult.fileForeground#f8bd94
  • peekViewResult.matchHighlightBackground#cbb39b30
  • peekViewResult.selectionBackground#cbb39b30
  • peekViewResult.selectionForeground#cbb39b30
  • peekViewTitle.background#23334e50
  • peekViewTitleDescription.foreground#cbb39b
  • peekViewTitleLabel.foreground#f8bd94
  • progressBar.background#61767d
  • scrollbar.shadow#23334e
  • scrollbarSlider.activeBackground#61767d
  • scrollbarSlider.background#32455e99
  • scrollbarSlider.hoverBackground#305975
  • selection.background#61767d80
  • sideBar.background#23334e
  • sideBar.border#23334e
  • sideBar.foreground#f8bd94
  • sideBarSectionHeader.background#23334e00
  • sideBarSectionHeader.foreground#f8bd94
  • sideBarTitle.foreground#f8bd94
  • statusBar.background#23334e
  • statusBar.border#23334e
  • statusBar.debuggingBackground#c5937c
  • statusBar.debuggingBorder#23334e00
  • statusBar.debuggingForeground#23334e
  • statusBar.foreground#f8bd94
  • statusBar.noFolderBackground#23334e
  • statusBar.noFolderBorder#23334e00
  • statusBar.prominentBackground#61767d
  • statusBar.prominentHoverBackground#61767d70
  • symbolIcon.arrayForeground#9b968c
  • symbolIcon.booleanForeground#9b968c
  • symbolIcon.classForeground#f8bd94
  • symbolIcon.colorForeground#f8bd94
  • symbolIcon.constantForeground#cbb39b
  • symbolIcon.constructorForeground#9b968c
  • symbolIcon.enumeratorForeground#9b968c
  • symbolIcon.enumeratorMemberForeground#cbb39b
  • symbolIcon.eventForeground#f8bd94
  • symbolIcon.fieldForeground#f8bd94
  • symbolIcon.fileForeground#f8bd94
  • symbolIcon.folderForeground#f8bd94
  • symbolIcon.functionForeground#c5937c
  • symbolIcon.interfaceForeground#f8bd94
  • symbolIcon.keyForeground#c5937c
  • symbolIcon.keywordForeground#a77166
  • symbolIcon.methodForeground#c5937c
  • symbolIcon.moduleForeground#9b968c
  • symbolIcon.namespaceForeground#9b968c
  • symbolIcon.nullForeground#cbb39b
  • symbolIcon.numberForeground#9b968c
  • symbolIcon.objectForeground#9b968c
  • symbolIcon.operatorForeground#c5937c
  • symbolIcon.packageForeground#9b968c
  • symbolIcon.propertyForeground#cbb39b
  • symbolIcon.referenceForeground#9b968c
  • symbolIcon.snippetForeground#f8bd94
  • symbolIcon.stringForeground#c5937c
  • symbolIcon.structForeground#f8bd94
  • symbolIcon.textForeground#f8bd94
  • symbolIcon.typeParameterForeground#cbb39b
  • symbolIcon.unitForeground#f8bd94
  • symbolIcon.variableForeground#9b968c
  • tab.activeBackground#32455e
  • tab.activeBorder#61767d
  • tab.activeForeground#f8bd94
  • tab.border#23334e00
  • tab.inactiveBackground#23334e
  • tab.inactiveForeground#cbb39b
  • tab.unfocusedActiveBorder#23334e00
  • tab.unfocusedActiveForeground#cbb39b
  • tab.unfocusedInactiveForeground#a77166
  • terminal.ansiBlack#23334e
  • terminal.ansiBlue#61767d
  • terminal.ansiBrightBlack#a77166
  • terminal.ansiBrightBlue#9b968c
  • terminal.ansiBrightCyan#cbb39b
  • terminal.ansiBrightGreen#c5937c
  • terminal.ansiBrightMagenta#9b968c
  • terminal.ansiBrightRed#a77166
  • terminal.ansiBrightWhite#f8bd94
  • terminal.ansiBrightYellow#f8bd94
  • terminal.ansiCyan#61767d
  • terminal.ansiGreen#c5937c
  • terminal.ansiMagenta#a77166
  • terminal.ansiRed#a77166
  • terminal.ansiWhite#cbb39b
  • terminal.ansiYellow#c5937c
  • terminal.background#23334e
  • terminal.foreground#f8bd94
  • textLink.activeForeground#61767d
  • textLink.foreground#9b968c
  • titleBar.activeBackground#23334e
  • titleBar.activeForeground#f8bd94
  • titleBar.inactiveBackground#23334e
  • widget.shadow#23334e30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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