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.background#050505
  • activityBar.border#0d2e32
  • activityBar.foreground#f5f1e3
  • activityBarBadge.background#1b9aaa
  • activityBarBadge.foreground#050505
  • badge.background#1b9aaa
  • badge.foreground#050505
  • breadcrumb.activeSelectionForeground#f5f1e3
  • breadcrumb.background#050505
  • breadcrumb.focusForeground#1b9aaa
  • breadcrumb.foreground#0d4048
  • breadcrumbPicker.background#050505
  • button.background#0d4048
  • button.foreground#f5f1e3
  • button.hoverBackground#1b9aaa
  • debugExceptionWidget.background#0d2e32
  • debugExceptionWidget.border#1b9aaa
  • diffEditor.insertedTextBackground#1b9aaa20
  • diffEditor.removedTextBackground#1b9aaa0a
  • dropdown.background#050505
  • dropdown.border#0d2e32
  • dropdown.foreground#1b9aaa
  • dropdown.listBackground#0d2e32
  • editor.background#050505
  • editor.findMatchBackground#1b9aaa50
  • editor.findMatchHighlightBackground#1b9aaa25
  • editor.foreground#f5f1e3
  • editor.inactiveSelectionBackground#1b9aaa30
  • editor.lineHighlightBackground#0d1a1c
  • editor.rangeHighlightBackground#1b9aaa12
  • editor.selectionBackground#1b9aaa44
  • editor.selectionHighlightBackground#1b9aaa28
  • editor.wordHighlightBackground#1b9aaa28
  • editor.wordHighlightStrongBackground#1b9aaa44
  • editorBracketMatch.background#1b9aaa20
  • editorBracketMatch.border#1b9aaa
  • editorCodeLens.foreground#0d4048
  • editorCursor.foreground#1b9aaa
  • editorError.foreground#f14c4c
  • editorGroup.border#0d2e32
  • editorGroup.dropBackground#0d2e32cc
  • editorGroupHeader.noTabsBackground#050505
  • editorGroupHeader.tabsBackground#050505
  • editorGroupHeader.tabsBorder#0d2e32
  • editorGutter.addedBackground#1b9aaab3
  • editorGutter.background#050505
  • editorGutter.deletedBackground#dddbcbb3
  • editorGutter.modifiedBackground#0d4048b3
  • editorHoverWidget.background#0d2e32
  • editorHoverWidget.border#0d4048
  • editorLineNumber.activeForeground#0d4048
  • editorLineNumber.foreground#0d2e32
  • editorLink.activeForeground#1b9aaa
  • editorMarkerNavigation.background#0d2e32
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#1b9aaa
  • editorOverviewRuler.border#0d2e32
  • editorOverviewRuler.currentContentForeground#1b9aaa20
  • editorOverviewRuler.deletedForeground#dddbcb
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#1b9aaa50
  • editorOverviewRuler.incomingContentForeground#dddbcb20
  • editorOverviewRuler.infoForeground#1b9aaa
  • editorOverviewRuler.modifiedForeground#0d4048
  • editorOverviewRuler.rangeHighlightForeground#1b9aaa44
  • editorOverviewRuler.selectionHighlightForeground#1b9aaa44
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#1b9aaa28
  • editorOverviewRuler.wordHighlightStrongForeground#1b9aaa44
  • editorRuler.foreground#0d2e32
  • editorSuggestWidget.background#0d2e32
  • editorSuggestWidget.border#0d4048
  • editorSuggestWidget.foreground#f5f1e3
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#1b9aaa44
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#0d2e3266
  • editorWidget.background#0d2e32
  • editorWidget.border#0d4048
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#0d4048
  • extensionButton.prominentForeground#f5f1e3
  • extensionButton.prominentHoverBackground#1b9aaa
  • focusBorder#1b9aaa80
  • foreground#1b9aaa
  • gitDecoration.conflictingResourceForeground#dddbcb
  • gitDecoration.deletedResourceForeground#dddbcb
  • gitDecoration.ignoredResourceForeground#0d4048
  • gitDecoration.modifiedResourceForeground#1b9aaa
  • gitDecoration.untrackedResourceForeground#f5f1e3
  • input.background#0d2e32
  • input.border#0d4048
  • input.foreground#f5f1e3
  • input.placeholderForeground#0d4048
  • inputOption.activeBorder#1b9aaa
  • inputValidation.errorBackground#050505
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#050505
  • inputValidation.infoBorder#1b9aaa
  • inputValidation.warningBackground#050505
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#1b9aaa44
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#1b9aaa28
  • list.focusBackground#1b9aaa44
  • list.focusForeground#ffffff
  • list.highlightForeground#1b9aaa
  • list.hoverBackground#0d2e32
  • list.hoverForeground#f5f1e3
  • list.inactiveFocusBackground#1b9aaa28
  • list.inactiveSelectionBackground#1b9aaa28
  • list.inactiveSelectionForeground#f5f1e3
  • list.invalidItemForeground#1b9aaa
  • merge.border#1b9aaa80
  • merge.currentContentBackground#1b9aaa20
  • merge.currentHeaderBackground#1b9aaa40
  • merge.incomingContentBackground#dddbcb20
  • merge.incomingHeaderBackground#dddbcb40
  • notificationCenter.border#1b9aaa
  • notificationCenterHeader.background#0d4048
  • notificationCenterHeader.foreground#f5f1e3
  • notificationLink.foreground#1b9aaa
  • notifications.background#0d2e32
  • notifications.border#0d4048
  • notifications.foreground#f5f1e3
  • notificationToast.border#0d4048
  • panel.background#050505
  • panel.border#0d2e32
  • panelTitle.activeBorder#1b9aaa
  • panelTitle.activeForeground#f5f1e3
  • panelTitle.inactiveForeground#0d4048
  • peekView.border#0d4048
  • peekViewEditor.background#0d2e32
  • peekViewEditor.matchHighlightBackground#1b9aaa30
  • peekViewEditorGutter.background#0d2e32
  • peekViewResult.background#050505
  • peekViewResult.fileForeground#f5f1e3
  • peekViewResult.lineForeground#1b9aaa
  • peekViewResult.matchHighlightBackground#1b9aaa30
  • peekViewResult.selectionBackground#1b9aaa44
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#050505
  • peekViewTitleDescription.foreground#0d4048
  • peekViewTitleLabel.foreground#f5f1e3
  • pickerGroup.border#0d2e32
  • pickerGroup.foreground#0d4048
  • progressBar.background#1b9aaa
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#1b9aaa66
  • scrollbarSlider.background#1b9aaa22
  • scrollbarSlider.hoverBackground#1b9aaa44
  • selection.background#1b9aaa44
  • sideBar.background#050505
  • sideBar.border#0d2e32
  • sideBar.foreground#1b9aaa
  • sideBarSectionHeader.background#0d2e32
  • sideBarSectionHeader.foreground#0d4048
  • sideBarTitle.foreground#1b9aaa
  • statusBar.background#050505
  • statusBar.border#0d2e32
  • statusBar.debuggingBackground#0d4048
  • statusBar.debuggingForeground#f5f1e3
  • statusBar.foreground#0d4048
  • statusBar.noFolderBackground#0d2e32
  • statusBar.noFolderForeground#0d4048
  • statusBarItem.activeBackground#1b9aaa44
  • statusBarItem.hoverBackground#1b9aaa28
  • statusBarItem.prominentBackground#0d4048
  • statusBarItem.prominentHoverBackground#1b9aaa
  • tab.activeBackground#050505
  • tab.activeBorder#1b9aaa
  • tab.activeForeground#ffffff
  • tab.border#0d2e32
  • tab.hoverBackground#0d2e32
  • tab.inactiveBackground#050505
  • tab.inactiveForeground#0d2e32
  • tab.unfocusedActiveForeground#1b9aaa
  • tab.unfocusedHoverBackground#0d2e32
  • tab.unfocusedInactiveForeground#0d4048
  • terminal.ansiBlack#050505
  • terminal.ansiBlue#5090b8
  • terminal.ansiBrightBlack#0d4048
  • terminal.ansiBrightBlue#1b9aaa
  • terminal.ansiBrightCyan#ffffff
  • terminal.ansiBrightGreen#f5f1e3
  • terminal.ansiBrightMagenta#dddbcb
  • terminal.ansiBrightRed#f07070
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f5f1e3
  • terminal.ansiCyan#1b9aaa
  • terminal.ansiGreen#1b9aaa
  • terminal.ansiMagenta#9878c8
  • terminal.ansiRed#f07070
  • terminal.ansiWhite#dddbcb
  • terminal.ansiYellow#d4a84b
  • terminal.background#050505
  • terminal.foreground#f5f1e3
  • terminal.selectionBackground#1b9aaa44
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#f5f1e3
  • titleBar.border#0d2e32
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#0d4048
  • walkThrough.embeddedEditorBackground#050505
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#0d4048italic
keyword, storage.type, storage.modifier#1b9aaaitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#156070
keyword.control.import, keyword.control.export, keyword.control.from#1b9aaa
string, string.quoted, string.template#f5d98e
punctuation.definition.string.begin, punctuation.definition.string.end#d4b86a
constant.character.escape, constant.other.placeholder#ffe8a0italic
entity.name.function, meta.function-call, variable.function, support.function#ffffff
entity.name.label#ffffff
entity.name.type.class, entity.name.type, support.class, support.type#7dd8e8italic
meta.type.annotation, meta.type.parameters#7dd8e8italic
entity.name.type.module, meta.import variable.other#7dd8e8
variable, variable.name, variable.other#f5f1e3
variable.parameter#dddbcb
variable.language#1b9aaaitalic
variable.other.property, variable.other.object.property, support.variable.property#e8c87a
constant.numeric#a0d8c8
constant.language#1b9aaa
constant, constant.other, constant.character#a0d8c8
entity.name.tag, meta.tag.sgml#1b9aaa
entity.name.tag support.class.component#7dd8e8
meta.tag.attribute, entity.other.attribute-name#e8c87aitalic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#156070
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#0d4048
punctuation.accessor#156070
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#7dd8e8
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#e8c87a
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#1b9aaa
meta.property-value.css, support.constant.property-value.css#f5d98e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#a0d8c8italic
meta.object-literal.key#e8c87a
source.json meta.structure.dictionary.json support.type.property-name.json#1b9aaa
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e8c87a
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#7dd8e8
*url*, *link*, *uri*#1b9aaaunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1b9aaaitalic
markup.heading, entity.name.section#1b9aaabold
markup.italic#dddbcbitalic
markup.bold#ffffffbold
markup.underline#f5d98eunderline
markup.strike#0d4048strikethrough
markup.quote#156070italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a0d8c8
markup.deleted, punctuation.definition.deleted#dddbcb
markup.inserted, punctuation.definition.inserted#1b9aaa
markup.changed, punctuation.definition.changed#e8c87a
entity.other.inherited-class#7dd8e8
invalid, invalid.illegal#f14c4c
token.info-token#1b9aaa
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#0d4048
Teal Manuscript PS Theme by Pranav S S - VS Code Theme