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—
emphasis—italic
strong—bold
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.underline—underline
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—