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.background#292929
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#539AE0
  • activityBarBadge.foreground#F8F8F2
  • badge.background#4e4e4e
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#202020
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#111111
  • button.background#4e4e4e
  • button.foreground#F8F8F2
  • contrastBorder#111111
  • debugToolBar.background#202020
  • diffEditor.insertedTextBackground#3BB87920
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#292929
  • dropdown.border#111111
  • dropdown.foreground#F8F8F2
  • editor.background#232323
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44444475
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#111111
  • editor.lineHighlightBorder#4e4e4e
  • editor.rangeHighlightBackground#B8B81615
  • editor.selectionBackground#4e4e4e
  • editor.selectionHighlightBackground#3b3b3b
  • editor.snippetFinalTabstopHighlightBackground#232323
  • editor.snippetFinalTabstopHighlightBorder#3BB879
  • editor.snippetTabstopHighlightBackground#232323
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#D4D4D450
  • editor.wordHighlightStrongBackground#3BB87950
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#B8B816
  • editorGroup.dropBackground#44444470
  • editorGroupHeader.tabsBackground#111111
  • editorGutter.addedBackground#3BB87980
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#D4D4D480
  • editorHoverWidget.background#232323
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#424450
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#D4D4D4
  • editorMarkerNavigation.background#202020
  • editorOverviewRuler.addedForeground#3BB87980
  • editorOverviewRuler.border#111111
  • editorOverviewRuler.currentContentForeground#3BB879
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#B8B816
  • editorOverviewRuler.infoForeground#D4D4D480
  • editorOverviewRuler.modifiedForeground#D4D4D480
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#D4D4D4
  • editorOverviewRuler.wordHighlightStrongForeground#3BB879
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#4e4e4e
  • editorWarning.foreground#D4D4D4
  • editorWhitespace.foreground#424450
  • editorWidget.background#202020
  • errorForeground#FF5555
  • extensionButton.prominentBackground#3BB87990
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#3BB87960
  • focusBorder#6272A4
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#D4D4D4
  • gitDecoration.untrackedResourceForeground#3BB879
  • input.background#232323
  • input.border#111111
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#B8B816
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#539AE0
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#4e4e4e
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#4e4e4e
  • list.errorForeground#FF5555
  • list.focusBackground#44444475
  • list.highlightForeground#D4D4D4
  • list.hoverBackground#44444475
  • list.inactiveSelectionBackground#44444475
  • list.warningForeground#FFB86C
  • listFilterWidget.background#292929
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#3b3b3b
  • merge.currentHeaderBackground#3BB87990
  • merge.incomingHeaderBackground#B8B81690
  • notification.background#232323
  • notification.buttonBackground#4e4e4e
  • notification.buttonForeground#F8F8F2
  • notification.buttonHoverBackground#44444475
  • notification.errorBackground#FF5555
  • notification.errorForeground#F8F8F2
  • notification.foreground#F8F8F2
  • notification.infoBackground#D4D4D4
  • notification.infoForeground#232323
  • notification.warningBackground#FFB86C
  • notification.warningForeground#232323
  • panel.background#232323
  • panel.border#B8B816
  • panelTitle.activeBorder#539AE0
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#4e4e4e
  • peekViewEditor.background#232323
  • peekViewEditor.matchHighlightBackground#00D0D080
  • peekViewResult.background#202020
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#F8F8F2
  • peekViewResult.matchHighlightBackground#00D0D080
  • peekViewResult.selectionBackground#4e4e4e
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#111111
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#B8B816
  • pickerGroup.foreground#D4D4D4
  • progressBar.background#539AE0
  • selection.background#B8B816
  • settings.checkboxBackground#202020
  • settings.checkboxBorder#111111
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#202020
  • settings.dropdownBorder#111111
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemForeground#FFB86C
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#202020
  • settings.numberInputBorder#111111
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#202020
  • settings.textInputBorder#111111
  • settings.textInputForeground#F8F8F2
  • sideBar.background#202020
  • sideBarSectionHeader.background#232323
  • sideBarSectionHeader.border#111111
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#111111
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#111111
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#111111
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#B8B816
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#232323
  • tab.activeBorder#539AE080
  • tab.activeForeground#F8F8F2
  • tab.border#111111
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#353535
  • 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#3BB879
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#232323
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#202020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#B8B816
source#F8F8F2
meta.diff, meta.diff.header#6272A4
markup.inserted#3BB879
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#00D0D0
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#B8B816bold
markup.italic#00D0D0italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D4D4D4
markup.inline.raw, markup.raw.restructuredtext#3BB879
markup.underline.link, markup.underline.link.image#D4D4D4
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#539AE0
entity.name.directive.restructuredtext, markup.quote#00D0D0italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3BB879
punctuation.definition.constant.restructuredtext#B8B816
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#B8B816
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F8F8F2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#00D0D0
entity.name.type.class#D4D4D4normal
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#B8B816italic
entity.other.inherited-class#D4D4D4italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#539AE0
comment.block.documentation entity.name.type#D4D4D4italic
comment.block.documentation entity.name.type punctuation.definition.bracket#D4D4D4
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#B8B816
constant.character.escape, constant.character.string.escape, constant.regexp#539AE0
entity.name.tag#539AE0
entity.other.attribute-name.parent-selector#539AE0
entity.other.attribute-name#3BB879italic
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#3BB879
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#3BB879italic
meta.decorator variable.other.object#3BB879
keyword, punctuation.definition.keyword#539AE0
keyword.control.new, keyword.operator.newbold
meta.selector#539AE0
support#D4D4D4italic
support.function.magic, support.variable, variable.other.predefined#B8B816regular
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#B262B2
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#F8F8F2
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#539AE0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#D4D4D4
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#3BB879italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#539AE0regular
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#D4D4D4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#539AE0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#00D0D0
punctuation.definition.group.capture.regexp#539AE0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#D4D4D4
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#3BB879
string#00D0D0
punctuation.definition.string.begin, punctuation.definition.string.end#68D8D8
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#BFBFBF
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#F8F8F2
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#F8F8F2normal
meta.selectionset.graphql variable#00D0D0
meta.selectionset.graphql meta.arguments variable#F8F8F2
entity.name.fragment.graphql, variable.fragment.graphql#D4D4D4
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#F8F8F2
source.shell variable.other#B8B816
support.constant#B8B816normal
meta.scope.prerequisites.makefile#00D0D0
meta.attribute-selector.scss#00D0D0
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2
meta.preprocessor.haskell#6272A4