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#1b2b34
  • activityBar.activeBorder#5fb3b3
  • activityBar.background#0f1c23
  • activityBar.border#5fb3b322
  • activityBar.dropBackground#1b2b34
  • activityBar.dropBorder#5fb3b3
  • activityBar.foreground#5fb3b3
  • activityBar.inactiveForeground#343d46
  • activityBarBadge.background#343d46
  • activityBarBadge.foreground#d8dee9
  • badge.background#343d46
  • badge.foreground#d8dee9
  • breadcrumb.background#0f1c23
  • button.background#5fb3b3dd
  • button.hoverBackground#5fb3b3
  • debugExceptionWidget.background#1b2b34
  • debugExceptionWidget.border#d8dee9
  • debugToolBar.background#1b2b34
  • descriptionForeground#d8dee9
  • diffEditor.insertedLineBackground#223132
  • diffEditor.insertedTextBackground#99c79415
  • diffEditor.insertedTextBorder#99c79400
  • diffEditor.removedLineBackground#2E272F
  • diffEditor.removedTextBackground#ed6f7d00
  • diffEditor.removedTextBorder#ed6f7d00
  • diffEditorOverview.insertedForeground#99c79499
  • diffEditorOverview.removedForeground#ed6f7d99
  • dropdown.background#1b2b34
  • dropdown.border#5fb3b3
  • dropdown.foreground#ffffff
  • editor.background#0f1c23
  • editor.findMatchBackground#343d46
  • editor.findMatchBorder#5fb3b3ee
  • editor.findMatchHighlightBackground#5fb3b370
  • editor.findRangeHighlightBackground#5fb3b370
  • editor.foreground#fff
  • editor.hoverHighlightBackground#5fb3b322
  • editor.inactiveSelectionBackground#5fb3b322
  • editor.lineHighlightBackground#0f1c23
  • editor.lineHighlightBorder#0f1c23
  • editor.rangeHighlightBackground#0f1c23
  • editor.selectionBackground#5fb3b322
  • editor.selectionForeground#fff
  • editor.selectionHighlightBackground#343d46
  • editor.selectionHighlightBorder#5fb3b3
  • editor.wordHighlightBackground#343d46
  • editor.wordHighlightStrongBackground#65737e
  • editorBracketHighlight.foreground1#5fb3b3
  • editorBracketHighlight.foreground2#c5a5c5
  • editorBracketHighlight.foreground3#5a9bcf
  • editorBracketHighlight.foreground4#fac863
  • editorBracketMatch.background#343d46
  • editorBracketMatch.border#fac863
  • editorCodeLens.foreground#d8dee9
  • editorCursor.foreground#5fb3b3
  • editorError.border#343d46
  • editorError.foreground#ed6f7d
  • editorGroup.border#5fb3b322
  • editorGroup.dropBackground#343d46
  • editorGroup.emptyBackground#1b2b34
  • editorGroup.focusedEmptyBorder#5fb3b3
  • editorGroupHeader.noTabsBackground#1b2b34
  • editorGroupHeader.tabsBackground#1b2b34
  • editorGroupHeader.tabsBorder#1b2b34
  • editorGutter.addedBackground#99c794
  • editorGutter.background#0f1c23
  • editorGutter.deletedBackground#ed6f7d
  • editorGutter.modifiedBackground#fac863aa
  • editorHoverWidget.background#1b2b34
  • editorHoverWidget.border#5fb3b3
  • editorIndentGuide.activeBackground#0f1c23
  • editorIndentGuide.background#0f1c23
  • editorLineNumber.foreground#343d46dd
  • editorLink.activeForeground#65737e
  • editorMarkerNavigation.background#343d46
  • editorMarkerNavigationError.background#ed6f7d
  • editorMarkerNavigationWarning.background#99c794
  • editorOverviewRuler.addedForeground#99c794aa
  • editorOverviewRuler.border#0f1c23
  • editorOverviewRuler.commonContentForeground#c5a5c5aa
  • editorOverviewRuler.currentContentForeground#5fb3b3aa
  • editorOverviewRuler.deletedForeground#ed6f7daa
  • editorOverviewRuler.errorForeground#ed6f7d
  • editorOverviewRuler.incomingContentForeground#5a9bcfbb
  • editorOverviewRuler.infoForeground#c5a5c5aa
  • editorOverviewRuler.modifiedForeground#fac863aa
  • editorOverviewRuler.warningContentForeground#fac863
  • editorPane.background#1b2b34
  • editorRuler.foreground#0f1c23
  • editorSuggestWidget.background#1b2b34
  • editorSuggestWidget.border#5fb3b3
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#fac863
  • editorSuggestWidget.selectedBackground#343d46
  • editorWarning.border#343d46
  • editorWarning.foreground#fac863
  • editorWhitespace.foreground#4f5b66
  • editorWidget.background#1b2b34
  • editorWidget.border#5fb3b3
  • errorForeground#ed6f7d
  • extensionButton.prominentBackground#1A8384
  • extensionButton.prominentForeground#d8dee9
  • extensionButton.prominentHoverBackground#4e9b9bcc
  • focusBorder#343d46
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#c5a5c5
  • gitDecoration.deletedResourceForeground#ed6f7d
  • gitDecoration.ignoredResourceForeground#4f5b66
  • gitDecoration.modifiedResourceForeground#fac863
  • gitDecoration.untrackedResourceForeground#5fb3b3
  • input.background#0f1c23
  • input.border#5fb3b344
  • input.foreground#fac863
  • input.placeholderForeground#d8dee9
  • inputOption.activeBorder#343d46
  • inputValidation.errorBackground#ed6f7dbb
  • inputValidation.errorBorder#ed6f7d
  • inputValidation.errorForeground#fff
  • inputValidation.infoBackground#5fb3b3bb
  • inputValidation.infoBorder#5fb3b3
  • inputValidation.infoForeground#fff
  • inputValidation.warningBackground#fac863bb
  • inputValidation.warningBorder#fac863
  • inputValidation.warningForeground#fff
  • list.activeSelectionBackground#5fb3b333
  • list.activeSelectionForeground#d8dee9
  • list.dropBackground#5fb3b344
  • list.focusBackground#5fb3b344
  • list.focusForeground#d8dee9
  • list.highlightForeground#fac863
  • list.hoverBackground#1b2b34
  • list.hoverForeground#d8dee9
  • list.inactiveSelectionBackground#5fb3b333
  • list.inactiveSelectionForeground#d8dee9
  • merge.border#5fb3b3
  • merge.commonContentBackground#ffffff00
  • merge.commonHeaderBackground#ffffff00
  • merge.currentContentBackground#5fb3b370
  • merge.currentHeaderBackground#5fb3b3bb
  • merge.incomingContentBackground#5a9bcf70
  • merge.incomingHeaderBackground#5a9bcfbb
  • notification.background#1b2b34
  • notification.buttonBackground#5fb3b3
  • notification.buttonForeground#d8dee9
  • notification.buttonHoverBackground#4e9b9b
  • notification.errorBackground#ed6f7d
  • notification.errorForeground#d8dee9
  • notification.foreground#d8dee9
  • notification.infoBackground#99c794
  • notification.infoForeground#d8dee9
  • notification.warningBackground#fac863
  • notification.warningForeground#1b2b34
  • notificationCenter.border#5fb3b3
  • notificationCenterHeader.background#1b2b34
  • notificationCenterHeader.foreground#d8dee9
  • notificationLink.foreground#fac863
  • notifications.border#5fb3b3
  • notificationToast.border#5fb3b3
  • panel.background#1b2b34
  • panel.border#5fb3b3
  • panelTitle.activeBorder#fac863
  • panelTitle.activeForeground#5fb3b3
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#343d46
  • peekViewEditor.background#1b2b34
  • peekViewEditor.matchHighlightBackground#343d46
  • peekViewEditorGutter.background#1b2b34
  • peekViewResult.background#1b2b34
  • peekViewResult.fileForeground#d8dee9
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#343d46
  • peekViewResult.selectionBackground#343d46
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#1b2b34
  • peekViewTitleDescription.foreground#d8dee9
  • peekViewTitleLabel.foreground#fac863
  • pickerGroup.border#1b2b34
  • pickerGroup.foreground#d8dee9
  • progressBar.background#5fb3b3
  • quickInput.background#1b2b34
  • quickInput.foreground#d8dee9aa
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#343d46aa
  • scrollbarSlider.background#4f5b66aa
  • scrollbarSlider.hoverBackground#343d46aa
  • selection.background#fac86325
  • settings.dropdownListBorder#5fb3b3
  • settings.modifiedItemIndicator#5fb3b3
  • sideBar.background#0f1c23
  • sideBar.border#5fb3b322
  • sideBar.foreground#d8dee9
  • sideBarSectionHeader.background#1b2b34
  • sideBarSectionHeader.border#5fb3b322
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#0f1c23
  • statusBar.border#5fb3b322
  • statusBar.debuggingBackground#1b2b34
  • statusBar.debuggingForeground#d8dee9
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#1b2b34
  • statusBar.noFolderBorder#343d46
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.activeBackground#1b2b34
  • statusBarItem.hoverBackground#343d46
  • statusBarItem.prominentBackground#1b2b34
  • statusBarItem.prominentHoverBackground#343d46
  • tab.activeBackground#0f1c23
  • tab.activeBorder#0f1c23
  • tab.activeBorderTop#5fb3b3
  • tab.activeForeground#fff
  • tab.activeModifiedBorder#5fb3b3
  • tab.border#5fb3b322
  • tab.inactiveBackground#1b2b34
  • tab.inactiveForeground#d8dee9
  • tab.inactiveModifiedBorder#5fb3b377
  • tab.unfocusedActiveForeground#d8dee9
  • tab.unfocusedActiveModifiedBorder#5fb3b3bb
  • tab.unfocusedInactiveForeground#d8dee9
  • tab.unfocusedInactiveModifiedBorder#5fb3b377
  • terminal.ansiBlack#343d46
  • terminal.ansiBlue#5a9bcf
  • terminal.ansiBrightBlack#65737e
  • terminal.ansiBrightBlue#8ABEE7
  • terminal.ansiBrightCyan#9BE2E2
  • terminal.ansiBrightGreen#C1DCBE
  • terminal.ansiBrightMagenta#EDCDED
  • terminal.ansiBrightRed#D6838C
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFDE9B
  • terminal.ansiCyan#5fb3b3
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#c5a5c5
  • terminal.ansiRed#ed6f7d
  • terminal.ansiWhite#d8dee9
  • terminal.ansiYellow#fac863
  • terminal.background#0f1c23
  • terminal.foreground#d8dee9
  • terminalCursor.background#0f1c23
  • terminalCursor.foreground#5fb3b3
  • textBlockQuote.background#212d36
  • textBlockQuote.border#5fb3b3
  • textCodeBlock.background#212d36
  • textLink.activeForeground#5a9bcf
  • textLink.foreground#5a9bcf
  • textPreformat.foreground#fac863
  • textSeparator.foreground#1b2b34
  • titleBar.activeBackground#1b2b34
  • titleBar.activeForeground#d8dee9
  • titleBar.border#1b2b34
  • titleBar.inactiveBackground#1b2b34
  • titleBar.inactiveForeground#65737e
  • walkThrough.embeddedEditorBackground#1b2b34
  • welcomePage.buttonBackground#343d46
  • welcomePage.buttonHoverBackground#0f1c23
  • widget.shadow#0f1c23
  • window.title${dirty} ${activeEditorMedium}${separator}${rootName}

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#65737e—
variable#5a9bcf—
entity.name.type.enum#C1DCBE—
entity.name.type.enum#C1DCBEbold
entity.name.type.interface#ed6f7dbold
variable.other.readwrite.cs, support.type.property-name.json#d8dee9—
keyword.control#ed6f7dbold
keyword, storage.type, storage.modifier, storage.type.class.js#c5a5c5—
keyword.operator, constant.other.color, 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, keyword.other.template, keyword.other.substitution#5FB3B3bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ed6f7d—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#80dfffbold
support.other.variable, string.other.link#ed6f7d—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#eb9a6d—
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#fac863bold
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#FAC863bold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ed6f7d—
variable.language#c5a5c5bold
entity.name.method.js#D8DEE9—
meta.class-method.js entity.name.function.js, variable.function.constructor#D8DEE9—
entity.other.attribute-name#BB80B3—
markup.inserted#99C794—
markup.deleted#ed6f7d—
markup.changed#BB80B3—
string.regexp#5FB3B3—
constant.character.escape#5FB3B3—
*url*, *link*, *uri*#5FB3B3underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5a9bcfitalic
source.js constant.other.object.key.js string.unquoted.label.js#ed6f7ditalic
source.css entity, source.scss entity#c5a5c5—
entity.name.tag, source.css entity.name, source.css entity.name.tag, source.scss entity.name.tag, source.css entity.name.tag entity.name.tag, source.scss entity.name.tag entity.name.tag#ed6f7d—
source.css support#fac863—
source.css constant, source.css support.constant#eb9a6d—
source.css string, source.css punctuation.definition.string, source.scss string, source.scss punctuation.definition.string#99c794—
source.css variable#d8dee9—
text.html.basic entity.name#ed6f7d—
meta.tag.metadata.script.html entity.name.tag.html#ed6f7d—
text.html.basic entity.name.tag#ed6f7d—
meta.tag.custom.start.html entity.name.tag.html, meta.tag.custom.end.html entity.name.tag.html, meta.tag.other.unrecognized.html.derivative entity.name.tag.html#fac863—
source.js keyword#5fb3b3—
source.js entity, source.js entity.name.tag#ed6f7d—
source.js punctuation#5fb3b3—
source.js meta.block#d8dee9—
source.js storage.type.function#c5a5c5—
variable.language, entity.name.type.class.js#ed6f7d—
markup.changed#c5a5c5—
punctuation.definition.heading.markdown#d8dee9—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#c5a5c5bold
meta.paragraph.markdown#d8dee9—
beginning.punctuation.definition.quote.markdown#5FB3B3—
markup.quote.markdown meta.paragraph.markdown#5a9bcfitalic
meta.separator.markdown#5FB3B3—
markup.bold.markdown#5FB3B3bold
markup.italic.markdown#5a9bcfitalic
beginning.punctuation.definition.list.markdown#5FB3B3—
string.other.link.title.markdown#99c794—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#99c794—
markup.underline.link.markdown, markup.underline.link.image.markdown#5a9bcf—
fenced_code.block.language, markup.inline.raw.markdown#eb9a6d—
fenced_code.block.language, markup.inline.raw.markdown#5a9bcf—
source.ts entity.name.type#fac863—
source.ts keyword#c5a5c5—
source.ts punctuation.definition.parameters#5fb3b3—
meta.arrow.ts punctuation.definition.parameters#5fb3b3—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FAC863—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#c5a5c5—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#D8DEE9—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5a9bcf—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#AB7967—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#ed6f7d—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#eb9a6d—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FAC863—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#c5a5c5—