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.underlineunderline
markup.underline.link#5e9fc7underline
markup.boldbold
markup.heading#00ff95
markup.italicitalic
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