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#00B4D8
  • activityBar.background#F5E9D9
  • activityBar.foreground#00B4D8
  • activityBarBadge.background#00B4D8
  • activityBarBadge.foreground#FFFCF0
  • badge.background#00B4D8
  • badge.foreground#FFFCF0
  • button.background#00B4D8
  • button.foreground#FFFCF0
  • button.hoverBackground#29B6F6
  • dropdown.background#FFFFFF
  • dropdown.border#E0F7FA
  • dropdown.foreground#2E2E2E
  • editor.background#FFFCF0
  • editor.findMatchBackground#00B4D844
  • editor.findMatchHighlightBackground#00B4D822
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#E0F7FA40
  • editor.lineHighlightBorder#E0F7FA80
  • editor.selectionBackground#80DEEA55
  • editor.selectionHighlightBackground#80DEEA33
  • editorBracketMatch.background#00B4D833
  • editorBracketMatch.border#00B4D8
  • editorCursor.foreground#00B4D8
  • editorGroupHeader.tabsBackground#FFFCF0
  • editorIndentGuide.activeBackground#C0B9B080
  • editorIndentGuide.background#C0B9B050
  • editorLineNumber.activeForeground#00B4D8
  • editorLineNumber.foreground#A89F91
  • editorWhitespace.foreground#C0B9B0
  • focusBorder#00B4D8
  • gitDecoration.conflictingResourceForeground#FFB74D
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#00B4D8
  • gitDecoration.untrackedResourceForeground#9CCC65
  • input.background#FFFFFF
  • input.border#E0F7FA
  • input.foreground#2E2E2E
  • input.placeholderForeground#A89F91
  • inputOption.activeBorder#00B4D8
  • list.activeSelectionBackground#E0F7FA
  • list.activeSelectionForeground#000000
  • list.focusBackground#E0F7FA
  • list.highlightForeground#00B4D8
  • list.hoverBackground#E0F7FA66
  • minimap.background#FFFCF0
  • minimapSlider.activeBackground#00B4D866
  • minimapSlider.background#00B4D822
  • minimapSlider.hoverBackground#00B4D844
  • panel.background#FFFCF0
  • panel.border#E0F7FA
  • panelTitle.activeBorder#00B4D8
  • panelTitle.activeForeground#00B4D8
  • panelTitle.inactiveForeground#7A7AA
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00B4D888
  • scrollbarSlider.background#C0B9B044
  • scrollbarSlider.hoverBackground#C0B9B088
  • sideBar.background#FFF8EB
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F2E8DD
  • sideBarSectionHeader.foreground#00B4D8
  • sideBarTitle.foreground#00B4D8
  • statusBar.background#E0F7FA
  • statusBar.debuggingBackground#80DEEA
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#F2E8DD
  • statusBarItem.hoverBackground#B2EBF2
  • tab.activeBackground#FFFCF0
  • tab.activeBorder#00B4D8
  • tab.activeForeground#00B4D8
  • tab.border#E0E0E0
  • tab.inactiveBackground#FFF8EB
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#00B4D8
  • terminal.ansiBrightBlue#29B6F6
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#9CCC65
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFB74D
  • terminal.background#FFFCF0
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#F2E8DD
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FFFCF0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#0077B6
keyword, storage.type, storage.modifier#0066FFbold
keyword.operator, punctuation.accessor#66CCFF
variable, variable.other#555555
variable.parameter#66CCFFitalic
entity.name.function, support.function#3399FF
meta.function-call#3399FF
entity.name.class, entity.name.type.class, support.class#0066FFbold
entity.name.type, support.type#0066FF
entity.name.type.interface#66CCFFitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#3399FF
meta.object-literal.key#3399FF
entity.name.tag, punctuation.definition.tag#0066FF
entity.other.attribute-name#66CCFFitalic
punctuation, meta.brace#555555
string.regexp#FFB300
constant.character.escape#66CCFF
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF4D4Dstrikethrough
markup.heading, entity.name.section#0066FFbold
markup.bold#FFB300bold
markup.italic#66CCFFitalic
markup.underline.link#3399FF
markup.inline.raw, markup.fenced_code#0077B6
support.type.property-name.json#0066FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#66CCFF
support.type.property-name.css#3399FF
support.constant.property-value.css#0077B6