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#ad7fa810
  • activityBar.activeBorder#e858bc80
  • activityBar.background#ffffff
  • activityBar.foreground#1f2328
  • activityBar.inactiveForeground#e95421
  • activityBarBadge.background#ff5dbe
  • activityBarBadge.foreground#1f2328
  • badge.background#ff8142
  • badge.foreground#1f2328
  • breadcrumb.activeSelectionForeground#1f2328
  • breadcrumb.background#f6f8fa
  • breadcrumb.focusForeground#1f2328
  • breadcrumb.foreground#e95421
  • breadcrumbPicker.background#e0e0e0
  • button.background#ff8142
  • button.foreground#1f2328
  • button.secondaryBackground#f6f8fa
  • button.secondaryForeground#1f2328
  • button.secondaryHoverBackground#ffffff
  • debugToolBar.background#f3f3f3
  • diffEditor.insertedTextBackground#8fb04f20
  • diffEditor.removedTextBackground#e8585850
  • dropdown.background#ffffff
  • dropdown.border#e0e0e0
  • dropdown.foreground#1f2328
  • editor.background#f6f8fa
  • editor.findMatchBackground#f27e2a80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#00000010
  • editor.foldBackground#50cbc330
  • editor.foldPlaceholderForeground#e95421
  • editor.foreground#1f2328
  • editor.hoverHighlightBackground#50cbc350
  • editor.lineHighlightBorder#ff8142
  • editor.rangeHighlightBackground#ad7fa815
  • editor.selectionBackground#e9542150
  • editor.selectionHighlightBackground#F5F5F4
  • editor.snippetFinalTabstopHighlightBackground#f6f8fa
  • editor.snippetFinalTabstopHighlightBorder#4e9a06
  • editor.snippetTabstopHighlightBackground#f6f8fa
  • editor.snippetTabstopHighlightBorder#e95421
  • editor.wordHighlightBackground#50cbc350
  • editor.wordHighlightStrongBackground#8fb04f50
  • editorBracketHighlight.foreground1#1f2328
  • editorBracketHighlight.foreground2#ff5dbe
  • editorBracketHighlight.foreground3#06989a
  • editorBracketHighlight.foreground4#4e9a06
  • editorBracketHighlight.foreground5#75507b
  • editorBracketHighlight.foreground6#ce5c00
  • editorBracketHighlight.unexpectedBracket.foreground#cc0000
  • editorCodeLens.foreground#e95421
  • editorError.foreground#cc0000
  • editorGroup.border#75507b
  • editorGroup.dropBackground#e0e0e080
  • editorGroupHeader.tabsBackground#e0e0e0
  • editorGutter.addedBackground#8fb04f80
  • editorGutter.deletedBackground#e8585880
  • editorGutter.modifiedBackground#50cbc380
  • editorHoverWidget.background#f6f8fa
  • editorHoverWidget.border#e95421
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#00000008
  • editorLineNumber.foreground#e95421
  • editorLink.activeForeground#06989a
  • editorMarkerNavigation.background#f3f3f3
  • editorOverviewRuler.addedForeground#8fb04f80
  • editorOverviewRuler.border#e0e0e0
  • editorOverviewRuler.currentContentForeground#4e9a06
  • editorOverviewRuler.deletedForeground#e8585880
  • editorOverviewRuler.errorForeground#e8585880
  • editorOverviewRuler.incomingContentForeground#75507b
  • editorOverviewRuler.infoForeground#50cbc380
  • editorOverviewRuler.modifiedForeground#50cbc380
  • editorOverviewRuler.selectionHighlightForeground#ce5c00
  • editorOverviewRuler.warningForeground#f27e2a80
  • editorOverviewRuler.wordHighlightForeground#06989a
  • editorOverviewRuler.wordHighlightStrongForeground#4e9a06
  • editorRuler.foreground#00000008
  • editorSuggestWidget.background#f3f3f3
  • editorSuggestWidget.foreground#1f2328
  • editorSuggestWidget.selectedBackground#ff8142
  • editorWarning.foreground#06989a
  • editorWhitespace.foreground#00000008
  • editorWidget.background#f3f3f3
  • errorForeground#cc0000
  • extensionButton.prominentBackground#8fb04f90
  • extensionButton.prominentForeground#1f2328
  • extensionButton.prominentHoverBackground#8fb04f60
  • focusBorder#e95421
  • foreground#1f2328
  • gitDecoration.conflictingResourceForeground#ce5c00
  • gitDecoration.deletedResourceForeground#cc0000
  • gitDecoration.ignoredResourceForeground#e95421
  • gitDecoration.modifiedResourceForeground#06989a
  • gitDecoration.untrackedResourceForeground#4e9a06
  • inlineChat.regionHighlight#ffffff
  • input.background#f6f8fa
  • input.border#e0e0e0
  • input.foreground#1f2328
  • input.placeholderForeground#e95421
  • inputOption.activeBorder#75507b
  • inputValidation.errorBorder#cc0000
  • inputValidation.infoBorder#ff5dbe
  • inputValidation.warningBorder#ce5c00
  • list.activeSelectionBackground#ff8142
  • list.activeSelectionForeground#1f2328
  • list.dropBackground#ff8142
  • list.errorForeground#cc0000
  • list.focusBackground#00000010
  • list.highlightForeground#06989a
  • list.hoverBackground#00000010
  • list.inactiveSelectionBackground#00000010
  • list.warningForeground#ce5c00
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#cc0000
  • listFilterWidget.outline#F5F5F4
  • merge.currentHeaderBackground#8fb04f90
  • merge.incomingHeaderBackground#ad7fa890
  • panel.background#f6f8fa
  • panel.border#75507b
  • panelTitle.activeBorder#ff5dbe
  • panelTitle.activeForeground#1f2328
  • panelTitle.inactiveForeground#e95421
  • peekView.border#ff8142
  • peekViewEditor.background#f6f8fa
  • peekViewEditor.matchHighlightBackground#f2c55c80
  • peekViewResult.background#f3f3f3
  • peekViewResult.fileForeground#1f2328
  • peekViewResult.lineForeground#1f2328
  • peekViewResult.matchHighlightBackground#f2c55c80
  • peekViewResult.selectionBackground#ff8142
  • peekViewResult.selectionForeground#1f2328
  • peekViewTitle.background#e0e0e0
  • peekViewTitleDescription.foreground#e95421
  • peekViewTitleLabel.foreground#1f2328
  • pickerGroup.border#75507b
  • pickerGroup.foreground#06989a
  • progressBar.background#ff5dbe
  • selection.background#75507b
  • settings.checkboxBackground#f3f3f3
  • settings.checkboxBorder#e0e0e0
  • settings.checkboxForeground#1f2328
  • settings.dropdownBackground#f3f3f3
  • settings.dropdownBorder#e0e0e0
  • settings.dropdownForeground#1f2328
  • settings.headerForeground#1f2328
  • settings.modifiedItemIndicator#ce5c00
  • settings.numberInputBackground#f3f3f3
  • settings.numberInputBorder#e0e0e0
  • settings.numberInputForeground#1f2328
  • settings.textInputBackground#f3f3f3
  • settings.textInputBorder#e0e0e0
  • settings.textInputForeground#1f2328
  • sideBar.background#f3f3f3
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e0e0e0
  • sideBarTitle.foreground#1f2328
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#cc0000
  • statusBar.debuggingForeground#e0e0e0
  • statusBar.foreground#1f2328
  • statusBar.noFolderBackground#e0e0e0
  • statusBar.noFolderForeground#1f2328
  • statusBarItem.prominentBackground#cc0000
  • statusBarItem.prominentHoverBackground#ce5c00
  • statusBarItem.remoteBackground#75507b
  • statusBarItem.remoteForeground#f6f8fa
  • tab.activeBackground#f6f8fa
  • tab.activeBorderTop#e858bc80
  • tab.activeForeground#1f2328
  • tab.border#e0e0e0
  • tab.inactiveBackground#f3f3f3
  • tab.inactiveForeground#e95421
  • terminal.ansiBlack#1f2328
  • terminal.ansiBlue#1e90ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#1e90ff
  • terminal.ansiBrightCyan#00ced1
  • terminal.ansiBrightGreen#32cd32
  • terminal.ansiBrightMagenta#ff69b4
  • terminal.ansiBrightRed#ff3c00
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#00ced1
  • terminal.ansiGreen#32cd32
  • terminal.ansiMagenta#ff69b4
  • terminal.ansiRed#ff8142
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#ffd700
  • terminal.background#f6f8fa
  • terminal.foreground#1f2328
  • titleBar.activeBackground#f3f3f3
  • titleBar.activeForeground#1f2328
  • titleBar.inactiveBackground#e0e0e0
  • titleBar.inactiveForeground#e95421
  • walkThrough.embeddedEditorBackground#f3f3f3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#75507b
meta.diff, meta.diff.header#e95421
markup.inserted#4e9a06
markup.deleted#cc0000
markup.changed#ce5c00
invalid#cc0000underline italic
invalid.deprecated#1f2328underline italic
entity.name.filename#c4a000
markup.error#cc0000
markup.underlineunderline
markup.bold#ce5c00bold
markup.heading#75507bbold
markup.italic#c4a000italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#06989a
markup.inline.raw, markup.raw.restructuredtext#4e9a06
markup.underline.link, markup.underline.link.image#06989a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff5dbe
entity.name.directive.restructuredtext, markup.quote#c4a000italic
meta.separator.markdown#e95421
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#4e9a06
punctuation.definition.constant.restructuredtext#75507b
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#75507b
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#1f2328
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c4a000
entity.name.type.class, entity.name.class#06989anormal
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#75507bitalic
entity.other.inherited-class#06989aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#e95421
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff5dbe
comment.block.documentation entity.name.type#06989aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#06989a
comment.block.documentation variable#ce5c00italic
constant, variable.other.constant#75507b
constant.character.escape, constant.character.string.escape, constant.regexp#ff5dbe
entity.name.tag#ff5dbe
entity.other.attribute-name.parent-selector#ff5dbe
entity.other.attribute-name#4e9a06italic
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#4e9a06
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#ce5c00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#4e9a06italic
meta.decorator variable.other.object#4e9a06
keyword, punctuation.definition.keyword#ff5dbe
keyword.control.new, keyword.operator.newbold
meta.selector#ff5dbe
support#06989aitalic
support.function.magic, support.variable, variable.other.predefined#75507bregular
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#ff5dbe
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#1f2328
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#ff5dbe
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#06989a
constant.other.date, constant.other.timestamp#ce5c00
variable.other.alias.yaml#4e9a06italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff5dberegular
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#06989aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ce5c00
storage.modifier#ff5dbe
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c4a000
punctuation.definition.group.capture.regexp#ff5dbe
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cc0000
punctuation.definition.character-class.regexp#06989a
punctuation.definition.group.regexp#ce5c00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cc0000
meta.assertion.look-ahead.regexp#4e9a06
string#c4a000
punctuation.definition.string.begin, punctuation.definition.string.end#ff8142
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#404040
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#e95421
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#1f2328
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ce5c00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#1f2328normal
meta.selectionset.graphql variable#c4a000
meta.selectionset.graphql meta.arguments variable#1f2328
entity.name.fragment.graphql, variable.fragment.graphql#06989a
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#1f2328
source.shell variable.other#75507b
support.constant#75507bnormal
meta.scope.prerequisites.makefile#c4a000
meta.attribute-selector.scss#c4a000
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#1f2328
meta.preprocessor.haskell#e95421
log.error#cc0000bold
log.warning#c4a000bold