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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#ff59f9
support#59fff9italic
support.function.magic, support.variable, variable.other.predefined#9059ffregular
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#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