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#8963c410
  • activityBar.activeBorder#c7449380
  • 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
  • button.secondaryBackground#ffffff
  • button.secondaryForeground#282A36
  • button.secondaryHoverBackground#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.foldBackground#ffffff80
  • editor.foreground#282A36
  • editor.hoverHighlightBackground#04839550
  • 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
  • editorBracketHighlight.foreground1#282A36
  • editorBracketHighlight.foreground2#c74493
  • editorBracketHighlight.foreground3#048395
  • editorBracketHighlight.foreground4#008a0d
  • editorBracketHighlight.foreground5#8963c4
  • editorBracketHighlight.foreground6#a56a20
  • editorBracketHighlight.unexpectedBracket.foreground#de353d
  • 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#7777771a
  • 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#7777771a
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#282A36
  • editorSuggestWidget.selectedBackground#cbcee5
  • editorWarning.foreground#048395
  • editorWhitespace.foreground#7777771a
  • 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
  • panel.background#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.modifiedItemIndicator#a56a20
  • settings.numberInputBackground#ffffff
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#282A36
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#282A36
  • sideBar.background#ffffff
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#282A36
  • statusBar.background#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#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#c7449380
  • tab.activeForeground#282A36
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#8393c7
  • terminal.ansiBlack#ffffff
  • 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.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
emphasisitalic
strongbold
header#8963c4
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.underlineunderline
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, entity.name.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.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.newbold
meta.selector#c74493
support#048395italic
support.function.magic, support.variable, variable.other.predefined#8963c4regular
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#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, punctuation.terminator.expression.php, 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.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
log.error#de353dbold
log.warning#707e0fbold