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#71D2FE10
  • activityBar.activeBorder#B29EE080
  • activityBar.background#272B27
  • activityBar.foreground#F7F6F3
  • activityBar.inactiveForeground#A0ABA0
  • activityBarBadge.background#F4869E
  • activityBarBadge.foreground#F7F6F3
  • badge.background#2C3539
  • badge.foreground#F7F6F3
  • breadcrumb.activeSelectionForeground#F7F6F3
  • breadcrumb.background#1A1D1A
  • breadcrumb.focusForeground#F7F6F3
  • breadcrumb.foreground#A0ABA0
  • breadcrumbPicker.background#191a21
  • button.background#2C3539
  • button.foreground#F7F6F3
  • button.secondaryBackground#1A1D1A
  • button.secondaryForeground#F7F6F3
  • button.secondaryHoverBackground#272B27
  • debugToolBar.background#131513
  • diffEditor.insertedTextBackground#00BDBD20
  • diffEditor.removedTextBackground#A6D5CE50
  • dropdown.background#272B27
  • dropdown.border#191a21
  • dropdown.foreground#F7F6F3
  • editor.background#1A1D1A
  • editor.findMatchBackground#CEC1EC80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#2C353975
  • editor.foldBackground#13151380
  • editor.foreground#F7F6F3
  • editor.hoverHighlightBackground#F4869E50
  • editor.lineHighlightBorder#2C3539
  • editor.rangeHighlightBackground#71D2FE15
  • editor.selectionBackground#2C3539
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#1A1D1A
  • editor.snippetFinalTabstopHighlightBorder#00BDBD
  • editor.snippetTabstopHighlightBackground#1A1D1A
  • editor.snippetTabstopHighlightBorder#A0ABA0
  • editor.wordHighlightBackground#F4869E50
  • editor.wordHighlightStrongBackground#00BDBD50
  • editorBracketHighlight.foreground1#F7F6F3
  • editorBracketHighlight.foreground2#B29EE0
  • editorBracketHighlight.foreground3#F4869E
  • editorBracketHighlight.foreground4#00BDBD
  • editorBracketHighlight.foreground5#71D2FE
  • editorBracketHighlight.foreground6#CEC1EC
  • editorBracketHighlight.unexpectedBracket.foreground#A6D5CE
  • editorCodeLens.foreground#A0ABA0
  • editorError.foreground#A6D5CE
  • editorGroup.border#71D2FE
  • editorGroup.dropBackground#2C353970
  • editorGroupHeader.tabsBackground#191a21
  • editorGutter.addedBackground#00BDBD80
  • editorGutter.deletedBackground#A6D5CE80
  • editorGutter.modifiedBackground#F4869E80
  • editorHoverWidget.background#1A1D1A
  • editorHoverWidget.border#A0ABA0
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.foreground#A0ABA0
  • editorLink.activeForeground#F4869E
  • editorMarkerNavigation.background#131513
  • editorOverviewRuler.addedForeground#00BDBD80
  • editorOverviewRuler.border#191a21
  • editorOverviewRuler.currentContentForeground#00BDBD
  • editorOverviewRuler.deletedForeground#A6D5CE80
  • editorOverviewRuler.errorForeground#A6D5CE80
  • editorOverviewRuler.incomingContentForeground#71D2FE
  • editorOverviewRuler.infoForeground#F4869E80
  • editorOverviewRuler.modifiedForeground#F4869E80
  • editorOverviewRuler.selectionHighlightForeground#CEC1EC
  • editorOverviewRuler.warningForeground#CEC1EC80
  • editorOverviewRuler.wordHighlightForeground#F4869E
  • editorOverviewRuler.wordHighlightStrongForeground#00BDBD
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#131513
  • editorSuggestWidget.foreground#F7F6F3
  • editorSuggestWidget.selectedBackground#2C3539
  • editorWarning.foreground#F4869E
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#131513
  • errorForeground#A6D5CE
  • extensionButton.prominentBackground#00BDBD90
  • extensionButton.prominentForeground#F7F6F3
  • extensionButton.prominentHoverBackground#00BDBD60
  • focusBorder#A0ABA0
  • foreground#F7F6F3
  • gitDecoration.conflictingResourceForeground#CEC1EC
  • gitDecoration.deletedResourceForeground#A6D5CE
  • gitDecoration.ignoredResourceForeground#A0ABA0
  • gitDecoration.modifiedResourceForeground#F4869E
  • gitDecoration.untrackedResourceForeground#00BDBD
  • input.background#1A1D1A
  • input.border#191a21
  • input.foreground#F7F6F3
  • input.placeholderForeground#A0ABA0
  • inputOption.activeBorder#71D2FE
  • inputValidation.errorBorder#A6D5CE
  • inputValidation.infoBorder#B29EE0
  • inputValidation.warningBorder#CEC1EC
  • list.activeSelectionBackground#2C3539
  • list.activeSelectionForeground#F7F6F3
  • list.dropBackground#2C3539
  • list.errorForeground#A6D5CE
  • list.focusBackground#2C353975
  • list.highlightForeground#F4869E
  • list.hoverBackground#2C353975
  • list.inactiveSelectionBackground#2C353975
  • list.warningForeground#CEC1EC
  • listFilterWidget.background#272B27
  • listFilterWidget.noMatchesOutline#A6D5CE
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#00BDBD90
  • merge.incomingHeaderBackground#71D2FE90
  • panel.background#1A1D1A
  • panel.border#71D2FE
  • panelTitle.activeBorder#B29EE0
  • panelTitle.activeForeground#F7F6F3
  • panelTitle.inactiveForeground#A0ABA0
  • peekView.border#2C3539
  • peekViewEditor.background#1A1D1A
  • peekViewEditor.matchHighlightBackground#FDBBA780
  • peekViewResult.background#131513
  • peekViewResult.fileForeground#F7F6F3
  • peekViewResult.lineForeground#F7F6F3
  • peekViewResult.matchHighlightBackground#FDBBA780
  • peekViewResult.selectionBackground#2C3539
  • peekViewResult.selectionForeground#F7F6F3
  • peekViewTitle.background#191a21
  • peekViewTitleDescription.foreground#A0ABA0
  • peekViewTitleLabel.foreground#F7F6F3
  • pickerGroup.border#71D2FE
  • pickerGroup.foreground#F4869E
  • progressBar.background#B29EE0
  • selection.background#71D2FE
  • settings.checkboxBackground#131513
  • settings.checkboxBorder#191a21
  • settings.checkboxForeground#F7F6F3
  • settings.dropdownBackground#131513
  • settings.dropdownBorder#191a21
  • settings.dropdownForeground#F7F6F3
  • settings.headerForeground#F7F6F3
  • settings.modifiedItemIndicator#CEC1EC
  • settings.numberInputBackground#131513
  • settings.numberInputBorder#191a21
  • settings.numberInputForeground#F7F6F3
  • settings.textInputBackground#131513
  • settings.textInputBorder#191a21
  • settings.textInputForeground#F7F6F3
  • sideBar.background#131513
  • sideBarSectionHeader.background#1A1D1A
  • sideBarSectionHeader.border#191a21
  • sideBarTitle.foreground#F7F6F3
  • statusBar.background#191a21
  • statusBar.debuggingBackground#A6D5CE
  • statusBar.debuggingForeground#191a21
  • statusBar.foreground#F7F6F3
  • statusBar.noFolderBackground#191a21
  • statusBar.noFolderForeground#F7F6F3
  • statusBarItem.prominentBackground#A6D5CE
  • statusBarItem.prominentHoverBackground#CEC1EC
  • statusBarItem.remoteBackground#F4869E
  • statusBarItem.remoteForeground#1A1D1A
  • tab.activeBackground#1A1D1A
  • tab.activeBorderTop#B29EE080
  • tab.activeForeground#F7F6F3
  • tab.border#191a21
  • tab.inactiveBackground#131513
  • tab.inactiveForeground#A0ABA0
  • terminal.ansiBlack#131513
  • terminal.ansiBlue#71D2FE
  • terminal.ansiBrightBlack#A0ABA0
  • terminal.ansiBrightBlue#d6acff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#F4869E
  • terminal.ansiGreen#00BDBD
  • terminal.ansiMagenta#B29EE0
  • terminal.ansiRed#A6D5CE
  • terminal.ansiWhite#F7F6F3
  • terminal.ansiYellow#FDBBA7
  • terminal.background#1A1D1A
  • terminal.foreground#F7F6F3
  • titleBar.activeBackground#131513
  • titleBar.activeForeground#F7F6F3
  • titleBar.inactiveBackground#191a21
  • titleBar.inactiveForeground#A0ABA0
  • walkThrough.embeddedEditorBackground#131513

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#71D2FE—
meta.diff, meta.diff.header#A0ABA0—
markup.inserted#00BDBD—
markup.deleted#A6D5CE—
markup.changed#CEC1EC—
invalid#A6D5CEunderline italic
invalid.deprecated#F7F6F3underline italic
entity.name.filename#FDBBA7—
markup.error#A6D5CE—
markup.underline—underline
markup.bold#CEC1ECbold
markup.heading#71D2FEbold
markup.italic#FDBBA7italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#F4869E—
markup.inline.raw, markup.raw.restructuredtext#00BDBD—
markup.underline.link, markup.underline.link.image#F4869E—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#B29EE0—
entity.name.directive.restructuredtext, markup.quote#FDBBA7italic
meta.separator.markdown#A0ABA0—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00BDBD—
punctuation.definition.constant.restructuredtext#71D2FE—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#71D2FE—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F7F6F3—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FDBBA7—
entity.name.type.class, entity.name.class#F4869E—
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#71D2FEitalic
entity.other.inherited-class#F4869Eitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#A0ABA0—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#B29EE0—
comment.block.documentation entity.name.type#F4869Eitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#F4869E—
comment.block.documentation variable#CEC1ECitalic
constant, variable.other.constant#71D2FE—
constant.character.escape, constant.character.string.escape, constant.regexp#B29EE0—
entity.name.tag#B29EE0—
entity.other.attribute-name.parent-selector#B29EE0—
entity.other.attribute-name#00BDBDitalic
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#F8DE7E—
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#CEC1ECitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00BDBDitalic
meta.decorator variable.other.object#00BDBD—
keyword, punctuation.definition.keyword#B29EE0—
keyword.control.new, keyword.operator.new—bold
meta.selector#B29EE0—
support#F4869Eitalic
support.function.magic, support.variable, variable.other.predefined#71fe73regular
support.function, support.type.property-name—regular
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#B29EE0—
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#F7F6F3—
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#B29EE0—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#F4869E—
constant.other.date, constant.other.timestamp#CEC1EC—
variable.other.alias.yaml#00BDBDitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#B29EE0regular
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#F4869Eitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#CEC1EC—
storage.modifier#B29EE0—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FDBBA7—
punctuation.definition.group.capture.regexp#B29EE0—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#A6D5CE—
punctuation.definition.character-class.regexp#F4869E—
punctuation.definition.group.regexp#CEC1EC—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#A6D5CE—
meta.assertion.look-ahead.regexp#00BDBD—
string#FDBBA7—
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#A0ABA0—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F7F6F3—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#CEC1ECitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F7F6F3—
meta.selectionset.graphql variable#FDBBA7—
meta.selectionset.graphql meta.arguments variable#F7F6F3—
entity.name.fragment.graphql, variable.fragment.graphql#F4869E—
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#F7F6F3—
source.shell variable.other#71D2FE—
support.constant#71D2FE—
meta.scope.prerequisites.makefile#FDBBA7—
meta.attribute-selector.scss#FDBBA7—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F7F6F3—
meta.preprocessor.haskell#A0ABA0—
log.error#A6D5CEbold
log.warning#FDBBA7bold
comment, entity.name.type.class, keyword, storage.modifier, storage.type, support.class.builtin, keyword.control, constant.language, entity.other.attribute-name, entity.name.method—italic
invalid, keyword.operator, constant.numeric.css, keyword.other.unit.px.css, constant.numeric.decimal.js, constant.numeric.json—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—