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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#9f1670
support#005d6fitalic
support.function.magic, support.variable, variable.other.predefined#64429eregular
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#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