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#8caaee10
  • activityBar.activeBorder#ca9ee680
  • activityBar.background#303446
  • activityBar.foreground#c6d0f5
  • activityBar.inactiveForeground#51576d
  • activityBarBadge.background#ca9ee6
  • activityBarBadge.foreground#303446
  • badge.background#292c3c
  • badge.foreground#c6d0f5
  • breadcrumb.activeSelectionForeground#c6d0f5
  • breadcrumb.background#303446
  • breadcrumb.focusForeground#c6d0f5
  • breadcrumb.foreground#51576d
  • breadcrumbPicker.background#232634
  • button.background#292c3c
  • button.foreground#c6d0f5
  • checkbox.background#292c3c
  • checkbox.border#232634
  • checkbox.foreground#c6d0f5
  • contrastBorder#232634
  • debugToolBar.background#292c3c
  • diffEditor.insertedTextBackground#a6d18920
  • diffEditor.removedTextBackground#e7828450
  • dropdown.background#303446
  • dropdown.border#232634
  • dropdown.foreground#c6d0f5
  • editor.background#303446
  • editor.findMatchBackground#ef9f7680
  • editor.findMatchHighlightBackground#babbf140
  • editor.findRangeHighlightBackground#41455975
  • editor.foldBackground#292c3c
  • editor.foreground#c6d0f5
  • editor.hoverHighlightBackground#232634
  • editor.lineHighlightBorder#292c3c
  • editor.rangeHighlightBackground#8caaee15
  • editor.selectionBackground#292c3c
  • editor.selectionHighlightBackground#292c3c
  • editor.snippetFinalTabstopHighlightBackground#303446
  • editor.snippetFinalTabstopHighlightBorder#a6d189
  • editor.snippetTabstopHighlightBackground#303446
  • editor.snippetTabstopHighlightBorder#51576d
  • editor.wordHighlightBackground#81c8be50
  • editor.wordHighlightStrongBackground#a6d18950
  • editorCodeLens.foreground#51576d
  • editorError.foreground#e78284
  • editorGroup.border#8caaee
  • editorGroup.dropBackground#41455970
  • editorGroupHeader.tabsBackground#232634
  • editorGutter.addedBackground#a6d18980
  • editorGutter.deletedBackground#e7828480
  • editorGutter.modifiedBackground#81c8be80
  • editorHoverWidget.background#303446
  • editorHoverWidget.border#51576d
  • editorIndentGuide.activeBackground#babbf145
  • editorIndentGuide.background#babbf11A
  • editorLineNumber.foreground#51576d
  • editorLink.activeForeground#81c8be
  • editorMarkerNavigation.background#292c3c
  • editorOverviewRuler.addedForeground#a6d18980
  • editorOverviewRuler.border#232634
  • editorOverviewRuler.currentContentForeground#a6d189
  • editorOverviewRuler.deletedForeground#e7828480
  • editorOverviewRuler.errorForeground#e7828480
  • editorOverviewRuler.incomingContentForeground#8caaee
  • editorOverviewRuler.infoForeground#81c8be80
  • editorOverviewRuler.modifiedForeground#81c8be80
  • editorOverviewRuler.selectionHighlightForeground#ef9f76
  • editorOverviewRuler.warningForeground#ef9f7680
  • editorOverviewRuler.wordHighlightForeground#81c8be
  • editorOverviewRuler.wordHighlightStrongForeground#a6d189
  • editorRuler.foreground#babbf11A
  • editorSuggestWidget.background#292c3c
  • editorSuggestWidget.foreground#c6d0f5
  • editorSuggestWidget.selectedBackground#292c3c
  • editorWarning.foreground#ef9f76
  • editorWhitespace.foreground#babbf11A
  • editorWidget.background#292c3c
  • errorForeground#e78284
  • extensionButton.prominentBackground#a6d18990
  • extensionButton.prominentForeground#c6d0f5
  • extensionButton.prominentHoverBackground#a6d18960
  • focusBorder#51576d
  • foreground#c6d0f5
  • gitDecoration.conflictingResourceForeground#ef9f76
  • gitDecoration.deletedResourceForeground#e78284
  • gitDecoration.ignoredResourceForeground#51576d
  • gitDecoration.modifiedResourceForeground#81c8be
  • gitDecoration.untrackedResourceForeground#a6d189
  • input.background#303446
  • input.border#232634
  • input.foreground#c6d0f5
  • input.placeholderForeground#51576d
  • inputOption.activeBorder#8caaee
  • inputValidation.errorBackground#303446
  • inputValidation.errorBorder#e78284
  • inputValidation.errorForeground#e78284
  • inputValidation.infoBackground#303446
  • inputValidation.infoBorder#8caaee
  • inputValidation.infoForeground#8caaee
  • inputValidation.warningBackground#303446
  • inputValidation.warningBorder#ef9f76
  • inputValidation.warningForeground#ef9f76
  • list.activeSelectionBackground#292c3c
  • list.activeSelectionForeground#c6d0f5
  • list.dropBackground#292c3c
  • list.errorForeground#e78284
  • list.focusBackground#41455975
  • list.highlightForeground#81c8be
  • list.hoverBackground#41455975
  • list.inactiveSelectionBackground#41455975
  • list.warningForeground#ef9f76
  • listFilterWidget.background#303446
  • listFilterWidget.noMatchesOutline#e78284
  • listFilterWidget.outline#292c3c
  • merge.currentHeaderBackground#a6d18990
  • merge.incomingHeaderBackground#8caaee90
  • notification.background#303446
  • notification.buttonBackground#292c3c
  • notification.buttonForeground#c6d0f5
  • notification.buttonHoverBackground#41455975
  • notification.errorBackground#e78284
  • notification.errorForeground#303446
  • notification.foreground#c6d0f5
  • notification.infoBackground#8caaee
  • notification.infoForeground#303446
  • notification.warningBackground#ef9f76
  • notification.warningForeground#303446
  • notificationCenter.border#292c3c
  • notificationCenterHeader.background#303446
  • notificationCenterHeader.foreground#c6d0f5
  • notificationLink.foreground#81c8be
  • notifications.background#303446
  • notifications.border#292c3c
  • notifications.foreground#c6d0f5
  • notificationsErrorIcon.foreground#e78284
  • notificationsInfoIcon.foreground#8caaee
  • notificationsWarningIcon.foreground#ef9f76
  • notificationToast.border#292c3c
  • panel.background#303446
  • panel.border#8caaee
  • panelInput.border#c6d0f5
  • panelTitle.activeBorder#ca9ee6
  • panelTitle.activeForeground#c6d0f5
  • panelTitle.inactiveForeground#51576d
  • peekView.border#292c3c
  • peekViewEditor.background#303446
  • peekViewEditor.matchHighlightBackground#f2d5cf80
  • peekViewResult.background#292c3c
  • peekViewResult.fileForeground#c6d0f5
  • peekViewResult.lineForeground#c6d0f5
  • peekViewResult.matchHighlightBackground#f2d5cf80
  • peekViewResult.selectionBackground#292c3c
  • peekViewResult.selectionForeground#c6d0f5
  • peekViewTitle.background#232634
  • peekViewTitleDescription.foreground#51576d
  • peekViewTitleLabel.foreground#c6d0f5
  • pickerGroup.border#8caaee
  • pickerGroup.foreground#81c8be
  • progressBar.background#ca9ee6
  • scrollbar.shadow#444444
  • selection.background#8caaee
  • settings.checkboxBackground#292c3c
  • settings.checkboxBorder#232634
  • settings.checkboxForeground#c6d0f5
  • settings.dropdownBackground#292c3c
  • settings.dropdownBorder#232634
  • settings.dropdownForeground#c6d0f5
  • settings.headerForeground#c6d0f5
  • settings.modifiedItemIndicator#ef9f76
  • settings.numberInputBackground#292c3c
  • settings.numberInputBorder#232634
  • settings.numberInputForeground#c6d0f5
  • settings.textInputBackground#292c3c
  • settings.textInputBorder#232634
  • settings.textInputForeground#c6d0f5
  • sideBar.background#292c3c
  • sideBarSectionHeader.background#303446
  • sideBarSectionHeader.border#232634
  • sideBarTitle.foreground#c6d0f5
  • statusBar.background#232634
  • statusBar.debuggingBackground#e78284
  • statusBar.debuggingForeground#232634
  • statusBar.foreground#c6d0f5
  • statusBar.noFolderBackground#232634
  • statusBar.noFolderForeground#c6d0f5
  • statusBarItem.prominentBackground#e78284
  • statusBarItem.prominentHoverBackground#ef9f76
  • statusBarItem.remoteBackground#8caaee
  • statusBarItem.remoteForeground#303446
  • tab.activeBackground#303446
  • tab.activeBorderTop#ca9ee680
  • tab.activeForeground#c6d0f5
  • tab.border#232634
  • tab.inactiveBackground#292c3c
  • tab.inactiveForeground#51576d
  • terminal.ansiBlack#292c3c
  • terminal.ansiBlue#8caaee
  • terminal.ansiBrightBlack#414559
  • terminal.ansiBrightBlue#85c1dc
  • terminal.ansiBrightCyan#99d1db
  • terminal.ansiBrightGreen#a6d189
  • terminal.ansiBrightMagenta#f4b8e4
  • terminal.ansiBrightRed#ea999c
  • terminal.ansiBrightWhite#babbf1
  • terminal.ansiBrightYellow#f2d5cf
  • terminal.ansiCyan#81c8be
  • terminal.ansiGreen#a6d189
  • terminal.ansiMagenta#ca9ee6
  • terminal.ansiRed#e78284
  • terminal.ansiWhite#f2d5cf
  • terminal.ansiYellow#ef9f76
  • terminal.background#303446
  • terminal.border#c6d0f5
  • terminal.foreground#c6d0f5
  • terminal.selectionBackground#292c3c50
  • textBlockQuote.background#292c3c
  • titleBar.activeBackground#292c3c
  • titleBar.activeForeground#c6d0f5
  • titleBar.inactiveBackground#232634
  • titleBar.inactiveForeground#51576d
  • walkThrough.embeddedEditorBackground#292c3c
  • welcomePage.buttonBackground#292c3c
  • welcomePage.buttonHoverBackground#41455975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8caaee
source#c6d0f5
meta.diff, meta.diff.header#51576d
markup.inserted#a6d189
markup.deleted#e78284
markup.changed#ef9f76
invalid#e78284underline italic
invalid.deprecated#c6d0f5underline italic
entity.name.filename#f2d5cf
markup.error#e78284
markup.underlineunderline
markup.bold#ef9f76bold
markup.heading#8caaeebold
markup.italic#f2d5cfitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#81c8be
markup.inline.raw, markup.raw.restructuredtext#a6d189
markup.underline.link, markup.underline.link.image#81c8be
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ca9ee6
entity.name.directive.restructuredtext, markup.quote#f2d5cfitalic
meta.separator.markdown#51576d
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a6d189
punctuation.definition.constant.restructuredtext#8caaee
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8caaee
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c6d0f5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f2d5cf
entity.name.type.class, entity.name.class#81c8benormal
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#8caaeeitalic
entity.other.inherited-class#81c8beitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#51576d
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ca9ee6
comment.block.documentation entity.name.type#81c8beitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#81c8be
comment.block.documentation variable#ef9f76italic
constant, variable.other.constant#8caaee
constant.character.escape, constant.character.string.escape, constant.regexp#ca9ee6
entity.name.tag#ca9ee6
entity.other.attribute-name.parent-selector#ca9ee6
entity.other.attribute-name#a6d189italic
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#a6d189
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#ef9f76italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a6d189italic
meta.decorator variable.other.object#a6d189
keyword, punctuation.definition.keyword#ca9ee6
keyword.control.new, keyword.operator.newbold
meta.selector#ca9ee6
support#81c8beitalic
support.function.magic, support.variable, variable.other.predefined#8caaeeregular
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#ca9ee6
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#c6d0f5
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#ca9ee6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#81c8be
constant.other.date, constant.other.timestamp#ef9f76
variable.other.alias.yaml#a6d189italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ca9ee6regular
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#81c8beitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ef9f76
storage.modifier#ca9ee6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f2d5cf
punctuation.definition.group.capture.regexp#ca9ee6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e78284
punctuation.definition.character-class.regexp#81c8be
punctuation.definition.group.regexp#ef9f76
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e78284
meta.assertion.look-ahead.regexp#a6d189
string#f2d5cf
punctuation.definition.string.begin, punctuation.definition.string.end#e5c890
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8caaee
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#51576d
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c6d0f5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ef9f76italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c6d0f5normal
meta.selectionset.graphql variable#f2d5cf
meta.selectionset.graphql meta.arguments variable#c6d0f5
entity.name.fragment.graphql, variable.fragment.graphql#81c8be
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#c6d0f5
source.shell variable.other#8caaee
support.constant#8caaeenormal
meta.scope.prerequisites.makefile#f2d5cf
meta.attribute-selector.scss#f2d5cf
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c6d0f5
meta.preprocessor.haskell#51576d