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#1F1D2E
  • activityBar.border#1F1D2E60
  • activityBar.foreground#E0DEF4
  • activityBarBadge.background#EBBCBA
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#6E6A86
  • breadcrumb.activeSelectionForeground#EBBCBA
  • breadcrumb.background#1F1D2E
  • breadcrumb.focusForeground#E0DEF4
  • breadcrumb.foreground#908CAA
  • breadcrumbPicker.background#1F1D2E
  • button.background#EBBCBA20
  • debugToolBar.background#1F1D2E
  • diffEditor.insertedLineBackground#31748F10
  • diffEditor.insertedTextBackground#31748F15
  • diffEditor.removedLineBackground#EB6F9210
  • diffEditor.removedTextBackground#EB6F9220
  • dropdown.background#1F1D2E
  • dropdown.border#FFFFFF10
  • editor.background#1F1D2E
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#EBBCBA
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff30
  • editor.foreground#E0DEF4
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#EBBCBA20
  • editor.selectionHighlightBackground#F6C17720
  • editorBracketMatch.background#1F1D2E
  • editorBracketMatch.border#EBBCBA50
  • editorCursor.foreground#EBBCBA
  • editorError.foreground#EB6F9270
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#1F1D2E
  • editorGutter.addedBackground#31748F60
  • editorGutter.deletedBackground#EB6F9260
  • editorGutter.modifiedBackground#9CCFD860
  • editorHoverWidget.background#1F1D2E
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#3A3750
  • editorIndentGuide.background#3A375070
  • editorInfo.foreground#9CCFD870
  • editorLineNumber.activeForeground#908CAA
  • editorLineNumber.foreground#3A3750
  • editorLink.activeForeground#E0DEF4
  • editorMarkerNavigation.background#E0DEF405
  • editorOverviewRuler.border#1F1D2E
  • editorOverviewRuler.errorForeground#EB6F9240
  • editorOverviewRuler.findMatchForeground#EBBCBA
  • editorOverviewRuler.infoForeground#9CCFD840
  • editorOverviewRuler.warningForeground#F6C17740
  • editorRuler.foreground#3A3750
  • editorSuggestWidget.background#1F1D2E
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#E0DEF4
  • editorSuggestWidget.highlightForeground#EBBCBA
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#F6C17770
  • editorWhitespace.foreground#E0DEF440
  • editorWidget.background#1F1D2E
  • editorWidget.border
  • editorWidget.resizeBorder#EBBCBA
  • extensionButton.prominentBackground#31748F90
  • extensionButton.prominentHoverBackground#31748F
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#F6C17790
  • gitDecoration.deletedResourceForeground#EB6F9290
  • gitDecoration.ignoredResourceForeground#908CAA90
  • gitDecoration.modifiedResourceForeground#9CCFD890
  • gitDecoration.untrackedResourceForeground#31748F90
  • input.background#26233A
  • input.border#FFFFFF10
  • input.foreground#E0DEF4
  • input.placeholderForeground#E0DEF460
  • inputOption.activeBackground#E0DEF430
  • inputOption.activeBorder#E0DEF430
  • inputValidation.errorBorder#EB6F9250
  • inputValidation.infoBorder#9CCFD850
  • inputValidation.warningBorder#F6C17750
  • list.activeSelectionBackground#1F1D2E
  • list.activeSelectionForeground#EBBCBA
  • list.focusBackground#E0DEF420
  • list.focusForeground#E0DEF4
  • list.highlightForeground#EBBCBA
  • list.hoverBackground#1F1D2E
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#EBBCBA
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#1F1D2E
  • menu.foreground#E0DEF4
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#EBBCBA
  • menu.separatorBackground#E0DEF4
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#EBBCBA
  • notificationLink.foreground#EBBCBA
  • notifications.background#1F1D2E
  • notifications.foreground#E0DEF4
  • panel.background#1F1D2E
  • panel.border#1F1D2E60
  • panel.dropBackground#E0DEF4
  • panelTitle.activeBorder#EBBCBA
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#E0DEF4
  • peekView.border#00000030
  • peekViewEditor.background#E0DEF405
  • peekViewEditor.matchHighlightBackground#EBBCBA20
  • peekViewEditorGutter.background#E0DEF405
  • peekViewResult.background#E0DEF405
  • peekViewResult.matchHighlightBackground#EBBCBA20
  • peekViewResult.selectionBackground#908CAA70
  • peekViewTitle.background#E0DEF405
  • peekViewTitleDescription.foreground#E0DEF460
  • pickerGroup.foreground#EBBCBA
  • progressBar.background#EBBCBA
  • scrollbar.shadow#1F1D2E00
  • scrollbarSlider.activeBackground#EBBCBA
  • scrollbarSlider.background#E0DEF420
  • scrollbarSlider.hoverBackground#E0DEF410
  • selection.background#EBBCBA
  • settings.checkboxBackground#1F1D2E
  • settings.checkboxForeground#E0DEF4
  • settings.dropdownBackground#1F1D2E
  • settings.dropdownForeground#E0DEF4
  • settings.headerForeground#EBBCBA
  • settings.modifiedItemIndicator#EBBCBA
  • settings.numberInputBackground#1F1D2E
  • settings.numberInputForeground#E0DEF4
  • settings.textInputBackground#1F1D2E
  • settings.textInputForeground#E0DEF4
  • sideBar.background#1F1D2E
  • sideBar.border#1F1D2E60
  • sideBar.foreground#908CAA
  • sideBarSectionHeader.background#1F1D2E
  • sideBarSectionHeader.border#1F1D2E60
  • sideBarTitle.foreground#E0DEF4
  • statusBar.background#1F1D2E
  • statusBar.border#1F1D2E60
  • statusBar.debuggingBackground#EB6F92
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#6E6A86
  • statusBar.noFolderBackground#1F1D2E
  • statusBarItem.hoverBackground#6E6A8620
  • statusBarItem.remoteBackground#EBBCBA
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#EBBCBA
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#908CAA
  • tab.border#1F1D2E
  • tab.inactiveBackground#1F1D2E
  • tab.inactiveForeground#908CAA
  • tab.unfocusedActiveBorder#6E6A86
  • tab.unfocusedActiveForeground#E0DEF4
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9CCFD8
  • terminal.ansiBrightBlack#6E6A86
  • terminal.ansiBrightBlue#9CCFD8
  • terminal.ansiBrightCyan#9CCFD8
  • terminal.ansiBrightGreen#31748F
  • terminal.ansiBrightMagenta#EB6F92
  • terminal.ansiBrightRed#EB6F92
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#F6C177
  • terminal.ansiCyan#9CCFD8
  • terminal.ansiGreen#31748F
  • terminal.ansiMagenta#EB6F92
  • terminal.ansiRed#EB6F92
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#F6C177
  • terminalCursor.background#000000
  • terminalCursor.foreground#F6C177
  • textLink.activeForeground#E0DEF4
  • textLink.foreground#EBBCBA
  • titleBar.activeBackground#1F1D2E
  • titleBar.activeForeground#E0DEF4
  • titleBar.border#1F1D2E60
  • titleBar.inactiveBackground#1F1D2E
  • titleBar.inactiveForeground#908CAA
  • tree.indentGuidesStroke#3A3750
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment, punctuation.definition.comment, string.quoted.docstring#6E6A86italic
variable, string constant.other.placeholder#E0DEF4
constant.other.php#F6C177
constant.other.color#ffffff
invalid, invalid.illegal#EB6F92
invalid.deprecated#C4A7E7
keyword, storage.type, storage.modifier#C4A7E7
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#9CCFD8
keyword.controlitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#EB6F92
entity.name.function, variable.function, support.function, keyword.other.special-method#9CCFD8
source.cpp meta.block variable.other#EB6F92
variable.other.constant#EB6F92
support.other.variable, string.other.link#EB6F92
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#F6C177
variable.parameter.function.language.special, variable.parameter#EB6F92
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#31748Fnormal
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#F6C177
support.type#C4A7E7
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#C4A7E7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EB6F92
variable.language#EB6F92italic
entity.name.method.js#9CCFD8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#9CCFD8
entity.other.attribute-name#C4A7E7italic
entity.other.attribute-name.class#F6C177
source.sass keyword.control#9CCFD8
markup.inserted#31748F
markup.deleted#EB6F92
markup.changed#C4A7E7
string.regexp#9CCFD8
constant.character.escape#9CCFD8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9CCFD8italic
source.js constant.other.object.key.js string.unquoted.label.js#EB6F92italic
source.json meta.structure.dictionary.json support.type.property-name.json#C4A7E7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F6C177
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#F6C177
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#EB6F92
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#B4838D
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#9CCFD8
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#EB6F92
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#C4A7E7
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#31748F
text.html.markdown, punctuation.definition.list_item.markdown#E0DEF4
text.html.markdown markup.inline.raw.markdown#C4A7E7
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#524F67
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#31748F
markup.italic#EB6F92italic
markup.bold, markup.bold string#EB6F92bold
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#EB6F92bold
markup.underline#F6C177underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#524F67
markup.quoteitalic
string.other.link.title.markdown#9CCFD8
string.other.link.description.title.markdown#C4A7E7
constant.other.reference.link.markdown#F6C177
markup.raw.block#C4A7E7
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#E0DEF490
variable.language.fenced.markdown#524F67
meta.separator#524F67bold
markup.table#E0DEF4
Matheme by cdbattags - VS Code Theme