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#fed30010
  • activityBar.activeBorder#ff8ffd80
  • activityBar.background#030d18
  • activityBar.foreground#d8d8d8
  • activityBar.inactiveForeground#a6a6a6
  • activityBarBadge.background#ff8ffd
  • activityBarBadge.foreground#030d18
  • badge.background#616161
  • badge.foreground#d8d8d8
  • breadcrumb.activeSelectionForeground#d8d8d8
  • breadcrumb.background#030d18
  • breadcrumb.focusForeground#d8d8d8
  • breadcrumb.foreground#a6a6a6
  • breadcrumbPicker.background#2f2f2f
  • button.background#5e5e5e
  • button.foreground#d8d8d8
  • checkbox.background#5e5e5e
  • checkbox.border#2f2f2f
  • checkbox.foreground#d8d8d8
  • contrastBorder#2f2f2f
  • debugToolBar.background#5e5e5e
  • diffEditor.insertedTextBackground#b4fa7220
  • diffEditor.removedTextBackground#ff827250
  • dropdown.background#030d18
  • dropdown.border#2f2f2f
  • dropdown.foreground#d8d8d8
  • editor.background#030d18
  • editor.findMatchBackground#09b4bd80
  • editor.findMatchHighlightBackground#feffff40
  • editor.findRangeHighlightBackground#8e8e8e75
  • editor.foldBackground#5e5e5e
  • editor.foreground#d8d8d8
  • editor.hoverHighlightBackground#2f2f2f
  • editor.lineHighlightBorder#616161
  • editor.rangeHighlightBackground#fed30015
  • editor.selectionBackground#616161
  • editor.selectionHighlightBackground#616161
  • editor.snippetFinalTabstopHighlightBackground#030d18
  • editor.snippetFinalTabstopHighlightBorder#b4fa72
  • editor.snippetTabstopHighlightBackground#030d18
  • editor.snippetTabstopHighlightBorder#a6a6a6
  • editor.wordHighlightBackground#d0d1fe50
  • editor.wordHighlightStrongBackground#b4fa7250
  • editorCodeLens.foreground#a6a6a6
  • editorError.foreground#ff8272
  • editorGroup.border#fed300
  • editorGroup.dropBackground#8e8e8e70
  • editorGroupHeader.tabsBackground#2f2f2f
  • editorGutter.addedBackground#b4fa7280
  • editorGutter.deletedBackground#ff827280
  • editorGutter.modifiedBackground#d0d1fe80
  • editorHoverWidget.background#030d18
  • editorHoverWidget.border#a6a6a6
  • editorIndentGuide.activeBackground#feffff45
  • editorIndentGuide.background#feffff1A
  • editorLineNumber.foreground#a6a6a6
  • editorLink.activeForeground#d0d1fe
  • editorMarkerNavigation.background#5e5e5e
  • editorOverviewRuler.addedForeground#b4fa7280
  • editorOverviewRuler.border#2f2f2f
  • editorOverviewRuler.currentContentForeground#b4fa72
  • editorOverviewRuler.deletedForeground#ff827280
  • editorOverviewRuler.errorForeground#ff827280
  • editorOverviewRuler.incomingContentForeground#fed300
  • editorOverviewRuler.infoForeground#d0d1fe80
  • editorOverviewRuler.modifiedForeground#d0d1fe80
  • editorOverviewRuler.selectionHighlightForeground#09b4bd
  • editorOverviewRuler.warningForeground#09b4bd80
  • editorOverviewRuler.wordHighlightForeground#d0d1fe
  • editorOverviewRuler.wordHighlightStrongForeground#b4fa72
  • editorRuler.foreground#feffff1A
  • editorSuggestWidget.background#5e5e5e
  • editorSuggestWidget.foreground#d8d8d8
  • editorSuggestWidget.selectedBackground#616161
  • editorWarning.foreground#09b4bd
  • editorWhitespace.foreground#feffff1A
  • editorWidget.background#5e5e5e
  • errorForeground#ff8272
  • extensionButton.prominentBackground#b4fa7290
  • extensionButton.prominentForeground#d8d8d8
  • extensionButton.prominentHoverBackground#b4fa7260
  • focusBorder#a6a6a6
  • foreground#d8d8d8
  • gitDecoration.conflictingResourceForeground#09b4bd
  • gitDecoration.deletedResourceForeground#ff8272
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#d0d1fe
  • gitDecoration.untrackedResourceForeground#b4fa72
  • input.background#030d18
  • input.border#2f2f2f
  • input.foreground#d8d8d8
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#fed300
  • inputValidation.errorBackground#030d18
  • inputValidation.errorBorder#ff8272
  • inputValidation.errorForeground#ff8272
  • inputValidation.infoBackground#030d18
  • inputValidation.infoBorder#fed300
  • inputValidation.infoForeground#fed300
  • inputValidation.warningBackground#030d18
  • inputValidation.warningBorder#09b4bd
  • inputValidation.warningForeground#09b4bd
  • list.activeSelectionBackground#616161
  • list.activeSelectionForeground#d8d8d8
  • list.dropBackground#616161
  • list.errorForeground#ff8272
  • list.focusBackground#8e8e8e75
  • list.highlightForeground#d0d1fe
  • list.hoverBackground#8e8e8e75
  • list.inactiveSelectionBackground#8e8e8e75
  • list.warningForeground#09b4bd
  • listFilterWidget.background#030d18
  • listFilterWidget.noMatchesOutline#ff8272
  • listFilterWidget.outline#616161
  • merge.currentHeaderBackground#b4fa7290
  • merge.incomingHeaderBackground#fed30090
  • notification.background#030d18
  • notification.buttonBackground#616161
  • notification.buttonForeground#d8d8d8
  • notification.buttonHoverBackground#8e8e8e75
  • notification.errorBackground#ff8272
  • notification.errorForeground#030d18
  • notification.foreground#d8d8d8
  • notification.infoBackground#fed300
  • notification.infoForeground#030d18
  • notification.warningBackground#09b4bd
  • notification.warningForeground#030d18
  • notificationCenter.border#5e5e5e
  • notificationCenterHeader.background#030d18
  • notificationCenterHeader.foreground#d8d8d8
  • notificationLink.foreground#d0d1fe
  • notifications.background#030d18
  • notifications.border#5e5e5e
  • notifications.foreground#d8d8d8
  • notificationsErrorIcon.foreground#ff8272
  • notificationsInfoIcon.foreground#fed300
  • notificationsWarningIcon.foreground#09b4bd
  • notificationToast.border#5e5e5e
  • panel.background#030d18
  • panel.border#fed300
  • panelInput.border#d8d8d8
  • panelTitle.activeBorder#ff8ffd
  • panelTitle.activeForeground#d8d8d8
  • panelTitle.inactiveForeground#a6a6a6
  • peekView.border#616161
  • peekViewEditor.background#030d18
  • peekViewEditor.matchHighlightBackground#fefdd580
  • peekViewResult.background#5e5e5e
  • peekViewResult.fileForeground#d8d8d8
  • peekViewResult.lineForeground#d8d8d8
  • peekViewResult.matchHighlightBackground#fefdd580
  • peekViewResult.selectionBackground#616161
  • peekViewResult.selectionForeground#d8d8d8
  • peekViewTitle.background#2f2f2f
  • peekViewTitleDescription.foreground#a6a6a6
  • peekViewTitleLabel.foreground#d8d8d8
  • pickerGroup.border#fed300
  • pickerGroup.foreground#d0d1fe
  • progressBar.background#ff8ffd
  • scrollbar.shadow#444444
  • selection.background#fed300
  • settings.checkboxBackground#5e5e5e
  • settings.checkboxBorder#2f2f2f
  • settings.checkboxForeground#d8d8d8
  • settings.dropdownBackground#5e5e5e
  • settings.dropdownBorder#2f2f2f
  • settings.dropdownForeground#d8d8d8
  • settings.headerForeground#d8d8d8
  • settings.modifiedItemIndicator#09b4bd
  • settings.numberInputBackground#5e5e5e
  • settings.numberInputBorder#2f2f2f
  • settings.numberInputForeground#d8d8d8
  • settings.textInputBackground#5e5e5e
  • settings.textInputBorder#2f2f2f
  • settings.textInputForeground#d8d8d8
  • sideBar.background#5e5e5e
  • sideBarSectionHeader.background#030d18
  • sideBarSectionHeader.border#2f2f2f
  • sideBarTitle.foreground#d8d8d8
  • statusBar.background#2f2f2f
  • statusBar.debuggingBackground#ff8272
  • statusBar.debuggingForeground#2f2f2f
  • statusBar.foreground#d8d8d8
  • statusBar.noFolderBackground#2f2f2f
  • statusBar.noFolderForeground#d8d8d8
  • statusBarItem.prominentBackground#ff8272
  • statusBarItem.prominentHoverBackground#09b4bd
  • statusBarItem.remoteBackground#fed300
  • statusBarItem.remoteForeground#030d18
  • tab.activeBackground#030d18
  • tab.activeBorderTop#ff8ffd80
  • tab.activeForeground#d8d8d8
  • tab.border#2f2f2f
  • tab.inactiveBackground#5e5e5e
  • tab.inactiveForeground#a6a6a6
  • terminal.ansiBlack#616161
  • terminal.ansiBlue#fed300
  • terminal.ansiBrightBlack#8e8e8e
  • terminal.ansiBrightBlue#f92883
  • terminal.ansiBrightCyan#e5e6fe
  • terminal.ansiBrightGreen#d6fcb9
  • terminal.ansiBrightMagenta#ffb1fe
  • terminal.ansiBrightRed#ffc4bd
  • terminal.ansiBrightWhite#feffff
  • terminal.ansiBrightYellow#fefdd5
  • terminal.ansiCyan#d0d1fe
  • terminal.ansiGreen#b4fa72
  • terminal.ansiMagenta#ff8ffd
  • terminal.ansiRed#ff8272
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#09b4bd
  • terminal.background#030d18
  • terminal.border#d8d8d8
  • terminal.foreground#d8d8d8
  • terminal.selectionBackground#61616150
  • textBlockQuote.background#5e5e5e
  • titleBar.activeBackground#5e5e5e
  • titleBar.activeForeground#d8d8d8
  • titleBar.inactiveBackground#2f2f2f
  • titleBar.inactiveForeground#a6a6a6
  • walkThrough.embeddedEditorBackground#5e5e5e
  • welcomePage.buttonBackground#616161
  • welcomePage.buttonHoverBackground#8e8e8e75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#fed300
source#d8d8d8
meta.diff, meta.diff.header#a6a6a6
markup.inserted#b4fa72
markup.deleted#ff8272
markup.changed#09b4bd
invalid#ff8272underline italic
invalid.deprecated#d8d8d8underline italic
entity.name.filename#fefdd5
markup.error#ff8272
markup.underlineunderline
markup.bold#09b4bdbold
markup.heading#fed300bold
markup.italic#fefdd5italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#d0d1fe
markup.inline.raw, markup.raw.restructuredtext#b4fa72
markup.underline.link, markup.underline.link.image#d0d1fe
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff8ffd
entity.name.directive.restructuredtext, markup.quote#fefdd5italic
meta.separator.markdown#a6a6a6
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#b4fa72
punctuation.definition.constant.restructuredtext#fed300
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#fed300
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d8d8d8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fefdd5
entity.name.type.class, entity.name.class#d0d1fenormal
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#fed300italic
entity.other.inherited-class#d0d1feitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#a6a6a6
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff8ffd
comment.block.documentation entity.name.type#d0d1feitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#d0d1fe
comment.block.documentation variable#09b4bditalic
constant, variable.other.constant#fed300
constant.character.escape, constant.character.string.escape, constant.regexp#ff8ffd
entity.name.tag#ff8ffd
entity.other.attribute-name.parent-selector#ff8ffd
entity.other.attribute-name#b4fa72italic
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#b4fa72
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#09b4bditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#b4fa72italic
meta.decorator variable.other.object#b4fa72
keyword, punctuation.definition.keyword#ff8ffd
keyword.control.new, keyword.operator.newbold
meta.selector#ff8ffd
support#d0d1feitalic
support.function.magic, support.variable, variable.other.predefined#fed300regular
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#ff8ffd
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#d8d8d8
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#ff8ffd
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#d0d1fe
constant.other.date, constant.other.timestamp#09b4bd
variable.other.alias.yaml#b4fa72italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff8ffdregular
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#d0d1feitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#09b4bd
storage.modifier#ff8ffd
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fefdd5
punctuation.definition.group.capture.regexp#ff8ffd
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8272
punctuation.definition.character-class.regexp#d0d1fe
punctuation.definition.group.regexp#09b4bd
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff8272
meta.assertion.look-ahead.regexp#b4fa72
string#fefdd5
punctuation.definition.string.begin, punctuation.definition.string.end#f92883
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#fed300
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#a6a6a6
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d8d8d8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#09b4bditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d8d8d8normal
meta.selectionset.graphql variable#fefdd5
meta.selectionset.graphql meta.arguments variable#d8d8d8
entity.name.fragment.graphql, variable.fragment.graphql#d0d1fe
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#d8d8d8
source.shell variable.other#fed300
support.constant#fed300normal
meta.scope.prerequisites.makefile#fefdd5
meta.attribute-selector.scss#fefdd5
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d8d8d8
meta.preprocessor.haskell#a6a6a6