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#D97706
  • activityBar.background#ECEFF1
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#D97706
  • activityBarBadge.foreground#F9FAF8
  • badge.background#D97706
  • badge.foreground#F9FAF8
  • button.background#2B2B2B
  • button.foreground#F9FAF8
  • button.hoverBackground#D9770680
  • dropdown.background#ECEFF1
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#F9FAF8
  • editor.findMatchBackground#E11D4C80
  • editor.findMatchHighlightBackground#E11D4C40
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#D9770620
  • editor.lineHighlightBorder#D9770640
  • editor.selectionBackground#2C7A7B40
  • editor.selectionHighlightBackground#2C7A7B30
  • editorBracketMatch.background#E11D4C20
  • editorBracketMatch.border#E11D4C40
  • editorCursor.foreground#D97706
  • editorGroupHeader.tabsBackground#F9FAF8
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#A8A8A8
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#D97706
  • gitDecoration.conflictingResourceForeground#D97706
  • gitDecoration.deletedResourceForeground#E11D48
  • gitDecoration.modifiedResourceForeground#2C7A7B
  • gitDecoration.untrackedResourceForeground#0EA5E9
  • input.background#ECEFF1
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#A8A8A8
  • inputOption.activeBorder#D97706
  • list.activeSelectionBackground#D9770640
  • list.activeSelectionForeground#F9FAF8
  • list.focusBackground#D9770640
  • list.highlightForeground#D97706
  • list.hoverBackground#D9770660
  • minimap.background#F9FAF8
  • minimapSlider.activeBackground#D9770666
  • minimapSlider.background#D9770622
  • minimapSlider.hoverBackground#D9770644
  • panel.background#F9FAF8
  • panel.border#C0C0C0
  • panelTitle.activeBorder#D97706
  • panelTitle.activeForeground#D97706
  • panelTitle.inactiveForeground#A8A8A8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D9770844
  • scrollbarSlider.background#C0C0C044
  • scrollbarSlider.hoverBackground#C0C0C088
  • sideBar.background#F1F3F4
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#ECEFF1
  • sideBarSectionHeader.foreground#2C7A7B
  • sideBarTitle.foreground#2C7A7B
  • statusBar.background#2B2B2B
  • statusBar.debuggingBackground#E11D48
  • statusBar.foreground#F9FAF8
  • statusBar.noFolderBackground#2B2B2B
  • statusBarItem.hoverBackground#D9770640
  • tab.activeBackground#F9FAF8
  • tab.activeBorder#D97706
  • tab.activeForeground#2B2B2B
  • tab.border#C0C0C0
  • tab.inactiveBackground#E0E0E0
  • tab.inactiveForeground#A8A8A8
  • terminal.ansiBlue#2C7A7B
  • terminal.ansiBrightBlue#53C0EB
  • terminal.ansiBrightCyan#5EEADF
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#E879F9
  • terminal.ansiBrightRed#F87171
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#0EA5E9
  • terminal.ansiGreen#10B981
  • terminal.ansiMagenta#C026D3
  • terminal.ansiRed#E11D48
  • terminal.ansiYellow#D97706
  • terminal.background#F9FAF8
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#ECEFF1
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F9FAF8
  • titleBar.inactiveForeground#A8A8A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#0EA5E9
keyword, storage.type, storage.modifier#D97706bold
keyword.operator, punctuation.accessor#2C7A7B
variable, variable.other#2B2B2B
variable.parameter#0EA5E9italic
entity.name.function, support.function#2C7A7B
meta.function-call#2C7A7B
entity.name.class, entity.name.type.class, support.class#D97706bold
entity.name.type, support.type#0EA5E9
entity.name.type.interface#0EA5E9italic
constant.numeric#10B981
constant, constant.language, constant.character#10B981
constant.language.boolean#D97706bold
variable.other.property, support.variable.property#2B2B2B
meta.object-literal.key#D97706
entity.name.tag, punctuation.definition.tag#D97706
entity.other.attribute-name#2C7A7Bitalic
punctuation, meta.brace#2B2B2B
string.regexp#C026D3
constant.character.escape#C026D3
meta.decorator, punctuation.decorator#D97706
invalid, invalid.illegal#E11D48strikethrough
markup.heading, entity.name.section#D97706bold
markup.bold#E11D48bold
markup.italic#D97706italic
markup.underline.link#0EA5E9
markup.inline.raw, markup.fenced_code#0EA5E9
support.type.property-name.json#D97706
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C026D3
support.type.property-name.css#D97706
support.constant.property-value.css#0EA5E9