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#ff3b30
  • activityBar.background#e6f0ff
  • activityBar.foreground#0d47a1
  • activityBarBadge.background#ff3b30
  • activityBarBadge.foreground#ffffff
  • badge.background#ff3b30
  • badge.foreground#ffffff
  • button.background#0d47a1
  • button.foreground#ffffff
  • button.hoverBackground#0b3d91
  • dropdown.background#ffffff
  • dropdown.border#c2dfff
  • dropdown.foreground#212529
  • editor.background#ffffff
  • editor.findMatchBackground#ffb3b3
  • editor.findMatchHighlightBackground#ffd6d6
  • editor.foreground#212529
  • editor.lineHighlightBackground#e6f0ff
  • editor.lineHighlightBorder#c2dfff
  • editor.selectionBackground#b3d4fc
  • editor.selectionHighlightBackground#d0e6ff
  • editorBracketMatch.background#cce5ff
  • editorBracketMatch.border#99c2ff
  • editorCursor.foreground#0d47a1
  • editorGroupHeader.tabsBackground#f0f4ff
  • editorIndentGuide.activeBackground#a3c2ff
  • editorIndentGuide.background#d0d7de
  • editorLineNumber.activeForeground#0d47a1
  • editorLineNumber.foreground#6c757d
  • editorWhitespace.foreground#c8c8c8
  • focusBorder#ff3b30
  • gitDecoration.conflictingResourceForeground#e91e63
  • gitDecoration.deletedResourceForeground#ff3b30
  • gitDecoration.modifiedResourceForeground#ff9800
  • gitDecoration.untrackedResourceForeground#4caf50
  • input.background#ffffff
  • input.border#c2dfff
  • input.foreground#212529
  • input.placeholderForeground#6c757d
  • inputOption.activeBorder#ff3b30
  • list.activeSelectionBackground#cce5ff
  • list.activeSelectionForeground#0d47a1
  • list.focusBackground#d0e6ff
  • list.highlightForeground#ff3b30
  • list.hoverBackground#e6f0ff
  • minimap.background#ffffff00
  • minimapSlider.activeBackground#a3c2ffd0
  • minimapSlider.background#a3c2ff80
  • minimapSlider.hoverBackground#a3c2ffbf
  • panel.background#f7fbff
  • panel.border#c2dfff
  • panelTitle.activeBorder#ff3b30
  • panelTitle.activeForeground#0d47a1
  • panelTitle.inactiveForeground#6c757d
  • scrollbar.shadow#c2dfff
  • scrollbarSlider.activeBackground#a3c2ffd0
  • scrollbarSlider.background#a3c2ff80
  • scrollbarSlider.hoverBackground#a3c2ffbf
  • sideBar.background#f7fbff
  • sideBar.foreground#212529
  • sideBarSectionHeader.background#e6f0ff
  • sideBarSectionHeader.foreground#0d47a1
  • sideBarTitle.foreground#0d47a1
  • statusBar.background#0d47a1
  • statusBar.debuggingBackground#ff3b30
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0d47a1
  • statusBarItem.hoverBackground#0b3d91
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff3b30
  • tab.activeForeground#0d47a1
  • tab.border#d0d7de
  • tab.inactiveBackground#f0f4ff
  • tab.inactiveForeground#6c757d
  • terminal.ansiBlue#0d47a1
  • terminal.ansiBrightBlue#1565c0
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#66bb6a
  • terminal.ansiBrightMagenta#ec407a
  • terminal.ansiBrightRed#ff6659
  • terminal.ansiBrightYellow#fff176
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#4caf50
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#ff3b30
  • terminal.ansiYellow#ffeb3b
  • terminal.background#ffffff
  • terminal.foreground#212529
  • titleBar.activeBackground#e6f0ff
  • titleBar.activeForeground#0d47a1
  • titleBar.inactiveBackground#f0f4ff
  • titleBar.inactiveForeground#6c757d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c757ditalic
string, string.quoted, string.template#c62828
keyword, storage.type, storage.modifier#0d47a1bold
keyword.operator, punctuation.accessor#0d47a1
variable, variable.other#212529
variable.parameter#6c757ditalic
entity.name.function, support.function#ff3b30
meta.function-call#ff5722
entity.name.class, entity.name.type.class, support.class#0d47a1bold
entity.name.type, support.type#ff3b30
entity.name.type.interface#0d47a1italic
constant.numeric#ff9800
constant, constant.language, constant.character#ff9800
constant.language.boolean#ff9800bold
variable.other.property, support.variable.property#212529
meta.object-literal.key#0d47a1
entity.name.tag, punctuation.definition.tag#ff3b30
entity.other.attribute-name#0d47a1italic
punctuation, meta.brace#212529
string.regexp#d32f2f
constant.character.escape#d32f2f
meta.decorator, punctuation.decorator#ff3b30
invalid, invalid.illegal#ff1744strikethrough
markup.heading, entity.name.section#0d47a1bold
markup.bold#0d47a1bold
markup.italic#6c757ditalic
markup.underline.link#ff3b30
markup.inline.raw, markup.fenced_code#d84315
support.type.property-name.json#0d47a1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0d47a1
support.type.property-name.css#ff3b30
support.constant.property-value.css#d32f2f