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#5665fe10
  • activityBar.activeBorder#af51d980
  • activityBar.background#080808
  • activityBar.foreground#bcbcbc
  • activityBar.inactiveForeground#767676
  • activityBarBadge.background#af51d9
  • activityBarBadge.foreground#080808
  • badge.background#000000
  • badge.foreground#bcbcbc
  • breadcrumb.activeSelectionForeground#bcbcbc
  • breadcrumb.background#080808
  • breadcrumb.focusForeground#bcbcbc
  • breadcrumb.foreground#767676
  • breadcrumbPicker.background#1b1b1b
  • button.background#373737
  • button.foreground#bcbcbc
  • checkbox.background#373737
  • checkbox.border#1b1b1b
  • checkbox.foreground#bcbcbc
  • contrastBorder#1b1b1b
  • debugToolBar.background#373737
  • diffEditor.insertedTextBackground#1cd81520
  • diffEditor.removedTextBackground#d6000550
  • dropdown.background#080808
  • dropdown.border#1b1b1b
  • dropdown.foreground#bcbcbc
  • editor.background#080808
  • editor.findMatchBackground#d9bc2580
  • editor.findMatchHighlightBackground#fffefe40
  • editor.findRangeHighlightBackground#53535375
  • editor.foldBackground#373737
  • editor.foreground#bcbcbc
  • editor.hoverHighlightBackground#1b1b1b
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#5665fe15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#080808
  • editor.snippetFinalTabstopHighlightBorder#1cd815
  • editor.snippetTabstopHighlightBackground#080808
  • editor.snippetTabstopHighlightBorder#767676
  • editor.wordHighlightBackground#4fd2d950
  • editor.wordHighlightStrongBackground#1cd81550
  • editorCodeLens.foreground#767676
  • editorError.foreground#d60005
  • editorGroup.border#5665fe
  • editorGroup.dropBackground#53535370
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGutter.addedBackground#1cd81580
  • editorGutter.deletedBackground#d6000580
  • editorGutter.modifiedBackground#4fd2d980
  • editorHoverWidget.background#080808
  • editorHoverWidget.border#767676
  • editorIndentGuide.activeBackground#fffefe45
  • editorIndentGuide.background#fffefe1A
  • editorLineNumber.foreground#767676
  • editorLink.activeForeground#4fd2d9
  • editorMarkerNavigation.background#373737
  • editorOverviewRuler.addedForeground#1cd81580
  • editorOverviewRuler.border#1b1b1b
  • editorOverviewRuler.currentContentForeground#1cd815
  • editorOverviewRuler.deletedForeground#d6000580
  • editorOverviewRuler.errorForeground#d6000580
  • editorOverviewRuler.incomingContentForeground#5665fe
  • editorOverviewRuler.infoForeground#4fd2d980
  • editorOverviewRuler.modifiedForeground#4fd2d980
  • editorOverviewRuler.selectionHighlightForeground#d9bc25
  • editorOverviewRuler.warningForeground#d9bc2580
  • editorOverviewRuler.wordHighlightForeground#4fd2d9
  • editorOverviewRuler.wordHighlightStrongForeground#1cd815
  • editorRuler.foreground#fffefe1A
  • editorSuggestWidget.background#373737
  • editorSuggestWidget.foreground#bcbcbc
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#d9bc25
  • editorWhitespace.foreground#fffefe1A
  • editorWidget.background#373737
  • errorForeground#d60005
  • extensionButton.prominentBackground#1cd81590
  • extensionButton.prominentForeground#bcbcbc
  • extensionButton.prominentHoverBackground#1cd81560
  • focusBorder#767676
  • foreground#bcbcbc
  • gitDecoration.conflictingResourceForeground#d9bc25
  • gitDecoration.deletedResourceForeground#d60005
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#4fd2d9
  • gitDecoration.untrackedResourceForeground#1cd815
  • input.background#080808
  • input.border#1b1b1b
  • input.foreground#bcbcbc
  • input.placeholderForeground#767676
  • inputOption.activeBorder#5665fe
  • inputValidation.errorBackground#080808
  • inputValidation.errorBorder#d60005
  • inputValidation.errorForeground#d60005
  • inputValidation.infoBackground#080808
  • inputValidation.infoBorder#5665fe
  • inputValidation.infoForeground#5665fe
  • inputValidation.warningBackground#080808
  • inputValidation.warningBorder#d9bc25
  • inputValidation.warningForeground#d9bc25
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#bcbcbc
  • list.dropBackground#000000
  • list.errorForeground#d60005
  • list.focusBackground#53535375
  • list.highlightForeground#4fd2d9
  • list.hoverBackground#53535375
  • list.inactiveSelectionBackground#53535375
  • list.warningForeground#d9bc25
  • listFilterWidget.background#080808
  • listFilterWidget.noMatchesOutline#d60005
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#1cd81590
  • merge.incomingHeaderBackground#5665fe90
  • notification.background#080808
  • notification.buttonBackground#000000
  • notification.buttonForeground#bcbcbc
  • notification.buttonHoverBackground#53535375
  • notification.errorBackground#d60005
  • notification.errorForeground#080808
  • notification.foreground#bcbcbc
  • notification.infoBackground#5665fe
  • notification.infoForeground#080808
  • notification.warningBackground#d9bc25
  • notification.warningForeground#080808
  • notificationCenter.border#373737
  • notificationCenterHeader.background#080808
  • notificationCenterHeader.foreground#bcbcbc
  • notificationLink.foreground#4fd2d9
  • notifications.background#080808
  • notifications.border#373737
  • notifications.foreground#bcbcbc
  • notificationsErrorIcon.foreground#d60005
  • notificationsInfoIcon.foreground#5665fe
  • notificationsWarningIcon.foreground#d9bc25
  • notificationToast.border#373737
  • panel.background#080808
  • panel.border#5665fe
  • panelInput.border#bcbcbc
  • panelTitle.activeBorder#af51d9
  • panelTitle.activeForeground#bcbcbc
  • panelTitle.inactiveForeground#767676
  • peekView.border#000000
  • peekViewEditor.background#080808
  • peekViewEditor.matchHighlightBackground#fedc2b80
  • peekViewResult.background#373737
  • peekViewResult.fileForeground#bcbcbc
  • peekViewResult.lineForeground#bcbcbc
  • peekViewResult.matchHighlightBackground#fedc2b80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#bcbcbc
  • peekViewTitle.background#1b1b1b
  • peekViewTitleDescription.foreground#767676
  • peekViewTitleLabel.foreground#bcbcbc
  • pickerGroup.border#5665fe
  • pickerGroup.foreground#4fd2d9
  • progressBar.background#af51d9
  • scrollbar.shadow#444444
  • selection.background#5665fe
  • settings.checkboxBackground#373737
  • settings.checkboxBorder#1b1b1b
  • settings.checkboxForeground#bcbcbc
  • settings.dropdownBackground#373737
  • settings.dropdownBorder#1b1b1b
  • settings.dropdownForeground#bcbcbc
  • settings.headerForeground#bcbcbc
  • settings.modifiedItemIndicator#d9bc25
  • settings.numberInputBackground#373737
  • settings.numberInputBorder#1b1b1b
  • settings.numberInputForeground#bcbcbc
  • settings.textInputBackground#373737
  • settings.textInputBorder#1b1b1b
  • settings.textInputForeground#bcbcbc
  • sideBar.background#373737
  • sideBarSectionHeader.background#080808
  • sideBarSectionHeader.border#1b1b1b
  • sideBarTitle.foreground#bcbcbc
  • statusBar.background#1b1b1b
  • statusBar.debuggingBackground#d60005
  • statusBar.debuggingForeground#1b1b1b
  • statusBar.foreground#bcbcbc
  • statusBar.noFolderBackground#1b1b1b
  • statusBar.noFolderForeground#bcbcbc
  • statusBarItem.prominentBackground#d60005
  • statusBarItem.prominentHoverBackground#d9bc25
  • statusBarItem.remoteBackground#5665fe
  • statusBarItem.remoteForeground#080808
  • tab.activeBackground#080808
  • tab.activeBorderTop#af51d980
  • tab.activeForeground#bcbcbc
  • tab.border#1b1b1b
  • tab.inactiveBackground#373737
  • tab.inactiveForeground#767676
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5665fe
  • terminal.ansiBrightBlack#535353
  • terminal.ansiBrightBlue#9fa8fe
  • terminal.ansiBrightCyan#8cf9fe
  • terminal.ansiBrightGreen#21fe17
  • terminal.ansiBrightMagenta#e099fe
  • terminal.ansiBrightRed#fb0006
  • terminal.ansiBrightWhite#fffefe
  • terminal.ansiBrightYellow#fedc2b
  • terminal.ansiCyan#4fd2d9
  • terminal.ansiGreen#1cd815
  • terminal.ansiMagenta#af51d9
  • terminal.ansiRed#d60005
  • terminal.ansiWhite#dfdfdf
  • terminal.ansiYellow#d9bc25
  • terminal.background#080808
  • terminal.border#bcbcbc
  • terminal.foreground#bcbcbc
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#373737
  • titleBar.activeBackground#373737
  • titleBar.activeForeground#bcbcbc
  • titleBar.inactiveBackground#1b1b1b
  • titleBar.inactiveForeground#767676
  • walkThrough.embeddedEditorBackground#373737
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#53535375
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#5665fe
source#bcbcbc
meta.diff, meta.diff.header#767676
markup.inserted#1cd815
markup.deleted#d60005
markup.changed#d9bc25
invalid#d60005underline italic
invalid.deprecated#bcbcbcunderline italic
entity.name.filename#fedc2b
markup.error#d60005
markup.underlineunderline
markup.bold#d9bc25bold
markup.heading#5665febold
markup.italic#fedc2bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#4fd2d9
markup.inline.raw, markup.raw.restructuredtext#1cd815
markup.underline.link, markup.underline.link.image#4fd2d9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#af51d9
entity.name.directive.restructuredtext, markup.quote#fedc2bitalic
meta.separator.markdown#767676
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#1cd815
punctuation.definition.constant.restructuredtext#5665fe
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#5665fe
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#bcbcbc
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fedc2b
entity.name.type.class, entity.name.class#4fd2d9normal
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#5665feitalic
entity.other.inherited-class#4fd2d9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#767676
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#af51d9
comment.block.documentation entity.name.type#4fd2d9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#4fd2d9
comment.block.documentation variable#d9bc25italic
constant, variable.other.constant#5665fe
constant.character.escape, constant.character.string.escape, constant.regexp#af51d9
entity.name.tag#af51d9
entity.other.attribute-name.parent-selector#af51d9
entity.other.attribute-name#1cd815italic
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#1cd815
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#d9bc25italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#1cd815italic
meta.decorator variable.other.object#1cd815
keyword, punctuation.definition.keyword#af51d9
keyword.control.new, keyword.operator.newbold
meta.selector#af51d9
support#4fd2d9italic
support.function.magic, support.variable, variable.other.predefined#5665feregular
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#af51d9
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#bcbcbc
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#af51d9
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#4fd2d9
constant.other.date, constant.other.timestamp#d9bc25
variable.other.alias.yaml#1cd815italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#af51d9regular
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#4fd2d9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d9bc25
storage.modifier#af51d9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fedc2b
punctuation.definition.group.capture.regexp#af51d9
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d60005
punctuation.definition.character-class.regexp#4fd2d9
punctuation.definition.group.regexp#d9bc25
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d60005
meta.assertion.look-ahead.regexp#1cd815
string#fedc2b
punctuation.definition.string.begin, punctuation.definition.string.end#9fa8fe
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5665fe
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#767676
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#bcbcbc
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d9bc25italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#bcbcbcnormal
meta.selectionset.graphql variable#fedc2b
meta.selectionset.graphql meta.arguments variable#bcbcbc
entity.name.fragment.graphql, variable.fragment.graphql#4fd2d9
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#bcbcbc
source.shell variable.other#5665fe
support.constant#5665fenormal
meta.scope.prerequisites.makefile#fedc2b
meta.attribute-selector.scss#fedc2b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#bcbcbc
meta.preprocessor.haskell#767676