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#008C9E
  • activityBar.background#E0F9FB
  • activityBar.foreground#008C9E
  • activityBarBadge.background#008C9E
  • activityBarBadge.foreground#FFFFFF
  • badge.background#008C9E
  • badge.foreground#FFFFFF
  • button.background#008C9E
  • button.foreground#FFFFFF
  • button.hoverBackground#00777F
  • dropdown.background#FFFFFF
  • dropdown.border#DDDDDD
  • dropdown.foreground#2B3A4F
  • editor.background#FAFAF5
  • editor.findMatchBackground#C75B1080
  • editor.findMatchHighlightBackground#C75B1040
  • editor.foreground#2B3A4F
  • editor.lineHighlightBackground#F0F8FF
  • editor.lineHighlightBorder#E0F7FA
  • editor.selectionBackground#008C9E40
  • editor.selectionHighlightBackground#008C9E20
  • editorBracketMatch.background#E0F7FA33
  • editorBracketMatch.border#008C9E
  • editorCursor.foreground#008C9E
  • editorGroupHeader.tabsBackground#FAFAF5
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#B0BEC580
  • editorLineNumber.activeForeground#008C9E
  • editorLineNumber.foreground#7A8B9C
  • editorWhitespace.foreground#B0BEC5
  • focusBorder#008C9E
  • gitDecoration.conflictingResourceForeground#FDD835
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#008C9E
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#DDDDDD
  • input.foreground#2B3A4F
  • input.placeholderForeground#B0BEC5
  • inputOption.activeBorder#008C9E
  • list.activeSelectionBackground#E0F7FA
  • list.activeSelectionForeground#2B3A4F
  • list.focusBackground#E0F7FA
  • list.highlightForeground#008C9E
  • list.hoverBackground#E0F7FA80
  • minimap.background#FAFAF5
  • minimapSlider.activeBackground#008C9E66
  • minimapSlider.background#008C9E22
  • minimapSlider.hoverBackground#008C9E44
  • panel.background#FAFAF5
  • panel.border#DDDDDD
  • panelTitle.activeBorder#008C9E
  • panelTitle.activeForeground#008C9E
  • panelTitle.inactiveForeground#7A8B9C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#008C9E88
  • scrollbarSlider.background#B0BEC544
  • scrollbarSlider.hoverBackground#B0BEC588
  • sideBar.background#FFFFF9
  • sideBar.foreground#2B3A4F
  • sideBarSectionHeader.background#F1FAFC
  • sideBarSectionHeader.foreground#008C9E
  • sideBarTitle.foreground#008C9E
  • statusBar.background#008C9E
  • statusBar.debuggingBackground#C75B12
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#5C6BC0
  • statusBarItem.hoverBackground#008C9E80
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#008C9E
  • tab.activeForeground#2B3A4F
  • tab.border#DDDDDD
  • tab.inactiveBackground#FAFAF5
  • tab.inactiveForeground#7A8B9C
  • terminal.ansiBlue#5C6BC0
  • terminal.ansiBrightBlue#7986CB
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#008C9E
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FDD835
  • terminal.background#FAFAF5
  • terminal.foreground#2B3A4F
  • titleBar.activeBackground#E0F7FA
  • titleBar.activeForeground#2B3A4F
  • titleBar.inactiveBackground#FAFAF5
  • titleBar.inactiveForeground#7A8B9C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A8B5italic
string, string.quoted, string.template#C75B12
keyword, storage.type, storage.modifier#008C9Ebold
keyword.operator, punctuation.accessor#008C9E
variable, variable.other#2B3A4F
variable.parameter#A0A8B5italic
entity.name.function, support.function#009FAE
meta.function-call#009FAE
entity.name.class, entity.name.type.class, support.class#C75B12bold
entity.name.type, support.type#C75B12
entity.name.type.interface#C75B12italic
constant.numeric#7A5CCC
constant, constant.language, constant.character#C75B12
constant.language.boolean#7A5CCCbold
variable.other.property, support.variable.property#2B3A4F
meta.object-literal.key#C75B12
entity.name.tag, punctuation.definition.tag#008C9E
entity.other.attribute-name#008C9Eitalic
punctuation, meta.brace#2B3A4F
string.regexp#7A5CCC
constant.character.escape#C75B12
meta.decorator, punctuation.decorator#D99E0B
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#008C9Ebold
markup.bold#008C9Ebold
markup.italic#008C9Eitalic
markup.underline.link#C75B12
markup.inline.raw, markup.fenced_code#008C9E
support.type.property-name.json#C75B12
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D99E0B
support.type.property-name.css#C75B12
support.constant.property-value.css#008C9E