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#101917
  • activityBar.border#00000060
  • activityBar.foreground#C2EDD3
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#476352
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#141F1D
  • breadcrumb.focusForeground#C2EDD3
  • breadcrumb.foreground#485E51
  • breadcrumbPicker.background#101917
  • button.background#71B48050
  • debugToolBar.background#141F1D
  • diffEditor.insertedLineBackground#C3E88D10
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedLineBackground#FF537010
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#141F1D
  • dropdown.border#FFFFFF10
  • editor.background#141F1D
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.foreground#C2EDD3
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#71B48050
  • editor.selectionHighlightBackground#FFCC0020
  • editorBracketMatch.background#141F1D
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#FF537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#141F1D
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#6FA0DE60
  • editorHoverWidget.background#141F1D
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#52735C
  • editorIndentGuide.background#52735C70
  • editorInfo.foreground#6FA0DE70
  • editorLineNumber.activeForeground#485E51
  • editorLineNumber.foreground#52735C
  • editorLink.activeForeground#C2EDD3
  • editorMarkerNavigation.background#C2EDD305
  • editorOverviewRuler.border#141F1D
  • editorOverviewRuler.errorForeground#FF537040
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#6FA0DE40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#52735C
  • editorSuggestWidget.background#141F1D
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#C2EDD3
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#C2EDD340
  • editorWidget.background#101917
  • editorWidget.border
  • editorWidget.resizeBorder#80CBC4
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#FF537090
  • gitDecoration.ignoredResourceForeground#485E5190
  • gitDecoration.modifiedResourceForeground#6FA0DE90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#1A2520
  • input.border#FFFFFF10
  • input.foreground#D9FFE3
  • input.placeholderForeground#C2EDD360
  • inputOption.activeBackground#C2EDD330
  • inputOption.activeBorder#C2EDD330
  • inputValidation.errorBorder#FF537050
  • inputValidation.infoBorder#6FA0DE50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#101917
  • list.activeSelectionForeground#80CBC4
  • list.focusBackground#C2EDD320
  • list.focusForeground#C2EDD3
  • list.highlightForeground#80CBC4
  • list.hoverBackground#101917
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#141F1D
  • menu.foreground#C2EDD3
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#C2EDD3
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notificationLink.foreground#80CBC4
  • notifications.background#141F1D
  • notifications.foreground#C2EDD3
  • panel.background#101917
  • panel.border#00000060
  • panel.dropBackground#C2EDD3
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#C2EDD3
  • peekView.border#00000030
  • peekViewEditor.background#C2EDD305
  • peekViewEditor.matchHighlightBackground#71B48050
  • peekViewEditorGutter.background#C2EDD305
  • peekViewResult.background#C2EDD305
  • peekViewResult.matchHighlightBackground#71B48050
  • peekViewResult.selectionBackground#485E5170
  • peekViewTitle.background#C2EDD305
  • peekViewTitleDescription.foreground#C2EDD360
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • scrollbar.shadow#141F1D00
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#C2EDD320
  • scrollbarSlider.hoverBackground#C2EDD310
  • selection.background#80CBC4
  • settings.checkboxBackground#101917
  • settings.checkboxForeground#C2EDD3
  • settings.dropdownBackground#101917
  • settings.dropdownForeground#C2EDD3
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#101917
  • settings.numberInputForeground#C2EDD3
  • settings.textInputBackground#101917
  • settings.textInputForeground#C2EDD3
  • sideBar.background#101917
  • sideBar.border#00000060
  • sideBar.foreground#485E51
  • sideBarSectionHeader.background#101917
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#C2EDD3
  • statusBar.background#101917
  • statusBar.border#00000060
  • statusBar.debuggingBackground#A68DCD
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4D6A59
  • statusBar.noFolderBackground#141F1D
  • statusBarItem.hoverBackground#47635220
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#485E51
  • tab.border#141F1D
  • tab.inactiveBackground#141F1D
  • tab.inactiveForeground#485E51
  • tab.unfocusedActiveBorder#476352
  • tab.unfocusedActiveForeground#C2EDD3
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6FA0DE
  • terminal.ansiBrightBlack#476352
  • terminal.ansiBrightBlue#6FA0DE
  • terminal.ansiBrightCyan#74C9DE
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#A68DCD
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#74C9DE
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#A68DCD
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCB6B
  • textLink.activeForeground#C2EDD3
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#101917
  • titleBar.activeForeground#C2EDD3
  • titleBar.border#00000060
  • titleBar.inactiveBackground#101917
  • titleBar.inactiveForeground#485E51
  • tree.indentGuidesStroke#52735C
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment, punctuation.definition.comment, string.quoted.docstring#476352italic
variable, string constant.other.placeholder#C2EDD3
constant.other.php#FFCB6B
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
invalid.deprecated#A68DCD
keyword, storage.type, storage.modifier#A68DCD
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, 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#74C9DE
keyword.controlitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
entity.name.function, variable.function, support.function, keyword.other.special-method#6FA0DE
source.cpp meta.block variable.other#f07178
variable.other.constant#f07178
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#CC8868
variable.parameter.function.language.special, variable.parameter#FF5370
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#C3E88Dnormal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B
support.type#95BBBD
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#95BBBD
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#6FA0DEitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#6FA0DE
entity.other.attribute-name#A68DCDitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#6FA0DE
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#A68DCD
string.regexp#74C9DE
constant.character.escape#74C9DE
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6FA0DEitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#A68DCD
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#CC8868
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#FF5370
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#C17E70
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#6FA0DE
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#f07178
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#A68DCD
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#C2EDD3
text.html.markdown markup.inline.raw.markdown#A68DCD
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#CC8868underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#6FA0DE
string.other.link.description.title.markdown#A68DCD
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#A68DCD
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#C2EDD390
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#C2EDD3