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#6d90b010
  • activityBar.activeBorder#a07eab80
  • activityBar.background#161718
  • activityBar.foreground#8f9190
  • activityBar.inactiveForeground#434446
  • activityBarBadge.background#a07eab
  • activityBarBadge.foreground#161718
  • badge.background#2a2e33
  • badge.foreground#8f9190
  • breadcrumb.activeSelectionForeground#8f9190
  • breadcrumb.background#161718
  • breadcrumb.focusForeground#8f9190
  • breadcrumb.foreground#434446
  • breadcrumbPicker.background#090a0b
  • button.background#131416
  • button.foreground#8f9190
  • checkbox.background#131416
  • checkbox.border#090a0b
  • checkbox.foreground#8f9190
  • contrastBorder#090a0b
  • debugToolBar.background#131416
  • diffEditor.insertedTextBackground#b3be5a20
  • diffEditor.removedTextBackground#b74d5050
  • dropdown.background#161718
  • dropdown.border#090a0b
  • dropdown.foreground#8f9190
  • editor.background#161718
  • editor.findMatchBackground#e3b55e80
  • editor.findMatchHighlightBackground#5a616940
  • editor.findRangeHighlightBackground#1d1e2175
  • editor.foldBackground#131416
  • editor.foreground#8f9190
  • editor.hoverHighlightBackground#090a0b
  • editor.lineHighlightBorder#2a2e33
  • editor.rangeHighlightBackground#6d90b015
  • editor.selectionBackground#2a2e33
  • editor.selectionHighlightBackground#2a2e33
  • editor.snippetFinalTabstopHighlightBackground#161718
  • editor.snippetFinalTabstopHighlightBorder#b3be5a
  • editor.snippetTabstopHighlightBackground#161718
  • editor.snippetTabstopHighlightBorder#434446
  • editor.wordHighlightBackground#7fbeb350
  • editor.wordHighlightStrongBackground#b3be5a50
  • editorCodeLens.foreground#434446
  • editorError.foreground#b74d50
  • editorGroup.border#6d90b0
  • editorGroup.dropBackground#1d1e2170
  • editorGroupHeader.tabsBackground#090a0b
  • editorGutter.addedBackground#b3be5a80
  • editorGutter.deletedBackground#b74d5080
  • editorGutter.modifiedBackground#7fbeb380
  • editorHoverWidget.background#161718
  • editorHoverWidget.border#434446
  • editorIndentGuide.activeBackground#5a616945
  • editorIndentGuide.background#5a61691A
  • editorLineNumber.foreground#434446
  • editorLink.activeForeground#7fbeb3
  • editorMarkerNavigation.background#131416
  • editorOverviewRuler.addedForeground#b3be5a80
  • editorOverviewRuler.border#090a0b
  • editorOverviewRuler.currentContentForeground#b3be5a
  • editorOverviewRuler.deletedForeground#b74d5080
  • editorOverviewRuler.errorForeground#b74d5080
  • editorOverviewRuler.incomingContentForeground#6d90b0
  • editorOverviewRuler.infoForeground#7fbeb380
  • editorOverviewRuler.modifiedForeground#7fbeb380
  • editorOverviewRuler.selectionHighlightForeground#e3b55e
  • editorOverviewRuler.warningForeground#e3b55e80
  • editorOverviewRuler.wordHighlightForeground#7fbeb3
  • editorOverviewRuler.wordHighlightStrongForeground#b3be5a
  • editorRuler.foreground#5a61691A
  • editorSuggestWidget.background#131416
  • editorSuggestWidget.foreground#8f9190
  • editorSuggestWidget.selectedBackground#2a2e33
  • editorWarning.foreground#e3b55e
  • editorWhitespace.foreground#5a61691A
  • editorWidget.background#131416
  • errorForeground#b74d50
  • extensionButton.prominentBackground#b3be5a90
  • extensionButton.prominentForeground#8f9190
  • extensionButton.prominentHoverBackground#b3be5a60
  • focusBorder#434446
  • foreground#8f9190
  • gitDecoration.conflictingResourceForeground#e3b55e
  • gitDecoration.deletedResourceForeground#b74d50
  • gitDecoration.ignoredResourceForeground#434446
  • gitDecoration.modifiedResourceForeground#7fbeb3
  • gitDecoration.untrackedResourceForeground#b3be5a
  • input.background#161718
  • input.border#090a0b
  • input.foreground#8f9190
  • input.placeholderForeground#434446
  • inputOption.activeBorder#6d90b0
  • inputValidation.errorBackground#161718
  • inputValidation.errorBorder#b74d50
  • inputValidation.errorForeground#b74d50
  • inputValidation.infoBackground#161718
  • inputValidation.infoBorder#6d90b0
  • inputValidation.infoForeground#6d90b0
  • inputValidation.warningBackground#161718
  • inputValidation.warningBorder#e3b55e
  • inputValidation.warningForeground#e3b55e
  • list.activeSelectionBackground#2a2e33
  • list.activeSelectionForeground#8f9190
  • list.dropBackground#2a2e33
  • list.errorForeground#b74d50
  • list.focusBackground#1d1e2175
  • list.highlightForeground#7fbeb3
  • list.hoverBackground#1d1e2175
  • list.inactiveSelectionBackground#1d1e2175
  • list.warningForeground#e3b55e
  • listFilterWidget.background#161718
  • listFilterWidget.noMatchesOutline#b74d50
  • listFilterWidget.outline#2a2e33
  • merge.currentHeaderBackground#b3be5a90
  • merge.incomingHeaderBackground#6d90b090
  • notification.background#161718
  • notification.buttonBackground#2a2e33
  • notification.buttonForeground#8f9190
  • notification.buttonHoverBackground#1d1e2175
  • notification.errorBackground#b74d50
  • notification.errorForeground#161718
  • notification.foreground#8f9190
  • notification.infoBackground#6d90b0
  • notification.infoForeground#161718
  • notification.warningBackground#e3b55e
  • notification.warningForeground#161718
  • notificationCenter.border#131416
  • notificationCenterHeader.background#161718
  • notificationCenterHeader.foreground#8f9190
  • notificationLink.foreground#7fbeb3
  • notifications.background#161718
  • notifications.border#131416
  • notifications.foreground#8f9190
  • notificationsErrorIcon.foreground#b74d50
  • notificationsInfoIcon.foreground#6d90b0
  • notificationsWarningIcon.foreground#e3b55e
  • notificationToast.border#131416
  • panel.background#161718
  • panel.border#6d90b0
  • panelInput.border#8f9190
  • panelTitle.activeBorder#a07eab
  • panelTitle.activeForeground#8f9190
  • panelTitle.inactiveForeground#434446
  • peekView.border#2a2e33
  • peekViewEditor.background#161718
  • peekViewEditor.matchHighlightBackground#e5894f80
  • peekViewResult.background#131416
  • peekViewResult.fileForeground#8f9190
  • peekViewResult.lineForeground#8f9190
  • peekViewResult.matchHighlightBackground#e5894f80
  • peekViewResult.selectionBackground#2a2e33
  • peekViewResult.selectionForeground#8f9190
  • peekViewTitle.background#090a0b
  • peekViewTitleDescription.foreground#434446
  • peekViewTitleLabel.foreground#8f9190
  • pickerGroup.border#6d90b0
  • pickerGroup.foreground#7fbeb3
  • progressBar.background#a07eab
  • scrollbar.shadow#444444
  • selection.background#6d90b0
  • settings.checkboxBackground#131416
  • settings.checkboxBorder#090a0b
  • settings.checkboxForeground#8f9190
  • settings.dropdownBackground#131416
  • settings.dropdownBorder#090a0b
  • settings.dropdownForeground#8f9190
  • settings.headerForeground#8f9190
  • settings.modifiedItemIndicator#e3b55e
  • settings.numberInputBackground#131416
  • settings.numberInputBorder#090a0b
  • settings.numberInputForeground#8f9190
  • settings.textInputBackground#131416
  • settings.textInputBorder#090a0b
  • settings.textInputForeground#8f9190
  • sideBar.background#131416
  • sideBarSectionHeader.background#161718
  • sideBarSectionHeader.border#090a0b
  • sideBarTitle.foreground#8f9190
  • statusBar.background#090a0b
  • statusBar.debuggingBackground#b74d50
  • statusBar.debuggingForeground#090a0b
  • statusBar.foreground#8f9190
  • statusBar.noFolderBackground#090a0b
  • statusBar.noFolderForeground#8f9190
  • statusBarItem.prominentBackground#b74d50
  • statusBarItem.prominentHoverBackground#e3b55e
  • statusBarItem.remoteBackground#6d90b0
  • statusBarItem.remoteForeground#161718
  • tab.activeBackground#161718
  • tab.activeBorderTop#a07eab80
  • tab.activeForeground#8f9190
  • tab.border#090a0b
  • tab.inactiveBackground#131416
  • tab.inactiveForeground#434446
  • terminal.ansiBlack#2a2e33
  • terminal.ansiBlue#6d90b0
  • terminal.ansiBrightBlack#1d1e21
  • terminal.ansiBrightBlue#4b6b88
  • terminal.ansiBrightCyan#4d7b73
  • terminal.ansiBrightGreen#788331
  • terminal.ansiBrightMagenta#6e4f79
  • terminal.ansiBrightRed#8c2d32
  • terminal.ansiBrightWhite#5a6169
  • terminal.ansiBrightYellow#e5894f
  • terminal.ansiCyan#7fbeb3
  • terminal.ansiGreen#b3be5a
  • terminal.ansiMagenta#a07eab
  • terminal.ansiRed#b74d50
  • terminal.ansiWhite#b5b8b6
  • terminal.ansiYellow#e3b55e
  • terminal.background#161718
  • terminal.border#8f9190
  • terminal.foreground#8f9190
  • terminal.selectionBackground#2a2e3350
  • textBlockQuote.background#131416
  • titleBar.activeBackground#131416
  • titleBar.activeForeground#8f9190
  • titleBar.inactiveBackground#090a0b
  • titleBar.inactiveForeground#434446
  • walkThrough.embeddedEditorBackground#131416
  • welcomePage.buttonBackground#2a2e33
  • welcomePage.buttonHoverBackground#1d1e2175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6d90b0
source#8f9190
meta.diff, meta.diff.header#434446
markup.inserted#b3be5a
markup.deleted#b74d50
markup.changed#e3b55e
invalid#b74d50underline italic
invalid.deprecated#8f9190underline italic
entity.name.filename#e5894f
markup.error#b74d50
markup.underlineunderline
markup.bold#e3b55ebold
markup.heading#6d90b0bold
markup.italic#e5894fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7fbeb3
markup.inline.raw, markup.raw.restructuredtext#b3be5a
markup.underline.link, markup.underline.link.image#7fbeb3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a07eab
entity.name.directive.restructuredtext, markup.quote#e5894fitalic
meta.separator.markdown#434446
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#b3be5a
punctuation.definition.constant.restructuredtext#6d90b0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6d90b0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#8f9190
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e5894f
entity.name.type.class, entity.name.class#7fbeb3normal
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#6d90b0italic
entity.other.inherited-class#7fbeb3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#434446
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a07eab
comment.block.documentation entity.name.type#7fbeb3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#7fbeb3
comment.block.documentation variable#e3b55eitalic
constant, variable.other.constant#6d90b0
constant.character.escape, constant.character.string.escape, constant.regexp#a07eab
entity.name.tag#a07eab
entity.other.attribute-name.parent-selector#a07eab
entity.other.attribute-name#b3be5aitalic
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#b3be5a
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#e3b55eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#b3be5aitalic
meta.decorator variable.other.object#b3be5a
keyword, punctuation.definition.keyword#a07eab
keyword.control.new, keyword.operator.newbold
meta.selector#a07eab
support#7fbeb3italic
support.function.magic, support.variable, variable.other.predefined#6d90b0regular
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#a07eab
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#8f9190
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#a07eab
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7fbeb3
constant.other.date, constant.other.timestamp#e3b55e
variable.other.alias.yaml#b3be5aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a07eabregular
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#7fbeb3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e3b55e
storage.modifier#a07eab
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e5894f
punctuation.definition.group.capture.regexp#a07eab
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b74d50
punctuation.definition.character-class.regexp#7fbeb3
punctuation.definition.group.regexp#e3b55e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b74d50
meta.assertion.look-ahead.regexp#b3be5a
string#e5894f
punctuation.definition.string.begin, punctuation.definition.string.end#4b6b88
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6d90b0
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#434446
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#8f9190
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e3b55eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#8f9190normal
meta.selectionset.graphql variable#e5894f
meta.selectionset.graphql meta.arguments variable#8f9190
entity.name.fragment.graphql, variable.fragment.graphql#7fbeb3
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#8f9190
source.shell variable.other#6d90b0
support.constant#6d90b0normal
meta.scope.prerequisites.makefile#e5894f
meta.attribute-selector.scss#e5894f
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#8f9190
meta.preprocessor.haskell#434446