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#ffffff
  • activityBar.foreground#282A36
  • activityBar.inactiveForeground#8393c7
  • activityBarBadge.background#c74493
  • activityBarBadge.foreground#282A36
  • badge.background#cbcee5
  • badge.foreground#282A36
  • breadcrumb.activeSelectionForeground#282A36
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#282A36
  • breadcrumb.foreground#8393c7
  • breadcrumbPicker.background#ffffff
  • button.background#cbcee5
  • button.foreground#282A36
  • contrastBorder#ffffff
  • debugToolBar.background#ffffff
  • diffEditor.insertedTextBackground#008a0d20
  • diffEditor.removedTextBackground#de353d50
  • dropdown.background#ffffff
  • dropdown.border#ffffff
  • dropdown.foreground#282A36
  • editor.background#ffffff
  • editor.findMatchBackground#a56a2080
  • editor.findMatchHighlightBackground#77777740
  • editor.findRangeHighlightBackground#cbcee575
  • editor.foreground#282A36
  • editor.hoverHighlightBackground#ffffff
  • editor.lineHighlightBorder#cbcee5
  • editor.rangeHighlightBackground#8963c415
  • editor.selectionBackground#cbcee5
  • editor.selectionHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#008a0d
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#8393c7
  • editor.wordHighlightBackground#04839550
  • editor.wordHighlightStrongBackground#008a0d50
  • editorCodeLens.foreground#8393c7
  • editorError.foreground#de353d
  • editorGroup.border#8963c4
  • editorGroup.dropBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#008a0d80
  • editorGutter.deletedBackground#de353d80
  • editorGutter.modifiedBackground#04839580
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#8393c7
  • editorIndentGuide.activeBackground#77777745
  • editorIndentGuide.background#ffffff
  • editorLineNumber.foreground#8393c7
  • editorLink.activeForeground#048395
  • editorMarkerNavigation.background#ffffff
  • editorOverviewRuler.addedForeground#008a0d80
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.currentContentForeground#008a0d
  • editorOverviewRuler.deletedForeground#de353d80
  • editorOverviewRuler.errorForeground#de353d80
  • editorOverviewRuler.incomingContentForeground#8963c4
  • editorOverviewRuler.infoForeground#04839580
  • editorOverviewRuler.modifiedForeground#04839580
  • editorOverviewRuler.selectionHighlightForeground#a56a20
  • editorOverviewRuler.warningForeground#a56a2080
  • editorOverviewRuler.wordHighlightForeground#048395
  • editorOverviewRuler.wordHighlightStrongForeground#008a0d
  • editorRuler.foreground#ffffff
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#282A36
  • editorSuggestWidget.selectedBackground#cbcee5
  • editorWarning.foreground#048395
  • editorWhitespace.foreground#ffffff
  • editorWidget.background#ffffff
  • errorForeground#de353d
  • extensionButton.prominentBackground#008a0d90
  • extensionButton.prominentForeground#282A36
  • extensionButton.prominentHoverBackground#008a0d60
  • focusBorder#8393c7
  • foreground#282A36
  • gitDecoration.conflictingResourceForeground#a56a20
  • gitDecoration.deletedResourceForeground#de353d
  • gitDecoration.ignoredResourceForeground#8393c7
  • gitDecoration.modifiedResourceForeground#048395
  • gitDecoration.untrackedResourceForeground#008a0d
  • input.background#ffffff
  • input.border#ffffff
  • input.foreground#282A36
  • input.placeholderForeground#8393c7
  • inputOption.activeBorder#8963c4
  • inputValidation.errorBorder#de353d
  • inputValidation.infoBorder#c74493
  • inputValidation.warningBorder#a56a20
  • list.activeSelectionBackground#cbcee5
  • list.activeSelectionForeground#282A36
  • list.dropBackground#cbcee5
  • list.errorForeground#de353d
  • list.focusBackground#cbcee575
  • list.highlightForeground#048395
  • list.hoverBackground#cbcee575
  • list.inactiveSelectionBackground#cbcee575
  • list.warningForeground#a56a20
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#de353d
  • listFilterWidget.outline#ffffff
  • merge.currentHeaderBackground#008a0d90
  • merge.incomingHeaderBackground#8963c490
  • notification.background#ffffff
  • notification.buttonBackground#cbcee5
  • notification.buttonForeground#282A36
  • notification.buttonHoverBackground#cbcee575
  • notification.errorBackground#de353d
  • notification.errorForeground#282A36
  • notification.foreground#282A36
  • notification.infoBackground#048395
  • notification.infoForeground#ffffff
  • notification.warningBackground#a56a20
  • notification.warningForeground#ffffff
  • panel.background#ffffff
  • panel.border#ffffff
  • panelTitle.activeBorder#c74493
  • panelTitle.activeForeground#282A36
  • panelTitle.inactiveForeground#8393c7
  • peekView.border#cbcee5
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#707e0f80
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#282A36
  • peekViewResult.lineForeground#282A36
  • peekViewResult.matchHighlightBackground#707e0f80
  • peekViewResult.selectionBackground#cbcee5
  • peekViewResult.selectionForeground#282A36
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#8393c7
  • peekViewTitleLabel.foreground#282A36
  • pickerGroup.border#8963c4
  • pickerGroup.foreground#048395
  • progressBar.background#c74493
  • selection.background#8963c4
  • settings.checkboxBackground#ffffff
  • settings.checkboxBorder#ffffff
  • settings.checkboxForeground#282A36
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#ffffff
  • settings.dropdownForeground#282A36
  • settings.headerForeground#282A36
  • settings.modifiedItemForeground#a56a20
  • settings.modifiedItemIndicator#a56a20
  • settings.numberInputBackground#ffffff
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#282A36
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#282A36
  • sideBar.background#ffffff
  • sideBar.border#ffffff
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#282A36
  • statusBar.background#ffffff
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#de353d
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#282A36
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#282A36
  • statusBarItem.prominentBackground#de353d
  • statusBarItem.prominentHoverBackground#a56a20
  • statusBarItem.remoteBackground#8963c4
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#ffffff
  • tab.activeBorder#c7449380
  • tab.activeForeground#282A36
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#8393c7
  • terminal.ansiBlack#f1f2ff
  • terminal.ansiBlue#8963c4
  • terminal.ansiBrightBlack#8393c7
  • terminal.ansiBrightBlue#8c66b3
  • terminal.ansiBrightCyan#1e8484
  • terminal.ansiBrightGreen#008a2a
  • terminal.ansiBrightMagenta#b8509c
  • terminal.ansiBrightRed#d1454b
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#777b28
  • terminal.ansiCyan#048395
  • terminal.ansiGreen#008a0d
  • terminal.ansiMagenta#c74493
  • terminal.ansiRed#de353d
  • terminal.ansiWhite#282A36
  • terminal.ansiYellow#707e0f
  • terminal.background#ffffff
  • terminal.border#ffffff
  • terminal.foreground#282A36
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#282A36
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#8393c7
  • walkThrough.embeddedEditorBackground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#8963c4—
source#282A36—
meta.diff, meta.diff.header#8393c7—
markup.inserted#008a0d—
markup.deleted#de353d—
markup.changed#a56a20—
invalid#de353dunderline italic
invalid.deprecated#282A36underline italic
entity.name.filename#707e0f—
markup.error#de353d—
markup.underline—underline
markup.bold#a56a20bold
markup.heading#8963c4bold
markup.italic#707e0fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#048395—
markup.inline.raw, markup.raw.restructuredtext#008a0d—
markup.underline.link, markup.underline.link.image#048395—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c74493—
entity.name.directive.restructuredtext, markup.quote#707e0fitalic
meta.separator.markdown#8393c7—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#008a0d—
punctuation.definition.constant.restructuredtext#8963c4—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8963c4—
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#707e0f—
entity.name.type.class#048395normal
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#8963c4italic
entity.other.inherited-class#048395italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8393c7—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c74493—
comment.block.documentation entity.name.type#048395italic
comment.block.documentation entity.name.type punctuation.definition.bracket#048395—
comment.block.documentation variable#a56a20italic
constant, variable.other.constant#8963c4—
constant.character.escape, constant.character.string.escape, constant.regexp#c74493—
entity.name.tag#c74493—
entity.other.attribute-name.parent-selector#c74493—
entity.other.attribute-name#008a0ditalic
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#008a0d—
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#a56a20italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#008a0ditalic
meta.decorator variable.other.object#008a0d—
keyword, punctuation.definition.keyword#c74493—
keyword.control.new, keyword.operator.new—bold
meta.selector#c74493—
support#048395italic
support.function.magic, support.variable, variable.other.predefined#8963c4regular
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#c74493—
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#c74493—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#048395—
constant.other.date, constant.other.timestamp#a56a20—
variable.other.alias.yaml#008a0ditalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c74493regular
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#048395italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#a56a20—
storage.modifier#c74493—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#707e0f—
punctuation.definition.group.capture.regexp#c74493—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#de353d—
punctuation.definition.character-class.regexp#048395—
punctuation.definition.group.regexp#a56a20—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#de353d—
meta.assertion.look-ahead.regexp#008a0d—
string#707e0f—
punctuation.definition.string.begin, punctuation.definition.string.end#717e0e—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#038396—
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#8393c7—
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#a56a20italic
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#707e0f—
meta.selectionset.graphql meta.arguments variable#282A36—
entity.name.fragment.graphql, variable.fragment.graphql#048395—
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#8963c4—
support.constant#8963c4normal
meta.scope.prerequisites.makefile#707e0f—
meta.attribute-selector.scss#707e0f—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#282A36—
meta.preprocessor.haskell#8393c7—