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#9059ff10
  • activityBar.activeBorder#ff59f980
  • activityBar.background#3c4852
  • activityBar.foreground#e5e9f0
  • activityBar.inactiveForeground#81a0c1
  • activityBarBadge.background#ff59f9
  • activityBarBadge.foreground#e5e9f0
  • badge.background#46545e
  • badge.foreground#e5e9f0
  • breadcrumb.activeSelectionForeground#e5e9f0
  • breadcrumb.background#283036
  • breadcrumb.focusForeground#e5e9f0
  • breadcrumb.foreground#81a0c1
  • breadcrumbPicker.background#20262b
  • button.background#46545e
  • button.foreground#e5e9f0
  • button.secondaryBackground#283036
  • button.secondaryForeground#e5e9f0
  • button.secondaryHoverBackground#3c4852
  • debugToolBar.background#2f3940
  • diffEditor.insertedTextBackground#59ff5920
  • diffEditor.removedTextBackground#ff595950
  • dropdown.background#3c4852
  • dropdown.border#20262b
  • dropdown.foreground#e5e9f0
  • editor.background#283036
  • editor.findMatchBackground#ff9c5980
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#2f3940
  • editor.foreground#e5e9f0
  • editor.hoverHighlightBackground#59fff950
  • editor.lineHighlightBorder#46545e
  • editor.rangeHighlightBackground#9059ff15
  • editor.selectionBackground#46545e
  • editor.selectionHighlightBackground#46545e
  • editor.snippetFinalTabstopHighlightBackground#283036
  • editor.snippetFinalTabstopHighlightBorder#59ff59
  • editor.snippetTabstopHighlightBackground#283036
  • editor.snippetTabstopHighlightBorder#81a0c1
  • editor.wordHighlightBackground#59fff950
  • editor.wordHighlightStrongBackground#59ff5950
  • editorBracketHighlight.foreground1#e5e9f0
  • editorBracketHighlight.foreground2#ff59f9
  • editorBracketHighlight.foreground3#59fff9
  • editorBracketHighlight.foreground4#59ff59
  • editorBracketHighlight.foreground5#9059ff
  • editorBracketHighlight.foreground6#ff9c59
  • editorBracketHighlight.unexpectedBracket.foreground#ff5959
  • editorCodeLens.foreground#81a0c1
  • editorError.foreground#ff5959
  • editorGroup.border#9059ff
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#20262b
  • editorGutter.addedBackground#59ff5980
  • editorGutter.deletedBackground#ff595980
  • editorGutter.modifiedBackground#59fff980
  • editorHoverWidget.background#283036
  • editorHoverWidget.border#81a0c1
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#81a0c1
  • editorLink.activeForeground#59fff9
  • editorMarkerNavigation.background#2f3940
  • editorOverviewRuler.addedForeground#59ff5980
  • editorOverviewRuler.border#20262b
  • editorOverviewRuler.currentContentForeground#59ff59
  • editorOverviewRuler.deletedForeground#ff595980
  • editorOverviewRuler.errorForeground#ff595980
  • editorOverviewRuler.incomingContentForeground#9059ff
  • editorOverviewRuler.infoForeground#59fff980
  • editorOverviewRuler.modifiedForeground#59fff980
  • editorOverviewRuler.selectionHighlightForeground#ff9c59
  • editorOverviewRuler.warningForeground#ff9c5980
  • editorOverviewRuler.wordHighlightForeground#59fff9
  • editorOverviewRuler.wordHighlightStrongForeground#59ff59
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#2f3940
  • editorSuggestWidget.foreground#e5e9f0
  • editorSuggestWidget.selectedBackground#46545e
  • editorWarning.foreground#59fff9
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#2f3940
  • errorForeground#ff5959
  • extensionButton.prominentBackground#59ff5990
  • extensionButton.prominentForeground#e5e9f0
  • extensionButton.prominentHoverBackground#59ff5960
  • focusBorder#81a0c1
  • foreground#e5e9f0
  • gitDecoration.conflictingResourceForeground#ff9c59
  • gitDecoration.deletedResourceForeground#ff5959
  • gitDecoration.ignoredResourceForeground#81a0c1
  • gitDecoration.modifiedResourceForeground#59fff9
  • gitDecoration.untrackedResourceForeground#59ff59
  • input.background#283036
  • input.border#20262b
  • input.foreground#e5e9f0
  • input.placeholderForeground#81a0c1
  • inputOption.activeBorder#9059ff
  • inputValidation.errorBorder#ff5959
  • inputValidation.infoBorder#ff59f9
  • inputValidation.warningBorder#ff9c59
  • list.activeSelectionBackground#46545e
  • list.activeSelectionForeground#e5e9f0
  • list.dropBackground#46545e
  • list.errorForeground#ff5959
  • list.focusBackground#44475A75
  • list.highlightForeground#59fff9
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ff9c59
  • listFilterWidget.background#3c4852
  • listFilterWidget.noMatchesOutline#ff5959
  • listFilterWidget.outline#46545e
  • merge.currentHeaderBackground#59ff5990
  • merge.incomingHeaderBackground#9059ff90
  • panel.background#283036
  • panel.border#9059ff
  • panelTitle.activeBorder#ff59f9
  • panelTitle.activeForeground#e5e9f0
  • panelTitle.inactiveForeground#81a0c1
  • peekView.border#46545e
  • peekViewEditor.background#283036
  • peekViewEditor.matchHighlightBackground#ffff5980
  • peekViewResult.background#2f3940
  • peekViewResult.fileForeground#e5e9f0
  • peekViewResult.lineForeground#e5e9f0
  • peekViewResult.matchHighlightBackground#ffff5980
  • peekViewResult.selectionBackground#46545e
  • peekViewResult.selectionForeground#e5e9f0
  • peekViewTitle.background#20262b
  • peekViewTitleDescription.foreground#81a0c1
  • peekViewTitleLabel.foreground#e5e9f0
  • pickerGroup.border#9059ff
  • pickerGroup.foreground#59fff9
  • progressBar.background#ff59f9
  • selection.background#9059ff
  • settings.checkboxBackground#2f3940
  • settings.checkboxBorder#20262b
  • settings.checkboxForeground#e5e9f0
  • settings.dropdownBackground#2f3940
  • settings.dropdownBorder#20262b
  • settings.dropdownForeground#e5e9f0
  • settings.headerForeground#e5e9f0
  • settings.modifiedItemIndicator#ff9c59
  • settings.numberInputBackground#2f3940
  • settings.numberInputBorder#20262b
  • settings.numberInputForeground#e5e9f0
  • settings.textInputBackground#2f3940
  • settings.textInputBorder#20262b
  • settings.textInputForeground#e5e9f0
  • sideBar.background#2f3940
  • sideBarSectionHeader.background#283036
  • sideBarSectionHeader.border#20262b
  • sideBarTitle.foreground#e5e9f0
  • statusBar.background#20262b
  • statusBar.debuggingBackground#ff5959
  • statusBar.debuggingForeground#20262b
  • statusBar.foreground#e5e9f0
  • statusBar.noFolderBackground#20262b
  • statusBar.noFolderForeground#e5e9f0
  • statusBarItem.prominentBackground#ff5959
  • statusBarItem.prominentHoverBackground#ff9c59
  • statusBarItem.remoteBackground#9059ff
  • statusBarItem.remoteForeground#283036
  • tab.activeBackground#283036
  • tab.activeBorderTop#ff59f980
  • tab.activeForeground#e5e9f0
  • tab.border#20262b
  • tab.inactiveBackground#2f3940
  • tab.inactiveForeground#81a0c1
  • terminal.ansiBlack#283036
  • terminal.ansiBlue#9059ff
  • terminal.ansiBrightBlack#43515e
  • terminal.ansiBrightBlue#c5a6ff
  • terminal.ansiBrightCyan#a6fffc
  • terminal.ansiBrightGreen#a6ffa6
  • terminal.ansiBrightMagenta#ffa6fc
  • terminal.ansiBrightRed#ffa6a6
  • terminal.ansiBrightWhite#e5e9f0
  • terminal.ansiBrightYellow#ffffa6
  • terminal.ansiCyan#59fff9
  • terminal.ansiGreen#59ff59
  • terminal.ansiMagenta#ff59f9
  • terminal.ansiRed#ff5959
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ffff59
  • terminal.background#283036
  • terminal.foreground#e5e9f0
  • titleBar.activeBackground#2f3940
  • titleBar.activeForeground#e5e9f0
  • titleBar.inactiveBackground#20262b
  • titleBar.inactiveForeground#81a0c1
  • walkThrough.embeddedEditorBackground#2f3940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#9059ff—
meta.diff, meta.diff.header#81a0c1—
markup.inserted#59ff59—
markup.deleted#ff5959—
markup.changed#ff9c59—
invalid#ff5959underline italic
invalid.deprecated#e5e9f0underline italic
entity.name.filename#ffff59—
markup.error#ff5959—
markup.underline—underline
markup.bold#ff9c59bold
markup.heading#9059ffbold
markup.italic#ffff59italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#59fff9—
markup.inline.raw, markup.raw.restructuredtext#59ff59—
markup.underline.link, markup.underline.link.image#59fff9—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff59f9—
entity.name.directive.restructuredtext, markup.quote#ffff59italic
meta.separator.markdown#81a0c1—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#59ff59—
punctuation.definition.constant.restructuredtext#9059ff—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9059ff—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e5e9f0—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff59—
entity.name.type.class, entity.name.class#59fff9normal
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#9059ffitalic
entity.other.inherited-class#59fff9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#81a0c1—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff59f9—
comment.block.documentation entity.name.type#59fff9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#59fff9—
comment.block.documentation variable#ff9c59italic
constant, variable.other.constant#9059ff—
constant.character.escape, constant.character.string.escape, constant.regexp#ff59f9—
entity.name.tag#ff59f9—
entity.other.attribute-name.parent-selector#ff59f9—
entity.other.attribute-name#59ff59italic
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#59ff59—
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#ff9c59italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#59ff59italic
meta.decorator variable.other.object#59ff59—
keyword, punctuation.definition.keyword#ff59f9—
keyword.control.new, keyword.operator.new—bold
meta.selector#ff59f9—
support#59fff9italic
support.function.magic, support.variable, variable.other.predefined#9059ffregular
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#ff59f9—
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#e5e9f0—
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#ff59f9—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#59fff9—
constant.other.date, constant.other.timestamp#ff9c59—
variable.other.alias.yaml#59ff59italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff59f9regular
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#59fff9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff9c59—
storage.modifier#ff59f9—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff59—
punctuation.definition.group.capture.regexp#ff59f9—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff5959—
punctuation.definition.character-class.regexp#59fff9—
punctuation.definition.group.regexp#ff9c59—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff5959—
meta.assertion.look-ahead.regexp#59ff59—
string#ffff59—
punctuation.definition.string.begin, punctuation.definition.string.end#ffffa6—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#a6fffc—
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#81a0c1—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e5e9f0—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ff9c59italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e5e9f0normal
meta.selectionset.graphql variable#ffff59—
meta.selectionset.graphql meta.arguments variable#e5e9f0—
entity.name.fragment.graphql, variable.fragment.graphql#59fff9—
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#e5e9f0—
source.shell variable.other#9059ff—
support.constant#9059ffnormal
meta.scope.prerequisites.makefile#ffff59—
meta.attribute-selector.scss#ffff59—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e5e9f0—
meta.preprocessor.haskell#81a0c1—
log.error#ff5959bold
log.warning#ffff59bold