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#090B10
  • activityBar.border#00000060
  • activityBar.foreground#8F93A2
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#464B5D
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#0F111A
  • breadcrumb.focusForeground#8F93A2
  • breadcrumb.foreground#4B526D
  • breadcrumbPicker.background#090B10
  • button.background#717CB450
  • debugToolBar.background#0F111A
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#0F111A
  • dropdown.border#FFFFFF10
  • editor.background#0F111A
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.foreground#8F93A2
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#717CB450
  • editor.selectionHighlightBackground#FFCC0020
  • editorBracketMatch.background#0F111A
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#FF537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#0F111A
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#0F111A
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#3B3F51
  • editorIndentGuide.background#3B3F5170
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#4B526D
  • editorLineNumber.foreground#3B3F5180
  • editorLink.activeForeground#8F93A2
  • editorMarkerNavigation.background#8F93A205
  • editorOverviewRuler.border#0F111A
  • editorOverviewRuler.errorForeground#FF537040
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#3B3F51
  • editorSuggestWidget.background#0F111A
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#8F93A2
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#8F93A240
  • editorWidget.background#090B10
  • editorWidget.border
  • editorWidget.resizeBorder#80CBC4
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#FF537090
  • gitDecoration.ignoredResourceForeground#4B526D90
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#1A1C25
  • input.border#FFFFFF10
  • input.foreground#EEFFFF
  • input.placeholderForeground#8F93A260
  • inputOption.activeBackground#8F93A230
  • inputOption.activeBorder#8F93A230
  • inputValidation.errorBorder#FF537050
  • inputValidation.infoBorder#82AAFF50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#090B10
  • list.activeSelectionForeground#80CBC4
  • list.focusBackground#8F93A220
  • list.focusForeground#8F93A2
  • list.highlightForeground#80CBC4
  • list.hoverBackground#090B10
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#0F111A
  • menu.foreground#8F93A2
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#8F93A2
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notificationLink.foreground#80CBC4
  • notifications.background#0F111A
  • notifications.foreground#8F93A2
  • panel.background#090B10
  • panel.border#00000060
  • panel.dropBackground#8F93A2
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#8F93A2
  • peekView.border#00000030
  • peekViewEditor.background#8F93A205
  • peekViewEditor.matchHighlightBackground#717CB450
  • peekViewEditorGutter.background#8F93A205
  • peekViewResult.background#8F93A205
  • peekViewResult.matchHighlightBackground#717CB450
  • peekViewResult.selectionBackground#4B526D70
  • peekViewTitle.background#8F93A205
  • peekViewTitleDescription.foreground#8F93A260
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • scrollbar.shadow#0F111A00
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#8F93A220
  • scrollbarSlider.hoverBackground#8F93A210
  • selection.background#80CBC4
  • settings.checkboxBackground#090B10
  • settings.checkboxForeground#8F93A2
  • settings.dropdownBackground#090B10
  • settings.dropdownForeground#8F93A2
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#090B10
  • settings.numberInputForeground#8F93A2
  • settings.textInputBackground#090B10
  • settings.textInputForeground#8F93A2
  • sideBar.background#090B10
  • sideBar.border#00000060
  • sideBar.foreground#4B526D
  • sideBarSectionHeader.background#090B10
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#8F93A2
  • statusBar.background#090B10
  • statusBar.border#00000060
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4B526D
  • statusBar.noFolderBackground#0F111A
  • statusBarItem.hoverBackground#464B5D20
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#4B526D
  • tab.border#0F111A
  • tab.inactiveBackground#0F111A
  • tab.inactiveForeground#4B526D
  • tab.unfocusedActiveBorder#464B5D
  • tab.unfocusedActiveForeground#8F93A2
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#464B5D
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCB6B
  • textLink.activeForeground#8F93A2
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#090B10
  • titleBar.activeForeground#8F93A2
  • titleBar.border#00000060
  • titleBar.inactiveBackground#090B10
  • titleBar.inactiveForeground#4B526D
  • tree.indentGuidesStroke#3B3F51
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#ffffff—
comment, punctuation.definition.comment, string.quoted.docstring#464B5Ditalic
variable#5da3e5—
meta.object-literal.key#b2b2b2bold
string constant.other.placeholder#527ea8—
constant.other.color#7f8686—
invalid, invalid.illegal#FF5370—
invalid.deprecated#C792EA—
keyword#a397e6—
storage.type, storage.modifier#16637ebold
Keyword, Storage—italic
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#a973cd—
keyword.control, constant.other.color, punctuation.definition.tag#1d587aitalic bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#738119—
entity.name.function#8989cebold
variable.function, support.function, keyword.other.special-method#2a94ccbold
variable.other.constant#c3ae64bold
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#e68a6fbold
variable.parameter.function.language.special, variable.parameter#7a61e7italic bold
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#a3ce63—
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#FFCB6Bbold
support.type#B2CCD6—
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#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370—
variable.language#9b30b9italic bold
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF—
entity.other.attribute-name#C792EAitalic
entity.other.attribute-name.class#FFCB6B—
source.sass keyword.control#82AAFF—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA—
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#F78C6C—
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#82AAFF—
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#C792EA—
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#8F93A2—
text.html.markdown markup.inline.raw.markdown#C792EA—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#80869E50—
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#F78C6Cunderline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#80869E50—
markup.quoteitalic
string.other.link.title.markdown#82AAFF—
string.other.link.description.title.markdown#C792EA—
constant.other.reference.link.markdown#FFCB6B—
markup.raw.block#C792EA—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#8F93A290—
variable.language.fenced.markdown#80869E50—
meta.separator#80869E50bold
markup.table#8F93A2—