Skip to main content
Coding Theme

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#222a36
  • activityBar.foreground#ECEEF1
  • activityBar.inactiveForeground#9FA9BB99
  • activityBarBadge.background#d02d3d
  • activityBarBadge.foreground#ECEEF1
  • badge.background#7E8CA499
  • badge.foreground#ECEEF1
  • breadcrumb.activeSelectionForeground#ECEEF1
  • button.background#2b73b2
  • button.foreground#ECEEF1
  • button.hoverBackground#2b73b2CC
  • checkbox.background#151b24
  • checkbox.border#2B3444
  • descriptionForeground#9FA9BB
  • diffEditor.border#151b24
  • diffEditor.insertedTextBackground#63bc6022
  • diffEditor.removedTextBackground#e7919922
  • dropdown.background#151b24
  • dropdown.border#2B3444
  • editor.background#1D242F
  • editor.foreground#9FA9BB
  • editor.lineHighlightBackground#1D242F
  • editor.selectionBackground#2B3444
  • editorBracketMatch.border#7E8CA433
  • editorCursor.foreground#ECEEF1
  • editorError.border#e79199
  • editorError.foreground#e79199
  • editorGroup.border#151b24
  • editorGroupHeader.tabsBackground#151b24
  • editorGutter.addedBackground#63bc60
  • editorGutter.deletedBackground#e79199
  • editorGutter.modifiedBackground#e39762
  • editorHint.foreground#80abe3
  • editorIndentGuide.background#2B3444
  • editorLineNumber.foreground#7E8CA499
  • editorLink.activeForeground#ECEEF1
  • editorOverviewRuler.addedForeground#63bc60
  • editorOverviewRuler.currentContentForeground#e79199
  • editorOverviewRuler.deletedForeground#e79199
  • editorOverviewRuler.errorForeground#e79199
  • editorOverviewRuler.modifiedForeground#e39762
  • editorOverviewRuler.warningForeground#bfa661
  • editorRuler.foreground#7E8CA4
  • editorWarning.foreground#bfa661
  • editorWhitespace.foreground#2B3444
  • editorWidget.background#222a36
  • editorWidget.resizeBorder#151b24
  • errorForeground#e79199
  • extensionBadge.remoteBackground#ac591f
  • extensionBadge.remoteForeground#ECEEF1
  • extensionButton.prominentBackground#327230
  • extensionButton.prominentForeground#ECEEF1
  • extensionButton.prominentHoverBackground#327230CC
  • focusBorder#9FA9BB
  • foreground#9FA9BB
  • gitDecoration.addedResourceForeground#63bc60
  • gitDecoration.conflictingResourceForeground#e79199
  • gitDecoration.deletedResourceForeground#e79199
  • gitDecoration.ignoredResourceForeground#7E8CA499
  • gitDecoration.modifiedResourceForeground#e39762
  • gitDecoration.untrackedResourceForeground#7E8CA4
  • icon.foreground#9FA9BB
  • input.background#151b24
  • input.border#2B3444
  • list.activeSelectionBackground#222a36
  • list.activeSelectionForeground#ECEEF1
  • list.errorForeground#e79199
  • list.focusBackground#2B3444
  • list.highlightForeground#80abe3
  • list.hoverBackground#222a36
  • list.inactiveSelectionBackground#222a36
  • list.inactiveSelectionForeground#ECEEF1
  • list.warningForeground#bfa661
  • listFilterWidget.background#222a36
  • listFilterWidget.outline#80abe3
  • menu.separatorBackground#222a36
  • minimap.selectionHighlight#222a36
  • notifications.background#222a36
  • panel.background#19202a
  • panel.border#151b24
  • panelTitle.activeForeground#ECEEF1
  • panelTitle.inactiveForeground#7E8CA4FF
  • peekViewResult.lineForeground#e39762
  • peekViewResult.selectionForeground#e39762
  • pickerGroup.border#222a36
  • pickerGroup.foreground#80abe3
  • scrollbar.shadow#151b24EE
  • scrollbarSlider.activeBackground#7E8CA4CC
  • scrollbarSlider.background#222a36
  • scrollbarSlider.hoverBackground#7E8CA455
  • selection.background#222a36
  • settings.headerForeground#ECEEF1
  • sideBar.background#19202a
  • sideBar.border#09121f
  • sideBarSectionHeader.background#222a36
  • statusBar.background#151b24
  • statusBar.border#151b24
  • statusBar.debuggingBackground#ac591f
  • statusBar.foreground#9FA9BB
  • statusBarItem.activeBackground#222a36
  • statusBarItem.hoverBackground#222a36
  • tab.activeBackground#1d242f
  • tab.activeBorderTop#ECEEF1
  • tab.activeForeground#ECEEF1
  • tab.inactiveBackground#151b24
  • tab.inactiveForeground#7E8CA4FF
  • terminal.ansiBlack#19202a
  • terminal.ansiBlue#80abe3
  • terminal.ansiCyan#69b3c8
  • terminal.ansiGreen#63bc60
  • terminal.ansiMagenta#e189e2
  • terminal.ansiRed#e79199
  • terminal.ansiWhite#eceef1
  • terminal.ansiYellow#bfa661
  • terminal.foreground#9FA9BB
  • terminal.selectionBackground#222a36
  • textLink.activeForeground#ECEEF1
  • textLink.foreground#80abe3
  • textPreformat.foreground#9FA9BB
  • textSeparator.foreground#2B3444
  • titleBar.activeBackground#151b24
  • titleBar.activeForeground#9FA9BB
  • titleBar.inactiveBackground#2B3444
  • tree.indentGuidesStroke#2B3444
  • widget.shadow#151b24EE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7E8CA4B0italic
string#63BC60
constant.numeric#E189E2
constant.language#E79199
constant.character, constant.other#67B6B2
variable#BFA661
keyword#80ABE3
storage#E79199
storage.type#E79199 italic
entity.name.class#E79199
entity.other.inherited-class#E79199
entity.name.function#B39DE2
variable.parameter#BFA661
entity.name.tag#E79199
entity.other.attribute-name#B39DE2
support.function#B39DE2
support.constant#67B6B2
support.type, support.class#E79199
source.css, meta.property-list.css, meta.property-name.css, support.type.property-name.css#9FA9BB
support.other.variable
invalid#E79199bold
invalid.deprecated#B39DE2bold
meta.structure.dictionary.json string.quoted.double.json#9FA9BB
meta.diff, meta.diff.header#7E8CA4
markup.deleted#E79199
markup.inserted#63BC60
markup.changed#e39762
punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.constant, #9FA9BB
RoRvsWild dark by Base Secrète - VS Code Theme