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#1f222c
  • activityBar.activeBorder#fffaa1
  • activityBar.background#06070c
  • activityBar.foreground#f7f6f5
  • activityBarBadge.background#fffaa1
  • activityBarBadge.foreground#000115
  • badge.background#fffaa1
  • badge.foreground#0a0909
  • breadcrumb.activeSelectionForeground#fffaa1
  • breadcrumb.background#1f222c
  • breadcrumb.focusForeground#f7f6f5
  • breadcrumb.foreground#a9a9a9
  • breadcrumbPicker.background#06070c
  • button.background#fffaa1
  • button.foreground#0a0909
  • contrastBorder#060606
  • debugToolBar.background#06070c
  • diffEditor.border#fffaa1
  • diffEditor.diagonalFill#FF757550
  • diffEditor.insertedTextBackground#ff965070
  • diffEditor.removedTextBackground#FF757550
  • dropdown.background#0b100a
  • dropdown.border#000000
  • dropdown.foreground#f7f6f5
  • editor.background#13151b
  • editor.findMatchBackground#4c8f7f75
  • editor.findMatchHighlightBackground#4c8f7f57
  • editor.findRangeHighlightBackground#4c8f7f57
  • editor.foldBackground#06070c
  • editor.foreground#f7f6f5
  • editor.hoverHighlightBackground#3e588224
  • editor.lineHighlightBorder#c9deff00
  • editor.rangeHighlightBackground#c9deff36
  • editor.selectionBackground#3e588247
  • editor.selectionHighlightBackground#3e588247
  • editor.snippetFinalTabstopHighlightBackground#06070c
  • editor.snippetFinalTabstopHighlightBorder#fffaa1
  • editor.snippetTabstopHighlightBackground#06070c
  • editor.snippetTabstopHighlightBorder#fffaa1
  • editor.wordHighlightBackground#3e588224
  • editor.wordHighlightStrongBackground#c9deff36
  • editorCodeLens.foreground#BBB9B6
  • editorError.foreground#FF7575
  • editorGroup.border#000000
  • editorGroup.dropBackground#06070c70
  • editorGroupHeader.tabsBackground#06070c
  • editorGutter.addedBackground#fffaa1
  • editorGutter.background#06070c
  • editorGutter.deletedBackground#FF7575
  • editorGutter.modifiedBackground#AFD8FF
  • editorHoverWidget.background#1f222c
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.foreground#7b746e
  • editorLink.activeForeground#9cb0c5
  • editorMarkerNavigation.background#06070c
  • editorOverviewRuler.addedForeground#fffaa1
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#f7f6f5
  • editorOverviewRuler.deletedForeground#FF7575
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#AFD8FF
  • editorOverviewRuler.infoForeground#AFD8FF
  • editorOverviewRuler.modifiedForeground#F3E9D2
  • editorOverviewRuler.selectionHighlightForeground#f7f6f5
  • editorOverviewRuler.warningForeground#FFB794
  • editorOverviewRuler.wordHighlightForeground#f7f6f5
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#06070c
  • editorSuggestWidget.foreground#f7f6f5
  • editorSuggestWidget.selectedBackground#fffaa1
  • editorWarning.foreground#FFB794
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#06070c
  • errorForeground#FF7575
  • extensionButton.prominentBackground#fffaa1
  • extensionButton.prominentForeground#10131a
  • extensionButton.prominentHoverBackground#fffcca
  • focusBorder#040404
  • foreground#f7f6f5
  • gitDecoration.addedResourceForeground#57cd92
  • gitDecoration.conflictingResourceForeground#FFB794
  • gitDecoration.deletedResourceForeground#FF7575
  • gitDecoration.ignoredResourceForeground#BBB9B6
  • gitDecoration.modifiedResourceForeground#AFD8FF
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#1f222c
  • input.border#fffaa1
  • input.foreground#f7f6f5
  • input.placeholderForeground#979492
  • inputOption.activeBorder#fffaa1
  • inputValidation.errorBorder#ff5757
  • inputValidation.infoBorder#AFD8FF
  • inputValidation.warningBorder#fda375
  • list.activeSelectionBackground#fffaa1
  • list.activeSelectionForeground#06070c
  • list.dropBackground#fffaa1
  • list.errorForeground#FF7575
  • list.focusBackground#fffaa170
  • list.highlightForeground#F3E9D2
  • list.hoverBackground#fffaa1aa
  • list.inactiveSelectionBackground#fffaa15b
  • list.warningForeground#FFB794
  • listFilterWidget.background#06070c
  • listFilterWidget.noMatchesOutline#FF7575
  • listFilterWidget.outline#fffaa1
  • merge.currentHeaderBackground#9cb0c590
  • merge.incomingHeaderBackground#00ff9590
  • panel.background#06070c
  • panel.border#fffaa1
  • panelTitle.activeBorder#fffaa1
  • panelTitle.activeForeground#f7f6f5
  • panelTitle.inactiveForeground#BBB9B6
  • peekView.border#fffaa1
  • peekViewEditor.background#06070c
  • peekViewEditor.matchHighlightBackground#00ffbb77
  • peekViewResult.background#131520
  • peekViewResult.fileForeground#f7f6f5
  • peekViewResult.lineForeground#f7f6f5
  • peekViewResult.matchHighlightBackground#00ffb32d
  • peekViewResult.selectionBackground#fffaa1a8
  • peekViewResult.selectionForeground#f7f6f5
  • peekViewTitle.background#06070c
  • peekViewTitleDescription.foreground#BBB9B6
  • peekViewTitleLabel.foreground#f7f6f5
  • pickerGroup.border#AFD8FF
  • pickerGroup.foreground#fffaa1
  • progressBar.background#fffaa1
  • selection.background#ff965062
  • settings.checkboxBackground#1f222c
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#f7f6f5
  • settings.dropdownBackground#1f222c
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#f7f6f5
  • settings.headerForeground#f7f6f5
  • settings.modifiedItemIndicator#fffaa1
  • settings.numberInputBackground#1f222c
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#f7f6f5
  • settings.textInputBackground#1f222c
  • settings.textInputBorder#000000
  • settings.textInputForeground#f7f6f5
  • sideBar.background#13151b
  • sideBarSectionHeader.background#1f222c
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#f7f6f5
  • statusBar.background#fffaa1
  • statusBar.debuggingBackground#ff9650
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#AEAEAE
  • statusBar.noFolderForeground#f7f6f5
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#fffaa1
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#fffaa1
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#FFB794
  • tab.activeBackground#1f222c
  • tab.activeBorderTop#fffaa1
  • tab.activeForeground#f7f6f5
  • tab.border#000000
  • tab.hoverBackground#1f222c
  • tab.hoverForeground#f7f6f5
  • tab.inactiveBackground#06070c
  • tab.inactiveForeground#BBB9B6
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#759ec9
  • terminal.ansiBrightBlack#BBB9B6
  • terminal.ansiBrightBlue#AFD8FF
  • terminal.ansiBrightCyan#a5d2d4
  • terminal.ansiBrightGreen#6dcba9
  • terminal.ansiBrightMagenta#c096e7
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c7c6
  • terminal.ansiBrightYellow#fffaa1
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#0ca26b
  • terminal.ansiMagenta#9b7ab9
  • terminal.ansiRed#FF7575
  • terminal.ansiWhite#f7f6f5
  • terminal.ansiYellow#ffac75
  • terminal.background#13151b
  • terminal.foreground#f7f6f5
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#AFD8FF
  • titleBar.activeBackground#06070c
  • titleBar.activeForeground#f7f6f5
  • titleBar.inactiveBackground#1f222c
  • titleBar.inactiveForeground#7b746e
  • walkThrough.embeddedEditorBackground#06070c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#FFFFFF
meta.diff, meta.diff.header#BBB9B6
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#bbdeee
emphasisitalic
strongbold
invalid#FF7575strikethrough
invalid.deprecated#f7f6f5underline italic
header#bbdeee
source.ini, source.ignore, source#d6d6d6
markup.inserted#AFD8FF
markup.deleted#FF7575
markup.changed#ff9650
markup.error#FF7575
markup.underlineunderline
markup.bold#AFD8FFbold
markup.heading#ff9650bold
markup.italic#F3E9D2italic
markup.inline.raw, markup.raw.restructuredtext#FF869C
markup.underline.link, markup.underline.link.image, markup.quote#F3E9D2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#F3E9D2
meta.separator.markdown#BAB9B7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#FF869C
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#AFD8FF
entity.name.filename#F3E9D2
entity.name.directive.restructuredtext#FF869Citalic
entity.name.class, entity.name.type.class, entity.other.inherited-class, entity.name.fragment.graphql, variable.fragment.graphql#98CFD3
entity.name.tag#bda7d3
entity.other.attribute-name.parent-selector#ff9650
entity.other.attribute-name, meta.object-literal.key.js#FF869C
source.css, entity.other.attribute-name.class.css, entity.name.variable.parameter, meta.selector.css, 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#dfdfdf
support, entity.name.type, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#a083bd
keyword.other.important.css#6dcba9
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#ff8b57
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#AFD8FF
entity.other.attribute-name, meta.object-literal.key.js#759ec9
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#F3E9D2
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#F3E9D2
storage.modifier#F3E9D2
punctuation.definition.constant.restructuredtext#F3E9D2
storage.type.generic.java#F3E9D2
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#F3E9D2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7e7472
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b19f9b
constant#AFD8FF
constant.other.color, constant.other.key.perl#AFD8FF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#fcf1a3
constant.other.date, constant.other.timestamp#AFD8FF
constant.language.empty-list.haskell, constant.other.symbol.hashkey, constant.other.symbol.hashkey.ruby#f7f6f5
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#EEF4ED
keyword.operator.dereference.java, keyword.operator.navigation.groovy#f7f6f5
keyword.operator#FFFFFF
keyword.other.unit#d8e0e7
keyword.control, keyword.other.template, keyword.other.substitution#F3E9D2
keyword.expressions-and-types.swift, keyword.other.this, variable.language.this#F3E9D2
keyword.control.import, keyword.control.from, keyword.control.export#F3E9D2
meta.attribute-selector.scss#F3E9D2
storage.modifier.async, keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical, keyword.operator.ternary#F3E9D2
keyword.control.at-rule.apply.tailwind#f89595bold
meta.selector#ff5757
meta.at-rule.apply.tailwind#ff5757
keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name#EEF4ED
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F3E9D2
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#F3E9D2
punctuation.definition.keyword.css#F3E9D2bold
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F3E9D2
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#F3E9D2
punctuation, punctuation.separator.inheritance.php#F3E9D2
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.brace.square, 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#F3E9D2
#F3E9D2
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#F3E9D2
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, 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#F3E9D2
punctuation.definition.directive.restructuredtext#F3E9D2
punctuation.separator.inheritance.php#F3E9D2
variable.parameter#7f99b9
variable.other.alias.yaml#EEF4EDunderline
variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, variable.other.constant#EEF4ED
support.variable.property, variable.object.property, variable.other.object.property#bda7d3
variable.other.object, variable.other.constant.object#a083bd
meta.array.literal variable.other.readwrite, variable.parameter.handlebars#F3E9D2
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c97575
meta.selectionset.graphql meta.arguments variable#c97575
variable.graphql#EEF4ED
support.variable.property, keyword.operation.graphql#EEF4ED
source.shell variable.other#6dcba9
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#6dcba9
support.function.magic, support.variable, variable.other.predefined#f89595
support.function, support.type.property-name#bbdeee
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F3E9D2
punctuation.definition.group.capture.regexp#c79494
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8b57
punctuation.definition.character-class.regexp#759ec9
punctuation.definition.group.regexp#6dcba9
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F3E9D2
meta.assertion.look-ahead.regexp#ff8b57
meta.scope.prerequisites.makefile#c79494
source.json meta.structure.dictionary.json support.type.property-name.json#ff8b57
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6dcba9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#759ec9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF869C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bbdeee
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFB794
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C7C6C9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AEAEAE
token.info-token#AFD8FF
token.warn-token#FFB794
token.error-token#F44747
token.debug-token#FF869C