Skip to main content
CodingTheme

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#272727
  • activityBar.foreground#d0dada
  • activityBarBadge.background#c8daf4
  • activityBarBadge.foreground#1f57a4
  • badge.background#c8daf4
  • badge.foreground#1f57a4
  • button.background#b8c1c1
  • button.foreground#000000
  • button.hoverBackground#8c9696
  • descriptionForeground#9fa7a7
  • dropdown.background#b8c1c1
  • dropdown.border#9fa7a7
  • dropdown.foreground#000000
  • dropdown.listBackground#b8c1c1
  • editor.background#0D1112
  • editor.foreground#B3B3B3
  • editor.lineHighlightBackground#333333
  • editor.selectionBackground#294a52
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.noTabsBackground#343334
  • editorGroupHeader.tabsBackground#343334
  • editorGutter.background#0D1112
  • editorIndentGuide.activeBackground#0D1112
  • editorIndentGuide.background#0D1112
  • editorRuler.foreground#777777
  • editorWhitespace.foreground#000000
  • focusBorder#9fa7a7
  • foreground#EAEAEA
  • gitDecoration.addedResourceForeground#cfffce
  • gitDecoration.conflictingResourceForeground#ecc068
  • gitDecoration.deletedResourceForeground#f39191
  • gitDecoration.ignoredResourceForeground#ecc068
  • gitDecoration.modifiedResourceForeground#f8ff9b
  • gitDecoration.submoduleResourceForeground#ecc068
  • gitDecoration.untrackedResourceForeground#22aaaf
  • input.background#343334
  • input.border#595859
  • list.activeSelectionBackground#a6a5a6
  • list.activeSelectionForeground#000000
  • list.dropBackground#eaeaea91
  • list.errorForeground#c6a21a
  • list.focusBackground#2d74da
  • list.focusForeground#e4e4e4
  • list.highlightForeground#e39d14
  • list.hoverBackground#8c9696
  • list.hoverForeground#EAEAEA
  • list.inactiveFocusBackground#a6a5a6
  • list.inactiveSelectionBackground#a6a5a6
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#EAEAEA
  • list.warningForeground#f7aac3
  • selection.background#91721f
  • settings.dropdownBackground#EAEAEA
  • settings.dropdownForeground#464646
  • sideBar.background#303030
  • sideBar.foreground#EAEAEA
  • sideBarTitle.foreground#d0dada
  • statusBar.background#272727
  • statusBar.debuggingBackground#3d1717
  • statusBar.foreground#d0dada
  • statusBar.noFolderBackground#272727
  • tab.activeBackground#464646
  • tab.activeBorder#b8c1c1
  • tab.activeForeground#EAEAEA
  • tab.border#343334
  • tab.inactiveBackground#343334
  • tab.inactiveForeground#d0dada
  • titleBar.activeBackground#272727
  • titleBar.activeForeground#d0dada
  • titleBar.border#272727
  • titleBar.inactiveBackground#595859
  • titleBar.inactiveForeground#b8c1c1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#575757
string#B3B3B3 bold
constant.numeric#B3B3B3 bold
constant.language#B3B3B3 bold
constant.character, constant.other#B3B3B3 bold
variable#B3B3B3 bold
keyword#B3B3B3 bold
storage#B3B3B3 bold
storage.type#B3B3B3 bold
entity.name.class#B3B3B3underline bold
entity.other.inherited-class#B3B3B3italic underline bold
entity.name.function#F0F0F0 bold
variable.parameter#B3B3B3italic bold
entity.name.tag#B3B3B3 bold
entity.other.attribute-name#B3B3B3 bold
support.function#B3B3B3 bold
support.constant#B3B3B3 bold
support.type, support.class#B3B3B3italic bold
support.other.variable#B3B3B3 bold
invalid#B3B3B3
invalid.deprecated#B3B3B3

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...