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#32F0B315
  • activityBar.activeBorder#32F0B3
  • activityBar.background#051014
  • activityBar.foreground#32F0B3
  • activityBar.inactiveForeground#7B8C84
  • activityBarBadge.background#32F0B3
  • activityBarBadge.foreground#051014
  • badge.background#32F0B3
  • badge.foreground#051014
  • breadcrumb.activeSelectionForeground#32F0B3
  • breadcrumb.background#051014
  • breadcrumb.focusForeground#E2F3EA
  • breadcrumb.foreground#7B8C84
  • breadcrumbPicker.background#091A16
  • button.background#32F0B3
  • button.foreground#051014
  • button.hoverBackground#67F0AE
  • diffEditor.insertedTextBackground#67F0AE20
  • diffEditor.removedTextBackground#F78A7820
  • disabledForeground#7B8C8499
  • dropdown.background#091A16
  • dropdown.border#0C1F1A
  • dropdown.foreground#E2F3EA
  • editor.background#030C10
  • editor.findMatchBackground#FFDA9E30
  • editor.findMatchHighlightBackground#FFDA9E20
  • editor.findRangeHighlightBackground#32F0B315
  • editor.foreground#E2F3EA
  • editor.hoverHighlightBackground#32F0B315
  • editor.inactiveSelectionBackground#32F0B320
  • editor.lineHighlightBackground#32F0B312
  • editor.lineHighlightBorder#32F0B308
  • editor.rangeHighlightBackground#32F0B310
  • editor.selectionBackground#32F0B330
  • editor.selectionHighlightBackground#32F0B320
  • editor.wordHighlightBackground#9EBCFF20
  • editor.wordHighlightStrongBackground#9EBCFF30
  • editorBracketMatch.background#32F0B320
  • editorBracketMatch.border#32F0B340
  • editorCodeLens.foreground#7B8C84
  • editorCursor.foreground#FFDA9E
  • editorError.foreground#F78A78
  • editorGroup.border#0C1F1A
  • editorGroup.dropBackground#32F0B320
  • editorGroupHeader.noTabsBackground#051014
  • editorGroupHeader.tabsBackground#051014
  • editorGroupHeader.tabsBorder#0C1F1A
  • editorGutter.addedBackground#67F0AE
  • editorGutter.background#051014
  • editorGutter.deletedBackground#F78A78
  • editorGutter.modifiedBackground#57E0C2
  • editorHint.foreground#9EBCFF
  • editorHoverWidget.background#101820
  • editorHoverWidget.border#131C25
  • editorIndentGuide.activeBackground1#7B8C8440
  • editorIndentGuide.background1#7B8C8420
  • editorInfo.foreground#32F0B3
  • editorLineNumber.activeForeground#32F0B3
  • editorLineNumber.foreground#7B8C84
  • editorLink.activeForeground#32F0B3
  • editorOverviewRuler.addedForeground#67F0AE60
  • editorOverviewRuler.border#0C1F1A
  • editorOverviewRuler.deletedForeground#F78A7860
  • editorOverviewRuler.errorForeground#F78A78
  • editorOverviewRuler.findMatchForeground#FFDA9E40
  • editorOverviewRuler.infoForeground#32F0B3
  • editorOverviewRuler.modifiedForeground#57E0C260
  • editorOverviewRuler.rangeHighlightForeground#32F0B340
  • editorOverviewRuler.selectionHighlightForeground#32F0B340
  • editorOverviewRuler.warningForeground#FFDA9E
  • editorOverviewRuler.wordHighlightForeground#9EBCFF40
  • editorOverviewRuler.wordHighlightStrongForeground#9EBCFF40
  • editorRuler.foreground#7B8C8430
  • editorSuggestWidget.background#101820
  • editorSuggestWidget.border#131C25
  • editorSuggestWidget.foreground#DDE6EB
  • editorSuggestWidget.highlightForeground#4DE3D7
  • editorSuggestWidget.selectedBackground#4DE3D720
  • editorWarning.foreground#FFDA9E
  • editorWhitespace.foreground#7B8C8430
  • editorWidget.background#101820
  • editorWidget.border#131C25
  • focusBorder#32F0B350
  • foreground#E2F3EA
  • gitDecoration.addedResourceForeground#67F0AE
  • gitDecoration.conflictingResourceForeground#FFDA9E
  • gitDecoration.deletedResourceForeground#F78A78
  • gitDecoration.ignoredResourceForeground#7B8C8480
  • gitDecoration.modifiedResourceForeground#57E0C2
  • gitDecoration.untrackedResourceForeground#67F0AE
  • input.background#091A16
  • input.border#0C1F1A
  • input.foreground#E2F3EA
  • input.placeholderForeground#7B8C84
  • inputOption.activeBorder#32F0B3
  • inputValidation.errorBackground#F78A7830
  • inputValidation.errorBorder#F78A78
  • inputValidation.warningBackground#FFDA9E30
  • inputValidation.warningBorder#FFDA9E
  • list.activeSelectionBackground#32F0B320
  • list.activeSelectionForeground#E2F3EA
  • list.focusBackground#32F0B325
  • list.focusForeground#E2F3EA
  • list.highlightForeground#32F0B3
  • list.hoverBackground#32F0B310
  • list.hoverForeground#E2F3EA
  • list.inactiveSelectionBackground#32F0B315
  • list.inactiveSelectionForeground#E2F3EA
  • menu.background#091A16
  • menu.foreground#E2F3EA
  • menu.selectionBackground#32F0B320
  • menu.selectionBorder#32F0B320
  • menu.selectionForeground#E2F3EA
  • merge.border#131C25
  • merge.commonContentBackground#7B849510
  • merge.commonHeaderBackground#7B849520
  • merge.currentContentBackground#7ED9CF20
  • merge.currentHeaderBackground#7ED9CF40
  • merge.incomingContentBackground#C7A3FF20
  • merge.incomingHeaderBackground#C7A3FF40
  • panel.background#101820
  • panel.border#131C25
  • panelTitle.activeBorder#4DE3D7
  • panelTitle.activeForeground#DDE6EB
  • panelTitle.inactiveForeground#7B8495
  • peekView.border#4DE3D7
  • peekViewEditor.background#0A0F14
  • peekViewEditor.matchHighlightBackground#FFD16640
  • peekViewResult.background#101820
  • peekViewResult.fileForeground#DDE6EB
  • peekViewResult.lineForeground#7B8495
  • peekViewResult.matchHighlightBackground#FFD16640
  • peekViewResult.selectionBackground#4DE3D720
  • peekViewResult.selectionForeground#DDE6EB
  • peekViewTitle.background#131C25
  • peekViewTitleDescription.foreground#7B8495
  • peekViewTitleLabel.foreground#DDE6EB
  • progressBar.background#32F0B3
  • scrollbar.shadow#05101450
  • scrollbarSlider.activeBackground#32F0B340
  • scrollbarSlider.background#32F0B320
  • scrollbarSlider.hoverBackground#32F0B330
  • selection.background#32F0B330
  • settings.checkboxBackground#091A16
  • settings.checkboxBorder#0C1F1A
  • settings.checkboxForeground#E2F3EA
  • settings.dropdownBackground#091A16
  • settings.dropdownBorder#0C1F1A
  • settings.dropdownForeground#E2F3EA
  • settings.headerForeground#E2F3EA
  • settings.modifiedItemIndicator#57E0C2
  • settings.numberInputBackground#091A16
  • settings.numberInputBorder#0C1F1A
  • settings.numberInputForeground#E2F3EA
  • settings.textInputBackground#091A16
  • settings.textInputBorder#0C1F1A
  • settings.textInputForeground#E2F3EA
  • sideBar.background#051014
  • sideBar.border#0C1F1A
  • sideBar.foreground#E2F3EA
  • sideBarSectionHeader.background#091A16
  • sideBarSectionHeader.foreground#E2F3EA
  • sideBarTitle.foreground#E2F3EA
  • statusBar.background#051014
  • statusBar.border#0C1F1A
  • statusBar.debuggingBackground#FFDA9E
  • statusBar.debuggingForeground#051014
  • statusBar.foreground#E2F3EA
  • statusBar.noFolderBackground#091A16
  • statusBar.noFolderForeground#E2F3EA
  • statusBarItem.activeBackground#32F0B320
  • statusBarItem.hoverBackground#32F0B315
  • statusBarItem.prominentBackground#32F0B330
  • statusBarItem.prominentHoverBackground#32F0B340
  • tab.activeBackground#32F0B315
  • tab.activeBorder#32F0B3
  • tab.activeForeground#E2F3EA
  • tab.border#051014
  • tab.inactiveBackground#051014
  • tab.inactiveForeground#7B8C84
  • tab.unfocusedActiveBorder#32F0B350
  • tab.unfocusedActiveForeground#E2F3EA99
  • tab.unfocusedInactiveForeground#7B8C8499
  • terminal.ansiBlack#0C1F1A
  • terminal.ansiBlue#9EBCFF
  • terminal.ansiBrightBlack#7B8C84
  • terminal.ansiBrightBlue#BFD5FF
  • terminal.ansiBrightCyan#5DFFD0
  • terminal.ansiBrightGreen#95FFD5
  • terminal.ansiBrightMagenta#D5C9FF
  • terminal.ansiBrightRed#F9A499
  • terminal.ansiBrightWhite#F5FDF9
  • terminal.ansiBrightYellow#FFE6BE
  • terminal.ansiCyan#32F0B3
  • terminal.ansiGreen#67F0AE
  • terminal.ansiMagenta#BDA9FF
  • terminal.ansiRed#F78A78
  • terminal.ansiWhite#E2F3EA
  • terminal.ansiYellow#FFDA9E
  • terminal.background#051014
  • terminal.foreground#E2F3EA
  • terminalCursor.background#051014
  • terminalCursor.foreground#FFDA9E
  • titleBar.activeBackground#051014
  • titleBar.activeForeground#E2F3EA
  • titleBar.inactiveBackground#051014CC
  • titleBar.inactiveForeground#7B8C84
  • widget.shadow#051014A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7B8495italic
variable, string constant.other.placeholder, entity.name.variable#6DE7C8—
constant.other.color#DDE6EB—
invalid, invalid.illegal#F78A78—
keyword, storage.type, storage.modifier#9EBCFF—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#A5B6C5—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#A3E9DE—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#32F0B3—
meta.block variable.other#67F0AE—
support.other.variable, string.other.link#7BCFD6—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FFDA9E—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#85FFB8
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#A3E9DE—
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#87ECD7—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#4DE3D7—
variable.language#9EBCFFitalic
entity.name.method.js#4DE3D7—
meta.class-method.js entity.name.function.js, variable.function.constructor#4DE3D7—
entity.other.attribute-name#87ECD7—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#87ECD7italic
entity.other.attribute-name.class#A3E9DE—
source.sass keyword.control#4DE3D7—
markup.inserted#B0FFB3—
markup.deleted#F78A78—
markup.changed#C7A3FF—
string.regexp#4DE3D7—
constant.character.escape#4DE3D7—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4DE3D7italic
source.json meta.structure.dictionary.json support.type.property-name.json#C7A3FF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#87ECD7—
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#A3E9DE—
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#4DE3D7—
text.html.markdown, punctuation.definition.list_item.markdown#DDE6EB—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#B0FFB3—
markup.italic#7BCFD6italic
markup.bold, markup.bold string#7BCFD6bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#7BCFD6bold italic
markup.underline#FFD58Cunderline
markup.quote#4DE3D7italic
markup.raw.block#C7A3FF—
markup.table#4DE3D7—