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#73707410
  • activityBar.activeBorder#73727180
  • activityBar.background#1b1d1e
  • activityBar.foreground#a7a8a3
  • activityBar.inactiveForeground#6d6f6e
  • activityBarBadge.background#737271
  • activityBarBadge.foreground#1b1d1e
  • badge.background#1b1d1e
  • badge.foreground#a7a8a3
  • breadcrumb.activeSelectionForeground#a7a8a3
  • breadcrumb.background#1b1d1e
  • breadcrumb.focusForeground#a7a8a3
  • breadcrumb.foreground#6d6f6e
  • breadcrumbPicker.background#1a1b1c
  • button.background#353738
  • button.foreground#a7a8a3
  • checkbox.background#353738
  • checkbox.border#1a1b1c
  • checkbox.foreground#a7a8a3
  • contrastBorder#1a1b1c
  • debugToolBar.background#353738
  • diffEditor.insertedTextBackground#c8be4620
  • diffEditor.removedTextBackground#e6db4350
  • dropdown.background#1b1d1e
  • dropdown.border#1a1b1c
  • dropdown.foreground#a7a8a3
  • editor.background#1b1d1e
  • editor.findMatchBackground#f3fd2180
  • editor.findMatchHighlightBackground#dadad540
  • editor.findRangeHighlightBackground#50535475
  • editor.foldBackground#353738
  • editor.foreground#a7a8a3
  • editor.hoverHighlightBackground#1a1b1c
  • editor.lineHighlightBorder#1b1d1e
  • editor.rangeHighlightBackground#73707415
  • editor.selectionBackground#1b1d1e
  • editor.selectionHighlightBackground#1b1d1e
  • editor.snippetFinalTabstopHighlightBackground#1b1d1e
  • editor.snippetFinalTabstopHighlightBorder#c8be46
  • editor.snippetTabstopHighlightBackground#1b1d1e
  • editor.snippetTabstopHighlightBorder#6d6f6e
  • editor.wordHighlightBackground#615f5e50
  • editor.wordHighlightStrongBackground#c8be4650
  • editorCodeLens.foreground#6d6f6e
  • editorError.foreground#e6db43
  • editorGroup.border#737074
  • editorGroup.dropBackground#50535470
  • editorGroupHeader.tabsBackground#1a1b1c
  • editorGutter.addedBackground#c8be4680
  • editorGutter.deletedBackground#e6db4380
  • editorGutter.modifiedBackground#615f5e80
  • editorHoverWidget.background#1b1d1e
  • editorHoverWidget.border#6d6f6e
  • editorIndentGuide.activeBackground#dadad545
  • editorIndentGuide.background#dadad51A
  • editorLineNumber.foreground#6d6f6e
  • editorLink.activeForeground#615f5e
  • editorMarkerNavigation.background#353738
  • editorOverviewRuler.addedForeground#c8be4680
  • editorOverviewRuler.border#1a1b1c
  • editorOverviewRuler.currentContentForeground#c8be46
  • editorOverviewRuler.deletedForeground#e6db4380
  • editorOverviewRuler.errorForeground#e6db4380
  • editorOverviewRuler.incomingContentForeground#737074
  • editorOverviewRuler.infoForeground#615f5e80
  • editorOverviewRuler.modifiedForeground#615f5e80
  • editorOverviewRuler.selectionHighlightForeground#f3fd21
  • editorOverviewRuler.warningForeground#f3fd2180
  • editorOverviewRuler.wordHighlightForeground#615f5e
  • editorOverviewRuler.wordHighlightStrongForeground#c8be46
  • editorRuler.foreground#dadad51A
  • editorSuggestWidget.background#353738
  • editorSuggestWidget.foreground#a7a8a3
  • editorSuggestWidget.selectedBackground#1b1d1e
  • editorWarning.foreground#f3fd21
  • editorWhitespace.foreground#dadad51A
  • editorWidget.background#353738
  • errorForeground#e6db43
  • extensionButton.prominentBackground#c8be4690
  • extensionButton.prominentForeground#a7a8a3
  • extensionButton.prominentHoverBackground#c8be4660
  • focusBorder#6d6f6e
  • foreground#a7a8a3
  • gitDecoration.conflictingResourceForeground#f3fd21
  • gitDecoration.deletedResourceForeground#e6db43
  • gitDecoration.ignoredResourceForeground#6d6f6e
  • gitDecoration.modifiedResourceForeground#615f5e
  • gitDecoration.untrackedResourceForeground#c8be46
  • input.background#1b1d1e
  • input.border#1a1b1c
  • input.foreground#a7a8a3
  • input.placeholderForeground#6d6f6e
  • inputOption.activeBorder#737074
  • inputValidation.errorBackground#1b1d1e
  • inputValidation.errorBorder#e6db43
  • inputValidation.errorForeground#e6db43
  • inputValidation.infoBackground#1b1d1e
  • inputValidation.infoBorder#737074
  • inputValidation.infoForeground#737074
  • inputValidation.warningBackground#1b1d1e
  • inputValidation.warningBorder#f3fd21
  • inputValidation.warningForeground#f3fd21
  • list.activeSelectionBackground#1b1d1e
  • list.activeSelectionForeground#a7a8a3
  • list.dropBackground#1b1d1e
  • list.errorForeground#e6db43
  • list.focusBackground#50535475
  • list.highlightForeground#615f5e
  • list.hoverBackground#50535475
  • list.inactiveSelectionBackground#50535475
  • list.warningForeground#f3fd21
  • listFilterWidget.background#1b1d1e
  • listFilterWidget.noMatchesOutline#e6db43
  • listFilterWidget.outline#1b1d1e
  • merge.currentHeaderBackground#c8be4690
  • merge.incomingHeaderBackground#73707490
  • notification.background#1b1d1e
  • notification.buttonBackground#1b1d1e
  • notification.buttonForeground#a7a8a3
  • notification.buttonHoverBackground#50535475
  • notification.errorBackground#e6db43
  • notification.errorForeground#1b1d1e
  • notification.foreground#a7a8a3
  • notification.infoBackground#737074
  • notification.infoForeground#1b1d1e
  • notification.warningBackground#f3fd21
  • notification.warningForeground#1b1d1e
  • notificationCenter.border#353738
  • notificationCenterHeader.background#1b1d1e
  • notificationCenterHeader.foreground#a7a8a3
  • notificationLink.foreground#615f5e
  • notifications.background#1b1d1e
  • notifications.border#353738
  • notifications.foreground#a7a8a3
  • notificationsErrorIcon.foreground#e6db43
  • notificationsInfoIcon.foreground#737074
  • notificationsWarningIcon.foreground#f3fd21
  • notificationToast.border#353738
  • panel.background#1b1d1e
  • panel.border#737074
  • panelInput.border#a7a8a3
  • panelTitle.activeBorder#737271
  • panelTitle.activeForeground#a7a8a3
  • panelTitle.inactiveForeground#6d6f6e
  • peekView.border#1b1d1e
  • peekViewEditor.background#1b1d1e
  • peekViewEditor.matchHighlightBackground#feed6c80
  • peekViewResult.background#353738
  • peekViewResult.fileForeground#a7a8a3
  • peekViewResult.lineForeground#a7a8a3
  • peekViewResult.matchHighlightBackground#feed6c80
  • peekViewResult.selectionBackground#1b1d1e
  • peekViewResult.selectionForeground#a7a8a3
  • peekViewTitle.background#1a1b1c
  • peekViewTitleDescription.foreground#6d6f6e
  • peekViewTitleLabel.foreground#a7a8a3
  • pickerGroup.border#737074
  • pickerGroup.foreground#615f5e
  • progressBar.background#737271
  • scrollbar.shadow#444444
  • selection.background#737074
  • settings.checkboxBackground#353738
  • settings.checkboxBorder#1a1b1c
  • settings.checkboxForeground#a7a8a3
  • settings.dropdownBackground#353738
  • settings.dropdownBorder#1a1b1c
  • settings.dropdownForeground#a7a8a3
  • settings.headerForeground#a7a8a3
  • settings.modifiedItemIndicator#f3fd21
  • settings.numberInputBackground#353738
  • settings.numberInputBorder#1a1b1c
  • settings.numberInputForeground#a7a8a3
  • settings.textInputBackground#353738
  • settings.textInputBorder#1a1b1c
  • settings.textInputForeground#a7a8a3
  • sideBar.background#353738
  • sideBarSectionHeader.background#1b1d1e
  • sideBarSectionHeader.border#1a1b1c
  • sideBarTitle.foreground#a7a8a3
  • statusBar.background#1a1b1c
  • statusBar.debuggingBackground#e6db43
  • statusBar.debuggingForeground#1a1b1c
  • statusBar.foreground#a7a8a3
  • statusBar.noFolderBackground#1a1b1c
  • statusBar.noFolderForeground#a7a8a3
  • statusBarItem.prominentBackground#e6db43
  • statusBarItem.prominentHoverBackground#f3fd21
  • statusBarItem.remoteBackground#737074
  • statusBarItem.remoteForeground#1b1d1e
  • tab.activeBackground#1b1d1e
  • tab.activeBorderTop#73727180
  • tab.activeForeground#a7a8a3
  • tab.border#1a1b1c
  • tab.inactiveBackground#353738
  • tab.inactiveForeground#6d6f6e
  • terminal.ansiBlack#1b1d1e
  • terminal.ansiBlue#737074
  • terminal.ansiBrightBlack#505354
  • terminal.ansiBrightBlue#909495
  • terminal.ansiBrightCyan#a2a2a5
  • terminal.ansiBrightGreen#fff27c
  • terminal.ansiBrightMagenta#9a999d
  • terminal.ansiBrightRed#fff68d
  • terminal.ansiBrightWhite#dadad5
  • terminal.ansiBrightYellow#feed6c
  • terminal.ansiCyan#615f5e
  • terminal.ansiGreen#c8be46
  • terminal.ansiMagenta#737271
  • terminal.ansiRed#e6db43
  • terminal.ansiWhite#c5c5be
  • terminal.ansiYellow#f3fd21
  • terminal.background#1b1d1e
  • terminal.border#a7a8a3
  • terminal.foreground#a7a8a3
  • terminal.selectionBackground#1b1d1e50
  • textBlockQuote.background#353738
  • titleBar.activeBackground#353738
  • titleBar.activeForeground#a7a8a3
  • titleBar.inactiveBackground#1a1b1c
  • titleBar.inactiveForeground#6d6f6e
  • walkThrough.embeddedEditorBackground#353738
  • welcomePage.buttonBackground#1b1d1e
  • welcomePage.buttonHoverBackground#50535475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#737074
source#a7a8a3
meta.diff, meta.diff.header#6d6f6e
markup.inserted#c8be46
markup.deleted#e6db43
markup.changed#f3fd21
invalid#e6db43underline italic
invalid.deprecated#a7a8a3underline italic
entity.name.filename#feed6c
markup.error#e6db43
markup.underlineunderline
markup.bold#f3fd21bold
markup.heading#737074bold
markup.italic#feed6citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#615f5e
markup.inline.raw, markup.raw.restructuredtext#c8be46
markup.underline.link, markup.underline.link.image#615f5e
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#737271
entity.name.directive.restructuredtext, markup.quote#feed6citalic
meta.separator.markdown#6d6f6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#c8be46
punctuation.definition.constant.restructuredtext#737074
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#737074
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a7a8a3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#feed6c
entity.name.type.class, entity.name.class#615f5enormal
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#737074italic
entity.other.inherited-class#615f5eitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6d6f6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#737271
comment.block.documentation entity.name.type#615f5eitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#615f5e
comment.block.documentation variable#f3fd21italic
constant, variable.other.constant#737074
constant.character.escape, constant.character.string.escape, constant.regexp#737271
entity.name.tag#737271
entity.other.attribute-name.parent-selector#737271
entity.other.attribute-name#c8be46italic
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#c8be46
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#f3fd21italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#c8be46italic
meta.decorator variable.other.object#c8be46
keyword, punctuation.definition.keyword#737271
keyword.control.new, keyword.operator.newbold
meta.selector#737271
support#615f5eitalic
support.function.magic, support.variable, variable.other.predefined#737074regular
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#737271
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#a7a8a3
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#737271
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#615f5e
constant.other.date, constant.other.timestamp#f3fd21
variable.other.alias.yaml#c8be46italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#737271regular
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#615f5eitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f3fd21
storage.modifier#737271
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#feed6c
punctuation.definition.group.capture.regexp#737271
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e6db43
punctuation.definition.character-class.regexp#615f5e
punctuation.definition.group.regexp#f3fd21
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e6db43
meta.assertion.look-ahead.regexp#c8be46
string#feed6c
punctuation.definition.string.begin, punctuation.definition.string.end#909495
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#737074
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#6d6f6e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a7a8a3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f3fd21italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a7a8a3normal
meta.selectionset.graphql variable#feed6c
meta.selectionset.graphql meta.arguments variable#a7a8a3
entity.name.fragment.graphql, variable.fragment.graphql#615f5e
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#a7a8a3
source.shell variable.other#737074
support.constant#737074normal
meta.scope.prerequisites.makefile#feed6c
meta.attribute-selector.scss#feed6c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a7a8a3
meta.preprocessor.haskell#6d6f6e