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#0351E610
  • activityBar.activeBorder#0351E680
  • activityBar.background#22242c
  • activityBar.foreground#4682B4
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#0351E6
  • activityBarBadge.foreground#4682B4
  • badge.background#444444
  • badge.foreground#4682B4
  • breadcrumb.activeSelectionForeground#4682B4
  • breadcrumb.background#151515
  • breadcrumb.focusForeground#4682B4
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#191A21
  • button.background#444444
  • button.foreground#4682B4
  • button.secondaryBackground#151515
  • button.secondaryForeground#4682B4
  • button.secondaryHoverBackground#22242c
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#22242c
  • dropdown.border#191A21
  • dropdown.foreground#4682B4
  • editor.background#151515
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C
  • editor.foreground#4682B4
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#444444
  • editor.rangeHighlightBackground#0351E615
  • editor.selectionBackground#444444
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#151515
  • editor.snippetFinalTabstopHighlightBorder#50FA7B
  • editor.snippetTabstopHighlightBackground#151515
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorBracketHighlight.foreground1#4682B4
  • editorBracketHighlight.foreground2#0351E6
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#50FA7B
  • editorBracketHighlight.foreground5#0351E6
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#0351E6
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#151515
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#50FA7B
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#0351E6
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#50FA7B
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#4682B4
  • editorSuggestWidget.selectedBackground#444444
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#FF5555
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#4682B4
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#6272A4
  • foreground#4682B4
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#151515
  • input.border#191A21
  • input.foreground#4682B4
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#0351E6
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#0351E6
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#444444
  • list.activeSelectionForeground#4682B4
  • list.dropBackground#444444
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • listFilterWidget.background#22242c
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#0351E690
  • panel.background#151515
  • panel.border#0351E6
  • panelTitle.activeBorder#0351E6
  • panelTitle.activeForeground#4682B4
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#444444
  • peekViewEditor.background#151515
  • peekViewEditor.matchHighlightBackground#f7d56080
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#4682B4
  • peekViewResult.lineForeground#4682B4
  • peekViewResult.matchHighlightBackground#f7d56080
  • peekViewResult.selectionBackground#444444
  • peekViewResult.selectionForeground#4682B4
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#4682B4
  • pickerGroup.border#0351E6
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#0351E6
  • selection.background#0351E6
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#4682B4
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#4682B4
  • settings.headerForeground#4682B4
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#4682B4
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#4682B4
  • sideBar.background#21222C
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#4682B4
  • statusBar.background#191A21
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#4682B4
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#4682B4
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#0351E6
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#151515
  • tab.activeBorderTop#0351E680
  • tab.activeForeground#4682B4
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#f7d560
  • terminal.background#151515
  • terminal.foreground#4682B4
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#4682B4
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0351E6
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#4682B4underline italic
entity.name.filename#f7d560
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#0351E6bold
markup.italic#f7d560italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#50FA7B
markup.underline.link, markup.underline.link.image#8BE9FD
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#0351E6
entity.name.directive.restructuredtext, markup.quote#f7d560italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B
punctuation.definition.constant.restructuredtext#0351E6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0351E6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#4682B4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f7d560
entity.name.type.class, entity.name.class#8BE9FDnormal
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#0351E6italic
entity.other.inherited-class#8BE9FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#0351E6
comment.block.documentation entity.name.type#8BE9FDitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#0351E6
constant.character.escape, constant.character.string.escape, constant.regexp#0351E6
entity.name.tag#0351E6
entity.other.attribute-name.parent-selector#0351E6
entity.other.attribute-name#50FA7Bitalic
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#50FA7B
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#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B
keyword, punctuation.definition.keyword#0351E6
keyword.control.new, keyword.operator.newbold
meta.selector#0351E6
support#8BE9FDitalic
support.function.magic, support.variable, variable.other.predefined#0351E6regular
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#0351E6
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#4682B4
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#0351E6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#50FA7Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#0351E6regular
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#8BE9FDitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#0351E6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f7d560
punctuation.definition.group.capture.regexp#0351E6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#8BE9FD
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#50FA7B
string#f7d560
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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#6272A4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#4682B4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB86Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#4682B4normal
meta.selectionset.graphql variable#f7d560
meta.selectionset.graphql meta.arguments variable#4682B4
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD
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#4682B4
source.shell variable.other#0351E6
support.constant#0351E6normal
meta.scope.prerequisites.makefile#f7d560
meta.attribute-selector.scss#f7d560
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#4682B4
meta.preprocessor.haskell#6272A4
log.error#FF5555bold
log.warning#f7d560bold