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#125ccf10
  • activityBar.activeBorder#9f00bc80
  • activityBar.background#ffffff
  • activityBar.foreground#9a9b9a
  • activityBar.inactiveForeground#6b6d6a
  • activityBarBadge.background#9f00bc
  • activityBarBadge.foreground#ffffff
  • badge.background#000000
  • badge.foreground#9a9b9a
  • breadcrumb.activeSelectionForeground#9a9b9a
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#9a9b9a
  • breadcrumb.foreground#6b6d6a
  • breadcrumbPicker.background#1c1d1b
  • button.background#383a37
  • button.foreground#9a9b9a
  • checkbox.background#383a37
  • checkbox.border#1c1d1b
  • checkbox.foreground#9a9b9a
  • contrastBorder#1c1d1b
  • debugToolBar.background#383a37
  • diffEditor.insertedTextBackground#32895c20
  • diffEditor.removedTextBackground#f7272950
  • dropdown.background#ffffff
  • dropdown.border#1c1d1b
  • dropdown.foreground#9a9b9a
  • editor.background#ffffff
  • editor.findMatchBackground#f96f1c80
  • editor.findMatchHighlightBackground#ededec40
  • editor.findRangeHighlightBackground#54575375
  • editor.foldBackground#383a37
  • editor.foreground#9a9b9a
  • editor.hoverHighlightBackground#1c1d1b
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#125ccf15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#32895c
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#6b6d6a
  • editor.wordHighlightBackground#32c2c050
  • editor.wordHighlightStrongBackground#32895c50
  • editorCodeLens.foreground#6b6d6a
  • editorError.foreground#f72729
  • editorGroup.border#125ccf
  • editorGroup.dropBackground#54575370
  • editorGroupHeader.tabsBackground#1c1d1b
  • editorGutter.addedBackground#32895c80
  • editorGutter.deletedBackground#f7272980
  • editorGutter.modifiedBackground#32c2c080
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#6b6d6a
  • editorIndentGuide.activeBackground#ededec45
  • editorIndentGuide.background#ededec1A
  • editorLineNumber.foreground#6b6d6a
  • editorLink.activeForeground#32c2c0
  • editorMarkerNavigation.background#383a37
  • editorOverviewRuler.addedForeground#32895c80
  • editorOverviewRuler.border#1c1d1b
  • editorOverviewRuler.currentContentForeground#32895c
  • editorOverviewRuler.deletedForeground#f7272980
  • editorOverviewRuler.errorForeground#f7272980
  • editorOverviewRuler.incomingContentForeground#125ccf
  • editorOverviewRuler.infoForeground#32c2c080
  • editorOverviewRuler.modifiedForeground#32c2c080
  • editorOverviewRuler.selectionHighlightForeground#f96f1c
  • editorOverviewRuler.warningForeground#f96f1c80
  • editorOverviewRuler.wordHighlightForeground#32c2c0
  • editorOverviewRuler.wordHighlightStrongForeground#32895c
  • editorRuler.foreground#ededec1A
  • editorSuggestWidget.background#383a37
  • editorSuggestWidget.foreground#9a9b9a
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#f96f1c
  • editorWhitespace.foreground#ededec1A
  • editorWidget.background#383a37
  • errorForeground#f72729
  • extensionButton.prominentBackground#32895c90
  • extensionButton.prominentForeground#9a9b9a
  • extensionButton.prominentHoverBackground#32895c60
  • focusBorder#6b6d6a
  • foreground#9a9b9a
  • gitDecoration.conflictingResourceForeground#f96f1c
  • gitDecoration.deletedResourceForeground#f72729
  • gitDecoration.ignoredResourceForeground#6b6d6a
  • gitDecoration.modifiedResourceForeground#32c2c0
  • gitDecoration.untrackedResourceForeground#32895c
  • input.background#ffffff
  • input.border#1c1d1b
  • input.foreground#9a9b9a
  • input.placeholderForeground#6b6d6a
  • inputOption.activeBorder#125ccf
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#f72729
  • inputValidation.errorForeground#f72729
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#125ccf
  • inputValidation.infoForeground#125ccf
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#f96f1c
  • inputValidation.warningForeground#f96f1c
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#9a9b9a
  • list.dropBackground#000000
  • list.errorForeground#f72729
  • list.focusBackground#54575375
  • list.highlightForeground#32c2c0
  • list.hoverBackground#54575375
  • list.inactiveSelectionBackground#54575375
  • list.warningForeground#f96f1c
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#f72729
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#32895c90
  • merge.incomingHeaderBackground#125ccf90
  • notification.background#ffffff
  • notification.buttonBackground#000000
  • notification.buttonForeground#9a9b9a
  • notification.buttonHoverBackground#54575375
  • notification.errorBackground#f72729
  • notification.errorForeground#ffffff
  • notification.foreground#9a9b9a
  • notification.infoBackground#125ccf
  • notification.infoForeground#ffffff
  • notification.warningBackground#f96f1c
  • notification.warningForeground#ffffff
  • notificationCenter.border#383a37
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#9a9b9a
  • notificationLink.foreground#32c2c0
  • notifications.background#ffffff
  • notifications.border#383a37
  • notifications.foreground#9a9b9a
  • notificationsErrorIcon.foreground#f72729
  • notificationsInfoIcon.foreground#125ccf
  • notificationsWarningIcon.foreground#f96f1c
  • notificationToast.border#383a37
  • panel.background#ffffff
  • panel.border#125ccf
  • panelInput.border#9a9b9a
  • panelTitle.activeBorder#9f00bc
  • panelTitle.activeForeground#9a9b9a
  • panelTitle.inactiveForeground#6b6d6a
  • peekView.border#000000
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#fcd62780
  • peekViewResult.background#383a37
  • peekViewResult.fileForeground#9a9b9a
  • peekViewResult.lineForeground#9a9b9a
  • peekViewResult.matchHighlightBackground#fcd62780
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#9a9b9a
  • peekViewTitle.background#1c1d1b
  • peekViewTitleDescription.foreground#6b6d6a
  • peekViewTitleLabel.foreground#9a9b9a
  • pickerGroup.border#125ccf
  • pickerGroup.foreground#32c2c0
  • progressBar.background#9f00bc
  • scrollbar.shadow#444444
  • selection.background#125ccf
  • settings.checkboxBackground#383a37
  • settings.checkboxBorder#1c1d1b
  • settings.checkboxForeground#9a9b9a
  • settings.dropdownBackground#383a37
  • settings.dropdownBorder#1c1d1b
  • settings.dropdownForeground#9a9b9a
  • settings.headerForeground#9a9b9a
  • settings.modifiedItemIndicator#f96f1c
  • settings.numberInputBackground#383a37
  • settings.numberInputBorder#1c1d1b
  • settings.numberInputForeground#9a9b9a
  • settings.textInputBackground#383a37
  • settings.textInputBorder#1c1d1b
  • settings.textInputForeground#9a9b9a
  • sideBar.background#383a37
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#1c1d1b
  • sideBarTitle.foreground#9a9b9a
  • statusBar.background#1c1d1b
  • statusBar.debuggingBackground#f72729
  • statusBar.debuggingForeground#1c1d1b
  • statusBar.foreground#9a9b9a
  • statusBar.noFolderBackground#1c1d1b
  • statusBar.noFolderForeground#9a9b9a
  • statusBarItem.prominentBackground#f72729
  • statusBarItem.prominentHoverBackground#f96f1c
  • statusBarItem.remoteBackground#125ccf
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#9f00bc80
  • tab.activeForeground#9a9b9a
  • tab.border#1c1d1b
  • tab.inactiveBackground#383a37
  • tab.inactiveForeground#6b6d6a
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#125ccf
  • terminal.ansiBrightBlack#545753
  • terminal.ansiBrightBlue#156ffe
  • terminal.ansiBrightCyan#39d5ce
  • terminal.ansiBrightGreen#2cc631
  • terminal.ansiBrightMagenta#e800b0
  • terminal.ansiBrightRed#fb0416
  • terminal.ansiBrightWhite#ededec
  • terminal.ansiBrightYellow#fcd627
  • terminal.ansiCyan#32c2c0
  • terminal.ansiGreen#32895c
  • terminal.ansiMagenta#9f00bc
  • terminal.ansiRed#f72729
  • terminal.ansiWhite#b2b2b2
  • terminal.ansiYellow#f96f1c
  • terminal.background#ffffff
  • terminal.border#9a9b9a
  • terminal.foreground#9a9b9a
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383a37
  • titleBar.activeBackground#383a37
  • titleBar.activeForeground#9a9b9a
  • titleBar.inactiveBackground#1c1d1b
  • titleBar.inactiveForeground#6b6d6a
  • walkThrough.embeddedEditorBackground#383a37
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#54575375
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#125ccf
source#9a9b9a
meta.diff, meta.diff.header#6b6d6a
markup.inserted#32895c
markup.deleted#f72729
markup.changed#f96f1c
invalid#f72729underline italic
invalid.deprecated#9a9b9aunderline italic
entity.name.filename#fcd627
markup.error#f72729
markup.underlineunderline
markup.bold#f96f1cbold
markup.heading#125ccfbold
markup.italic#fcd627italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#32c2c0
markup.inline.raw, markup.raw.restructuredtext#32895c
markup.underline.link, markup.underline.link.image#32c2c0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9f00bc
entity.name.directive.restructuredtext, markup.quote#fcd627italic
meta.separator.markdown#6b6d6a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#32895c
punctuation.definition.constant.restructuredtext#125ccf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#125ccf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#9a9b9a
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fcd627
entity.name.type.class, entity.name.class#32c2c0normal
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#125ccfitalic
entity.other.inherited-class#32c2c0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6b6d6a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9f00bc
comment.block.documentation entity.name.type#32c2c0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#32c2c0
comment.block.documentation variable#f96f1citalic
constant, variable.other.constant#125ccf
constant.character.escape, constant.character.string.escape, constant.regexp#9f00bc
entity.name.tag#9f00bc
entity.other.attribute-name.parent-selector#9f00bc
entity.other.attribute-name#32895citalic
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#32895c
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#f96f1citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#32895citalic
meta.decorator variable.other.object#32895c
keyword, punctuation.definition.keyword#9f00bc
keyword.control.new, keyword.operator.newbold
meta.selector#9f00bc
support#32c2c0italic
support.function.magic, support.variable, variable.other.predefined#125ccfregular
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#9f00bc
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#9a9b9a
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#9f00bc
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#32c2c0
constant.other.date, constant.other.timestamp#f96f1c
variable.other.alias.yaml#32895citalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9f00bcregular
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#32c2c0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f96f1c
storage.modifier#9f00bc
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fcd627
punctuation.definition.group.capture.regexp#9f00bc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f72729
punctuation.definition.character-class.regexp#32c2c0
punctuation.definition.group.regexp#f96f1c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f72729
meta.assertion.look-ahead.regexp#32895c
string#fcd627
punctuation.definition.string.begin, punctuation.definition.string.end#156ffe
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#125ccf
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#6b6d6a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#9a9b9a
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f96f1citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#9a9b9anormal
meta.selectionset.graphql variable#fcd627
meta.selectionset.graphql meta.arguments variable#9a9b9a
entity.name.fragment.graphql, variable.fragment.graphql#32c2c0
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#9a9b9a
source.shell variable.other#125ccf
support.constant#125ccfnormal
meta.scope.prerequisites.makefile#fcd627
meta.attribute-selector.scss#fcd627
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#9a9b9a
meta.preprocessor.haskell#6b6d6a