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#1B2236
  • activityBar.activeBorder#9fffc6
  • activityBar.activeFocusBorder#ff0000
  • activityBar.background#0D101A
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#717574
  • activityBarBadge.background#9fffc6
  • activityBarBadge.foreground#0c0c0f
  • badge.background#9fffc6
  • badge.foreground#0c0c0f
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#1B2236
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#a9a9a9
  • breadcrumbPicker.background#0c0c0f
  • button.background#9fffc6
  • button.foreground#0c0c0f
  • contrastBorder#060606
  • debugToolBar.background#0c0c0f
  • diffEditor.border#9fffc6
  • diffEditor.diagonalFill#FF868650
  • diffEditor.insertedTextBackground#F4D68770
  • diffEditor.removedTextBackground#FF868650
  • dropdown.background#0b100a
  • dropdown.border#000000
  • dropdown.foreground#ffffff
  • editor.background#0D101A
  • editor.findMatchBackground#FFC59E80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#F4D68775
  • editor.foldBackground#1b151b
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#9776ac50
  • editor.lineHighlightBorder#F4D6870c
  • editor.rangeHighlightBackground#F4D68715
  • editor.selectionBackground#F4D68741
  • editor.selectionHighlightBackground#F4D68775
  • editor.snippetFinalTabstopHighlightBackground#0c0c0f
  • editor.snippetFinalTabstopHighlightBorder#9fffc6
  • editor.snippetTabstopHighlightBackground#0c0c0f
  • editor.snippetTabstopHighlightBorder#D6D2DA
  • editor.wordHighlightBackground#9776ac50
  • editor.wordHighlightStrongBackground#F4D68757
  • editorCodeLens.foreground#D6D2DA
  • editorError.foreground#FF8686
  • editorGroup.border#000000
  • editorGroup.dropBackground#0c0c0f70
  • editorGroupHeader.tabsBackground#0c0c0f
  • editorGutter.addedBackground#9fffc6
  • editorGutter.background#151928
  • 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#9fffc6
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#ffffff
  • editorOverviewRuler.deletedForeground#FF8686
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#A6D9F7
  • editorOverviewRuler.infoForeground#78a4bd
  • editorOverviewRuler.modifiedForeground#FFEFB7
  • editorOverviewRuler.selectionHighlightForeground#ffffff
  • editorOverviewRuler.warningForeground#FFC59E
  • editorOverviewRuler.wordHighlightForeground#ffffff
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#0c0c0f
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.selectedBackground#F4D6875d
  • editorWarning.foreground#FFC59E
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#0c0c0f
  • errorForeground#FF8686
  • extensionButton.prominentBackground#9fffc6
  • extensionButton.prominentForeground#0c0c0f
  • extensionButton.prominentHoverBackground#9fffc6
  • focusBorder#040404
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#9fffc6
  • gitDecoration.conflictingResourceForeground#FFC59E
  • gitDecoration.deletedResourceForeground#FF8686
  • gitDecoration.ignoredResourceForeground#D6D2DA
  • gitDecoration.modifiedResourceForeground#A6D9F7
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#20242e
  • input.border#000000
  • input.foreground#ffffff
  • input.placeholderForeground#b0bcd3
  • inputOption.activeBorder#000000
  • inputValidation.errorBorder#FF8686
  • inputValidation.infoBorder#5775ad
  • inputValidation.warningBorder#FFC59E
  • list.activeSelectionBackground#9fffc6f5
  • list.activeSelectionForeground#20242e
  • list.dropBackground#9fffc6
  • list.errorForeground#FF8686
  • list.focusBackground#9fffc68a
  • list.highlightForeground#FFEFB7
  • list.hoverBackground#F4D68736
  • list.inactiveSelectionBackground#9fffc673
  • list.warningForeground#FFC59E
  • listFilterWidget.background#080608
  • listFilterWidget.noMatchesOutline#FF8686
  • listFilterWidget.outline#9fffc6
  • merge.currentHeaderBackground#F4D68790
  • merge.incomingHeaderBackground#A6D9F790
  • panel.background#0D101A
  • panel.border#9fffc6
  • panelTitle.activeBorder#9fffc6
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#D6D2DA
  • peekView.border#9fffc6
  • peekViewEditor.background#0c0c0f
  • peekViewEditor.matchHighlightBackground#F4D6872d
  • peekViewResult.background#132013
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#F4D6872d
  • peekViewResult.selectionBackground#9fffc6
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0c0c0f
  • peekViewTitleDescription.foreground#D6D2DA
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#A6D9F7
  • pickerGroup.foreground#ac9576
  • progressBar.background#9fffc6
  • selection.background#f5eb8c7e
  • settings.checkboxBackground#20242e
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#20242e
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#ffffff
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#9fffc6
  • settings.numberInputBackground#20242e
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#ffffff
  • settings.textInputBackground#20242e
  • settings.textInputBorder#000000
  • settings.textInputForeground#ffffff
  • sideBar.background#0D101A
  • sideBarSectionHeader.background#1B2236
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#ffffff
  • statusBar.background#9fffc6
  • statusBar.debuggingBackground#9fffc6
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#C7C7C7
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#9fffc6
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#9fffc6
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#c74848
  • tab.activeBackground#1B2236
  • tab.activeBorderTop#9fffc6
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.hoverBackground#1B2236
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#07080D
  • tab.inactiveForeground#D6D2DA
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#78a4bd
  • terminal.ansiBrightBlack#D6D2DA
  • terminal.ansiBrightBlue#A6D9F7
  • terminal.ansiBrightCyan#9cbec5
  • terminal.ansiBrightGreen#9fffc6
  • terminal.ansiBrightMagenta#6d8296
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c6c9
  • terminal.ansiBrightYellow#FFEFB7
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#7BD19E
  • terminal.ansiMagenta#c871b4
  • terminal.ansiRed#FF8686
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFC59E
  • terminal.background#0D101A
  • terminal.foreground#ffffff
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#A6D9F7
  • titleBar.activeBackground#12203b
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#0c0c0f
  • titleBar.inactiveForeground#D6D2DA
  • walkThrough.embeddedEditorBackground#0c0c0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#FFFFFF—
meta.selector#9fffc6—
token.info-token#AFD8FF—
token.warn-token#9fffc6—
token.error-token#F44747—
token.debug-token#FF869C—
comment#33373b—
comment.line#33373b—
constant#A9BFDA—
entity#ffffff—
entity.name.function, entity.name.method#E6E6E6—
entity.name.type#9CC1EE—
entity.name.class#FFA4A4—
entity.name.tag#9cb6d3—
entity.other.inherited-class#9cb6d3—
entity.other.attribute-name#bbbdbe—
entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class#E6E6E6—
invalid#6d2222—
keyword#f5b575—
keyword.control#f5b575—
keyword.control.conditional#f5b575—
keyword.operator, storage.type.function.arrow#f5b575—
keyword.operator.logical, keyword.operator.comparison#f5b575—
keyword.operator.new#f5b575—
keyword.other.unit#6d8296—
markup.underline—underline
markup.underline.link#5e9fc7underline
markup.bold—bold
markup.heading#00ff95—
markup.italic—italic
markup.list#9fffc6—
markup.quote#9fffc6italic
markup.raw#9fffc6—
markup.other#FFC59E—
markup.changed#A6D9F7—
markup.inserted#9fffc6—
markup.deleted#FF8686—
storage.type#969696—
storage.modifier#969696—
string#ffffff—
string.quoted.triple#ffffff—
string.quoted.other#ffffff—
string.regexp#ffffff—
string.interpolated#ffffff—
support.function#9fffc6—
support.class#6d8296—
support.type, support.variable.property#5979a2—
support.constant#fbf8cd—
support.variable#fbf8cd—
support.other#fbf8cd—
variable#82D0C8—
variable.parameter#6d8296—
variable.language#6d8296—
variable.other#fffbbe—
variable.object.property#C0BBCC—
variable.other.object.property#6d8296—
variable.other.object, variable.other.constant.object#6d8296—
variable.parameter.handlebars#6d8296—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable #ffffff—
meta.import variable.other.readwrite.alias , meta.export variable.other.readwrite.alias , meta.variable.assignment.destructured.object.coffee variable variable #ffffff—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation # Sass placeholder `%` symbols, 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#ffffff—
keyword.operator.other.powershell # Commas, 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 # HTML tags in comments, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, string.template meta.brace, string.template punctuation.accessor#ffffff—
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 # PHP edge case, punctuation.section.embedded.end source.ruby # Issue with ruby's tmLanguage, punctuation.definition.variable.makefile#ffffff—
meta.selectionset.graphql variable#ffffff—
meta.selectionset.graphql meta.arguments variable#ffffff—
entity.name.fragment.graphql, variable.fragment.graphql#ffffff—
log.error#ff000000bold
log.warning#9fffc6bold
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#9fffc6—
constant.other.date, constant.other.timestamp#ffffff—
variable.other.alias.yaml#ffffff—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F3E9D2—
punctuation.definition.group.capture.regexp#9fffc6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#DAF8D4—
punctuation.definition.character-class.regexp#AFD8FF—
punctuation.definition.group.regexp#FF869C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F3E9D2—
meta.assertion.look-ahead.regexp#9fffc6—
meta.scope.prerequisites.makefile#9fffc6—
source.json meta.structure.dictionary.json support.type.property-name.json#9fffc6—
source.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 support.type.property-name.json#F3E9D2—
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—