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#1F2A44
  • activityBar.background#E3E9F1
  • activityBar.foreground#1F2A44
  • activityBarBadge.background#1D4ED8
  • activityBarBadge.foreground#FAFAFD
  • badge.background#0D9488
  • badge.foreground#FAFAFD
  • button.background#1D4ED8
  • button.foreground#FAFAFD
  • button.hoverBackground#60A5FA
  • dropdown.background#F0F4FA
  • dropdown.border#1D4ED8
  • dropdown.foreground#2E3C5A
  • editor.background#FAFAFD
  • editor.findMatchBackground#0D948844
  • editor.findMatchHighlightBackground#0D948822
  • editor.foreground#2E3C5A
  • editor.lineHighlightBackground#DCE4EE80
  • editor.lineHighlightBorder#1D4ED8
  • editor.selectionBackground#1D4ED840
  • editor.selectionHighlightBackground#1D4ED830
  • editorBracketMatch.background#0D948833
  • editorBracketMatch.border#0D9488
  • editorCursor.foreground#1F2A44
  • editorGroupHeader.tabsBackground#FAFAFD
  • editorIndentGuide.activeBackground#C5D0DF88
  • editorIndentGuide.background#C5D0DF44
  • editorLineNumber.activeForeground#1F2A44
  • editorLineNumber.foreground#A3B1C2
  • editorWhitespace.foreground#A3B1C2
  • focusBorder#1F2A44
  • gitDecoration.conflictingResourceForeground#F59E0B
  • gitDecoration.deletedResourceForeground#EF4444
  • gitDecoration.modifiedResourceForeground#1D4ED8
  • gitDecoration.untrackedResourceForeground#10B981
  • input.background#F0F4FA
  • input.border#1D4ED8
  • input.foreground#2E3C5A
  • input.placeholderForeground#A3B1C2
  • inputOption.activeBorder#1F2A44
  • list.activeSelectionBackground#DCE4EE80
  • list.activeSelectionForeground#1F2A44
  • list.focusBackground#DCE4EE80
  • list.highlightForeground#1F2A44
  • list.hoverBackground#DCE4EE60
  • minimap.background#FAFAFD
  • minimapSlider.activeBackground#C5D0DF88
  • minimapSlider.background#C5D0DF22
  • minimapSlider.hoverBackground#C5D0DF44
  • panel.background#FAFAFD
  • panel.border#1D4ED8
  • panelTitle.activeBorder#1F2A44
  • panelTitle.activeForeground#1F2A44
  • panelTitle.inactiveForeground#8A94A6
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#C5D0DFAA
  • scrollbarSlider.background#C5D0DF44
  • scrollbarSlider.hoverBackground#C5D0DF88
  • sideBar.background#F0F4FA
  • sideBar.foreground#2E3C5A
  • sideBarSectionHeader.background#E3E9F1
  • sideBarSectionHeader.foreground#1D4ED8
  • sideBarTitle.foreground#1F2A44
  • statusBar.background#E3E9F1
  • statusBar.debuggingBackground#0D9488
  • statusBar.foreground#1F2A44
  • statusBar.noFolderBackground#E3E9F1
  • statusBarItem.hoverBackground#1D4ED8
  • tab.activeBackground#FAFAFD
  • tab.activeBorder#1D4ED8
  • tab.activeForeground#1F2A44
  • tab.border#E3E9F1
  • tab.inactiveBackground#F0F4FA
  • tab.inactiveForeground#8A94A6
  • terminal.ansiBlue#1D4ED8
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#2DD4BF
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#F87171
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#0D948E
  • terminal.ansiGreen#10B981
  • terminal.ansiMagenta#9333EA
  • terminal.ansiRed#EF4444
  • terminal.ansiYellow#F59E0B
  • terminal.background#FAFAFD
  • terminal.foreground#2E3C5A
  • titleBar.activeBackground#E3E9F1
  • titleBar.activeForeground#1F2A44
  • titleBar.inactiveBackground#F0F4FA
  • titleBar.inactiveForeground#8A94A6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7280italic
string, string.quoted, string.template#0F766E
keyword, storage.type, storage.modifier#3B82F6bold
keyword.operator, punctuation.accessor#60A5FA
variable, variable.other#E0E8F0
variable.parameter#10B981italic
entity.name.function, support.function#F2F8FF
meta.function-call#F2F8FF
entity.name.class, entity.name.type.class, support.class#60A5FAbold
entity.name.type, support.type#60A5FA
entity.name.type.interface#0F766Eitalic
constant.numeric#F59E0B
constant, constant.language, constant.character#F59E0B
constant.language.boolean#F59E0Bbold
variable.other.property, support.variable.property#E0E8F0
meta.object-literal.key#60A5FA
entity.name.tag, punctuation.definition.tag#3B82F6
entity.other.attribute-name#9333EAitalic
punctuation, meta.brace#60A5FA
string.regexp#F59E0B
constant.character.escape#9333EA
meta.decorator, punctuation.decorator#C084FC
invalid, invalid.illegal#EF4444strikethrough
markup.heading, entity.name.section#3B82F6bold
markup.bold#F2F8FFbold
markup.italic#60A5FAitalic
markup.underline.link#0F766E
markup.inline.raw, markup.fenced_code#10B981
support.type.property-name.json#3B82F6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C084FC
support.type.property-name.css#60A5FA
support.constant.property-value.css#0F766E