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#292929
  • editor.foreground#D1D1D1
  • editor.lineHighlightBackground#3c4344
  • editor.selectionBackground#8D9EA1
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.noTabsBackground#343334
  • editorGroupHeader.tabsBackground#343334
  • editorGutter.background#292929
  • editorIndentGuide.activeBackground#292929
  • editorIndentGuide.background#292929
  • editorRuler.foreground#777777
  • editorWhitespace.foreground#292929
  • focusBorder#9fa7a7
  • foreground#D1D1D1
  • 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#5C5C5C
string#FFFFFF
constant.numeric#D656D6
constant.language#D656D6
constant.character, constant.other#D656D6
variable#e62b88
keyword#F02B2B
storage#F02B2B italic
storage.type#009CDF italic
entity.name.class#5EBD3Eunderline
entity.other.inherited-class#5EBD3Eitalic underline
entity.name.function#5EBD3E
variable.parameter#F78200
entity.name.tag#F02B2B
entity.other.attribute-name#009CDF
support.function#7B82D9
support.constant#7B82D9
support.type, support.class#7B82D9italic
support.other.variable#e62b88
invalid#FFFFFF
invalid.deprecated#FFFFFF

Shiki preview

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

Loading...

Nineties by jibjack - VS Code Theme