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#0f49c610
  • activityBar.activeBorder#66599280
  • activityBar.background#1e1c44
  • activityBar.foreground#cdc3bf
  • activityBar.inactiveForeground#7893bf
  • activityBarBadge.background#665992
  • activityBarBadge.foreground#1e1c44
  • badge.background#050404
  • badge.foreground#cdc3bf
  • breadcrumb.activeSelectionForeground#cdc3bf
  • breadcrumb.background#1e1c44
  • breadcrumb.focusForeground#cdc3bf
  • breadcrumb.foreground#7893bf
  • breadcrumbPicker.background#1a293f
  • button.background#34527f
  • button.foreground#cdc3bf
  • checkbox.background#34527f
  • checkbox.border#1a293f
  • checkbox.foreground#cdc3bf
  • contrastBorder#1a293f
  • debugToolBar.background#34527f
  • diffEditor.insertedTextBackground#49b11720
  • diffEditor.removedTextBackground#bc001350
  • dropdown.background#1e1c44
  • dropdown.border#1a293f
  • dropdown.foreground#cdc3bf
  • editor.background#1e1c44
  • editor.findMatchBackground#e6741d80
  • editor.findMatchHighlightBackground#f5f4fb40
  • editor.findRangeHighlightBackground#4e7bbf75
  • editor.foldBackground#34527f
  • editor.foreground#cdc3bf
  • editor.hoverHighlightBackground#1a293f
  • editor.lineHighlightBorder#050404
  • editor.rangeHighlightBackground#0f49c615
  • editor.selectionBackground#050404
  • editor.selectionHighlightBackground#050404
  • editor.snippetFinalTabstopHighlightBackground#1e1c44
  • editor.snippetFinalTabstopHighlightBorder#49b117
  • editor.snippetTabstopHighlightBackground#1e1c44
  • editor.snippetTabstopHighlightBorder#7893bf
  • editor.wordHighlightBackground#6fa49750
  • editor.wordHighlightStrongBackground#49b11750
  • editorCodeLens.foreground#7893bf
  • editorError.foreground#bc0013
  • editorGroup.border#0f49c6
  • editorGroup.dropBackground#4e7bbf70
  • editorGroupHeader.tabsBackground#1a293f
  • editorGutter.addedBackground#49b11780
  • editorGutter.deletedBackground#bc001380
  • editorGutter.modifiedBackground#6fa49780
  • editorHoverWidget.background#1e1c44
  • editorHoverWidget.border#7893bf
  • editorIndentGuide.activeBackground#f5f4fb45
  • editorIndentGuide.background#f5f4fb1A
  • editorLineNumber.foreground#7893bf
  • editorLink.activeForeground#6fa497
  • editorMarkerNavigation.background#34527f
  • editorOverviewRuler.addedForeground#49b11780
  • editorOverviewRuler.border#1a293f
  • editorOverviewRuler.currentContentForeground#49b117
  • editorOverviewRuler.deletedForeground#bc001380
  • editorOverviewRuler.errorForeground#bc001380
  • editorOverviewRuler.incomingContentForeground#0f49c6
  • editorOverviewRuler.infoForeground#6fa49780
  • editorOverviewRuler.modifiedForeground#6fa49780
  • editorOverviewRuler.selectionHighlightForeground#e6741d
  • editorOverviewRuler.warningForeground#e6741d80
  • editorOverviewRuler.wordHighlightForeground#6fa497
  • editorOverviewRuler.wordHighlightStrongForeground#49b117
  • editorRuler.foreground#f5f4fb1A
  • editorSuggestWidget.background#34527f
  • editorSuggestWidget.foreground#cdc3bf
  • editorSuggestWidget.selectedBackground#050404
  • editorWarning.foreground#e6741d
  • editorWhitespace.foreground#f5f4fb1A
  • editorWidget.background#34527f
  • errorForeground#bc0013
  • extensionButton.prominentBackground#49b11790
  • extensionButton.prominentForeground#cdc3bf
  • extensionButton.prominentHoverBackground#49b11760
  • focusBorder#7893bf
  • foreground#cdc3bf
  • gitDecoration.conflictingResourceForeground#e6741d
  • gitDecoration.deletedResourceForeground#bc0013
  • gitDecoration.ignoredResourceForeground#7893bf
  • gitDecoration.modifiedResourceForeground#6fa497
  • gitDecoration.untrackedResourceForeground#49b117
  • input.background#1e1c44
  • input.border#1a293f
  • input.foreground#cdc3bf
  • input.placeholderForeground#7893bf
  • inputOption.activeBorder#0f49c6
  • inputValidation.errorBackground#1e1c44
  • inputValidation.errorBorder#bc0013
  • inputValidation.errorForeground#bc0013
  • inputValidation.infoBackground#1e1c44
  • inputValidation.infoBorder#0f49c6
  • inputValidation.infoForeground#0f49c6
  • inputValidation.warningBackground#1e1c44
  • inputValidation.warningBorder#e6741d
  • inputValidation.warningForeground#e6741d
  • list.activeSelectionBackground#050404
  • list.activeSelectionForeground#cdc3bf
  • list.dropBackground#050404
  • list.errorForeground#bc0013
  • list.focusBackground#4e7bbf75
  • list.highlightForeground#6fa497
  • list.hoverBackground#4e7bbf75
  • list.inactiveSelectionBackground#4e7bbf75
  • list.warningForeground#e6741d
  • listFilterWidget.background#1e1c44
  • listFilterWidget.noMatchesOutline#bc0013
  • listFilterWidget.outline#050404
  • merge.currentHeaderBackground#49b11790
  • merge.incomingHeaderBackground#0f49c690
  • notification.background#1e1c44
  • notification.buttonBackground#050404
  • notification.buttonForeground#cdc3bf
  • notification.buttonHoverBackground#4e7bbf75
  • notification.errorBackground#bc0013
  • notification.errorForeground#1e1c44
  • notification.foreground#cdc3bf
  • notification.infoBackground#0f49c6
  • notification.infoForeground#1e1c44
  • notification.warningBackground#e6741d
  • notification.warningForeground#1e1c44
  • notificationCenter.border#34527f
  • notificationCenterHeader.background#1e1c44
  • notificationCenterHeader.foreground#cdc3bf
  • notificationLink.foreground#6fa497
  • notifications.background#1e1c44
  • notifications.border#34527f
  • notifications.foreground#cdc3bf
  • notificationsErrorIcon.foreground#bc0013
  • notificationsInfoIcon.foreground#0f49c6
  • notificationsWarningIcon.foreground#e6741d
  • notificationToast.border#34527f
  • panel.background#1e1c44
  • panel.border#0f49c6
  • panelInput.border#cdc3bf
  • panelTitle.activeBorder#665992
  • panelTitle.activeForeground#cdc3bf
  • panelTitle.inactiveForeground#7893bf
  • peekView.border#050404
  • peekViewEditor.background#1e1c44
  • peekViewEditor.matchHighlightBackground#efc11a80
  • peekViewResult.background#34527f
  • peekViewResult.fileForeground#cdc3bf
  • peekViewResult.lineForeground#cdc3bf
  • peekViewResult.matchHighlightBackground#efc11a80
  • peekViewResult.selectionBackground#050404
  • peekViewResult.selectionForeground#cdc3bf
  • peekViewTitle.background#1a293f
  • peekViewTitleDescription.foreground#7893bf
  • peekViewTitleLabel.foreground#cdc3bf
  • pickerGroup.border#0f49c6
  • pickerGroup.foreground#6fa497
  • progressBar.background#665992
  • scrollbar.shadow#444444
  • selection.background#0f49c6
  • settings.checkboxBackground#34527f
  • settings.checkboxBorder#1a293f
  • settings.checkboxForeground#cdc3bf
  • settings.dropdownBackground#34527f
  • settings.dropdownBorder#1a293f
  • settings.dropdownForeground#cdc3bf
  • settings.headerForeground#cdc3bf
  • settings.modifiedItemIndicator#e6741d
  • settings.numberInputBackground#34527f
  • settings.numberInputBorder#1a293f
  • settings.numberInputForeground#cdc3bf
  • settings.textInputBackground#34527f
  • settings.textInputBorder#1a293f
  • settings.textInputForeground#cdc3bf
  • sideBar.background#34527f
  • sideBarSectionHeader.background#1e1c44
  • sideBarSectionHeader.border#1a293f
  • sideBarTitle.foreground#cdc3bf
  • statusBar.background#1a293f
  • statusBar.debuggingBackground#bc0013
  • statusBar.debuggingForeground#1a293f
  • statusBar.foreground#cdc3bf
  • statusBar.noFolderBackground#1a293f
  • statusBar.noFolderForeground#cdc3bf
  • statusBarItem.prominentBackground#bc0013
  • statusBarItem.prominentHoverBackground#e6741d
  • statusBarItem.remoteBackground#0f49c6
  • statusBarItem.remoteForeground#1e1c44
  • tab.activeBackground#1e1c44
  • tab.activeBorderTop#66599280
  • tab.activeForeground#cdc3bf
  • tab.border#1a293f
  • tab.inactiveBackground#34527f
  • tab.inactiveForeground#7893bf
  • terminal.ansiBlack#050404
  • terminal.ansiBlue#0f49c6
  • terminal.ansiBrightBlack#4e7bbf
  • terminal.ansiBrightBlue#1896c6
  • terminal.ansiBrightCyan#c8f9f3
  • terminal.ansiBrightGreen#9dff6e
  • terminal.ansiBrightMagenta#9a5952
  • terminal.ansiBrightRed#fc5e59
  • terminal.ansiBrightWhite#f5f4fb
  • terminal.ansiBrightYellow#efc11a
  • terminal.ansiCyan#6fa497
  • terminal.ansiGreen#49b117
  • terminal.ansiMagenta#665992
  • terminal.ansiRed#bc0013
  • terminal.ansiWhite#f8dbc0
  • terminal.ansiYellow#e6741d
  • terminal.background#1e1c44
  • terminal.border#cdc3bf
  • terminal.foreground#cdc3bf
  • terminal.selectionBackground#05040450
  • textBlockQuote.background#34527f
  • titleBar.activeBackground#34527f
  • titleBar.activeForeground#cdc3bf
  • titleBar.inactiveBackground#1a293f
  • titleBar.inactiveForeground#7893bf
  • walkThrough.embeddedEditorBackground#34527f
  • welcomePage.buttonBackground#050404
  • welcomePage.buttonHoverBackground#4e7bbf75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0f49c6
source#cdc3bf
meta.diff, meta.diff.header#7893bf
markup.inserted#49b117
markup.deleted#bc0013
markup.changed#e6741d
invalid#bc0013underline italic
invalid.deprecated#cdc3bfunderline italic
entity.name.filename#efc11a
markup.error#bc0013
markup.underlineunderline
markup.bold#e6741dbold
markup.heading#0f49c6bold
markup.italic#efc11aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6fa497
markup.inline.raw, markup.raw.restructuredtext#49b117
markup.underline.link, markup.underline.link.image#6fa497
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#665992
entity.name.directive.restructuredtext, markup.quote#efc11aitalic
meta.separator.markdown#7893bf
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#49b117
punctuation.definition.constant.restructuredtext#0f49c6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0f49c6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cdc3bf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#efc11a
entity.name.type.class, entity.name.class#6fa497normal
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#0f49c6italic
entity.other.inherited-class#6fa497italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7893bf
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#665992
comment.block.documentation entity.name.type#6fa497italic
comment.block.documentation entity.name.type punctuation.definition.bracket#6fa497
comment.block.documentation variable#e6741ditalic
constant, variable.other.constant#0f49c6
constant.character.escape, constant.character.string.escape, constant.regexp#665992
entity.name.tag#665992
entity.other.attribute-name.parent-selector#665992
entity.other.attribute-name#49b117italic
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#49b117
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#e6741ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#49b117italic
meta.decorator variable.other.object#49b117
keyword, punctuation.definition.keyword#665992
keyword.control.new, keyword.operator.newbold
meta.selector#665992
support#6fa497italic
support.function.magic, support.variable, variable.other.predefined#0f49c6regular
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#665992
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#cdc3bf
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#665992
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6fa497
constant.other.date, constant.other.timestamp#e6741d
variable.other.alias.yaml#49b117italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#665992regular
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#6fa497italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e6741d
storage.modifier#665992
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#efc11a
punctuation.definition.group.capture.regexp#665992
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#bc0013
punctuation.definition.character-class.regexp#6fa497
punctuation.definition.group.regexp#e6741d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#bc0013
meta.assertion.look-ahead.regexp#49b117
string#efc11a
punctuation.definition.string.begin, punctuation.definition.string.end#1896c6
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0f49c6
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#7893bf
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cdc3bf
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e6741ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cdc3bfnormal
meta.selectionset.graphql variable#efc11a
meta.selectionset.graphql meta.arguments variable#cdc3bf
entity.name.fragment.graphql, variable.fragment.graphql#6fa497
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#cdc3bf
source.shell variable.other#0f49c6
support.constant#0f49c6normal
meta.scope.prerequisites.makefile#efc11a
meta.attribute-selector.scss#efc11a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cdc3bf
meta.preprocessor.haskell#7893bf