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#1e2539
  • activityBar.border#23334e
  • activityBar.dropBackground#1e2539
  • activityBar.foreground#f9d4a8
  • activityBarBadge.background#417283
  • activityBarBadge.foreground#f9d4a8
  • badge.background#c5937c
  • badge.foreground#1e2539
  • button.background#41728380
  • button.foreground#f9d4a8
  • button.hoverBackground#41728360
  • button.secondaryBackground#23334e80
  • button.secondaryForeground#f9d4a8
  • button.secondaryHoverBackground#81878560
  • debugToolBar.background#1e2539
  • diffEditor.insertedTextBackground#f0916230
  • diffEditor.removedTextBackground#f4415930
  • dropdown.background#1e2539
  • dropdown.border#23334e
  • dropdown.foreground#f9d4a8
  • editor.background#1e2539
  • editor.findMatchBackground#9b968c70
  • editor.findMatchHighlightBackground#f0916230
  • editor.findRangeHighlightBackground#9b968c70
  • editor.foreground#f9d4a8
  • editor.hoverHighlightBackground#81878550
  • editor.lineHighlightBackground#23334e60
  • editor.lineHighlightBorder#23334e00
  • editor.selectionBackground#81878540
  • editor.selectionHighlightBackground#b5761440
  • editorBracketHighlight.foreground1#f9d4a8
  • editorBracketHighlight.foreground2#9b968c
  • editorBracketHighlight.foreground3#417283
  • editorBracketHighlight.foreground4#a77166
  • editorBracketHighlight.foreground5#f09162
  • editorBracketHighlight.foreground6#f09162
  • editorBracketMatch.background#81878580
  • editorBracketMatch.border#1e253900
  • editorCodeLens.foreground#9b968c90
  • editorCursor.foreground#f9d4a8
  • editorError.foreground#da223a
  • editorGroup.background#23334e
  • editorGroup.border#23334e
  • editorGroup.dropBackground#23334e60
  • editorGroupHeader.noTabsBackground#23334e
  • editorGroupHeader.tabsBackground#1e2539
  • editorGroupHeader.tabsBorder#23334e
  • editorGutter.addedBackground#f09162
  • editorGutter.background#1e253900
  • editorGutter.deletedBackground#f44159
  • editorGutter.modifiedBackground#9b968c
  • editorHoverWidget.background#1e2539
  • editorHoverWidget.border#23334e
  • editorIndentGuide.activeBackground#9b968c50
  • editorIndentGuide.background#9b968c20
  • editorInfo.foreground#417283
  • editorLineNumber.activeForeground#f09162
  • editorLineNumber.foreground#845457
  • editorLink.activeForeground#f9d4a8
  • editorOverviewRuler.addedForeground#9b968c
  • editorOverviewRuler.border#1e253900
  • editorOverviewRuler.commonContentForeground#818785
  • editorOverviewRuler.currentContentForeground#417283
  • editorOverviewRuler.deletedForeground#9b968c
  • editorOverviewRuler.errorForeground#f44159
  • editorOverviewRuler.findMatchForeground#cbb39b
  • editorOverviewRuler.incomingContentForeground#818785
  • editorOverviewRuler.infoForeground#c5937c
  • editorOverviewRuler.modifiedForeground#9b968c
  • editorOverviewRuler.rangeHighlightForeground#cbb39b
  • editorOverviewRuler.selectionHighlightForeground#845457
  • editorOverviewRuler.warningForeground#d9735b
  • editorOverviewRuler.wordHighlightForeground#845457
  • editorOverviewRuler.wordHighlightStrongForeground#845457
  • editorRuler.foreground#9b968c40
  • editorSuggestWidget.background#1e2539
  • editorSuggestWidget.border#23334e
  • editorSuggestWidget.foreground#f9d4a8
  • editorSuggestWidget.highlightForeground#818785
  • editorSuggestWidget.selectedBackground#23334e60
  • editorWarning.foreground#d9735b
  • editorWhitespace.foreground#9b968c20
  • editorWidget.background#1e2539
  • editorWidget.border#23334e
  • errorForeground#f44159
  • extensionButton.prominentBackground#f0916280
  • extensionButton.prominentHoverBackground#f0916230
  • focusBorder#23334e
  • foreground#f9d4a8
  • gitDecoration.conflictingResourceForeground#a77166
  • gitDecoration.deletedResourceForeground#da223a
  • gitDecoration.ignoredResourceForeground#845457
  • gitDecoration.modifiedResourceForeground#d9735b
  • gitDecoration.untrackedResourceForeground#a77166
  • input.background#f9d4a805
  • input.border#23334e
  • input.foreground#f9d4a8
  • input.placeholderForeground#f9d4a860
  • inputOption.activeBorder#f9d4a860
  • inputValidation.errorBackground#da223a80
  • inputValidation.errorBorder#f44159
  • inputValidation.infoBackground#41728380
  • inputValidation.infoBorder#9b968c
  • inputValidation.warningBackground#d9735b80
  • inputValidation.warningBorder#f09162
  • list.activeSelectionBackground#23334e80
  • list.activeSelectionForeground#9b968c
  • list.dropBackground#23334e
  • list.focusBackground#23334e
  • list.focusForeground#f9d4a8
  • list.highlightForeground#818785
  • list.hoverBackground#23334e80
  • list.hoverForeground#cbb39b
  • list.inactiveSelectionBackground#23334e80
  • list.inactiveSelectionForeground#818785
  • menu.separatorBackground#23334e
  • merge.border#1e253900
  • merge.currentContentBackground#41728320
  • merge.currentHeaderBackground#41728340
  • merge.incomingContentBackground#81878520
  • merge.incomingHeaderBackground#81878540
  • notification.background#1e2539
  • notification.buttonBackground#845457
  • notification.buttonForeground#f9d4a8
  • notification.buttonHoverBackground#84545750
  • notification.errorBackground#f44159
  • notification.errorForeground#1e2539
  • notification.foreground#f9d4a8
  • notification.infoBackground#9b968c
  • notification.infoForeground#1e2539
  • notification.warningBackground#f09162
  • notification.warningForeground#1e2539
  • notificationsErrorIcon.foreground#f44159
  • notificationsInfoIcon.foreground#9b968c
  • notificationsWarningIcon.foreground#f09162
  • panel.border#23334e
  • panelTitle.activeForeground#f9d4a8
  • peekView.border#23334e
  • peekViewEditor.background#23334e50
  • peekViewEditorGutter.background#23334e50
  • peekViewResult.background#23334e50
  • peekViewResult.fileForeground#f9d4a8
  • peekViewResult.matchHighlightBackground#9b968c30
  • peekViewResult.selectionBackground#9b968c30
  • peekViewResult.selectionForeground#9b968c30
  • peekViewTitle.background#23334e50
  • peekViewTitleDescription.foreground#cbb39b
  • peekViewTitleLabel.foreground#f9d4a8
  • progressBar.background#818785
  • scrollbar.shadow#1e2539
  • scrollbarSlider.activeBackground#818785
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#845457
  • selection.background#81878580
  • sideBar.background#1e2539
  • sideBar.border#23334e
  • sideBar.foreground#cbb39b
  • sideBarSectionHeader.background#1e253900
  • sideBarSectionHeader.foreground#f9d4a8
  • sideBarTitle.foreground#f9d4a8
  • statusBar.background#1e2539
  • statusBar.border#23334e
  • statusBar.debuggingBackground#f09162
  • statusBar.debuggingBorder#1e253900
  • statusBar.debuggingForeground#1e2539
  • statusBar.foreground#f9d4a8
  • statusBar.noFolderBackground#1e2539
  • statusBar.noFolderBorder#1e253900
  • statusBar.prominentBackground#818785
  • statusBar.prominentHoverBackground#81878570
  • symbolIcon.arrayForeground#9b968c
  • symbolIcon.booleanForeground#c5937c
  • symbolIcon.classForeground#f09162
  • symbolIcon.colorForeground#f9d4a8
  • symbolIcon.constantForeground#9b968c
  • symbolIcon.constructorForeground#c5937c
  • symbolIcon.enumeratorForeground#c5937c
  • symbolIcon.enumeratorMemberForeground#9b968c
  • symbolIcon.eventForeground#f09162
  • symbolIcon.fieldForeground#f9d4a8
  • symbolIcon.fileForeground#f9d4a8
  • symbolIcon.folderForeground#f9d4a8
  • symbolIcon.functionForeground#f09162
  • symbolIcon.interfaceForeground#f09162
  • symbolIcon.keyForeground#f09162
  • symbolIcon.keywordForeground#f44159
  • symbolIcon.methodForeground#f09162
  • symbolIcon.moduleForeground#c5937c
  • symbolIcon.namespaceForeground#c5937c
  • symbolIcon.nullForeground#9b968c
  • symbolIcon.numberForeground#c5937c
  • symbolIcon.objectForeground#c5937c
  • symbolIcon.operatorForeground#f09162
  • symbolIcon.packageForeground#c5937c
  • symbolIcon.propertyForeground#9b968c
  • symbolIcon.referenceForeground#9b968c
  • symbolIcon.snippetForeground#f9d4a8
  • symbolIcon.stringForeground#f09162
  • symbolIcon.structForeground#f09162
  • symbolIcon.textForeground#f9d4a8
  • symbolIcon.typeParameterForeground#9b968c
  • symbolIcon.unitForeground#f9d4a8
  • symbolIcon.variableForeground#9b968c
  • tab.activeBackground#23334e
  • tab.activeBorder#818785
  • tab.activeForeground#f9d4a8
  • tab.border#1e253900
  • tab.inactiveBackground#1e2539
  • tab.inactiveForeground#9b968c
  • tab.unfocusedActiveBorder#1e253900
  • tab.unfocusedActiveForeground#9b968c
  • tab.unfocusedInactiveForeground#818785
  • terminal.ansiBlack#23334e
  • terminal.ansiBlue#417283
  • terminal.ansiBrightBlack#818785
  • terminal.ansiBrightBlue#9b968c
  • terminal.ansiBrightCyan#9b968c
  • terminal.ansiBrightGreen#f09162
  • terminal.ansiBrightMagenta#c5937c
  • terminal.ansiBrightRed#f44159
  • terminal.ansiBrightWhite#f9d4a8
  • terminal.ansiBrightYellow#f09162
  • terminal.ansiCyan#818785
  • terminal.ansiGreen#a77166
  • terminal.ansiMagenta#a77166
  • terminal.ansiRed#da223a
  • terminal.ansiWhite#9b968c
  • terminal.ansiYellow#d9735b
  • terminal.background#1e2539
  • terminal.foreground#f9d4a8
  • testing.iconErrored#f44159
  • testing.iconFailed#f44159
  • testing.iconPassed#9b968c
  • testing.iconQueued#9b968c
  • testing.iconSkipped#cbb39b
  • testing.iconUnset#f09162
  • testing.runAction#9b968c
  • textLink.activeForeground#417283
  • textLink.foreground#9b968c
  • titleBar.activeBackground#1e2539
  • titleBar.activeForeground#f9d4a8
  • titleBar.inactiveBackground#1e2539
  • widget.shadow#1e253930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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