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#F8F8F2
  • activityBar.foreground#282A36
  • activityBar.inactiveForeground#7e8ec2
  • activityBarBadge.background#9f1670
  • activityBarBadge.foreground#282A36
  • badge.background#c5c8de
  • badge.foreground#282A36
  • breadcrumb.activeSelectionForeground#282A36
  • breadcrumb.background#F8F8F2
  • breadcrumb.focusForeground#282A36
  • breadcrumb.foreground#7e8ec2
  • breadcrumbPicker.background#F8F8F2
  • button.background#c5c8de
  • button.foreground#282A36
  • contrastBorder#F8F8F2
  • debugToolBar.background#F8F8F2
  • diffEditor.insertedTextBackground#00640020
  • diffEditor.removedTextBackground#ae001c50
  • dropdown.background#F8F8F2
  • dropdown.border#F8F8F2
  • dropdown.foreground#282A36
  • editor.background#F8F8F2
  • editor.findMatchBackground#7d480080
  • editor.findMatchHighlightBackground#55555540
  • editor.findRangeHighlightBackground#c5c8de75
  • editor.foreground#282A36
  • editor.hoverHighlightBackground#F8F8F2
  • editor.lineHighlightBorder#c5c8de
  • editor.rangeHighlightBackground#64429e15
  • editor.selectionBackground#c5c8de
  • editor.selectionHighlightBackground#F8F8F2
  • editor.snippetFinalTabstopHighlightBackground#F8F8F2
  • editor.snippetFinalTabstopHighlightBorder#006400
  • editor.snippetTabstopHighlightBackground#F8F8F2
  • editor.snippetTabstopHighlightBorder#7e8ec2
  • editor.wordHighlightBackground#005d6f50
  • editor.wordHighlightStrongBackground#00640050
  • editorCodeLens.foreground#7e8ec2
  • editorError.foreground#ae001c
  • editorGroup.border#64429e
  • editorGroup.dropBackground#F8F8F2
  • editorGroupHeader.tabsBackground#F8F8F2
  • editorGutter.addedBackground#00640080
  • editorGutter.deletedBackground#ae001c80
  • editorGutter.modifiedBackground#005d6f80
  • editorHoverWidget.background#F8F8F2
  • editorHoverWidget.border#7e8ec2
  • editorIndentGuide.activeBackground#55555545
  • editorIndentGuide.background#F8F8F2
  • editorLineNumber.foreground#7e8ec2
  • editorLink.activeForeground#005d6f
  • editorMarkerNavigation.background#F8F8F2
  • editorOverviewRuler.addedForeground#00640080
  • editorOverviewRuler.border#F8F8F2
  • editorOverviewRuler.currentContentForeground#006400
  • editorOverviewRuler.deletedForeground#ae001c80
  • editorOverviewRuler.errorForeground#ae001c80
  • editorOverviewRuler.incomingContentForeground#64429e
  • editorOverviewRuler.infoForeground#005d6f80
  • editorOverviewRuler.modifiedForeground#005d6f80
  • editorOverviewRuler.selectionHighlightForeground#7d4800
  • editorOverviewRuler.warningForeground#7d480080
  • editorOverviewRuler.wordHighlightForeground#005d6f
  • editorOverviewRuler.wordHighlightStrongForeground#006400
  • editorRuler.foreground#F8F8F2
  • editorSuggestWidget.background#F8F8F2
  • editorSuggestWidget.foreground#282A36
  • editorSuggestWidget.selectedBackground#c5c8de
  • editorWarning.foreground#005d6f
  • editorWhitespace.foreground#F8F8F2
  • editorWidget.background#F8F8F2
  • errorForeground#ae001c
  • extensionButton.prominentBackground#00640090
  • extensionButton.prominentForeground#282A36
  • extensionButton.prominentHoverBackground#00640060
  • focusBorder#7e8ec2
  • foreground#282A36
  • gitDecoration.conflictingResourceForeground#7d4800
  • gitDecoration.deletedResourceForeground#ae001c
  • gitDecoration.ignoredResourceForeground#7e8ec2
  • gitDecoration.modifiedResourceForeground#005d6f
  • gitDecoration.untrackedResourceForeground#006400
  • input.background#F8F8F2
  • input.border#F8F8F2
  • input.foreground#282A36
  • input.placeholderForeground#7e8ec2
  • inputOption.activeBorder#64429e
  • inputValidation.errorBorder#ae001c
  • inputValidation.infoBorder#9f1670
  • inputValidation.warningBorder#7d4800
  • list.activeSelectionBackground#c5c8de
  • list.activeSelectionForeground#282A36
  • list.dropBackground#c5c8de
  • list.errorForeground#ae001c
  • list.focusBackground#c5c8de75
  • list.highlightForeground#005d6f
  • list.hoverBackground#c5c8de75
  • list.inactiveSelectionBackground#c5c8de75
  • list.warningForeground#7d4800
  • listFilterWidget.background#F8F8F2
  • listFilterWidget.noMatchesOutline#ae001c
  • listFilterWidget.outline#F8F8F2
  • merge.currentHeaderBackground#00640090
  • merge.incomingHeaderBackground#64429e90
  • notification.background#F8F8F2
  • notification.buttonBackground#c5c8de
  • notification.buttonForeground#282A36
  • notification.buttonHoverBackground#c5c8de75
  • notification.errorBackground#ae001c
  • notification.errorForeground#282A36
  • notification.foreground#282A36
  • notification.infoBackground#005d6f
  • notification.infoForeground#F8F8F2
  • notification.warningBackground#7d4800
  • notification.warningForeground#F8F8F2
  • panel.background#F8F8F2
  • panel.border#F8F8F2
  • panelTitle.activeBorder#9f1670
  • panelTitle.activeForeground#282A36
  • panelTitle.inactiveForeground#7e8ec2
  • peekView.border#c5c8de
  • peekViewEditor.background#F8F8F2
  • peekViewEditor.matchHighlightBackground#4c5b0080
  • peekViewResult.background#F8F8F2
  • peekViewResult.fileForeground#282A36
  • peekViewResult.lineForeground#282A36
  • peekViewResult.matchHighlightBackground#4c5b0080
  • peekViewResult.selectionBackground#c5c8de
  • peekViewResult.selectionForeground#282A36
  • peekViewTitle.background#F8F8F2
  • peekViewTitleDescription.foreground#7e8ec2
  • peekViewTitleLabel.foreground#282A36
  • pickerGroup.border#64429e
  • pickerGroup.foreground#005d6f
  • progressBar.background#9f1670
  • selection.background#64429e
  • settings.checkboxBackground#F8F8F2
  • settings.checkboxBorder#F8F8F2
  • settings.checkboxForeground#282A36
  • settings.dropdownBackground#F8F8F2
  • settings.dropdownBorder#F8F8F2
  • settings.dropdownForeground#282A36
  • settings.headerForeground#282A36
  • settings.modifiedItemForeground#7d4800
  • settings.modifiedItemIndicator#7d4800
  • settings.numberInputBackground#F8F8F2
  • settings.numberInputBorder#F8F8F2
  • settings.numberInputForeground#282A36
  • settings.textInputBackground#F8F8F2
  • settings.textInputBorder#F8F8F2
  • settings.textInputForeground#282A36
  • sideBar.background#F8F8F2
  • sideBar.border#F8F8F2
  • sideBarSectionHeader.background#F8F8F2
  • sideBarSectionHeader.border#F8F8F2
  • sideBarTitle.foreground#282A36
  • statusBar.background#F8F8F2
  • statusBar.border#F8F8F2
  • statusBar.debuggingBackground#ae001c
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#282A36
  • statusBar.noFolderBackground#F8F8F2
  • statusBar.noFolderForeground#282A36
  • statusBarItem.prominentBackground#ae001c
  • statusBarItem.prominentHoverBackground#7d4800
  • statusBarItem.remoteBackground#64429e
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#F8F8F2
  • tab.activeBorder#9f167080
  • tab.activeForeground#282A36
  • tab.border#F8F8F2
  • tab.inactiveBackground#F8F8F2
  • tab.inactiveForeground#7e8ec2
  • terminal.ansiBlack#eaebf9
  • terminal.ansiBlue#64429e
  • terminal.ansiBrightBlack#7e8ec2
  • terminal.ansiBrightBlue#68448e
  • terminal.ansiBrightCyan#005f60
  • terminal.ansiBrightGreen#006400
  • terminal.ansiBrightMagenta#912a78
  • terminal.ansiBrightRed#a7192c
  • terminal.ansiBrightWhite#555555
  • terminal.ansiBrightYellow#535901
  • terminal.ansiCyan#005d6f
  • terminal.ansiGreen#006400
  • terminal.ansiMagenta#9f1670
  • terminal.ansiRed#ae001c
  • terminal.ansiWhite#282A36
  • terminal.ansiYellow#4c5b00
  • terminal.background#F8F8F2
  • terminal.border#F8F8F2
  • terminal.foreground#282A36
  • titleBar.activeBackground#F8F8F2
  • titleBar.activeForeground#282A36
  • titleBar.inactiveBackground#F8F8F2
  • titleBar.inactiveForeground#7e8ec2
  • walkThrough.embeddedEditorBackground#F8F8F2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#64429e—
source#282A36—
meta.diff, meta.diff.header#7e8ec2—
markup.inserted#006400—
markup.deleted#ae001c—
markup.changed#7d4800—
invalid#ae001cunderline italic
invalid.deprecated#282A36underline italic
entity.name.filename#4c5b00—
markup.error#ae001c—
markup.underline—underline
markup.bold#7d4800bold
markup.heading#64429ebold
markup.italic#4c5b00italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#005d6f—
markup.inline.raw, markup.raw.restructuredtext#006400—
markup.underline.link, markup.underline.link.image#005d6f—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9f1670—
entity.name.directive.restructuredtext, markup.quote#4c5b00italic
meta.separator.markdown#7e8ec2—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#006400—
punctuation.definition.constant.restructuredtext#64429e—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#64429e—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#282A36—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#4c5b00—
entity.name.type.class#005d6fnormal
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#64429eitalic
entity.other.inherited-class#005d6fitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7e8ec2—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9f1670—
comment.block.documentation entity.name.type#005d6fitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#005d6f—
comment.block.documentation variable#7d4800italic
constant, variable.other.constant#64429e—
constant.character.escape, constant.character.string.escape, constant.regexp#9f1670—
entity.name.tag#9f1670—
entity.other.attribute-name.parent-selector#9f1670—
entity.other.attribute-name#006400italic
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#006400—
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#7d4800italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#006400italic
meta.decorator variable.other.object#006400—
keyword, punctuation.definition.keyword#9f1670—
keyword.control.new, keyword.operator.new—bold
meta.selector#9f1670—
support#005d6fitalic
support.function.magic, support.variable, variable.other.predefined#64429eregular
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#9f1670—
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#282A36—
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#9f1670—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#005d6f—
constant.other.date, constant.other.timestamp#7d4800—
variable.other.alias.yaml#006400italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9f1670regular
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#005d6fitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#7d4800—
storage.modifier#9f1670—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#4c5b00—
punctuation.definition.group.capture.regexp#9f1670—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ae001c—
punctuation.definition.character-class.regexp#005d6f—
punctuation.definition.group.regexp#7d4800—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ae001c—
meta.assertion.look-ahead.regexp#006400—
string#4c5b00—
punctuation.definition.string.begin, punctuation.definition.string.end#4c5b00—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#005d70—
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#7e8ec2—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#282A36—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#7d4800italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#282A36normal
meta.selectionset.graphql variable#4c5b00—
meta.selectionset.graphql meta.arguments variable#282A36—
entity.name.fragment.graphql, variable.fragment.graphql#005d6f—
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#282A36—
source.shell variable.other#64429e—
support.constant#64429enormal
meta.scope.prerequisites.makefile#4c5b00—
meta.attribute-selector.scss#4c5b00—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#282A36—
meta.preprocessor.haskell#7e8ec2—