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.activeBorder#1C2328
  • activityBar.background#1C2328
  • activityBar.foreground#dbdddc
  • activityBar.inactiveForeground#dbdddc66
  • activityBarBadge.background#1C2328
  • activityBarBadge.foreground#dbdddc
  • badge.background#1C2328
  • badge.foreground#dbdddc
  • banner.background#384751
  • banner.foreground#dddd
  • banner.iconForeground#ADE2FF
  • breadcrumb.activeSelectionForeground#dbdddc99
  • breadcrumb.background#111619
  • breadcrumb.focusForeground#dbdddc
  • breadcrumb.foreground#dbdddc66
  • breadcrumbPicker.background#1C2328
  • button.background#1C2328
  • button.foreground#dbdddc
  • button.hoverBackground#1C232866
  • button.secondaryForeground#dbdddc
  • debugConsole.infoForeground#ADE2FF
  • editor.background#1C2328
  • editor.foreground#dbdddc
  • editor.selectionBackground#ADE2FF66
  • editorGroupHeader.tabsBackground#1C2328
  • editorInfo.foreground#ADE2FF
  • editorMarkerNavigationInfo.background#ADE2FF
  • editorMarkerNavigationInfo.headerBackground#ADE2FF33
  • editorOverviewRuler.infoForeground#ADE2FF
  • editorSuggestWidget.selectedBackground#1C2328
  • extensionBadge.remoteBackground#1C2328
  • extensionBadge.remoteForeground#dbdddc
  • extensionButton.prominentBackground#1C2328
  • extensionButton.prominentForeground#dbdddc
  • extensionIcon.verifiedForeground#ADE2FF
  • focusBorder#6E90A399
  • foreground#dbdddccc
  • input.background#1C2328
  • input.foreground#dbdddc
  • interactive.activeCodeBorder#dbdddc66
  • list.activeSelectionBackground#1C2328
  • list.inactiveSelectionBackground#1C2328
  • menu.background#1C2328
  • menu.foreground#dbdddc
  • menu.selectionBackground#111619
  • notificationLink.foreground#ADE2FF
  • notificationsInfoIcon.foreground#ADE2FF
  • panel.background#111619
  • peekView.border#1C2328bb
  • peekViewEditor.background#1C2328
  • peekViewEditor.matchHighlightBackground#ADE2FF33
  • peekViewEditorGutter.background#1C232899
  • peekViewResult.background#111619
  • peekViewResult.matchHighlightBackground#ADE2FF33
  • peekViewResult.selectionBackground#1C232866
  • peekViewTitle.background#ADE2FF33
  • pickerGroup.foreground#ADE2FF
  • problemsInfoIcon.foreground#ADE2FF
  • quickInputList.focusBackground#1C2328
  • scrollbarSlider.activeBackground#1C2328
  • scrollbarSlider.background#1C232866
  • scrollbarSlider.hoverBackground#1C2328bb
  • settings.checkboxBackground#1C232899
  • settings.checkboxBorder#1C2328
  • settings.dropdownBackground#1C2328
  • settings.focusedRowBackground#1C232833
  • settings.numberInputBackground#1C2328
  • settings.rowHoverBackground#1C232866
  • settings.textInputBackground#1C2328
  • sideBar.background#111619
  • sideBarSectionHeader.background#6E90A333
  • statusBar.background#1C2328
  • statusBar.debuggingBackground#1f2c0f
  • statusBarItem.remoteBackground#384751
  • tab.activeBackground#2A353D
  • tab.border#0c0c0a
  • tab.inactiveBackground#1C2328
  • textLink.activeForeground#ADE2FF
  • textLink.foreground#ADE2FFcc
  • titleBar.activeBackground#2A353D
  • titleBar.inactiveBackground#1C2328
  • welcomePage.progress.foreground#ADE2FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4c8italic
keyword.control.directive.include, keyword.preprocessor, keyword.other.using, keyword.control.import, keyword.control.from#adc
constant, support.constant, support.type.builtin#8ac
keyword, keyword.other.this, keyword.control#4bb
entity.name.type#8ab
storage.type, entity.other.inherited-class#4bb
support.type.primitive#9ba
storage.modifier#6a4
entity.name.function, support.function#9cc
string#789
meta.block, variable, variable.language#808280
support.type.object, variable.other.object#b0bbb7
entity.name, entity.name.variable, entity.other.attribute-name, meta.object-literal, support.type.property-name, variable.other.property, variable.other.object.property#9aa
variable.language.this, entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#4ab
punctuation, keyword.operator#789

Shiki preview

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

Loading...