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#DDE6F5
  • activityBar.background#101522
  • activityBar.border#243247
  • activityBar.foreground#F4F8FF
  • activityBar.inactiveForeground#A2AFC3
  • activityBarBadge.background#214F9D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#214F9D
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#D3DEEF
  • button.background#6F8FC8
  • button.foreground#FFFFFF
  • button.hoverBackground#84A2D9
  • checkbox.background#C7D3E8
  • checkbox.border#DDE6F5
  • checkbox.foreground#0D111A
  • commandCenter.activeBackground#243854
  • commandCenter.background#1B2538
  • commandCenter.border#243247
  • commandCenter.foreground#F4F8FF
  • contrastActiveBorder#9EE6FF
  • contrastBorder#243247
  • editor.background#0C1018
  • editor.findMatchBackground#F8C169D0
  • editor.findMatchHighlightBackground#F8C16955
  • editor.foreground#F4F8FF
  • editor.inactiveSelectionBackground#4A6FA45C
  • editor.lineHighlightBackground#273754
  • editor.lineHighlightBorder#93B4E9
  • editor.selectionBackground#5C8FD680
  • editor.selectionHighlightBackground#89B8FF44
  • editor.wordHighlightBackground#89B8FF33
  • editor.wordHighlightStrongBackground#C7EEFF55
  • editorBracketHighlight.foreground1#CFBE89
  • editorBracketHighlight.foreground2#8AD8FF
  • editorBracketHighlight.foreground3#CFDAED
  • editorBracketHighlight.foreground4#D6C2FF
  • editorCursor.foreground#C9EEFF
  • editorError.foreground#FF7F8E
  • editorGroup.border#243247
  • editorGroupHeader.tabsBackground#111725
  • editorGroupHeader.tabsBorder#243247
  • editorGutter.addedBackground#49D18D
  • editorGutter.deletedBackground#FF6B7A
  • editorGutter.modifiedBackground#60A5FA
  • editorHint.foreground#A7F0D1
  • editorHoverWidget.background#1B2538
  • editorHoverWidget.border#8EA3C7
  • editorHoverWidget.foreground#F4F8FF
  • editorInfo.foreground#8AD8FF
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#7C8BA5
  • editorSuggestWidget.background#1B2538
  • editorSuggestWidget.border#8EA3C7
  • editorSuggestWidget.foreground#F4F8FF
  • editorSuggestWidget.selectedBackground#304A72
  • editorWarning.foreground#FFD98A
  • editorWidget.background#1B2538
  • editorWidget.border#8EA3C7
  • focusBorder#9EE6FF
  • foreground#F4F8FF
  • gitDecoration.addedResourceForeground#49D18D
  • gitDecoration.conflictingResourceForeground#F8C169
  • gitDecoration.deletedResourceForeground#FF6B7A
  • gitDecoration.ignoredResourceForeground#7D8CA5
  • gitDecoration.modifiedResourceForeground#60A5FA
  • gitDecoration.untrackedResourceForeground#8CF0C8
  • input.background#1B2538
  • input.border#8EA3C7
  • input.foreground#F4F8FF
  • input.placeholderForeground#A2AFC3
  • list.activeSelectionBackground#3E5E90
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#243854
  • list.inactiveSelectionBackground#304A72
  • menu.background#1C2638
  • menu.border#243247
  • menu.foreground#F5F8FF
  • menu.selectionBackground#5E83BC
  • menu.selectionForeground#FFFFFF
  • notifications.background#1B2538
  • notifications.border#243247
  • notifications.foreground#F4F8FF
  • panel.background#101623
  • panel.border#243247
  • panelTitle.activeForeground#F5F8FF
  • panelTitle.inactiveForeground#A2AFC3
  • pickerGroup.border#243247
  • pickerGroup.foreground#D8C89A
  • problemsErrorIcon.foreground#FF6B7A
  • problemsInfoIcon.foreground#7FD3FF
  • problemsWarningIcon.foreground#FFD84D
  • progressBar.background#CFBE89
  • quickInput.background#1B2538
  • quickInput.foreground#F4F8FF
  • quickInputList.focusBackground#304A72
  • scrollbarSlider.activeBackground#B4CBF180
  • scrollbarSlider.background#7F95BA66
  • scrollbarSlider.hoverBackground#9AB1D480
  • sideBar.background#111725
  • sideBar.border#243247
  • sideBar.foreground#E7EDF9
  • sideBarSectionHeader.background#171F30
  • sideBarSectionHeader.foreground#CFE7FF
  • sideBarTitle.foreground#F5F8FF
  • statusBar.background#3B527A
  • statusBar.border#DDE6F5
  • statusBar.debuggingBackground#8A1F2F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.errorBackground#8A1F2F
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.prominentBackground#214F9D
  • statusBarItem.prominentForeground#EAF4FF
  • statusBarItem.remoteBackground#3B2B73
  • statusBarItem.remoteForeground#F4EEFF
  • statusBarItem.warningBackground#7A5A12
  • statusBarItem.warningForeground#FFF6D6
  • tab.activeBackground#1B2538
  • tab.activeBorderTop#D8C89A
  • tab.activeForeground#FFFFFF
  • tab.border#243247
  • tab.inactiveBackground#101623
  • tab.inactiveForeground#B4C0D4
  • terminal.ansiBlack#101521
  • terminal.ansiBlue#8EB7FF
  • terminal.ansiBrightBlack#8A98AF
  • terminal.ansiBrightBlue#B8D3FF
  • terminal.ansiBrightCyan#C9F1FF
  • terminal.ansiBrightGreen#CCF9E8
  • terminal.ansiBrightMagenta#E9DBFF
  • terminal.ansiBrightRed#FFACB5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE9BD
  • terminal.ansiCyan#8AD8FF
  • terminal.ansiGreen#A7F0D1
  • terminal.ansiMagenta#D6C2FF
  • terminal.ansiRed#FF7F8E
  • terminal.ansiWhite#EAF0FF
  • terminal.ansiYellow#FFD98A
  • terminal.background#0C1018
  • terminal.foreground#F4F8FF
  • terminalCursor.foreground#C9EEFF
  • testing.iconFailed#FF6B7A
  • testing.iconPassed#49D18D
  • testing.iconQueued#FFD84D
  • titleBar.activeBackground#101522
  • titleBar.activeForeground#F4F8FF
  • titleBar.border#243247
  • titleBar.inactiveBackground#101522
  • titleBar.inactiveForeground#A2AFC3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#697991italic
comment.block.documentation, comment.documentation#8499B8italic
keyword, storage, keyword.control, keyword.control.flow, keyword.operator.word, storage.modifier, storage.type#CDD9E9bold
keyword.operator, punctuation.separator, punctuation.terminator#7D93B5
entity.name.function, support.function, support.function.builtin, entity.name.function.member, meta.function-call, variable.function#54E1FF
string, string.template, punctuation.definition.string#A7F0D1
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.namespace, support.type, support.class, storage.type#F7FBFF
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.character.escape, constant.other.symbol#E7C985bold
variable, meta.definition.variable#C2D0E4
variable.other.property, variable.object.property, variable.other.constant#A8BDD9
entity.name.tag, entity.other.attribute-name, support.type.property-name, meta.object-literal.key#8CCEFF
variable.parameter, meta.parameter.object-pattern#9CC9FF
constant.other, variable.language#BF974B
invalid, invalid.illegal#FF7F8Ebold
markup.bold, markup.heading#F4F8FFbold
markup.italic#93A8C8italic
markup.inline.raw, markup.fenced_code.block#A7F0D1
punctuation.section.embedded, punctuation.definition.template-expression, punctuation.bracket, punctuation.definition.tag#7D93B5