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#9059ff10
  • activityBar.activeBorder#ff59f980
  • activityBar.background#3c4852
  • activityBar.foreground#e9eaec
  • activityBar.inactiveForeground#81a0c1
  • activityBarBadge.background#ee6aea
  • activityBarBadge.foreground#e9eaec
  • badge.background#46545e
  • badge.foreground#e9eaec
  • breadcrumb.activeSelectionForeground#e9eaec
  • breadcrumb.background#2f2f2f
  • breadcrumb.focusForeground#e9eaec
  • breadcrumb.foreground#81a0c1
  • breadcrumbPicker.background#20262b
  • button.background#46545e
  • button.foreground#e9eaec
  • button.secondaryBackground#2f2f2f
  • button.secondaryForeground#e9eaec
  • button.secondaryHoverBackground#3c4852
  • debugToolBar.background#2f3940
  • diffEditor.insertedTextBackground#59ff5920
  • diffEditor.removedTextBackground#ff595950
  • dropdown.background#3c4852
  • dropdown.border#20262b
  • dropdown.foreground#e9eaec
  • editor.background#2f2f2f
  • editor.findMatchBackground#ff9c5980
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#2f3940
  • editor.foreground#e9eaec
  • editor.hoverHighlightBackground#59fff950
  • editor.lineHighlightBorder#46545e
  • editor.rangeHighlightBackground#9059ff15
  • editor.selectionBackground#46545e
  • editor.selectionHighlightBackground#46545e
  • editor.snippetFinalTabstopHighlightBackground#2f2f2f
  • editor.snippetFinalTabstopHighlightBorder#6aee6a
  • editor.snippetTabstopHighlightBackground#2f2f2f
  • editor.snippetTabstopHighlightBorder#81a0c1
  • editor.wordHighlightBackground#59fff950
  • editor.wordHighlightStrongBackground#59ff5950
  • editorBracketHighlight.foreground1#e9eaec
  • editorBracketHighlight.foreground2#ee6aea
  • editorBracketHighlight.foreground3#6aeeea
  • editorBracketHighlight.foreground4#6aee6a
  • editorBracketHighlight.foreground5#966aee
  • editorBracketHighlight.foreground6#ff9c59
  • editorBracketHighlight.unexpectedBracket.foreground#ee6a6a
  • editorCodeLens.foreground#81a0c1
  • editorError.foreground#ee6a6a
  • editorGroup.border#966aee
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#20262b
  • editorGutter.addedBackground#59ff5980
  • editorGutter.deletedBackground#ff595980
  • editorGutter.modifiedBackground#59fff980
  • editorHoverWidget.background#2f2f2f
  • editorHoverWidget.border#81a0c1
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#81a0c1
  • editorLink.activeForeground#6aeeea
  • editorMarkerNavigation.background#2f3940
  • editorOverviewRuler.addedForeground#59ff5980
  • editorOverviewRuler.border#20262b
  • editorOverviewRuler.currentContentForeground#6aee6a
  • editorOverviewRuler.deletedForeground#ff595980
  • editorOverviewRuler.errorForeground#ff595980
  • editorOverviewRuler.incomingContentForeground#966aee
  • editorOverviewRuler.infoForeground#59fff980
  • editorOverviewRuler.modifiedForeground#59fff980
  • editorOverviewRuler.selectionHighlightForeground#ff9c59
  • editorOverviewRuler.warningForeground#ff9c5980
  • editorOverviewRuler.wordHighlightForeground#6aeeea
  • editorOverviewRuler.wordHighlightStrongForeground#6aee6a
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#2f3940
  • editorSuggestWidget.foreground#e9eaec
  • editorSuggestWidget.selectedBackground#46545e
  • editorWarning.foreground#6aeeea
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#2f3940
  • errorForeground#ee6a6a
  • extensionButton.prominentBackground#59ff5990
  • extensionButton.prominentForeground#e9eaec
  • extensionButton.prominentHoverBackground#59ff5960
  • focusBorder#81a0c1
  • foreground#e9eaec
  • gitDecoration.conflictingResourceForeground#ff9c59
  • gitDecoration.deletedResourceForeground#ee6a6a
  • gitDecoration.ignoredResourceForeground#81a0c1
  • gitDecoration.modifiedResourceForeground#6aeeea
  • gitDecoration.untrackedResourceForeground#6aee6a
  • input.background#2f2f2f
  • input.border#20262b
  • input.foreground#e9eaec
  • input.placeholderForeground#81a0c1
  • inputOption.activeBorder#966aee
  • inputValidation.errorBorder#ee6a6a
  • inputValidation.infoBorder#ee6aea
  • inputValidation.warningBorder#ff9c59
  • list.activeSelectionBackground#46545e
  • list.activeSelectionForeground#e9eaec
  • list.dropBackground#46545e
  • list.errorForeground#ee6a6a
  • list.focusBackground#44475A75
  • list.highlightForeground#6aeeea
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ff9c59
  • listFilterWidget.background#3c4852
  • listFilterWidget.noMatchesOutline#ee6a6a
  • listFilterWidget.outline#46545e
  • merge.currentHeaderBackground#59ff5990
  • merge.incomingHeaderBackground#9059ff90
  • panel.background#2f2f2f
  • panel.border#966aee
  • panelTitle.activeBorder#ee6aea
  • panelTitle.activeForeground#e9eaec
  • panelTitle.inactiveForeground#81a0c1
  • peekView.border#46545e
  • peekViewEditor.background#2f2f2f
  • peekViewEditor.matchHighlightBackground#ffff5980
  • peekViewResult.background#2f3940
  • peekViewResult.fileForeground#e9eaec
  • peekViewResult.lineForeground#e9eaec
  • peekViewResult.matchHighlightBackground#ffff5980
  • peekViewResult.selectionBackground#46545e
  • peekViewResult.selectionForeground#e9eaec
  • peekViewTitle.background#20262b
  • peekViewTitleDescription.foreground#81a0c1
  • peekViewTitleLabel.foreground#e9eaec
  • pickerGroup.border#966aee
  • pickerGroup.foreground#6aeeea
  • progressBar.background#ee6aea
  • selection.background#966aee
  • settings.checkboxBackground#2f3940
  • settings.checkboxBorder#20262b
  • settings.checkboxForeground#e9eaec
  • settings.dropdownBackground#2f3940
  • settings.dropdownBorder#20262b
  • settings.dropdownForeground#e9eaec
  • settings.headerForeground#e9eaec
  • settings.modifiedItemIndicator#ff9c59
  • settings.numberInputBackground#2f3940
  • settings.numberInputBorder#20262b
  • settings.numberInputForeground#e9eaec
  • settings.textInputBackground#2f3940
  • settings.textInputBorder#20262b
  • settings.textInputForeground#e9eaec
  • sideBar.background#2f3940
  • sideBarSectionHeader.background#2f2f2f
  • sideBarSectionHeader.border#20262b
  • sideBarTitle.foreground#e9eaec
  • statusBar.background#20262b
  • statusBar.debuggingBackground#ee6a6a
  • statusBar.debuggingForeground#20262b
  • statusBar.foreground#e9eaec
  • statusBar.noFolderBackground#20262b
  • statusBar.noFolderForeground#e9eaec
  • statusBarItem.prominentBackground#ee6a6a
  • statusBarItem.prominentHoverBackground#ff9c59
  • statusBarItem.remoteBackground#966aee
  • statusBarItem.remoteForeground#2f2f2f
  • tab.activeBackground#2f2f2f
  • tab.activeBorderTop#ff59f980
  • tab.activeForeground#e9eaec
  • tab.border#20262b
  • tab.inactiveBackground#2f3940
  • tab.inactiveForeground#81a0c1
  • terminal.ansiBlack#2f2f2f
  • terminal.ansiBlue#966aee
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#c8aff6
  • terminal.ansiBrightCyan#aff6f4
  • terminal.ansiBrightGreen#aff6af
  • terminal.ansiBrightMagenta#f6aff4
  • terminal.ansiBrightRed#f6afaf
  • terminal.ansiBrightWhite#e9eaec
  • terminal.ansiBrightYellow#f6f6af
  • terminal.ansiCyan#6aeeea
  • terminal.ansiGreen#6aee6a
  • terminal.ansiMagenta#ee6aea
  • terminal.ansiRed#ee6a6a
  • terminal.ansiWhite#e9eaec
  • terminal.ansiYellow#eeee6a
  • terminal.background#2f2f2f
  • terminal.foreground#e9eaec
  • titleBar.activeBackground#2f3940
  • titleBar.activeForeground#e9eaec
  • titleBar.inactiveBackground#20262b
  • titleBar.inactiveForeground#81a0c1
  • walkThrough.embeddedEditorBackground#2f3940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#966aee
meta.diff, meta.diff.header#81a0c1
markup.inserted#6aee6a
markup.deleted#ee6a6a
markup.changed#ff9c59
invalid#ee6a6aunderline italic
invalid.deprecated#e9eaecunderline italic
entity.name.filename#eeee6a
markup.error#ee6a6a
markup.underlineunderline
markup.bold#ff9c59bold
markup.heading#966aeebold
markup.italic#eeee6aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6aeeea
markup.inline.raw, markup.raw.restructuredtext#6aee6a
markup.underline.link, markup.underline.link.image#6aeeea
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ee6aea
entity.name.directive.restructuredtext, markup.quote#eeee6aitalic
meta.separator.markdown#81a0c1
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6aee6a
punctuation.definition.constant.restructuredtext#966aee
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#966aee
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e9eaec
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#eeee6a
entity.name.type.class, entity.name.class#6aeeeanormal
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#966aeeitalic
entity.other.inherited-class#6aeeeaitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#81a0c1
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ee6aea
comment.block.documentation entity.name.type#6aeeeaitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6aeeea
comment.block.documentation variable#ff9c59italic
constant, variable.other.constant#966aee
constant.character.escape, constant.character.string.escape, constant.regexp#ee6aea
entity.name.tag#ee6aea
entity.other.attribute-name.parent-selector#ee6aea
entity.other.attribute-name#6aee6aitalic
entity.name.function, 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#6aee6a
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#ff9c59italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6aee6aitalic
meta.decorator variable.other.object#6aee6a
keyword, punctuation.definition.keyword#ee6aea
keyword.control.new, keyword.operator.newbold
meta.selector#ee6aea
support#6aeeeaitalic
support.function.magic, support.variable, variable.other.predefined#966aeeregular
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#ee6aea
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#e9eaec
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#ee6aea
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6aeeea
constant.other.date, constant.other.timestamp#ff9c59
variable.other.alias.yaml#6aee6aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ee6aearegular
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#6aeeeaitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff9c59
storage.modifier#ee6aea
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#eeee6a
punctuation.definition.group.capture.regexp#ee6aea
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6a6a
punctuation.definition.character-class.regexp#6aeeea
punctuation.definition.group.regexp#ff9c59
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6a6a
meta.assertion.look-ahead.regexp#6aee6a
string#eeee6a
punctuation.definition.string.begin, punctuation.definition.string.end#f6f6af
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#aff6f4
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#81a0c1
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e9eaec
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ff9c59italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e9eaecnormal
meta.selectionset.graphql variable#eeee6a
meta.selectionset.graphql meta.arguments variable#e9eaec
entity.name.fragment.graphql, variable.fragment.graphql#6aeeea
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#e9eaec
source.shell variable.other#966aee
support.constant#966aeenormal
meta.scope.prerequisites.makefile#eeee6a
meta.attribute-selector.scss#eeee6a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e9eaec
meta.preprocessor.haskell#81a0c1
log.error#ee6a6abold
log.warning#eeee6abold