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—