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.activeBackground#0066ff10
  • activityBar.activeBorder#c5656b80
  • activityBar.background#2a211c
  • activityBar.foreground#b3b7b0
  • activityBar.inactiveForeground#737772
  • activityBarBadge.background#c5656b
  • activityBarBadge.foreground#2a211c
  • badge.background#000000
  • badge.foreground#b3b7b0
  • breadcrumb.activeSelectionForeground#b3b7b0
  • breadcrumb.background#2a211c
  • breadcrumb.focusForeground#b3b7b0
  • breadcrumb.foreground#737772
  • breadcrumbPicker.background#1c1d1b
  • button.background#383a37
  • button.foreground#b3b7b0
  • checkbox.background#383a37
  • checkbox.border#1c1d1b
  • checkbox.foreground#b3b7b0
  • contrastBorder#1c1d1b
  • debugToolBar.background#383a37
  • diffEditor.insertedTextBackground#1a921c20
  • diffEditor.removedTextBackground#cc000050
  • dropdown.background#2a211c
  • dropdown.border#1c1d1b
  • dropdown.foreground#b3b7b0
  • editor.background#2a211c
  • editor.findMatchBackground#efe43a80
  • editor.findMatchHighlightBackground#ededec40
  • editor.findRangeHighlightBackground#54575375
  • editor.foldBackground#383a37
  • editor.foreground#b3b7b0
  • editor.hoverHighlightBackground#1c1d1b
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#0066ff15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#2a211c
  • editor.snippetFinalTabstopHighlightBorder#1a921c
  • editor.snippetTabstopHighlightBackground#2a211c
  • editor.snippetTabstopHighlightBorder#737772
  • editor.wordHighlightBackground#05989a50
  • editor.wordHighlightStrongBackground#1a921c50
  • editorCodeLens.foreground#737772
  • editorError.foreground#cc0000
  • editorGroup.border#0066ff
  • editorGroup.dropBackground#54575370
  • editorGroupHeader.tabsBackground#1c1d1b
  • editorGutter.addedBackground#1a921c80
  • editorGutter.deletedBackground#cc000080
  • editorGutter.modifiedBackground#05989a80
  • editorHoverWidget.background#2a211c
  • editorHoverWidget.border#737772
  • editorIndentGuide.activeBackground#ededec45
  • editorIndentGuide.background#ededec1A
  • editorLineNumber.foreground#737772
  • editorLink.activeForeground#05989a
  • editorMarkerNavigation.background#383a37
  • editorOverviewRuler.addedForeground#1a921c80
  • editorOverviewRuler.border#1c1d1b
  • editorOverviewRuler.currentContentForeground#1a921c
  • editorOverviewRuler.deletedForeground#cc000080
  • editorOverviewRuler.errorForeground#cc000080
  • editorOverviewRuler.incomingContentForeground#0066ff
  • editorOverviewRuler.infoForeground#05989a80
  • editorOverviewRuler.modifiedForeground#05989a80
  • editorOverviewRuler.selectionHighlightForeground#efe43a
  • editorOverviewRuler.warningForeground#efe43a80
  • editorOverviewRuler.wordHighlightForeground#05989a
  • editorOverviewRuler.wordHighlightStrongForeground#1a921c
  • editorRuler.foreground#ededec1A
  • editorSuggestWidget.background#383a37
  • editorSuggestWidget.foreground#b3b7b0
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#efe43a
  • editorWhitespace.foreground#ededec1A
  • editorWidget.background#383a37
  • errorForeground#cc0000
  • extensionButton.prominentBackground#1a921c90
  • extensionButton.prominentForeground#b3b7b0
  • extensionButton.prominentHoverBackground#1a921c60
  • focusBorder#737772
  • foreground#b3b7b0
  • gitDecoration.conflictingResourceForeground#efe43a
  • gitDecoration.deletedResourceForeground#cc0000
  • gitDecoration.ignoredResourceForeground#737772
  • gitDecoration.modifiedResourceForeground#05989a
  • gitDecoration.untrackedResourceForeground#1a921c
  • input.background#2a211c
  • input.border#1c1d1b
  • input.foreground#b3b7b0
  • input.placeholderForeground#737772
  • inputOption.activeBorder#0066ff
  • inputValidation.errorBackground#2a211c
  • inputValidation.errorBorder#cc0000
  • inputValidation.errorForeground#cc0000
  • inputValidation.infoBackground#2a211c
  • inputValidation.infoBorder#0066ff
  • inputValidation.infoForeground#0066ff
  • inputValidation.warningBackground#2a211c
  • inputValidation.warningBorder#efe43a
  • inputValidation.warningForeground#efe43a
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#b3b7b0
  • list.dropBackground#000000
  • list.errorForeground#cc0000
  • list.focusBackground#54575375
  • list.highlightForeground#05989a
  • list.hoverBackground#54575375
  • list.inactiveSelectionBackground#54575375
  • list.warningForeground#efe43a
  • listFilterWidget.background#2a211c
  • listFilterWidget.noMatchesOutline#cc0000
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#1a921c90
  • merge.incomingHeaderBackground#0066ff90
  • notification.background#2a211c
  • notification.buttonBackground#000000
  • notification.buttonForeground#b3b7b0
  • notification.buttonHoverBackground#54575375
  • notification.errorBackground#cc0000
  • notification.errorForeground#2a211c
  • notification.foreground#b3b7b0
  • notification.infoBackground#0066ff
  • notification.infoForeground#2a211c
  • notification.warningBackground#efe43a
  • notification.warningForeground#2a211c
  • notificationCenter.border#383a37
  • notificationCenterHeader.background#2a211c
  • notificationCenterHeader.foreground#b3b7b0
  • notificationLink.foreground#05989a
  • notifications.background#2a211c
  • notifications.border#383a37
  • notifications.foreground#b3b7b0
  • notificationsErrorIcon.foreground#cc0000
  • notificationsInfoIcon.foreground#0066ff
  • notificationsWarningIcon.foreground#efe43a
  • notificationToast.border#383a37
  • panel.background#2a211c
  • panel.border#0066ff
  • panelInput.border#b3b7b0
  • panelTitle.activeBorder#c5656b
  • panelTitle.activeForeground#b3b7b0
  • panelTitle.inactiveForeground#737772
  • peekView.border#000000
  • peekViewEditor.background#2a211c
  • peekViewEditor.matchHighlightBackground#fffa5c80
  • peekViewResult.background#383a37
  • peekViewResult.fileForeground#b3b7b0
  • peekViewResult.lineForeground#b3b7b0
  • peekViewResult.matchHighlightBackground#fffa5c80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#b3b7b0
  • peekViewTitle.background#1c1d1b
  • peekViewTitleDescription.foreground#737772
  • peekViewTitleLabel.foreground#b3b7b0
  • pickerGroup.border#0066ff
  • pickerGroup.foreground#05989a
  • progressBar.background#c5656b
  • scrollbar.shadow#444444
  • selection.background#0066ff
  • settings.checkboxBackground#383a37
  • settings.checkboxBorder#1c1d1b
  • settings.checkboxForeground#b3b7b0
  • settings.dropdownBackground#383a37
  • settings.dropdownBorder#1c1d1b
  • settings.dropdownForeground#b3b7b0
  • settings.headerForeground#b3b7b0
  • settings.modifiedItemIndicator#efe43a
  • settings.numberInputBackground#383a37
  • settings.numberInputBorder#1c1d1b
  • settings.numberInputForeground#b3b7b0
  • settings.textInputBackground#383a37
  • settings.textInputBorder#1c1d1b
  • settings.textInputForeground#b3b7b0
  • sideBar.background#383a37
  • sideBarSectionHeader.background#2a211c
  • sideBarSectionHeader.border#1c1d1b
  • sideBarTitle.foreground#b3b7b0
  • statusBar.background#1c1d1b
  • statusBar.debuggingBackground#cc0000
  • statusBar.debuggingForeground#1c1d1b
  • statusBar.foreground#b3b7b0
  • statusBar.noFolderBackground#1c1d1b
  • statusBar.noFolderForeground#b3b7b0
  • statusBarItem.prominentBackground#cc0000
  • statusBarItem.prominentHoverBackground#efe43a
  • statusBarItem.remoteBackground#0066ff
  • statusBarItem.remoteForeground#2a211c
  • tab.activeBackground#2a211c
  • tab.activeBorderTop#c5656b80
  • tab.activeForeground#b3b7b0
  • tab.border#1c1d1b
  • tab.inactiveBackground#383a37
  • tab.inactiveForeground#737772
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0066ff
  • terminal.ansiBrightBlack#545753
  • terminal.ansiBrightBlue#43a8ed
  • terminal.ansiBrightCyan#34e2e2
  • terminal.ansiBrightGreen#9aff87
  • terminal.ansiBrightMagenta#ff8089
  • terminal.ansiBrightRed#ef2828
  • terminal.ansiBrightWhite#ededec
  • terminal.ansiBrightYellow#fffa5c
  • terminal.ansiCyan#05989a
  • terminal.ansiGreen#1a921c
  • terminal.ansiMagenta#c5656b
  • terminal.ansiRed#cc0000
  • terminal.ansiWhite#d3d7cf
  • terminal.ansiYellow#efe43a
  • terminal.background#2a211c
  • terminal.border#b3b7b0
  • terminal.foreground#b3b7b0
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383a37
  • titleBar.activeBackground#383a37
  • titleBar.activeForeground#b3b7b0
  • titleBar.inactiveBackground#1c1d1b
  • titleBar.inactiveForeground#737772
  • walkThrough.embeddedEditorBackground#383a37
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#54575375
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0066ff
source#b3b7b0
meta.diff, meta.diff.header#737772
markup.inserted#1a921c
markup.deleted#cc0000
markup.changed#efe43a
invalid#cc0000underline italic
invalid.deprecated#b3b7b0underline italic
entity.name.filename#fffa5c
markup.error#cc0000
markup.underlineunderline
markup.bold#efe43abold
markup.heading#0066ffbold
markup.italic#fffa5citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#05989a
markup.inline.raw, markup.raw.restructuredtext#1a921c
markup.underline.link, markup.underline.link.image#05989a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c5656b
entity.name.directive.restructuredtext, markup.quote#fffa5citalic
meta.separator.markdown#737772
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#1a921c
punctuation.definition.constant.restructuredtext#0066ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0066ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#b3b7b0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fffa5c
entity.name.type.class, entity.name.class#05989anormal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#0066ffitalic
entity.other.inherited-class#05989aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#737772
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c5656b
comment.block.documentation entity.name.type#05989aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#05989a
comment.block.documentation variable#efe43aitalic
constant, variable.other.constant#0066ff
constant.character.escape, constant.character.string.escape, constant.regexp#c5656b
entity.name.tag#c5656b
entity.other.attribute-name.parent-selector#c5656b
entity.other.attribute-name#1a921citalic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#1a921c
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#efe43aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#1a921citalic
meta.decorator variable.other.object#1a921c
keyword, punctuation.definition.keyword#c5656b
keyword.control.new, keyword.operator.newbold
meta.selector#c5656b
support#05989aitalic
support.function.magic, support.variable, variable.other.predefined#0066ffregular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#c5656b
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#b3b7b0
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#c5656b
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#05989a
constant.other.date, constant.other.timestamp#efe43a
variable.other.alias.yaml#1a921citalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c5656bregular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#05989aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#efe43a
storage.modifier#c5656b
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fffa5c
punctuation.definition.group.capture.regexp#c5656b
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cc0000
punctuation.definition.character-class.regexp#05989a
punctuation.definition.group.regexp#efe43a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cc0000
meta.assertion.look-ahead.regexp#1a921c
string#fffa5c
punctuation.definition.string.begin, punctuation.definition.string.end#43a8ed
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0066ff
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#737772
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#b3b7b0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#efe43aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b3b7b0normal
meta.selectionset.graphql variable#fffa5c
meta.selectionset.graphql meta.arguments variable#b3b7b0
entity.name.fragment.graphql, variable.fragment.graphql#05989a
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#b3b7b0
source.shell variable.other#0066ff
support.constant#0066ffnormal
meta.scope.prerequisites.makefile#fffa5c
meta.attribute-selector.scss#fffa5c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#b3b7b0
meta.preprocessor.haskell#737772