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.activeBorder#f35e6d
  • activityBar.background#0d0c0c
  • activityBar.border#0d0c0c
  • activityBar.foreground#d1d1d1
  • activityBar.inactiveForeground#454545
  • activityBarBadge.background#f35e6d
  • activityBarBadge.foreground#ffffff
  • badge.background#f35e6d
  • badge.foreground#121212
  • breadcrumb.activeSelectionForeground#dbdbdb
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#dbdbdb
  • breadcrumb.foreground#a3a3a3
  • breadcrumbPicker.background#0d0c0c
  • button.background#f35e6d
  • button.foreground#121212
  • commandCenter.activeBackground#141414
  • commandCenter.activeBorder#454545
  • commandCenter.background#0d0c0c
  • commandCenter.border#0d0c0c
  • commandCenter.foreground#454545
  • debugExceptionWidget.background#0d0c0c
  • debugExceptionWidget.border#141414
  • debugIcon.breakpointCurrentStackframeForeground#f35e6d
  • debugIcon.breakpointDisabledForeground#b0b0b0
  • debugIcon.breakpointForeground#fc618d
  • debugIcon.breakpointStackframeForeground#dbdbdb
  • debugIcon.breakpointUnverifiedForeground#fd9353
  • debugIcon.continueForeground#dbdbdb
  • debugIcon.disconnectForeground#dbdbdb
  • debugIcon.pauseForeground#dbdbdb
  • debugIcon.restartForeground#7bd88f
  • debugIcon.startForeground#7bd88f
  • debugIcon.stepBackForeground#dbdbdb
  • debugIcon.stepIntoForeground#dbdbdb
  • debugIcon.stepOutForeground#dbdbdb
  • debugIcon.stepOverForeground#dbdbdb
  • debugIcon.stopForeground#fc618d
  • debugToolBar.background#141414
  • descriptionForeground#d1d1d1
  • diffEditor.insertedTextBackground#7bd88f19
  • diffEditor.removedTextBackground#fc618d19
  • dropdown.background#0d0c0c
  • dropdown.border#0d0c0c
  • dropdown.foreground#d1d1d1
  • dropdown.listBackground#1f1f1f
  • editor.background#141414
  • editor.findMatchBackground#dbdbdb26
  • editor.findMatchBorder#f35e6d
  • editor.findMatchHighlightBackground#dbdbdb26
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#dbdbdb0c
  • editor.findRangeHighlightBorder#00000000
  • editor.foreground#cccccc
  • editor.hoverHighlightBackground#dbdbdb10
  • editor.inactiveSelectionBackground#dbdbdb0c
  • editor.lineHighlightBackground#dbdbdb0c
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBorder#1f1f1f
  • editor.selectionBackground#b0b0b026
  • editor.selectionHighlightBackground#dbdbdb26
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#dbdbdb26
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#dbdbdb26
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#141414
  • editorBracketMatch.border#6c6767
  • editorCodeLens.foreground#6c6767
  • editorCursor.background#141414
  • editorCursor.foreground#ffffff
  • editorError.border#00000000
  • editorError.foreground#fc618d
  • editorGroup.border#121212
  • editorGroup.dropBackground#121212bf
  • editorGroup.emptyBackground#141414
  • editorGroup.focusedEmptyBorder#121212
  • editorGroupHeader.noTabsBackground#141414
  • editorGroupHeader.tabsBackground#121212
  • editorGroupHeader.tabsBorder#141414
  • editorGutter.addedBackground#cbf075
  • editorGutter.background#141414
  • editorGutter.deletedBackground#f0758a
  • editorGutter.modifiedBackground#a6e6e8
  • editorHint.border#141414
  • editorHint.foreground#948ae3
  • editorHoverWidget.background#1f1f1f
  • editorHoverWidget.border#141414
  • editorIndentGuide.activeBackground1#373535
  • editorIndentGuide.background1#1f1f1f
  • editorInfo.border#141414
  • editorInfo.foreground#a6e6e8
  • editorLightBulb.foreground#fce566
  • editorLightBulbAutoFix.foreground#7bd88f
  • editorLineNumber.activeForeground#a3a3a3
  • editorLineNumber.foreground#333333
  • editorLink.activeForeground#a6e6e8
  • editorMarkerNavigation.background#1f1f1f
  • editorMarkerNavigationError.background#fc618d
  • editorMarkerNavigationInfo.background#a6e6e8
  • editorMarkerNavigationWarning.background#fd9353
  • editorOverviewRuler.addedForeground#cbf075
  • editorOverviewRuler.border#141414
  • editorOverviewRuler.currentContentForeground#1f1f1f
  • editorOverviewRuler.deletedForeground#f0758a
  • editorOverviewRuler.errorForeground#f0758a
  • editorOverviewRuler.findMatchForeground#dbdbdb26
  • editorOverviewRuler.incomingContentForeground#1f1f1f
  • editorOverviewRuler.infoForeground#a6e6e8
  • editorOverviewRuler.modifiedForeground#90dcf3
  • editorOverviewRuler.rangeHighlightForeground#dbdbdb26
  • editorOverviewRuler.selectionHighlightForeground#dbdbdb26
  • editorOverviewRuler.warningForeground#fd9353
  • editorOverviewRuler.wordHighlightForeground#dbdbdb26
  • editorOverviewRuler.wordHighlightStrongForeground#dbdbdb26
  • editorPane.background#141414
  • editorRuler.foreground#454545
  • editorSuggestWidget.background#0d0c0c
  • editorSuggestWidget.border#0d0c0c
  • editorSuggestWidget.foreground#b0b0b0
  • editorSuggestWidget.highlightForeground#dbdbdb
  • editorSuggestWidget.selectedBackground#cccccc1f
  • editorSuggestWidget.selectedForeground#d1d1d1
  • editorWarning.border#00000000
  • editorWarning.foreground#fd9353
  • editorWhitespace.foreground#454545
  • editorWidget.background#0d0c0c
  • editorWidget.border#0d0c0c
  • editorWidget.foreground#b0b0b0
  • errorForeground#fc618d
  • extensionButton.prominentBackground#1f1f1f
  • extensionButton.prominentForeground#dbdbdb
  • extensionButton.prominentHoverBackground#454545
  • focusBorder#555050
  • foreground#b0b0b0
  • gitDecoration.addedResourceForeground#cbf075
  • gitDecoration.conflictingResourceForeground#fd9353
  • gitDecoration.deletedResourceForeground#f0758a
  • gitDecoration.ignoredResourceForeground#454545
  • gitDecoration.modifiedResourceForeground#a6e6e8
  • gitDecoration.untrackedResourceForeground#fd9353
  • input.background#0d0c0c
  • input.border#0d0c0c
  • input.foreground#dbdbdb
  • input.placeholderForeground#6a6969
  • inputOption.activeBackground#454545
  • inputOption.activeBorder#454545
  • inputValidation.errorBackground#1f1f1f
  • inputValidation.errorBorder#fc618d
  • inputValidation.errorForeground#fc618d
  • inputValidation.infoBackground#1f1f1f
  • inputValidation.infoBorder#a6e6e8
  • inputValidation.infoForeground#a6e6e8
  • inputValidation.warningBackground#1f1f1f
  • inputValidation.warningBorder#fd9353
  • inputValidation.warningForeground#fd9353
  • list.activeSelectionBackground#cccccc1f
  • list.activeSelectionForeground#d1d1d1
  • list.dropBackground#121212bf
  • list.errorForeground#fc618d
  • list.focusBackground#141414
  • list.focusForeground#d1d1d1
  • list.highlightForeground#d1d1d1
  • list.hoverBackground#1f1f1f
  • list.hoverForeground#d1d1d1
  • list.inactiveFocusBackground#141414
  • list.inactiveFocusOutline#cccccc10
  • list.inactiveSelectionBackground#cccccc0f
  • list.inactiveSelectionForeground#b0b0b0
  • list.invalidItemForeground#fc618d
  • list.warningForeground#fd9353
  • listFilterWidget.background#141414
  • listFilterWidget.noMatchesOutline#fc618d
  • listFilterWidget.outline#141414
  • merge.border#141414
  • merge.commonContentBackground#dbdbdb19
  • merge.commonHeaderBackground#dbdbdb26
  • merge.currentContentBackground#fc618d19
  • merge.currentHeaderBackground#fc618d26
  • merge.incomingContentBackground#7bd88f19
  • merge.incomingHeaderBackground#7bd88f26
  • minimap.errorHighlight#fc618d
  • minimap.warningHighlight#fd9353
  • minimapGutter.addedBackground#cbf075
  • minimapGutter.deletedBackground#f0758a
  • minimapGutter.modifiedBackground#90dcf3
  • notificationCenter.border#1f1f1f
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#d1d1d1
  • notificationLink.foreground#f35e6d
  • notifications.background#1f1f1f
  • notifications.border#1f1f1f
  • notifications.foreground#b0b0b0
  • notificationsErrorIcon.foreground#fc618d
  • notificationsInfoIcon.foreground#97c4eb
  • notificationsWarningIcon.foreground#fd9353
  • notificationToast.border#1f1f1f
  • panel.background#0d0c0c
  • panel.border#0d0c0c
  • panelTitle.activeBorder#f35e6d
  • panelTitle.activeForeground#d1d1d1
  • panelTitle.inactiveForeground#454545
  • peekView.border#141414
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#454545
  • peekViewEditorGutter.background#1f1f1f
  • peekViewResult.background#1f1f1f
  • peekViewResult.fileForeground#d1d1d1
  • peekViewResult.lineForeground#d1d1d1
  • peekViewResult.matchHighlightBackground#454545
  • peekViewResult.selectionBackground#1f1f1f
  • peekViewResult.selectionForeground#dbdbdb
  • peekViewTitle.background#1f1f1f
  • peekViewTitleDescription.foreground#d1d1d1
  • peekViewTitleLabel.foreground#dbdbdb
  • pickerGroup.border#141414
  • pickerGroup.foreground#454545
  • problemsErrorIcon.foreground#fc618d
  • problemsInfoIcon.foreground#a6e6e8
  • problemsWarningIcon.foreground#fd9353
  • progressBar.background#1f1f1f
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#dbdbdb12
  • scrollbarSlider.background#dbdbdb10
  • scrollbarSlider.hoverBackground#dbdbdb14
  • selection.background#b0b0b026
  • settings.checkboxBackground#1f1f1f
  • settings.checkboxBorder#1f1f1f
  • settings.checkboxForeground#dbdbdb
  • settings.dropdownBackground#1f1f1f
  • settings.dropdownBorder#1f1f1f
  • settings.dropdownForeground#dbdbdb
  • settings.dropdownListBorder#d1d1d1
  • settings.focusedRowBackground#1f1f1f80
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#90dcf3
  • settings.numberInputBackground#1f1f1f
  • settings.numberInputBorder#1f1f1f
  • settings.numberInputForeground#dbdbdb
  • settings.rowHoverBackground#1f1f1f40
  • settings.textInputBackground#1f1f1f
  • settings.textInputBorder#1f1f1f
  • settings.textInputForeground#dbdbdb
  • sideBar.background#121212
  • sideBar.border#0d0c0c
  • sideBar.dropBackground#121212bf
  • sideBar.foreground#666666
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.foreground#d1d1d1
  • sideBarTitle.foreground#454545
  • statusBar.background#121212
  • statusBar.border#0d0c0c
  • statusBar.debuggingBackground#1f1f1f
  • statusBar.debuggingBorder#121212
  • statusBar.debuggingForeground#dbdbdb
  • statusBar.foreground#6a6969
  • statusBar.noFolderBackground#121212
  • statusBar.noFolderBorder#0d0c0c
  • statusBar.noFolderForeground#6a6969
  • statusBarItem.activeBackground#141414
  • statusBarItem.hoverBackground#141414
  • statusBarItem.prominentBackground#1f1f1f
  • statusBarItem.prominentHoverBackground#1f1f1f
  • statusBarItem.remoteBackground#121212
  • statusBarItem.remoteForeground#f35e6d
  • tab.activeBackground#141414
  • tab.activeBorder#f35e6d
  • tab.activeForeground#f4f4f4
  • tab.border#0d0c0c
  • tab.hoverBackground#141414
  • tab.hoverForeground#dddddd
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#606060
  • tab.unfocusedActiveBorder#454545
  • tab.unfocusedActiveForeground#d1d1d1
  • tab.unfocusedHoverBackground#141414
  • tab.unfocusedHoverForeground#dddddd
  • tab.unfocusedInactiveBackground#121212
  • tab.unfocusedInactiveForeground#606060
  • terminal.ansiBlack#282a36
  • terminal.ansiBlue#8897f4
  • terminal.ansiBrightBlack#414458
  • terminal.ansiBrightBlue#556fff
  • terminal.ansiBrightCyan#3fdcee
  • terminal.ansiBrightGreen#18e3c8
  • terminal.ansiBrightMagenta#b043d1
  • terminal.ansiBrightRed#ff4971
  • terminal.ansiBrightWhite#fdfdfd
  • terminal.ansiBrightYellow#ff8037
  • terminal.ansiCyan#79e6f3
  • terminal.ansiGreen#5adecd
  • terminal.ansiMagenta#c574dd
  • terminal.ansiRed#f37f97
  • terminal.ansiWhite#bebec1
  • terminal.ansiYellow#f2a272
  • terminal.background#0d0c0c
  • terminal.foreground#94a3a5
  • terminal.selectionBackground#48b9c750
  • terminalCursor.background#00000000
  • terminalCursor.foreground#f6f6f6
  • textBlockQuote.background#1f1f1f
  • textBlockQuote.border#1f1f1f
  • textCodeBlock.background#1f1f1f
  • textLink.activeForeground#dbdbdb
  • textLink.foreground#f35e6d
  • textPreformat.foreground#dbdbdb
  • textSeparator.foreground#6a6969
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#6a6969
  • titleBar.border#0d0c0c
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#454545
  • tree.indentGuidesStroke#1f1f1f
  • walkThrough.embeddedEditorBackground#121212
  • widget.shadow#0d0c0c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier, meta.function-call, entity.name.function-call, storage.type.classitalic
keyword.control.flow.block-scalar.literal, keyword.control.flow.python
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text, comment storage.type, comment entity.name.type, comment variable, comment variable.other, comment.block.documentation, comment.block.documentation punctuation, punctuation.definition.comment#5c5757
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps#97c4eb
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character#e6dba7
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant#a3a3a3
invalid, invalid.illegal#fc618d
invalid.deprecated#bb9af7
storage.type#f35e6d
storage.type.class#97c4eb
meta.var.expr storage.type, storage.modifier#f35e6d
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.section.tag.twig, support.constant.handlebars, meta.embedded.line.tag.smarty#a3a3a3
keyword.operator.spread, keyword.operator.rest#f35e6dbold
keyword.operator, keyword.control.as, keyword.operator.bitwise.shift, entity.name.operator#f35e6d
punctuation#a3a3a3
keyword.operator.member, keyword.operator.new#f35e6d
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other, keyword.other.directive.using.cs, keyword.other.special-method.elixir#f35e6d
keyword, keyword.control, keyword.other.important#f35e6d
keyword.other.DML#f35e6d
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp, keyword.operator.other#f35e6d
entity.name.tag#b493f0
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, entity.name.tag.js, meta.tag#bebebe
punctuation.definition.tag#5c5757
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments#ebebeb
support.other.variable#ebebeb
meta.array.literal variable#ebebeb
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.block entity.name.label#e6dba7
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property#97c4eb
variable.other.object.property#97c4eb
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs#f35e6d
entity.name.function, entity.name.function-call, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function#b493f0
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable, variable.other.readwrite.js, variable.other.readwrite.elixir#e6e6e6
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#b493f0
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration#e6e6e6
entity.other.inherited-class#e6e6e6
support.class, support.type, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object, support.orther.namespace.use.php, meta.use.php#97c4eb
support.type.property-name.json#bb9af7
entity.name#e6e6e6
support.function#e6dba7
variable.language.super#bb9af7
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key#e6e6e6
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#e6dba7
support.constant.font-name, meta.definition.variable#b493f0
entity.other.attribute-name.id#f35e6d
entity.name.tag.css#b493f0
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference#e6e6e6
meta.property-list#5c5757
support.constant.property-value#97c4eb
source.sass keyword.control#f35e6d
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#97c4eb
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#e6dba7
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#97c4eb
keyword.other.unit#f35e6d
meta.property-list meta.property-list#5c5757
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include#f35e6d
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword#f35e6d
meta.property-list meta.at-rule.include#e6e6e6
entity.name.type.module, entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e6e6e6
variable.language#e6e6e6
variable.other punctuation.definition.variable#8b888f
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#e6e6e6
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#b493f0
text.html constant.character.entity#f35e6d
markup.inserted#97c4eb
markup.deleted#f0758a
markup.changed#6183bb
markup.inserted#97c4eb
markup.deleted#f0758a
markup.changed#97c4eb
string.regexp#f35e6d
punctuation.definition.group#f35e6d
constant.other.character-class.regexp#b493f0
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#97c4eb
keyword.operator.quantifier.regexp#b493f0
constant.character.escape.backslash#8b888f
constant.character.escape#b493f0
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8b888f
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section#8b888f
meta.tag JSXNested, meta.jsx.children, text.html, text.log#e6e6e6
meta.embedded.block#e6e6e6
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#f35e6dbold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#97c4ebbold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#e6dba7bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#f57a86bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#ade8eabold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#efe8c7bold
markup.italic, markup.italic punctuation#efe8c7italic
markup.bold, markup.bold punctuation#97c4ebbold
markup.underline, markup.underline punctuationunderline
markup.quote punctuation.definition.blockquote.markdown#f57a86
markup.quoteitalic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown#97c4eb
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#97c4eb
meta.separator#8b888fbold
markup.table#C7AEF4
token.info-token#0db9d7
token.warn-token#ffdb69
token.error-token#db4b4b
token.debug-token#b267e6
source.env#97c4eb