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.activeBackground#00000000
  • activityBar.activeBorder#00000000
  • activityBar.background#191B1F
  • activityBar.border#131518
  • activityBar.dropBorder#66A3FF
  • activityBar.foreground#66A3FF
  • activityBar.inactiveForeground#8A94A1
  • activityBarBadge.background#66A3FF
  • activityBarBadge.foreground#ffffff
  • badge.background#66A3FF
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#66A3FF
  • breadcrumb.focusForeground#66A3FF
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#1E2226
  • button.background#00398F
  • button.border#00398F
  • button.foreground#ffffff
  • button.hoverBackground#0047B3
  • button.secondaryBackground#00000000
  • button.secondaryForeground#66A3FF
  • button.secondaryHoverBackground#66A3FF10
  • checkbox.background#30353B
  • checkbox.border#1D2023
  • checkbox.foreground#66A3FF
  • checkbox.selectBorder#1D2023
  • commandCenter.activeBackground#17181C
  • commandCenter.activeBorder#131518
  • commandCenter.activeForeground#66A3FF
  • commandCenter.background#181A1D
  • commandCenter.border#131518
  • commandCenter.foreground#CCCCCC
  • commandCenter.inactiveBorder#13151850
  • commandCenter.inactiveForeground#CCCCCC60
  • descriptionForeground#8A94A1
  • disabledForeground#808080
  • dropdown.background#30353B
  • dropdown.border#1D2023
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#30353B
  • editor.background#1E2226
  • editor.findMatchBackground#0066FF70
  • editor.findMatchHighlightBackground#0066FF70
  • editor.foldBackground#00FF0015
  • editor.foreground#CCCCCC
  • editor.inactiveSelectionBackground#0066FF70
  • editor.lineHighlightBackground#272C31
  • editor.selectionBackground#0066FF70
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#0066ff
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#1B1F2310
  • editorBracketMatch.border#1B1F2350
  • editorCursor.foreground#66A3FF
  • editorGroup.border#131518
  • editorGroup.dropBackground#1E2226
  • editorGroup.emptyBackground#1E2226
  • editorGroup.focusedEmptyBorder#66A3FF
  • editorGroupHeader.border#131518
  • editorGroupHeader.noTabsBackground#191B1F
  • editorGroupHeader.tabsBackground#191B1F
  • editorGroupHeader.tabsBorder#131518
  • editorIndentGuide.activeBackground#8F8F8F
  • editorIndentGuide.background#3D3D3D
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#CCCCCC60
  • editorOverviewRuler.border#00000000
  • editorPane.background#1E2226
  • editorRuler.foreground#FF000020
  • editorWhitespace.foreground#CCCCCC50
  • editorWidget.background#131518
  • editorWidget.border#131518
  • errorForeground#FF6666
  • focusBorder#66A3FF
  • foreground#CCCCCC
  • gitDecoration.addedResourceForeground#006600
  • gitDecoration.conflictingResourceForeground#E60000
  • gitDecoration.deletedResourceForeground#E60000
  • gitDecoration.ignoredResourceForeground#727F8E
  • gitDecoration.modifiedResourceForeground#AD4A06
  • gitDecoration.renamedResourceForeground#0047B3
  • gitDecoration.stageDeletedResourceForeground#E60000
  • gitDecoration.stageModifiedResourceForeground#AD4A06
  • gitDecoration.submoduleResourceForeground#727F8E
  • gitDecoration.untrackedResourceForeground#006600
  • icon.foreground#CCCCCC
  • input.background#30353B
  • input.border#1D2023
  • input.foreground#CCCCCC
  • input.placeholderForeground#727F8E
  • inputOption.activeBackground#66A3FF
  • inputOption.activeBorder#66A3FF
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#30353B
  • inputValidation.errorBorder#ff0000
  • inputValidation.errorForeground#ff0000
  • inputValidation.infoBackground#30353B
  • inputValidation.infoBorder#0066ff
  • inputValidation.infoForeground#0066ff
  • inputValidation.warningBackground#30353B
  • inputValidation.warningBorder#f66a0a
  • inputValidation.warningForeground#f66a0a
  • list.activeSelectionBackground#393F47
  • list.activeSelectionForeground#66A3FF
  • list.dropBackground#0066FF30
  • list.errorForeground#ff0000
  • list.filterMatchBackground#0066FF30
  • list.focusBackground#30353B
  • list.focusOutline#00000000
  • list.hoverBackground#30353B
  • list.hoverForeground#66A3FF
  • list.inactiveFocusBackground#393F47
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#393F47
  • list.inactiveSelectionForeground#66A3FF
  • list.inactiveSelectionIconForeground#8A94A1
  • list.warningForeground#f66a0a
  • listFilterWidget.background#30353B
  • menu.background#2D3138
  • menu.border#131518
  • menu.foreground#CCCCCC
  • menu.selectionBackground#434A53
  • menu.selectionBorder#00000000
  • menu.selectionForeground#66A3FF
  • menu.separatorBackground#434A53
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#CCCCCC
  • minimap.findMatchHighlight#0066ff
  • minimap.selectionHighlight#0066ff
  • notificationCenterHeader.background#1E2226
  • notificationCenterHeader.foreground#66A3FF
  • notifications.background#1E2226
  • notifications.border#131518
  • notifications.foreground#CCCCCC
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#0066ff
  • notificationsWarningIcon.foreground#f66a0a
  • notificationToast.border#131518
  • panel.background#191B1F
  • panel.border#131518
  • panelInput.border#131518
  • panelTitle.activeBorder#66A3FF
  • panelTitle.activeForeground#66A3FF
  • panelTitle.inactiveForeground#808080
  • peekView.border#66A3FF
  • peekViewEditor.background#191C20
  • peekViewEditor.matchHighlightBackground#0066FF70
  • peekViewResult.background#191B1F
  • peekViewResult.matchHighlightBackground#0066FF70
  • peekViewResult.selectionForeground#66A3FF
  • peekViewTitle.background#191B1F
  • profileBadge.background#66A3FF
  • profileBadge.foreground#ffffff
  • progressBar.background#66A3FF
  • sash.hoverBorder#131518
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#FFFFFF50
  • scrollbarSlider.background#FFFFFF15
  • scrollbarSlider.hoverBackground#FFFFFF30
  • selection.background#0066FF70
  • settings.headerForeground#66A3FF
  • settings.modifiedItemIndicator#943F05
  • sideBar.background#191B1F
  • sideBar.border#131518
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#191B1F
  • sideBarSectionHeader.border#131518
  • sideBarSectionHeader.foreground#727F8E
  • sideBarTitle.foreground#727F8E
  • sideBySideEditor.horizontalBorder#131518
  • sideBySideEditor.verticalBorder#131518
  • statusBar.background#191B1F
  • statusBar.border#131518
  • statusBar.debuggingBackground#99FF99
  • statusBar.focusBorder#131518
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#191B1F
  • statusBar.noFolderBorder#131518
  • statusBar.noFolderForeground#CCCCCC
  • statusBarItem.activeBackground#191B1F
  • statusBarItem.errorBackground#FF9999
  • statusBarItem.errorHoverBackground#FF9999
  • statusBarItem.focusBorder#131518
  • statusBarItem.hoverBackground#1E2226
  • statusBarItem.hoverForeground#CCCCCC
  • statusBarItem.remoteBackground#191B1F
  • statusBarItem.remoteForeground#CCCCCC
  • statusBarItem.warningBackground#FFFF99
  • statusBarItem.warningHoverBackground#FFFF99
  • tab.activeBackground#1E2226
  • tab.activeBorder#1E2226
  • tab.activeBorderTop#00000000
  • tab.activeForeground#66A3FF
  • tab.border#131518
  • tab.dragAndDropBorder#66A3FF
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#808080
  • tab.unfocusedActiveBackground#1E2226
  • tab.unfocusedActiveBorder#1E2226
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#808080
  • tab.unfocusedHoverForeground#66A3FF
  • tab.unfocusedInactiveForeground#808080
  • terminal.background#191B1F
  • terminal.border#131518
  • terminal.foreground#CCCCCC
  • terminal.selectionBackground#0066FF70
  • terminalCursor.background#66A3FF
  • terminalCursor.foreground#66A3FF
  • textBlockQuote.background#0D1012
  • textBlockQuote.border#80B3FF
  • textCodeBlock.background#262A2F
  • textLink.activeForeground#3385FF
  • textLink.foreground#0066ff
  • textPreformat.background#262A2F
  • textPreformat.foreground#00CC00
  • textSeparator.foreground#000000
  • titleBar.activeBackground#191B1F
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#131518
  • titleBar.inactiveBackground#1D2125
  • titleBar.inactiveForeground#CCCCCC60
  • toolbar.activeBackground#2C2F36
  • toolbar.hoverBackground#282B32
  • toolbar.hoverOutline#00000000
  • tree.indentGuidesStroke#4C545F
  • widget.border#131518
  • widget.shadow#1B1F2330

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#CCCCCC—
emphasis—italic
strong—bold
comment#727F8E—
constant#FAA66D—
constant.numeric#FF4D4D—
entity#00B3A7—
entity.name.function#E600E5—
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution—italic
entity.name.tag, punctuation.definition.tag#12ADD5—
entity.other.attribute-name#00B3A7—
invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented#ff0000italic
keyword, keyword.operator.new, keyword.operator.expression#12ADD5bold
keyword.operator#12ADD5normal
storage#12ADD5bold
string#80B3FF—
string.regexp, string.regexp constant.character.escape, string.regexp keyword, string.regexp keyword.operator#FAA66Dnormal
support#00B3A7—
support.function#E600E5—
variable#00BF00—
variable.language#12ADD5—
variable.other#CCCCCC—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#12ADD5—
entity.other.attribute-name.pseudo-class.css#727F8E—
support.type.property-name.css#00B3A7—
entity.name.tag.custom.css, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, support.constant.color, constant.other.color.rgb-value, constant.other.rgb-value#E600E5—
keyword.other.unit#FF4D4Dnormal
variable.css, variable.scss, variable.other.less#00BF00—
source.java storage.type, source.java storage.modifier.import#00B3A7italic
markup.heading entity.name#CCCCCCbold
markup.heading#CCCCCCbold
markup.quote#00B3A7—
markup.underline—underline
markup.strikethrough—strikethrough
markup.underline.link#80B3FFunderline
markup.italic—italic
markup.bold—bold
markup.bold markup.italic—bold italic
markup.inserted#00B3A7—
markup.deleted#ff0000strikethrough
markup.raw#CCCCCC—
markup.inline.raw#E600E5—