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#1b1b1b
  • activityBar.border#1b1b1b60
  • activityBar.foreground#c0c0c0
  • activityBarBadge.background#80c7bc
  • activityBarBadge.foreground#0f0f0f
  • badge.background#0f0f0f
  • badge.foreground#575757
  • breadcrumb.activeSelectionForeground#80c7bc
  • breadcrumb.background#1b1b1b
  • breadcrumb.focusForeground#c0c0c0
  • breadcrumb.foreground#7f7e7e
  • breadcrumbPicker.background#1b1b1b
  • button.background#2c2c2c
  • debugToolBar.background#1b1b1b
  • diffEditor.insertedTextBackground#a6b08315
  • diffEditor.removedTextBackground#a5757220
  • dropdown.background#1b1b1b
  • dropdown.border#c0c0c010
  • editor.background#1b1b1b
  • editor.findMatchBackground#d8b77520
  • editor.findMatchBorder#d0b88860
  • editor.findMatchHighlightBackground#d8b77520
  • editor.findMatchHighlightBorder#d8b77530
  • editor.foreground#c0c0c0
  • editor.lineHighlightBackground#0f0f0f
  • editor.selectionBackground#2c2c2c
  • editor.selectionHighlightBackground#c0c0c020
  • editor.wordHighlightBackground#82a4c330
  • editor.wordHighlightStrongBackground#82a4c330
  • editorBracketMatch.background#1b1b1b
  • editorBracketMatch.border#c0c0c050
  • editorCursor.foreground#c0c0c0
  • editorError.foreground#b56e6aa0
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGutter.addedBackground#a5b56ba0
  • editorGutter.deletedBackground#b56e6aa0
  • editorGutter.modifiedBackground#82a4c3a0
  • editorHoverWidget.background#1b1b1b
  • editorHoverWidget.border#c0c0c010
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInfo.foreground#82a4c3a0
  • editorLineNumber.activeForeground#7f7e7e
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#c0c0c0
  • editorMarkerNavigation.background#c0c0c005
  • editorOverviewRuler.border#1b1b1b
  • editorOverviewRuler.errorForeground#b56e6a40
  • editorOverviewRuler.findMatchForeground#80c7bc
  • editorOverviewRuler.infoForeground#82a4c340
  • editorOverviewRuler.warningForeground#d8b77540
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#1b1b1b
  • editorSuggestWidget.border#c0c0c010
  • editorSuggestWidget.foreground#c0c0c0
  • editorSuggestWidget.highlightForeground#80c7bc
  • editorSuggestWidget.selectedBackground#0f0f0f
  • editorWarning.foreground#d8b775a0
  • editorWhitespace.foreground#c0c0c040
  • editorWidget.background#1b1b1b
  • editorWidget.border#ff0000
  • editorWidget.resizeBorder#80c7bc
  • extensionButton.prominentBackground#a5b56b90
  • extensionButton.prominentHoverBackground#a5b56b
  • focusBorder#c0c0c000
  • foreground#c0c0c0
  • gitDecoration.conflictingResourceForeground#d0b88890
  • gitDecoration.deletedResourceForeground#a5757290
  • gitDecoration.ignoredResourceForeground#7f7e7e90
  • gitDecoration.modifiedResourceForeground#8ca2b690
  • gitDecoration.untrackedResourceForeground#a6b08390
  • input.background#2c2c2c
  • input.border#c0c0c010
  • input.foreground#c0c0c0
  • input.placeholderForeground#c0c0c060
  • inputValidation.errorBorder#a5757250
  • inputValidation.infoBorder#8ca2b650
  • inputValidation.warningBorder#d0b88850
  • list.activeSelectionBackground#1b1b1b
  • list.activeSelectionForeground#80c7bc
  • list.focusBackground#c0c0c020
  • list.focusForeground#c0c0c0
  • list.highlightForeground#80c7bc
  • list.hoverBackground#1b1b1b
  • list.hoverForeground#c0c0c0
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80c7bc
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#1b1b1b
  • menu.foreground#c0c0c0
  • menu.selectionBackground#0f0f0f
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80c7bc
  • menu.separatorBackground#c0c0c0
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80c7bc
  • notificationLink.foreground#80c7bc
  • notifications.background#1b1b1b
  • notifications.foreground#c0c0c0
  • panel.background#1b1b1b
  • panel.border#1b1b1b60
  • panelTitle.activeBorder#80c7bc
  • panelTitle.activeForeground#c0c0c0
  • panelTitle.inactiveForeground#c0c0c0
  • peekView.border#00000030
  • peekViewEditor.background#c0c0c005
  • peekViewEditor.matchHighlightBackground#2c2c2c
  • peekViewEditorGutter.background#c0c0c005
  • peekViewResult.background#c0c0c005
  • peekViewResult.matchHighlightBackground#2c2c2c
  • peekViewResult.selectionBackground#7f7e7e70
  • peekViewTitle.background#c0c0c005
  • peekViewTitleDescription.foreground#c0c0c060
  • pickerGroup.foreground#80c7bc
  • progressBar.background#80c7bc
  • scrollbar.shadow#1b1b1b00
  • scrollbarSlider.activeBackground#c0c0c010
  • scrollbarSlider.background#c0c0c020
  • scrollbarSlider.hoverBackground#c0c0c010
  • selection.background#80c7bc
  • settings.checkboxBackground#1b1b1b
  • settings.checkboxForeground#c0c0c0
  • settings.dropdownBackground#1b1b1b
  • settings.dropdownForeground#c0c0c0
  • settings.headerForeground#80c7bc
  • settings.modifiedItemIndicator#80c7bc
  • settings.numberInputBackground#1b1b1b
  • settings.numberInputForeground#c0c0c0
  • settings.textInputBackground#1b1b1b
  • settings.textInputForeground#c0c0c0
  • sideBar.background#1b1b1b
  • sideBar.border#1b1b1b60
  • sideBar.foreground#7f7e7e
  • sideBarSectionHeader.background#1b1b1b
  • sideBarSectionHeader.border#1b1b1b60
  • sideBarTitle.foreground#c0c0c0
  • statusBar.background#1b1b1b
  • statusBar.border#1b1b1b60
  • statusBar.debuggingBackground#1b1b1b
  • statusBar.debuggingForeground#a186a3
  • statusBar.foreground#7f7e7e
  • statusBar.noFolderBackground#1b1b1b
  • statusBarItem.hoverBackground#57575720
  • statusBarItem.remoteBackground#80c7bc
  • statusBarItem.remoteForeground#0f0f0f
  • tab.activeBorder#80c7bc
  • tab.activeForeground#c0c0c0
  • tab.activeModifiedBorder#7f7e7e
  • tab.border#1b1b1b
  • tab.inactiveBackground#1b1b1b
  • tab.inactiveForeground#575757
  • tab.unfocusedActiveBorder#575757
  • tab.unfocusedActiveForeground#c0c0c0
  • terminal.ansiBlack#0f0f0f
  • terminal.ansiBlue#8ca2b6
  • terminal.ansiBrightBlack#575757
  • terminal.ansiBrightBlue#8ca2b6
  • terminal.ansiBrightCyan#9abbb6
  • terminal.ansiBrightGreen#a6b083
  • terminal.ansiBrightMagenta#a186a3
  • terminal.ansiBrightRed#a57572
  • terminal.ansiBrightWhite#e7e7e7
  • terminal.ansiBrightYellow#d0b888
  • terminal.ansiCyan#9abbb6
  • terminal.ansiGreen#a6b083
  • terminal.ansiMagenta#a186a3
  • terminal.ansiRed#a57572
  • terminal.ansiWhite#e7e7e7
  • terminal.ansiYellow#d0b888
  • terminalCursor.background#0f0f0f
  • terminalCursor.foreground#d0b888
  • textLink.activeForeground#c0c0c0
  • textLink.foreground#80c7bc
  • titleBar.activeBackground#1b1b1b
  • titleBar.activeForeground#c0c0c0
  • titleBar.border#1b1b1b60
  • titleBar.inactiveBackground#1b1b1b
  • titleBar.inactiveForeground#7f7e7e
  • tree.indentGuidesStroke#424242
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#575757italic
variable, string constant.other.placeholder#C0C0C0
constant.other.php#D0B888
constant.other.color#E7E7E7
invalid, invalid.illegal#A57572
invalid.deprecated#A186A3
keyword, storage.type, storage.modifier#A186A3
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#9ABBB6
keyword.controlitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#C585A8
entity.name.function, variable.function, support.function, keyword.other.special-method#8CA2B6
source.cpp meta.block variable.other#C585A8
variable.other.constant#C585A8
support.other.variable, string.other.link#C585A8
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#C59B75
variable.parameter.function.language.special, variable.parameter#A57572
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#A6B083normal
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#D0B888
support.type#9ABBB6
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#9ABBB6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#A57572
variable.language#A57572italic
entity.name.method.js#8CA2B6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#8CA2B6
entity.other.attribute-name#A186A3italic
entity.other.attribute-name.class#D0B888
source.sass keyword.control#8CA2B6
markup.inserted#A6B083
markup.deleted#A57572
markup.changed#A186A3
string.regexp#9ABBB6
constant.character.escape#9ABBB6
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8CA2B6italic
source.js constant.other.object.key.js string.unquoted.label.js#A57572italic
source.json meta.structure.dictionary.json support.type.property-name.json#A186A3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D0B888
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#C59B75
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#A57572
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#8F6E58
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#8CA2B6
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#C585A8
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#A186A3
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#A6B083
text.html.markdown, punctuation.definition.list_item.markdown#C0C0C0
text.html.markdown markup.inline.raw.markdown#A186A3
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#424242
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#A6B083
markup.italic#C585A8italic
markup.bold, markup.bold string#C585A8bold
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#C585A8bold
markup.underline#C59B75underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#424242
markup.quoteitalic
string.other.link.title.markdown#8CA2B6
string.other.link.description.title.markdown#A186A3
constant.other.reference.link.markdown#D0B888
markup.raw.block#A186A3
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#C0C0C090
variable.language.fenced.markdown#424242
meta.separator#424242bold
markup.table#C0C0C0
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Best Themes Redefined 🚀 by Lakshit Somani - VS Code Theme