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.background#151623
  • activityBar.foreground#7dcfff
  • activityBar.inactiveForeground#6d8ab0
  • activityBarBadge.background#8FBCBB
  • activityBarBadge.foreground#151623
  • badge.background#8FBCBB
  • badge.foreground#151623
  • button.background#8FBCBB
  • button.foreground#151623
  • button.hoverBackground#A3BE8C
  • button.secondaryBackground#2d304a
  • button.secondaryForeground#e4f0fb
  • button.secondaryHoverBackground#3d4260
  • editor.background#1a1c2e
  • editor.foreground#e4f0fb
  • editor.lineHighlightBackground#2d304a70
  • editor.lineHighlightBorder#3d406830
  • editor.selectionBackground#5d729066
  • editor.selectionHighlightBackground#5d729033
  • editor.wordHighlightBackground#5d729033
  • editor.wordHighlightStrongBackground#5d729044
  • editorBracketMatch.background#5d729033
  • editorBracketMatch.border#7dcfff80
  • editorCursor.foreground#7dcfff
  • editorGroup.border#242640
  • editorGroupHeader.border#24264080
  • editorGroupHeader.noTabsBackground#151623
  • editorGroupHeader.tabsBackground#15162399
  • editorGroupHeader.tabsBorder#24264080
  • editorLineNumber.activeForeground#a3c4e6
  • editorLineNumber.foreground#586380
  • editorSuggestWidget.background#1d1f36
  • editorSuggestWidget.border#242640
  • editorSuggestWidget.highlightForeground#7dcfff
  • editorSuggestWidget.selectedBackground#2d304a
  • editorWidget.background#1d1f36
  • editorWidget.border#242640
  • input.background#1d1f36
  • input.foreground#e4f0fb
  • input.placeholderForeground#6d8ab0
  • inputOption.activeBackground#7dcfff22
  • inputOption.activeBorder#7dcfff
  • list.activeSelectionBackground#2d304a
  • list.activeSelectionForeground#e4f0fb
  • list.focusBackground#2d304a88
  • list.focusOutline#7dcfff55
  • list.highlightForeground#7dcfff
  • list.hoverBackground#2d304a44
  • list.inactiveSelectionBackground#242640
  • list.inactiveSelectionForeground#b6dff2
  • menu.background#1d1f36
  • menu.foreground#e4f0fb
  • menu.selectionBackground#2d304a
  • menu.selectionBorder#7dcfff55
  • menu.selectionForeground#e4f0fb
  • menubar.selectionBackground#2d304a
  • menubar.selectionBorder#7dcfff55
  • menubar.selectionForeground#e4f0fb
  • notifications.background#1d1f36
  • notifications.foreground#e4f0fb
  • notificationToast.border#242640
  • panel.background#1a1c2e
  • panel.border#242640
  • panelTitle.activeBorder#7dcfff
  • panelTitle.activeForeground#7dcfff
  • panelTitle.inactiveForeground#6d8ab0
  • scrollbarSlider.activeBackground#7dcfff55
  • scrollbarSlider.background#4C566A44
  • scrollbarSlider.hoverBackground#4C566A66
  • sideBar.background#191b30
  • sideBar.border#242640
  • sideBar.foreground#b6dff2
  • statusBar.background#151623
  • statusBar.foreground#b6dff2
  • statusBar.noFolderBackground#1d1e2e
  • statusBarItem.hoverBackground#2d304a
  • statusBarItem.remoteBackground#8FBCBB
  • statusBarItem.remoteForeground#151623
  • tab.activeBackground#1a1c2eee
  • tab.activeBorder#7dcfff
  • tab.activeBorderTop#7dcfff
  • tab.activeForeground#e4f0fb
  • tab.inactiveBackground#191b30aa
  • tab.inactiveForeground#6d8ab0
  • tab.unfocusedActiveBorder#445b75
  • tab.unfocusedActiveBorderTop#445b75
  • terminal.ansiBlack#3B4252
  • terminal.ansiBlue#81A1C1
  • terminal.ansiCyan#88C0D0
  • terminal.ansiGreen#A3BE8C
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#BF616A
  • terminal.ansiWhite#E5E9F0
  • terminal.ansiYellow#EBCB8B
  • terminal.background#1a1c2e
  • terminal.foreground#e4f0fb
  • titleBar.activeBackground#151623cc
  • titleBar.activeForeground#b6dff2
  • titleBar.border#242640
  • titleBar.inactiveBackground#15162399
  • titleBar.inactiveForeground#586380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7b8ac7italic
keyword#7dcfffbold
keyword.control, keyword.operator.logical, keyword.operator.new#7dcfffbold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison#88C0D0—
variable.language.this#B48EADitalic bold
constant.language.null#BF616Aitalic
constant.language.undefined#BF616Aitalic
constant.language.boolean#EBCB8Bitalic
string#A3BE8C—
string.quoted.single, string.quoted.double, string.template#A3BE8C—
string.regexp, constant.regexp#EBCB8B—
constant.character, constant.character.escape#B48EAD—
variable, variable.other.readwrite, variable.parameter, variable.other.object#e4f0fb—
variable.other.property, variable.other.object.property#8FBCBB—
entity.name.function, support.function#7dcfff
entity.name.namespace, entity.name.type.namespace#EBCB8Bitalic
entity.name.macro, entity.name.other.preprocessor.macro#BF616Abold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.decimal, constant.numeric.hex#B48EAD—
storage.type, storage.modifier#8FBCBBbold
entity.name.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7dcfff—
entity.other.attribute-name#8FBCBB—
punctuation, meta.brace, meta.delimiter#7b8ac7—
punctuation.section, punctuation.brackets, punctuation.parenthesis#88C0D0—
support.class, entity.name.type, entity.name.class, entity.other.inherited-class#EBCB8B
support.constant, support.variable#88C0D0—
constant.language#81A1C1italic
meta.object-literal.key, support.type.property-name#8FBCBB—
markup.heading, markup.heading.markdown#EBCB8Bbold
markup.italic, markup.italic.markdown#e4f0fbitalic
markup.bold, markup.bold.markdown#e4f0fbbold
markup.quote, markup.quote.markdown#A3BE8Citalic
markup.inline.raw, markup.fenced_code.block.markdown#7dcfff—
markup.underline.link.markdown, markup.underline.link#88C0D0underline