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#332633
  • activityBar.activeBorder#8AFFD2
  • activityBar.activeFocusBorder#ff0000
  • activityBar.background#0f0b0f
  • activityBar.foreground#f7f5f7
  • activityBar.inactiveForeground#717574
  • activityBarBadge.background#8AFFD2
  • activityBarBadge.foreground#000000
  • badge.background#8AFFD2
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#f7f5f7
  • breadcrumb.background#332633
  • breadcrumb.focusForeground#f7f5f7
  • breadcrumb.foreground#a9a9a9
  • breadcrumbPicker.background#0f0c0f
  • button.background#8AFFD2
  • button.foreground#202020
  • contrastBorder#060606
  • debugToolBar.background#0f0c0f
  • diffEditor.border#8AFFD2
  • diffEditor.diagonalFill#FF868650
  • diffEditor.insertedTextBackground#8AFFD270
  • diffEditor.removedTextBackground#FF868650
  • dropdown.background#0b100a
  • dropdown.border#000000
  • dropdown.foreground#f7f5f7
  • editor.background#161116
  • editor.findMatchBackground#FFC59E80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#8AFFD275
  • editor.foldBackground#1b151b
  • editor.foreground#f7f5f7
  • editor.hoverHighlightBackground#9776ac50
  • editor.lineHighlightBorder#8AFFD20c
  • editor.rangeHighlightBackground#8AFFD215
  • editor.selectionBackground#8AFFD241
  • editor.selectionHighlightBackground#8AFFD275
  • editor.snippetFinalTabstopHighlightBackground#0f0c0f
  • editor.snippetFinalTabstopHighlightBorder#8AFFD2
  • editor.snippetTabstopHighlightBackground#0f0c0f
  • editor.snippetTabstopHighlightBorder#D6D2DA
  • editor.wordHighlightBackground#9776ac50
  • editor.wordHighlightStrongBackground#8AFFD257
  • editorCodeLens.foreground#D6D2DA
  • editorError.foreground#FF8686
  • editorGroup.border#000000
  • editorGroup.dropBackground#0f0c0f70
  • editorGroupHeader.tabsBackground#0f0c0f
  • editorGutter.addedBackground#8AFFD2
  • editorGutter.background#0f0b0f
  • editorGutter.deletedBackground#FF8686
  • editorGutter.modifiedBackground#A6D9F7
  • editorHoverWidget.background#1b161b
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.foreground#7b7a7c
  • editorLink.activeForeground#A6D9F7
  • editorMarkerNavigation.background#1b151b
  • editorOverviewRuler.addedForeground#8AFFD2
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#f7f5f7
  • editorOverviewRuler.deletedForeground#FF8686
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#A6D9F7
  • editorOverviewRuler.infoForeground#78a4bd
  • editorOverviewRuler.modifiedForeground#FFEFB7
  • editorOverviewRuler.selectionHighlightForeground#f7f5f7
  • editorOverviewRuler.warningForeground#FFC59E
  • editorOverviewRuler.wordHighlightForeground#f7f5f7
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#0f0c0f
  • editorSuggestWidget.foreground#f7f5f7
  • editorSuggestWidget.selectedBackground#8AFFD25d
  • editorWarning.foreground#FFC59E
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#0f0c0f
  • errorForeground#FF8686
  • extensionButton.prominentBackground#8AFFD290
  • extensionButton.prominentForeground#f7f5f7
  • extensionButton.prominentHoverBackground#8AFFD260
  • focusBorder#040404
  • foreground#f7f5f7
  • gitDecoration.addedResourceForeground#8AFFD2
  • gitDecoration.conflictingResourceForeground#FFC59E
  • gitDecoration.deletedResourceForeground#FF8686
  • gitDecoration.ignoredResourceForeground#D6D2DA
  • gitDecoration.modifiedResourceForeground#A6D9F7
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#201822
  • input.border#000000
  • input.foreground#f7f5f7
  • input.placeholderForeground#959297
  • inputOption.activeBorder#000000
  • inputValidation.errorBorder#FF8686
  • inputValidation.infoBorder#5775ad
  • inputValidation.warningBorder#FFC59E
  • list.activeSelectionBackground#8AFFD288
  • list.activeSelectionForeground#f7f5f7
  • list.dropBackground#8AFFD2
  • list.errorForeground#FF8686
  • list.focusBackground#8AFFD25e
  • list.highlightForeground#FFEFB7
  • list.hoverBackground#8AFFD236
  • list.inactiveSelectionBackground#8AFFD25b
  • list.warningForeground#FFC59E
  • listFilterWidget.background#080608
  • listFilterWidget.noMatchesOutline#FF8686
  • listFilterWidget.outline#8AFFD2
  • merge.currentHeaderBackground#8AFFD290
  • merge.incomingHeaderBackground#A6D9F790
  • panel.background#0f0b0f
  • panel.border#FFBCEF
  • panelTitle.activeBorder#8AFFD2
  • panelTitle.activeForeground#f7f5f7
  • panelTitle.inactiveForeground#D6D2DA
  • peekView.border#8AFFD2
  • peekViewEditor.background#0f0c0f
  • peekViewEditor.matchHighlightBackground#8AFFD22d
  • peekViewResult.background#132013
  • peekViewResult.fileForeground#f7f5f7
  • peekViewResult.lineForeground#f7f5f7
  • peekViewResult.matchHighlightBackground#8AFFD22d
  • peekViewResult.selectionBackground#8AFFD2
  • peekViewResult.selectionForeground#f7f5f7
  • peekViewTitle.background#0f0c0f
  • peekViewTitleDescription.foreground#D6D2DA
  • peekViewTitleLabel.foreground#f7f5f7
  • pickerGroup.border#A6D9F7
  • pickerGroup.foreground#ac9576
  • progressBar.background#8AFFD2
  • selection.background#8AFFD262
  • settings.checkboxBackground#201822
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#f7f5f7
  • settings.dropdownBackground#201822
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#f7f5f7
  • settings.headerForeground#f7f5f7
  • settings.modifiedItemIndicator#8AFFD2
  • settings.numberInputBackground#201822
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#f7f5f7
  • settings.textInputBackground#201822
  • settings.textInputBorder#000000
  • settings.textInputForeground#f7f5f7
  • sideBar.background#161116
  • sideBarSectionHeader.background#332633
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#f7f5f7
  • statusBar.background#8AFFD2
  • statusBar.debuggingBackground#8AFFD2
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#C7C7C7
  • statusBar.noFolderForeground#f7f5f7
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#8AFFD2
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#966996
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#c74848
  • tab.activeBackground#332633
  • tab.activeBorderTop#8AFFD2
  • tab.activeForeground#f7f5f7
  • tab.border#000000
  • tab.hoverBackground#332633
  • tab.hoverForeground#f7f5f7
  • tab.inactiveBackground#0e0b0e
  • tab.inactiveForeground#D6D2DA
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#78a4bd
  • terminal.ansiBrightBlack#D6D2DA
  • terminal.ansiBrightBlue#A6D9F7
  • terminal.ansiBrightCyan#9cbec5
  • terminal.ansiBrightGreen#8AFFD2
  • terminal.ansiBrightMagenta#FFBCEF
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c6c9
  • terminal.ansiBrightYellow#FFEFB7
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#63D5A9
  • terminal.ansiMagenta#d39cc6
  • terminal.ansiRed#FF8686
  • terminal.ansiWhite#f7f5f7
  • terminal.ansiYellow#FFC59E
  • terminal.background#161116
  • terminal.foreground#f7f5f7
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#A6D9F7
  • titleBar.activeBackground#161116
  • titleBar.activeForeground#f7f5f7
  • titleBar.inactiveBackground#0f0c0f
  • titleBar.inactiveForeground#D6D2DA
  • walkThrough.embeddedEditorBackground#0f0c0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#FFFFFF
meta.diff, meta.diff.header#D6D2DA
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#A6D9F7
emphasisitalic
strongbold
invalid#FF8686strikethrough
invalid.deprecated#f7f5f7underline italic
header#A6D9F7
source.ini, source.ignore, source#d6d6d6
markup.inserted#A6D9F7
markup.deleted#FF8686
markup.changed#8AFFD2
markup.error#FF8686
markup.underlineunderline
markup.bold#FFC59Ebold
markup.heading#8AFFD2bold
markup.italic#FFEFB7italic
markup.inline.raw, markup.raw.restructuredtext#F1CDE9
markup.underline.link, markup.underline.link.image, markup.quote#FFEFB7
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#F1CDE9
meta.separator.markdown#D6D2DA
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#FFBCEF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#FFC59E
entity.name.filename#FFEFB7
entity.name.directive.restructuredtext#FFEFB7italic
entity.name.class, entity.name.type.class, entity.other.inherited-class, entity.name.fragment.graphql, variable.fragment.graphql#FFC59E
entity.name.tag#FFBCEF
entity.other.attribute-name.parent-selector#8AFFD2
entity.other.attribute-name, meta.object-literal.key.js#FFE7CC
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#E4D6A7
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#F1CDE9
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8AFFD2
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFC59E
entity.other.attribute-name, meta.object-literal.key.js#8AFFD2
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#FFBCEF
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#FFE692
storage.modifier#8AFFD2
punctuation.definition.constant.restructuredtext#FFC59E
storage.type.generic.java#DDDDDD
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, support.variable.property.js#8AFFD2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#725c72
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#725c72
constant#96D8FF
constant.other.color, constant.other.key.perl#FFC59E
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#F1CDE9
constant.other.date, constant.other.timestamp#96D8FF
constant.language.empty-list.haskell, constant.other.symbol.hashkey, constant.other.symbol.hashkey.ruby#f7f5f7
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#DDDDDD
keyword.operator.dereference.java, keyword.operator.navigation.groovy#f7f5f7
keyword.operator#FFFFFF
keyword.other.unit#d8e0e7
keyword.control, keyword.other.template, keyword.other.substitution#CCCCCC
keyword.expressions-and-types.swift, keyword.other.this#FFC59E
keyword.control.import, keyword.control.from, keyword.control.export#63D5A9
keyword.control.new, keyword.operator.new#8AFFD2
meta.attribute-selector.scss#FFEFB7
keyword.other.important.css, support.variable.property, keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#63D5A9
keyword.control.at-rule.apply.tailwind#8AFFD2bold
meta.selector#FFCBA6
meta.at-rule.apply.tailwind#D3F7D3
keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name#FFC59E
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#CED5E0
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#CED8CE
punctuation.definition.keyword.css#DCDCDCbold
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f7f5f7
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#DCDCDC
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#FFFFFF
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, string.template meta.brace, string.template punctuation.accessor#DDDDDD
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#E2E2E2
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#f7f5f7
punctuation.definition.directive.restructuredtext#A6D9F7
punctuation.separator.inheritance.php#FFBCEF
variable.other.alias.yaml#8AFFD2underline
variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, variable.other.constant#FFBCEF
variable.object.property, variable.other.object.property#DFDFDF
variable.other.object#FFCBA6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFC59E
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable, variable.other.readwrite.js#D6D6D6
meta.selectionset.graphql meta.arguments variable#FFC59E
variable.graphql#DFDFDF
support.variable.property, keyword.operation.graphql#FFC59E
source.shell variable.other#F1CDE9
support.function.magic, support.variable, variable.other.predefined, storage.modifier.async#FFC59E
support.function, support.type.property-name#A6D9F7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFEFB7
punctuation.definition.group.capture.regexp#FFBCEF
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#8AFFD2
punctuation.definition.character-class.regexp#FFC59E
punctuation.definition.group.regexp#F1CDE9
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FFEFB7
meta.assertion.look-ahead.regexp#8AFFD2
meta.scope.prerequisites.makefile#FFEFB7
source.json meta.structure.dictionary.json support.type.property-name.json#8AFFD2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F1CDE9
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#FFEFB7
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#F1A9A7
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#EEAEB0
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#FF9797
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#C7C7C7
token.info-token#ABC8FD
token.warn-token#FFC697
token.error-token#F44747
token.debug-token#FFFFC2