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#8250df10
  • activityBar.activeBorder#b3590080
  • activityBar.background#ffffff
  • activityBar.foreground#424a53
  • activityBar.inactiveForeground#8c959f
  • activityBarBadge.background#b35900
  • activityBarBadge.foreground#ffffff
  • badge.background#f6f8fa
  • badge.foreground#424a53
  • breadcrumb.activeSelectionForeground#424a53
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#424a53
  • breadcrumb.foreground#8c959f
  • breadcrumbPicker.background#000000
  • button.background#24292f
  • button.foreground#424a53
  • checkbox.background#24292f
  • checkbox.border#000000
  • checkbox.foreground#424a53
  • contrastBorder#000000
  • debugToolBar.background#24292f
  • diffEditor.insertedTextBackground#0a306920
  • diffEditor.removedTextBackground#8a460050
  • dropdown.background#ffffff
  • dropdown.border#000000
  • dropdown.foreground#424a53
  • editor.background#ffffff
  • editor.findMatchBackground#0550ae80
  • editor.findMatchHighlightBackground#24292f40
  • editor.findRangeHighlightBackground#afb8c175
  • editor.foldBackground#24292f
  • editor.foreground#424a53
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#f6f8fa
  • editor.rangeHighlightBackground#8250df15
  • editor.selectionBackground#f6f8fa
  • editor.selectionHighlightBackground#f6f8fa
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#0a3069
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#8c959f
  • editor.wordHighlightBackground#0550ae50
  • editor.wordHighlightStrongBackground#0a306950
  • editorCodeLens.foreground#8c959f
  • editorError.foreground#8a4600
  • editorGroup.border#8250df
  • editorGroup.dropBackground#afb8c170
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#0a306980
  • editorGutter.deletedBackground#8a460080
  • editorGutter.modifiedBackground#0550ae80
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#8c959f
  • editorIndentGuide.activeBackground#24292f45
  • editorIndentGuide.background#24292f1A
  • editorLineNumber.foreground#8c959f
  • editorLink.activeForeground#0550ae
  • editorMarkerNavigation.background#24292f
  • editorOverviewRuler.addedForeground#0a306980
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#0a3069
  • editorOverviewRuler.deletedForeground#8a460080
  • editorOverviewRuler.errorForeground#8a460080
  • editorOverviewRuler.incomingContentForeground#8250df
  • editorOverviewRuler.infoForeground#0550ae80
  • editorOverviewRuler.modifiedForeground#0550ae80
  • editorOverviewRuler.selectionHighlightForeground#0550ae
  • editorOverviewRuler.warningForeground#0550ae80
  • editorOverviewRuler.wordHighlightForeground#0550ae
  • editorOverviewRuler.wordHighlightStrongForeground#0a3069
  • editorRuler.foreground#24292f1A
  • editorSuggestWidget.background#24292f
  • editorSuggestWidget.foreground#424a53
  • editorSuggestWidget.selectedBackground#f6f8fa
  • editorWarning.foreground#0550ae
  • editorWhitespace.foreground#24292f1A
  • editorWidget.background#24292f
  • errorForeground#8a4600
  • extensionButton.prominentBackground#0a306990
  • extensionButton.prominentForeground#424a53
  • extensionButton.prominentHoverBackground#0a306960
  • focusBorder#8c959f
  • foreground#424a53
  • gitDecoration.conflictingResourceForeground#0550ae
  • gitDecoration.deletedResourceForeground#8a4600
  • gitDecoration.ignoredResourceForeground#8c959f
  • gitDecoration.modifiedResourceForeground#0550ae
  • gitDecoration.untrackedResourceForeground#0a3069
  • input.background#ffffff
  • input.border#000000
  • input.foreground#424a53
  • input.placeholderForeground#8c959f
  • inputOption.activeBorder#8250df
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#8a4600
  • inputValidation.errorForeground#8a4600
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#8250df
  • inputValidation.infoForeground#8250df
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#0550ae
  • inputValidation.warningForeground#0550ae
  • list.activeSelectionBackground#f6f8fa
  • list.activeSelectionForeground#424a53
  • list.dropBackground#f6f8fa
  • list.errorForeground#8a4600
  • list.focusBackground#afb8c175
  • list.highlightForeground#0550ae
  • list.hoverBackground#afb8c175
  • list.inactiveSelectionBackground#afb8c175
  • list.warningForeground#0550ae
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#8a4600
  • listFilterWidget.outline#f6f8fa
  • merge.currentHeaderBackground#0a306990
  • merge.incomingHeaderBackground#8250df90
  • notification.background#ffffff
  • notification.buttonBackground#f6f8fa
  • notification.buttonForeground#424a53
  • notification.buttonHoverBackground#afb8c175
  • notification.errorBackground#8a4600
  • notification.errorForeground#ffffff
  • notification.foreground#424a53
  • notification.infoBackground#8250df
  • notification.infoForeground#ffffff
  • notification.warningBackground#0550ae
  • notification.warningForeground#ffffff
  • notificationCenter.border#24292f
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#424a53
  • notificationLink.foreground#0550ae
  • notifications.background#ffffff
  • notifications.border#24292f
  • notifications.foreground#424a53
  • notificationsErrorIcon.foreground#8a4600
  • notificationsInfoIcon.foreground#8250df
  • notificationsWarningIcon.foreground#0550ae
  • notificationToast.border#24292f
  • panel.background#ffffff
  • panel.border#8250df
  • panelInput.border#424a53
  • panelTitle.activeBorder#b35900
  • panelTitle.activeForeground#424a53
  • panelTitle.inactiveForeground#8c959f
  • peekView.border#f6f8fa
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#d4a72c80
  • peekViewResult.background#24292f
  • peekViewResult.fileForeground#424a53
  • peekViewResult.lineForeground#424a53
  • peekViewResult.matchHighlightBackground#d4a72c80
  • peekViewResult.selectionBackground#f6f8fa
  • peekViewResult.selectionForeground#424a53
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#8c959f
  • peekViewTitleLabel.foreground#424a53
  • pickerGroup.border#8250df
  • pickerGroup.foreground#0550ae
  • progressBar.background#b35900
  • scrollbar.shadow#444444
  • selection.background#8250df
  • settings.checkboxBackground#24292f
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#424a53
  • settings.dropdownBackground#24292f
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#424a53
  • settings.headerForeground#424a53
  • settings.modifiedItemIndicator#0550ae
  • settings.numberInputBackground#24292f
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#424a53
  • settings.textInputBackground#24292f
  • settings.textInputBorder#000000
  • settings.textInputForeground#424a53
  • sideBar.background#24292f
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#424a53
  • statusBar.background#000000
  • statusBar.debuggingBackground#8a4600
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#424a53
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#424a53
  • statusBarItem.prominentBackground#8a4600
  • statusBarItem.prominentHoverBackground#0550ae
  • statusBarItem.remoteBackground#8250df
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#b3590080
  • tab.activeForeground#424a53
  • tab.border#000000
  • tab.inactiveBackground#24292f
  • tab.inactiveForeground#8c959f
  • terminal.ansiBlack#f6f8fa
  • terminal.ansiBlue#8250df
  • terminal.ansiBrightBlack#afb8c1
  • terminal.ansiBrightBlue#54aeff
  • terminal.ansiBrightCyan#49bcb7
  • terminal.ansiBrightGreen#54aeff
  • terminal.ansiBrightMagenta#c297ff
  • terminal.ansiBrightRed#f79939
  • terminal.ansiBrightWhite#24292f
  • terminal.ansiBrightYellow#d4a72c
  • terminal.ansiCyan#0550ae
  • terminal.ansiGreen#0a3069
  • terminal.ansiMagenta#b35900
  • terminal.ansiRed#8a4600
  • terminal.ansiWhite#32383f
  • terminal.ansiYellow#0550ae
  • terminal.background#ffffff
  • terminal.border#424a53
  • terminal.foreground#424a53
  • terminal.selectionBackground#f6f8fa50
  • textBlockQuote.background#24292f
  • titleBar.activeBackground#24292f
  • titleBar.activeForeground#424a53
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#8c959f
  • walkThrough.embeddedEditorBackground#24292f
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#afb8c175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8250df
source#424a53
meta.diff, meta.diff.header#8c959f
markup.inserted#0a3069
markup.deleted#8a4600
markup.changed#0550ae
invalid#8a4600underline italic
invalid.deprecated#424a53underline italic
entity.name.filename#d4a72c
markup.error#8a4600
markup.underlineunderline
markup.bold#0550aebold
markup.heading#8250dfbold
markup.italic#d4a72citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0550ae
markup.inline.raw, markup.raw.restructuredtext#0a3069
markup.underline.link, markup.underline.link.image#0550ae
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b35900
entity.name.directive.restructuredtext, markup.quote#d4a72citalic
meta.separator.markdown#8c959f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#0a3069
punctuation.definition.constant.restructuredtext#8250df
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8250df
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#424a53
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d4a72c
entity.name.type.class, entity.name.class#0550aenormal
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#8250dfitalic
entity.other.inherited-class#0550aeitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8c959f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b35900
comment.block.documentation entity.name.type#0550aeitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#0550ae
comment.block.documentation variable#0550aeitalic
constant, variable.other.constant#8250df
constant.character.escape, constant.character.string.escape, constant.regexp#b35900
entity.name.tag#b35900
entity.other.attribute-name.parent-selector#b35900
entity.other.attribute-name#0a3069italic
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#0a3069
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#0550aeitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#0a3069italic
meta.decorator variable.other.object#0a3069
keyword, punctuation.definition.keyword#b35900
keyword.control.new, keyword.operator.newbold
meta.selector#b35900
support#0550aeitalic
support.function.magic, support.variable, variable.other.predefined#8250dfregular
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#b35900
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#424a53
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#b35900
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0550ae
constant.other.date, constant.other.timestamp#0550ae
variable.other.alias.yaml#0a3069italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b35900regular
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#0550aeitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#0550ae
storage.modifier#b35900
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d4a72c
punctuation.definition.group.capture.regexp#b35900
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#8a4600
punctuation.definition.character-class.regexp#0550ae
punctuation.definition.group.regexp#0550ae
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#8a4600
meta.assertion.look-ahead.regexp#0a3069
string#d4a72c
punctuation.definition.string.begin, punctuation.definition.string.end#bf8700
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8250df
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#8c959f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#424a53
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#0550aeitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#424a53normal
meta.selectionset.graphql variable#d4a72c
meta.selectionset.graphql meta.arguments variable#424a53
entity.name.fragment.graphql, variable.fragment.graphql#0550ae
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#424a53
source.shell variable.other#8250df
support.constant#8250dfnormal
meta.scope.prerequisites.makefile#d4a72c
meta.attribute-selector.scss#d4a72c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#424a53
meta.preprocessor.haskell#8c959f