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#cf222e80
  • activityBar.background#ffffff
  • activityBar.foreground#424a53
  • activityBar.inactiveForeground#8c959f
  • activityBarBadge.background#cf222e
  • 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#1f2328
  • button.foreground#424a53
  • checkbox.background#1f2328
  • checkbox.border#000000
  • checkbox.foreground#424a53
  • contrastBorder#000000
  • debugToolBar.background#1f2328
  • diffEditor.insertedTextBackground#0a306920
  • diffEditor.removedTextBackground#95380050
  • dropdown.background#ffffff
  • dropdown.border#000000
  • dropdown.foreground#424a53
  • editor.background#ffffff
  • editor.findMatchBackground#0550ae80
  • editor.findMatchHighlightBackground#1f232840
  • editor.findRangeHighlightBackground#afb8c175
  • editor.foldBackground#1f2328
  • 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#11632950
  • editor.wordHighlightStrongBackground#0a306950
  • editorCodeLens.foreground#8c959f
  • editorError.foreground#953800
  • editorGroup.border#8250df
  • editorGroup.dropBackground#afb8c170
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#0a306980
  • editorGutter.deletedBackground#95380080
  • editorGutter.modifiedBackground#11632980
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#8c959f
  • editorIndentGuide.activeBackground#1f232845
  • editorIndentGuide.background#1f23281A
  • editorLineNumber.foreground#8c959f
  • editorLink.activeForeground#116329
  • editorMarkerNavigation.background#1f2328
  • editorOverviewRuler.addedForeground#0a306980
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#0a3069
  • editorOverviewRuler.deletedForeground#95380080
  • editorOverviewRuler.errorForeground#95380080
  • editorOverviewRuler.incomingContentForeground#8250df
  • editorOverviewRuler.infoForeground#11632980
  • editorOverviewRuler.modifiedForeground#11632980
  • editorOverviewRuler.selectionHighlightForeground#0550ae
  • editorOverviewRuler.warningForeground#0550ae80
  • editorOverviewRuler.wordHighlightForeground#116329
  • editorOverviewRuler.wordHighlightStrongForeground#0a3069
  • editorRuler.foreground#1f23281A
  • editorSuggestWidget.background#1f2328
  • editorSuggestWidget.foreground#424a53
  • editorSuggestWidget.selectedBackground#f6f8fa
  • editorWarning.foreground#0550ae
  • editorWhitespace.foreground#1f23281A
  • editorWidget.background#1f2328
  • errorForeground#953800
  • extensionButton.prominentBackground#0a306990
  • extensionButton.prominentForeground#424a53
  • extensionButton.prominentHoverBackground#0a306960
  • focusBorder#8c959f
  • foreground#424a53
  • gitDecoration.conflictingResourceForeground#0550ae
  • gitDecoration.deletedResourceForeground#953800
  • gitDecoration.ignoredResourceForeground#8c959f
  • gitDecoration.modifiedResourceForeground#116329
  • gitDecoration.untrackedResourceForeground#0a3069
  • input.background#ffffff
  • input.border#000000
  • input.foreground#424a53
  • input.placeholderForeground#8c959f
  • inputOption.activeBorder#8250df
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#953800
  • inputValidation.errorForeground#953800
  • 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#953800
  • list.focusBackground#afb8c175
  • list.highlightForeground#116329
  • list.hoverBackground#afb8c175
  • list.inactiveSelectionBackground#afb8c175
  • list.warningForeground#0550ae
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#953800
  • listFilterWidget.outline#f6f8fa
  • merge.currentHeaderBackground#0a306990
  • merge.incomingHeaderBackground#8250df90
  • notification.background#ffffff
  • notification.buttonBackground#f6f8fa
  • notification.buttonForeground#424a53
  • notification.buttonHoverBackground#afb8c175
  • notification.errorBackground#953800
  • notification.errorForeground#ffffff
  • notification.foreground#424a53
  • notification.infoBackground#8250df
  • notification.infoForeground#ffffff
  • notification.warningBackground#0550ae
  • notification.warningForeground#ffffff
  • notificationCenter.border#1f2328
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#424a53
  • notificationLink.foreground#116329
  • notifications.background#ffffff
  • notifications.border#1f2328
  • notifications.foreground#424a53
  • notificationsErrorIcon.foreground#953800
  • notificationsInfoIcon.foreground#8250df
  • notificationsWarningIcon.foreground#0550ae
  • notificationToast.border#1f2328
  • panel.background#ffffff
  • panel.border#8250df
  • panelInput.border#424a53
  • panelTitle.activeBorder#cf222e
  • panelTitle.activeForeground#424a53
  • panelTitle.inactiveForeground#8c959f
  • peekView.border#f6f8fa
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#d4a72c80
  • peekViewResult.background#1f2328
  • 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#116329
  • progressBar.background#cf222e
  • scrollbar.shadow#444444
  • selection.background#8250df
  • settings.checkboxBackground#1f2328
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#424a53
  • settings.dropdownBackground#1f2328
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#424a53
  • settings.headerForeground#424a53
  • settings.modifiedItemIndicator#0550ae
  • settings.numberInputBackground#1f2328
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#424a53
  • settings.textInputBackground#1f2328
  • settings.textInputBorder#000000
  • settings.textInputForeground#424a53
  • sideBar.background#1f2328
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#424a53
  • statusBar.background#000000
  • statusBar.debuggingBackground#953800
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#424a53
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#424a53
  • statusBarItem.prominentBackground#953800
  • statusBarItem.prominentHoverBackground#0550ae
  • statusBarItem.remoteBackground#8250df
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#cf222e80
  • tab.activeForeground#424a53
  • tab.border#000000
  • tab.inactiveBackground#1f2328
  • tab.inactiveForeground#8c959f
  • terminal.ansiBlack#f6f8fa
  • terminal.ansiBlue#8250df
  • terminal.ansiBrightBlack#afb8c1
  • terminal.ansiBrightBlue#54aeff
  • terminal.ansiBrightCyan#49bcb7
  • terminal.ansiBrightGreen#4ac26b
  • terminal.ansiBrightMagenta#c297ff
  • terminal.ansiBrightRed#ff8182
  • terminal.ansiBrightWhite#1f2328
  • terminal.ansiBrightYellow#d4a72c
  • terminal.ansiCyan#116329
  • terminal.ansiGreen#0a3069
  • terminal.ansiMagenta#cf222e
  • terminal.ansiRed#953800
  • terminal.ansiWhite#32383f
  • terminal.ansiYellow#0550ae
  • terminal.background#ffffff
  • terminal.border#424a53
  • terminal.foreground#424a53
  • terminal.selectionBackground#f6f8fa50
  • textBlockQuote.background#1f2328
  • titleBar.activeBackground#1f2328
  • titleBar.activeForeground#424a53
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#8c959f
  • walkThrough.embeddedEditorBackground#1f2328
  • 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#953800
markup.changed#0550ae
invalid#953800underline italic
invalid.deprecated#424a53underline italic
entity.name.filename#d4a72c
markup.error#953800
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#116329
markup.inline.raw, markup.raw.restructuredtext#0a3069
markup.underline.link, markup.underline.link.image#116329
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#cf222e
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#116329normal
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#116329italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8c959f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#cf222e
comment.block.documentation entity.name.type#116329italic
comment.block.documentation entity.name.type punctuation.definition.bracket#116329
comment.block.documentation variable#0550aeitalic
constant, variable.other.constant#8250df
constant.character.escape, constant.character.string.escape, constant.regexp#cf222e
entity.name.tag#cf222e
entity.other.attribute-name.parent-selector#cf222e
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#cf222e
keyword.control.new, keyword.operator.newbold
meta.selector#cf222e
support#116329italic
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#cf222e
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#cf222e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#116329
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#cf222eregular
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#116329italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#0550ae
storage.modifier#cf222e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d4a72c
punctuation.definition.group.capture.regexp#cf222e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#953800
punctuation.definition.character-class.regexp#116329
punctuation.definition.group.regexp#0550ae
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#953800
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#116329
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