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#006fa810
  • activityBar.activeBorder#a0007d80
  • activityBar.background#f7f9fc
  • activityBar.foreground#232b38
  • activityBar.inactiveForeground#637287
  • activityBarBadge.background#a0007d
  • activityBarBadge.foreground#f7f9fc
  • badge.background#eef4fb
  • badge.foreground#232b38
  • breadcrumb.activeSelectionForeground#232b38
  • breadcrumb.background#f7f9fc
  • breadcrumb.focusForeground#232b38
  • breadcrumb.foreground#637287
  • breadcrumbPicker.background#ffffff
  • button.background#fbfdff
  • button.foreground#232b38
  • checkbox.background#fbfdff
  • checkbox.border#ffffff
  • checkbox.foreground#232b38
  • contrastBorder#ffffff
  • debugToolBar.background#fbfdff
  • diffEditor.insertedTextBackground#17795e20
  • diffEditor.removedTextBackground#b4233d50
  • dropdown.background#f7f9fc
  • dropdown.border#ffffff
  • dropdown.foreground#232b38
  • editor.background#f7f9fc
  • editor.findMatchBackground#9a4f0080
  • editor.findMatchHighlightBackground#141d2a40
  • editor.findRangeHighlightBackground#dde7f175
  • editor.foldBackground#fbfdff
  • editor.foreground#232b38
  • editor.hoverHighlightBackground#ffffff
  • editor.lineHighlightBorder#eef4fb
  • editor.rangeHighlightBackground#006fa815
  • editor.selectionBackground#eef4fb
  • editor.selectionHighlightBackground#eef4fb
  • editor.snippetFinalTabstopHighlightBackground#f7f9fc
  • editor.snippetFinalTabstopHighlightBorder#17795e
  • editor.snippetTabstopHighlightBackground#f7f9fc
  • editor.snippetTabstopHighlightBorder#637287
  • editor.wordHighlightBackground#00727e50
  • editor.wordHighlightStrongBackground#17795e50
  • editorCodeLens.foreground#637287
  • editorError.foreground#b4233d
  • editorGroup.border#006fa8
  • editorGroup.dropBackground#dde7f170
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#17795e80
  • editorGutter.deletedBackground#b4233d80
  • editorGutter.modifiedBackground#00727e80
  • editorHoverWidget.background#f7f9fc
  • editorHoverWidget.border#637287
  • editorIndentGuide.activeBackground#141d2a45
  • editorIndentGuide.background#141d2a1A
  • editorLineNumber.foreground#637287
  • editorLink.activeForeground#00727e
  • editorMarkerNavigation.background#fbfdff
  • editorOverviewRuler.addedForeground#17795e80
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.currentContentForeground#17795e
  • editorOverviewRuler.deletedForeground#b4233d80
  • editorOverviewRuler.errorForeground#b4233d80
  • editorOverviewRuler.incomingContentForeground#006fa8
  • editorOverviewRuler.infoForeground#00727e80
  • editorOverviewRuler.modifiedForeground#00727e80
  • editorOverviewRuler.selectionHighlightForeground#9a4f00
  • editorOverviewRuler.warningForeground#9a4f0080
  • editorOverviewRuler.wordHighlightForeground#00727e
  • editorOverviewRuler.wordHighlightStrongForeground#17795e
  • editorRuler.foreground#141d2a1A
  • editorSuggestWidget.background#fbfdff
  • editorSuggestWidget.foreground#232b38
  • editorSuggestWidget.selectedBackground#eef4fb
  • editorWarning.foreground#9a4f00
  • editorWhitespace.foreground#141d2a1A
  • editorWidget.background#fbfdff
  • errorForeground#b4233d
  • extensionButton.prominentBackground#17795e90
  • extensionButton.prominentForeground#232b38
  • extensionButton.prominentHoverBackground#17795e60
  • focusBorder#637287
  • foreground#232b38
  • gitDecoration.conflictingResourceForeground#9a4f00
  • gitDecoration.deletedResourceForeground#b4233d
  • gitDecoration.ignoredResourceForeground#637287
  • gitDecoration.modifiedResourceForeground#00727e
  • gitDecoration.untrackedResourceForeground#17795e
  • input.background#f7f9fc
  • input.border#ffffff
  • input.foreground#232b38
  • input.placeholderForeground#637287
  • inputOption.activeBorder#006fa8
  • inputValidation.errorBackground#f7f9fc
  • inputValidation.errorBorder#b4233d
  • inputValidation.errorForeground#b4233d
  • inputValidation.infoBackground#f7f9fc
  • inputValidation.infoBorder#006fa8
  • inputValidation.infoForeground#006fa8
  • inputValidation.warningBackground#f7f9fc
  • inputValidation.warningBorder#9a4f00
  • inputValidation.warningForeground#9a4f00
  • list.activeSelectionBackground#eef4fb
  • list.activeSelectionForeground#232b38
  • list.dropBackground#eef4fb
  • list.errorForeground#b4233d
  • list.focusBackground#dde7f175
  • list.highlightForeground#00727e
  • list.hoverBackground#dde7f175
  • list.inactiveSelectionBackground#dde7f175
  • list.warningForeground#9a4f00
  • listFilterWidget.background#f7f9fc
  • listFilterWidget.noMatchesOutline#b4233d
  • listFilterWidget.outline#eef4fb
  • merge.currentHeaderBackground#17795e90
  • merge.incomingHeaderBackground#006fa890
  • notification.background#f7f9fc
  • notification.buttonBackground#eef4fb
  • notification.buttonForeground#232b38
  • notification.buttonHoverBackground#dde7f175
  • notification.errorBackground#b4233d
  • notification.errorForeground#f7f9fc
  • notification.foreground#232b38
  • notification.infoBackground#006fa8
  • notification.infoForeground#f7f9fc
  • notification.warningBackground#9a4f00
  • notification.warningForeground#f7f9fc
  • notificationCenter.border#fbfdff
  • notificationCenterHeader.background#f7f9fc
  • notificationCenterHeader.foreground#232b38
  • notificationLink.foreground#00727e
  • notifications.background#f7f9fc
  • notifications.border#fbfdff
  • notifications.foreground#232b38
  • notificationsErrorIcon.foreground#b4233d
  • notificationsInfoIcon.foreground#006fa8
  • notificationsWarningIcon.foreground#9a4f00
  • notificationToast.border#fbfdff
  • panel.background#f7f9fc
  • panel.border#006fa8
  • panelInput.border#232b38
  • panelTitle.activeBorder#a0007d
  • panelTitle.activeForeground#232b38
  • panelTitle.inactiveForeground#637287
  • peekView.border#eef4fb
  • peekViewEditor.background#f7f9fc
  • peekViewEditor.matchHighlightBackground#7b650080
  • peekViewResult.background#fbfdff
  • peekViewResult.fileForeground#232b38
  • peekViewResult.lineForeground#232b38
  • peekViewResult.matchHighlightBackground#7b650080
  • peekViewResult.selectionBackground#eef4fb
  • peekViewResult.selectionForeground#232b38
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#637287
  • peekViewTitleLabel.foreground#232b38
  • pickerGroup.border#006fa8
  • pickerGroup.foreground#00727e
  • progressBar.background#a0007d
  • scrollbar.shadow#444444
  • selection.background#006fa8
  • settings.checkboxBackground#fbfdff
  • settings.checkboxBorder#ffffff
  • settings.checkboxForeground#232b38
  • settings.dropdownBackground#fbfdff
  • settings.dropdownBorder#ffffff
  • settings.dropdownForeground#232b38
  • settings.headerForeground#232b38
  • settings.modifiedItemIndicator#9a4f00
  • settings.numberInputBackground#fbfdff
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#232b38
  • settings.textInputBackground#fbfdff
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#232b38
  • sideBar.background#fbfdff
  • sideBarSectionHeader.background#f7f9fc
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#232b38
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#b4233d
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#232b38
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#232b38
  • statusBarItem.prominentBackground#b4233d
  • statusBarItem.prominentHoverBackground#9a4f00
  • statusBarItem.remoteBackground#006fa8
  • statusBarItem.remoteForeground#f7f9fc
  • tab.activeBackground#f7f9fc
  • tab.activeBorderTop#a0007d80
  • tab.activeForeground#232b38
  • tab.border#ffffff
  • tab.inactiveBackground#fbfdff
  • tab.inactiveForeground#637287
  • terminal.ansiBlack#eef4fb
  • terminal.ansiBlue#006fa8
  • terminal.ansiBrightBlack#dde7f1
  • terminal.ansiBrightBlue#0078b5
  • terminal.ansiBrightCyan#007787
  • terminal.ansiBrightGreen#247b4e
  • terminal.ansiBrightMagenta#b5149e
  • terminal.ansiBrightRed#c7354d
  • terminal.ansiBrightWhite#141d2a
  • terminal.ansiBrightYellow#7b6500
  • terminal.ansiCyan#00727e
  • terminal.ansiGreen#17795e
  • terminal.ansiMagenta#a0007d
  • terminal.ansiRed#b4233d
  • terminal.ansiWhite#202b3a
  • terminal.ansiYellow#9a4f00
  • terminal.background#f7f9fc
  • terminal.border#232b38
  • terminal.foreground#232b38
  • terminal.selectionBackground#eef4fb50
  • textBlockQuote.background#fbfdff
  • titleBar.activeBackground#fbfdff
  • titleBar.activeForeground#232b38
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#637287
  • walkThrough.embeddedEditorBackground#fbfdff
  • welcomePage.buttonBackground#eef4fb
  • welcomePage.buttonHoverBackground#dde7f175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#006fa8
source#232b38
meta.diff, meta.diff.header#637287
markup.inserted#17795e
markup.deleted#b4233d
markup.changed#9a4f00
invalid#b4233dunderline italic
invalid.deprecated#232b38underline italic
entity.name.filename#7b6500
markup.error#b4233d
markup.underlineunderline
markup.bold#9a4f00bold
markup.heading#006fa8bold
markup.italic#7b6500italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00727e
markup.inline.raw, markup.raw.restructuredtext#17795e
markup.underline.link, markup.underline.link.image#00727e
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a0007d
entity.name.directive.restructuredtext, markup.quote#7b6500italic
meta.separator.markdown#637287
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#17795e
punctuation.definition.constant.restructuredtext#006fa8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#006fa8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#232b38
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#7b6500
entity.name.type.class, entity.name.class#00727enormal
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#006fa8italic
entity.other.inherited-class#00727eitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#637287
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a0007d
comment.block.documentation entity.name.type#00727eitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00727e
comment.block.documentation variable#9a4f00italic
constant, variable.other.constant#006fa8
constant.character.escape, constant.character.string.escape, constant.regexp#a0007d
entity.name.tag#a0007d
entity.other.attribute-name.parent-selector#a0007d
entity.other.attribute-name#17795eitalic
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#17795e
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#9a4f00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#17795eitalic
meta.decorator variable.other.object#17795e
keyword, punctuation.definition.keyword#a0007d
keyword.control.new, keyword.operator.newbold
meta.selector#a0007d
support#00727eitalic
support.function.magic, support.variable, variable.other.predefined#006fa8regular
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#a0007d
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#232b38
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#a0007d
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00727e
constant.other.date, constant.other.timestamp#9a4f00
variable.other.alias.yaml#17795eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a0007dregular
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#00727eitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#9a4f00
storage.modifier#a0007d
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#7b6500
punctuation.definition.group.capture.regexp#a0007d
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b4233d
punctuation.definition.character-class.regexp#00727e
punctuation.definition.group.regexp#9a4f00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b4233d
meta.assertion.look-ahead.regexp#17795e
string#7b6500
punctuation.definition.string.begin, punctuation.definition.string.end#6f6300
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#006fa8
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#637287
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#232b38
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#9a4f00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#232b38normal
meta.selectionset.graphql variable#7b6500
meta.selectionset.graphql meta.arguments variable#232b38
entity.name.fragment.graphql, variable.fragment.graphql#00727e
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#232b38
source.shell variable.other#006fa8
support.constant#006fa8normal
meta.scope.prerequisites.makefile#7b6500
meta.attribute-selector.scss#7b6500
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#232b38
meta.preprocessor.haskell#637287