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#3d8fd110
  • activityBar.activeBorder#6679cc80
  • activityBar.background#132537
  • activityBar.foreground#8c92ac
  • activityBar.inactiveForeground#767d9c
  • activityBarBadge.background#6679cc
  • activityBarBadge.foreground#132537
  • badge.background#202746
  • badge.foreground#8c92ac
  • breadcrumb.activeSelectionForeground#8c92ac
  • breadcrumb.background#132537
  • breadcrumb.focusForeground#8c92ac
  • breadcrumb.foreground#767d9c
  • breadcrumbPicker.background#232631
  • button.background#474c62
  • button.foreground#8c92ac
  • checkbox.background#474c62
  • checkbox.border#232631
  • checkbox.foreground#8c92ac
  • contrastBorder#232631
  • debugToolBar.background#474c62
  • diffEditor.insertedTextBackground#ac973920
  • diffEditor.removedTextBackground#c9492250
  • dropdown.background#132537
  • dropdown.border#232631
  • dropdown.foreground#8c92ac
  • editor.background#132537
  • editor.findMatchBackground#c08b3080
  • editor.findMatchHighlightBackground#f5f7ff40
  • editor.findRangeHighlightBackground#6b739475
  • editor.foldBackground#474c62
  • editor.foreground#8c92ac
  • editor.hoverHighlightBackground#232631
  • editor.lineHighlightBorder#202746
  • editor.rangeHighlightBackground#3d8fd115
  • editor.selectionBackground#202746
  • editor.selectionHighlightBackground#202746
  • editor.snippetFinalTabstopHighlightBackground#132537
  • editor.snippetFinalTabstopHighlightBorder#ac9739
  • editor.snippetTabstopHighlightBackground#132537
  • editor.snippetTabstopHighlightBorder#767d9c
  • editor.wordHighlightBackground#22a2c950
  • editor.wordHighlightStrongBackground#ac973950
  • editorCodeLens.foreground#767d9c
  • editorError.foreground#c94922
  • editorGroup.border#3d8fd1
  • editorGroup.dropBackground#6b739470
  • editorGroupHeader.tabsBackground#232631
  • editorGutter.addedBackground#ac973980
  • editorGutter.deletedBackground#c9492280
  • editorGutter.modifiedBackground#22a2c980
  • editorHoverWidget.background#132537
  • editorHoverWidget.border#767d9c
  • editorIndentGuide.activeBackground#f5f7ff45
  • editorIndentGuide.background#f5f7ff1A
  • editorLineNumber.foreground#767d9c
  • editorLink.activeForeground#22a2c9
  • editorMarkerNavigation.background#474c62
  • editorOverviewRuler.addedForeground#ac973980
  • editorOverviewRuler.border#232631
  • editorOverviewRuler.currentContentForeground#ac9739
  • editorOverviewRuler.deletedForeground#c9492280
  • editorOverviewRuler.errorForeground#c9492280
  • editorOverviewRuler.incomingContentForeground#3d8fd1
  • editorOverviewRuler.infoForeground#22a2c980
  • editorOverviewRuler.modifiedForeground#22a2c980
  • editorOverviewRuler.selectionHighlightForeground#c08b30
  • editorOverviewRuler.warningForeground#c08b3080
  • editorOverviewRuler.wordHighlightForeground#22a2c9
  • editorOverviewRuler.wordHighlightStrongForeground#ac9739
  • editorRuler.foreground#f5f7ff1A
  • editorSuggestWidget.background#474c62
  • editorSuggestWidget.foreground#8c92ac
  • editorSuggestWidget.selectedBackground#202746
  • editorWarning.foreground#c08b30
  • editorWhitespace.foreground#f5f7ff1A
  • editorWidget.background#474c62
  • errorForeground#c94922
  • extensionButton.prominentBackground#ac973990
  • extensionButton.prominentForeground#8c92ac
  • extensionButton.prominentHoverBackground#ac973960
  • focusBorder#767d9c
  • foreground#8c92ac
  • gitDecoration.conflictingResourceForeground#c08b30
  • gitDecoration.deletedResourceForeground#c94922
  • gitDecoration.ignoredResourceForeground#767d9c
  • gitDecoration.modifiedResourceForeground#22a2c9
  • gitDecoration.untrackedResourceForeground#ac9739
  • input.background#132537
  • input.border#232631
  • input.foreground#8c92ac
  • input.placeholderForeground#767d9c
  • inputOption.activeBorder#3d8fd1
  • inputValidation.errorBackground#132537
  • inputValidation.errorBorder#c94922
  • inputValidation.errorForeground#c94922
  • inputValidation.infoBackground#132537
  • inputValidation.infoBorder#3d8fd1
  • inputValidation.infoForeground#3d8fd1
  • inputValidation.warningBackground#132537
  • inputValidation.warningBorder#c08b30
  • inputValidation.warningForeground#c08b30
  • list.activeSelectionBackground#202746
  • list.activeSelectionForeground#8c92ac
  • list.dropBackground#202746
  • list.errorForeground#c94922
  • list.focusBackground#6b739475
  • list.highlightForeground#22a2c9
  • list.hoverBackground#6b739475
  • list.inactiveSelectionBackground#6b739475
  • list.warningForeground#c08b30
  • listFilterWidget.background#132537
  • listFilterWidget.noMatchesOutline#c94922
  • listFilterWidget.outline#202746
  • merge.currentHeaderBackground#ac973990
  • merge.incomingHeaderBackground#3d8fd190
  • notification.background#132537
  • notification.buttonBackground#202746
  • notification.buttonForeground#8c92ac
  • notification.buttonHoverBackground#6b739475
  • notification.errorBackground#c94922
  • notification.errorForeground#132537
  • notification.foreground#8c92ac
  • notification.infoBackground#3d8fd1
  • notification.infoForeground#132537
  • notification.warningBackground#c08b30
  • notification.warningForeground#132537
  • notificationCenter.border#474c62
  • notificationCenterHeader.background#132537
  • notificationCenterHeader.foreground#8c92ac
  • notificationLink.foreground#22a2c9
  • notifications.background#132537
  • notifications.border#474c62
  • notifications.foreground#8c92ac
  • notificationsErrorIcon.foreground#c94922
  • notificationsInfoIcon.foreground#3d8fd1
  • notificationsWarningIcon.foreground#c08b30
  • notificationToast.border#474c62
  • panel.background#132537
  • panel.border#3d8fd1
  • panelInput.border#8c92ac
  • panelTitle.activeBorder#6679cc
  • panelTitle.activeForeground#8c92ac
  • panelTitle.inactiveForeground#767d9c
  • peekView.border#202746
  • peekViewEditor.background#132537
  • peekViewEditor.matchHighlightBackground#5e668780
  • peekViewResult.background#474c62
  • peekViewResult.fileForeground#8c92ac
  • peekViewResult.lineForeground#8c92ac
  • peekViewResult.matchHighlightBackground#5e668780
  • peekViewResult.selectionBackground#202746
  • peekViewResult.selectionForeground#8c92ac
  • peekViewTitle.background#232631
  • peekViewTitleDescription.foreground#767d9c
  • peekViewTitleLabel.foreground#8c92ac
  • pickerGroup.border#3d8fd1
  • pickerGroup.foreground#22a2c9
  • progressBar.background#6679cc
  • scrollbar.shadow#444444
  • selection.background#3d8fd1
  • settings.checkboxBackground#474c62
  • settings.checkboxBorder#232631
  • settings.checkboxForeground#8c92ac
  • settings.dropdownBackground#474c62
  • settings.dropdownBorder#232631
  • settings.dropdownForeground#8c92ac
  • settings.headerForeground#8c92ac
  • settings.modifiedItemIndicator#c08b30
  • settings.numberInputBackground#474c62
  • settings.numberInputBorder#232631
  • settings.numberInputForeground#8c92ac
  • settings.textInputBackground#474c62
  • settings.textInputBorder#232631
  • settings.textInputForeground#8c92ac
  • sideBar.background#474c62
  • sideBarSectionHeader.background#132537
  • sideBarSectionHeader.border#232631
  • sideBarTitle.foreground#8c92ac
  • statusBar.background#232631
  • statusBar.debuggingBackground#c94922
  • statusBar.debuggingForeground#232631
  • statusBar.foreground#8c92ac
  • statusBar.noFolderBackground#232631
  • statusBar.noFolderForeground#8c92ac
  • statusBarItem.prominentBackground#c94922
  • statusBarItem.prominentHoverBackground#c08b30
  • statusBarItem.remoteBackground#3d8fd1
  • statusBarItem.remoteForeground#132537
  • tab.activeBackground#132537
  • tab.activeBorderTop#6679cc80
  • tab.activeForeground#8c92ac
  • tab.border#232631
  • tab.inactiveBackground#474c62
  • tab.inactiveForeground#767d9c
  • terminal.ansiBlack#202746
  • terminal.ansiBlue#3d8fd1
  • terminal.ansiBrightBlack#6b7394
  • terminal.ansiBrightBlue#898ea4
  • terminal.ansiBrightCyan#9c637a
  • terminal.ansiBrightGreen#73ad43
  • terminal.ansiBrightMagenta#dfe2f1
  • terminal.ansiBrightRed#c76b29
  • terminal.ansiBrightWhite#f5f7ff
  • terminal.ansiBrightYellow#5e6687
  • terminal.ansiCyan#22a2c9
  • terminal.ansiGreen#ac9739
  • terminal.ansiMagenta#6679cc
  • terminal.ansiRed#c94922
  • terminal.ansiWhite#979db4
  • terminal.ansiYellow#c08b30
  • terminal.background#132537
  • terminal.border#8c92ac
  • terminal.foreground#8c92ac
  • terminal.selectionBackground#20274650
  • textBlockQuote.background#474c62
  • titleBar.activeBackground#474c62
  • titleBar.activeForeground#8c92ac
  • titleBar.inactiveBackground#232631
  • titleBar.inactiveForeground#767d9c
  • walkThrough.embeddedEditorBackground#474c62
  • welcomePage.buttonBackground#202746
  • welcomePage.buttonHoverBackground#6b739475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#3d8fd1
source#8c92ac
meta.diff, meta.diff.header#767d9c
markup.inserted#ac9739
markup.deleted#c94922
markup.changed#c08b30
invalid#c94922underline italic
invalid.deprecated#8c92acunderline italic
entity.name.filename#5e6687
markup.error#c94922
markup.underlineunderline
markup.bold#c08b30bold
markup.heading#3d8fd1bold
markup.italic#5e6687italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#22a2c9
markup.inline.raw, markup.raw.restructuredtext#ac9739
markup.underline.link, markup.underline.link.image#22a2c9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#6679cc
entity.name.directive.restructuredtext, markup.quote#5e6687italic
meta.separator.markdown#767d9c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ac9739
punctuation.definition.constant.restructuredtext#3d8fd1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#3d8fd1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#8c92ac
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#5e6687
entity.name.type.class, entity.name.class#22a2c9normal
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#3d8fd1italic
entity.other.inherited-class#22a2c9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#767d9c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#6679cc
comment.block.documentation entity.name.type#22a2c9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#22a2c9
comment.block.documentation variable#c08b30italic
constant, variable.other.constant#3d8fd1
constant.character.escape, constant.character.string.escape, constant.regexp#6679cc
entity.name.tag#6679cc
entity.other.attribute-name.parent-selector#6679cc
entity.other.attribute-name#ac9739italic
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#ac9739
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#c08b30italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#ac9739italic
meta.decorator variable.other.object#ac9739
keyword, punctuation.definition.keyword#6679cc
keyword.control.new, keyword.operator.newbold
meta.selector#6679cc
support#22a2c9italic
support.function.magic, support.variable, variable.other.predefined#3d8fd1regular
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#6679cc
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#8c92ac
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#6679cc
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#22a2c9
constant.other.date, constant.other.timestamp#c08b30
variable.other.alias.yaml#ac9739italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#6679ccregular
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#22a2c9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c08b30
storage.modifier#6679cc
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#5e6687
punctuation.definition.group.capture.regexp#6679cc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c94922
punctuation.definition.character-class.regexp#22a2c9
punctuation.definition.group.regexp#c08b30
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c94922
meta.assertion.look-ahead.regexp#ac9739
string#5e6687
punctuation.definition.string.begin, punctuation.definition.string.end#898ea4
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#3d8fd1
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#767d9c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#8c92ac
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c08b30italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#8c92acnormal
meta.selectionset.graphql variable#5e6687
meta.selectionset.graphql meta.arguments variable#8c92ac
entity.name.fragment.graphql, variable.fragment.graphql#22a2c9
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#8c92ac
source.shell variable.other#3d8fd1
support.constant#3d8fd1normal
meta.scope.prerequisites.makefile#5e6687
meta.attribute-selector.scss#5e6687
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#8c92ac
meta.preprocessor.haskell#767d9c