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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#B29EE0
support#F4869Eitalic
support.function.magic, support.variable, variable.other.predefined#71fe73regular
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#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.methoditalic
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