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#30607822
  • activityBar.activeBorder#30c8e0
  • activityBar.background#0d1218
  • activityBar.border#204058
  • activityBar.foreground#58a0b8
  • activityBar.inactiveForeground#1c4050
  • activityBarBadge.background#40e060
  • activityBarBadge.foreground#090b0d
  • badge.background#40e060
  • badge.foreground#090b0d
  • breadcrumb.activeSelectionForeground#78c0d8
  • breadcrumb.focusForeground#78c0d8
  • breadcrumb.foreground#2c6070
  • breadcrumbPicker.background#0d1218
  • button.background#40e060
  • button.foreground#090b0d
  • button.hoverBackground#80e8b0
  • button.secondaryBackground#285068
  • button.secondaryForeground#78c0d8
  • button.secondaryHoverBackground#306078
  • debugIcon.breakpointForeground#d83838
  • debugIcon.startForeground#30c0d8
  • debugToolBar.background#161e28
  • descriptionForeground#408090
  • diffEditor.diagonalFill#204058
  • diffEditor.insertedLineBackground#30c0d814
  • diffEditor.insertedTextBackground#30c0d822
  • diffEditor.removedLineBackground#d8383814
  • diffEditor.removedTextBackground#d8383822
  • dropdown.background#121820
  • dropdown.border#204058
  • dropdown.foreground#78c0d8
  • dropdown.listBackground#121820
  • editor.background#090b0d
  • editor.findMatchBackground#30c8e055
  • editor.findMatchBorder#30c8e0
  • editor.findMatchHighlightBackground#30c8e033
  • editor.foldBackground#1c2838aa
  • editor.foreground#78c0d8
  • editor.hoverHighlightBackground#28506840
  • editor.inactiveSelectionBackground#30607840
  • editor.lineHighlightBackground#1c2838
  • editor.rangeHighlightBackground#1c2838aa
  • editor.selectionBackground#30607866
  • editor.selectionHighlightBackground#28506855
  • editor.wordHighlightBackground#28506855
  • editor.wordHighlightStrongBackground#28506877
  • editorBracketMatch.background#28506866
  • editorBracketMatch.border#306078
  • editorCodeLens.foreground#2c6070
  • editorCursor.foreground#30c8e0
  • editorError.foreground#d83838
  • editorGhostText.foreground#2c6070
  • editorGroup.border#204058
  • editorGroupHeader.border#204058
  • editorGroupHeader.tabsBackground#0d1218
  • editorGutter.addedBackground#30c0d8
  • editorGutter.background#090b0d
  • editorGutter.deletedBackground#d83838
  • editorGutter.modifiedBackground#40e060
  • editorHint.foreground#4888c0
  • editorHoverWidget.background#161e28
  • editorHoverWidget.border#204058
  • editorHoverWidget.foreground#78c0d8
  • editorIndentGuide.activeBackground1#40e060
  • editorIndentGuide.background1#204058
  • editorInfo.foreground#30c0d8
  • editorLightBulb.foreground#a88830
  • editorLightBulbAutoFix.foreground#30c0d8
  • editorLineNumber.activeForeground#408090
  • editorLineNumber.foreground#1c4050
  • editorLink.activeForeground#30c8e0
  • editorMarkerNavigation.background#0d1218
  • editorOverviewRuler.addedForeground#30c0d8
  • editorOverviewRuler.border#204058
  • editorOverviewRuler.deletedForeground#d83838
  • editorOverviewRuler.errorForeground#d83838
  • editorOverviewRuler.findMatchForeground#30c8e0aa
  • editorOverviewRuler.infoForeground#30c0d8
  • editorOverviewRuler.modifiedForeground#40e060
  • editorOverviewRuler.warningForeground#a88830
  • editorRuler.foreground#204058
  • editorSuggestWidget.background#161e28
  • editorSuggestWidget.border#204058
  • editorSuggestWidget.foreground#78c0d8
  • editorSuggestWidget.highlightForeground#40e060
  • editorSuggestWidget.selectedBackground#121820
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#a88830
  • editorWhitespace.foreground#285068
  • editorWidget.background#161e28
  • editorWidget.border#204058
  • editorWidget.foreground#78c0d8
  • errorForeground#d83838
  • extensionButton.prominentBackground#40e060
  • extensionButton.prominentForeground#090b0d
  • extensionButton.prominentHoverBackground#80e8b0
  • focusBorder#30c8e0
  • foreground#78c0d8
  • gitDecoration.addedResourceForeground#30c0d8
  • gitDecoration.conflictingResourceForeground#d83838
  • gitDecoration.deletedResourceForeground#d83838
  • gitDecoration.ignoredResourceForeground#1c4050
  • gitDecoration.modifiedResourceForeground#40e060
  • gitDecoration.untrackedResourceForeground#4888c0
  • input.background#121820
  • input.border#204058
  • input.foreground#78c0d8
  • input.placeholderForeground#1c4050
  • inputOption.activeBackground#30607855
  • inputOption.activeBorder#30c8e0
  • inputValidation.errorBackground#121820
  • inputValidation.errorBorder#d83838
  • inputValidation.infoBackground#121820
  • inputValidation.infoBorder#30c0d8
  • inputValidation.warningBackground#121820
  • inputValidation.warningBorder#a88830
  • list.activeSelectionBackground#121820
  • list.activeSelectionForeground#78c0d8
  • list.dropBackground#306078
  • list.errorForeground#d83838
  • list.focusBackground#121820
  • list.focusForeground#78c0d8
  • list.highlightForeground#40e060
  • list.hoverBackground#1c2838
  • list.inactiveSelectionBackground#1c2838
  • list.inactiveSelectionForeground#58a0b8
  • list.warningForeground#a88830
  • menu.background#161e28
  • menu.foreground#78c0d8
  • menu.selectionBackground#121820
  • menu.separatorBackground#204058
  • menubar.selectionBackground#121820
  • minimap.background#0d1218
  • minimap.errorHighlight#d83838
  • minimap.findMatchHighlight#30c8e0
  • minimap.selectionHighlight#306078
  • minimap.warningHighlight#a88830
  • minimapGutter.addedBackground#30c0d8
  • minimapGutter.deletedBackground#d83838
  • minimapGutter.modifiedBackground#40e060
  • notificationCenterHeader.background#121820
  • notifications.background#161e28
  • notifications.border#204058
  • notifications.foreground#78c0d8
  • notificationsErrorIcon.foreground#d83838
  • notificationsInfoIcon.foreground#30c0d8
  • notificationsWarningIcon.foreground#a88830
  • panel.background#0d1218
  • panel.border#204058
  • panelInput.border#204058
  • panelTitle.activeBorder#30c8e0
  • panelTitle.activeForeground#78c0d8
  • panelTitle.inactiveForeground#2c6070
  • peekView.border#30c8e0
  • peekViewEditor.background#0d1218
  • peekViewEditorGutter.background#0d1218
  • peekViewResult.background#161e28
  • peekViewResult.selectionBackground#121820
  • peekViewTitle.background#121820
  • peekViewTitleDescription.foreground#2c6070
  • peekViewTitleLabel.foreground#78c0d8
  • pickerGroup.border#204058
  • pickerGroup.foreground#40e060
  • progressBar.background#40e060
  • quickInput.background#161e28
  • quickInput.foreground#78c0d8
  • quickInputList.focusBackground#121820
  • scrollbar.shadow#1c2838aa
  • scrollbarSlider.activeBackground#306078aa
  • scrollbarSlider.background#30607855
  • scrollbarSlider.hoverBackground#30607888
  • selection.background#30607880
  • sideBar.background#0d1218
  • sideBar.border#204058
  • sideBar.foreground#58a0b8
  • sideBarSectionHeader.background#121820
  • sideBarSectionHeader.border#204058
  • sideBarSectionHeader.foreground#58a0b8
  • sideBarTitle.foreground#58a0b8
  • statusBar.background#0d1218
  • statusBar.border#204058
  • statusBar.debuggingBackground#d83838
  • statusBar.debuggingForeground#090b0d
  • statusBar.foreground#2c6070
  • statusBar.noFolderBackground#0d1218
  • statusBarItem.activeBackground#306078
  • statusBarItem.hoverBackground#121820
  • statusBarItem.prominentBackground#1c2838
  • statusBarItem.remoteBackground#285068
  • statusBarItem.remoteForeground#78c0d8
  • tab.activeBackground#090b0d
  • tab.activeBorderTop#30c8e0
  • tab.activeForeground#78c0d8
  • tab.border#204058
  • tab.inactiveBackground#0d1218
  • tab.inactiveForeground#2c6070
  • tab.unfocusedActiveBorderTop#204058
  • terminal.ansiBlack#1c2838
  • terminal.ansiBlue#4888c0
  • terminal.ansiBrightBlack#306078
  • terminal.ansiBrightBlue#68a8e0
  • terminal.ansiBrightCyan#50e0f0
  • terminal.ansiBrightGreen#68f888
  • terminal.ansiBrightMagenta#58c8d8
  • terminal.ansiBrightRed#e85858
  • terminal.ansiBrightWhite#a8d8e8
  • terminal.ansiBrightYellow#80e8b0
  • terminal.ansiCyan#30c8e0
  • terminal.ansiGreen#40e060
  • terminal.ansiMagenta#38b8c8
  • terminal.ansiRed#d83838
  • terminal.ansiWhite#78c0d8
  • terminal.ansiYellow#50d890
  • terminal.background#090b0d
  • terminal.foreground#78c0d8
  • terminalCursor.background#090b0d
  • terminalCursor.foreground#30c8e0
  • textBlockQuote.background#0d1218
  • textBlockQuote.border#204058
  • textCodeBlock.background#0d1218
  • textLink.activeForeground#68a8e0
  • textLink.foreground#30c8e0
  • textPreformat.foreground#30c0d8
  • textSeparator.foreground#204058
  • titleBar.activeBackground#0d1218
  • titleBar.activeForeground#58a0b8
  • titleBar.border#204058
  • titleBar.inactiveBackground#0d1218
  • titleBar.inactiveForeground#2c6070
  • tree.indentGuidesStroke#204058
  • walkThrough.embeddedEditorBackground#0d1218
  • welcomePage.background#090b0d
  • welcomePage.tileBackground#0d1218
  • widget.shadow#1c2838aa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2c6070italic
string, string.quoted, punctuation.definition.string#30c0d8—
constant.character.escape, string.regexp#38b8c8—
constant.numeric#50d890—
constant.language, constant.other, variable.language, support.constant#50d890—
keyword, storage.type, storage.modifier, keyword.control, keyword.other#40e060—
keyword.operator, punctuation.separator, punctuation.terminator#78c0d8—
punctuation.definition.tag, punctuation.section, meta.brace#78c0d8—
variable, variable.other.readwrite, variable.parameter#78c0d8—
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name#4888c0—
entity.name.function, support.function, meta.function-call, variable.function#30c8e0—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, storage.type.class#3888d8—
meta.decorator, entity.name.function.decorator, entity.other.attribute-name, punctuation.decorator, entity.name.tag.yaml#38b8c8—
entity.name.namespace, entity.name.module, support.module#408090—
entity.name.tag, meta.tag#40e060—
entity.other.attribute-name.html, entity.other.attribute-name.jsx#30c8e0—
invalid, invalid.illegal#d83838—
markup.heading, entity.name.section#40e060bold
markup.bold#a8d8e8bold
markup.italic#78c0d8italic
markup.underline.link, string.other.link#30c8e0—
markup.quote#408090italic
markup.raw, markup.inline.raw#30c0d8—
markup.inserted#30c0d8—
markup.deleted#d83838—
meta.diff.header, meta.diff.range#2c6070—