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#0a1f44
  • activityBar.background#0a1f44
  • activityBar.foreground#ffffff
  • activityBarBadge.background#009688
  • activityBarBadge.foreground#ffffff
  • badge.background#009688
  • badge.foreground#ffffff
  • button.background#0a1f44
  • button.foreground#ffffff
  • button.hoverBackground#0a1f44cc
  • dropdown.background#f0f0f0
  • dropdown.border#cfd8dc
  • dropdown.foreground#111111
  • editor.background#fafafa
  • editor.findMatchBackground#00968840
  • editor.findMatchHighlightBackground#00968830
  • editor.foreground#111111
  • editor.lineHighlightBackground#0a1f4420
  • editor.lineHighlightBorder#0a1f44c0
  • editor.selectionBackground#0a1f4450
  • editor.selectionHighlightBackground#0a1f4440
  • editorBracketMatch.background#00968833
  • editorBracketMatch.border#009688
  • editorCursor.foreground#0a1f44
  • editorGroupHeader.tabsBackground#e0e0e0
  • editorIndentGuide.activeBackground#0a1f44aa
  • editorIndentGuide.background#cfd8dc44
  • editorLineNumber.activeForeground#0a1f44
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#cfd8dc
  • focusBorder#0a1f44
  • gitDecoration.conflictingResourceForeground#ffca28
  • gitDecoration.deletedResourceForeground#e53935
  • gitDecoration.modifiedResourceForeground#0a1f44
  • gitDecoration.untrackedResourceForeground#009688
  • input.background#f5f5f5
  • input.border#cfd8dc
  • input.foreground#111111
  • input.placeholderForeground#9e9e9e
  • inputOption.activeBorder#0a1f44
  • list.activeSelectionBackground#0a1f44
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0a1f4430
  • list.highlightForeground#0a1f44
  • list.hoverBackground#0a1f4420
  • minimap.background#fafafa
  • minimapSlider.activeBackground#0a1f4466
  • minimapSlider.background#0a1f4422
  • minimapSlider.hoverBackground#0a1f4444
  • panel.background#fafafa
  • panel.border#cfd8dc
  • panelTitle.activeBorder#0a1f44
  • panelTitle.activeForeground#111111
  • panelTitle.inactiveForeground#999999
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0a1f44aa
  • scrollbarSlider.background#cfd8dc44
  • scrollbarSlider.hoverBackground#cfd8dc88
  • sideBar.background#e0e0e0
  • sideBar.foreground#111111
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#0a1f44
  • sideBarTitle.foreground#0a1f44
  • statusBar.background#0a1f44
  • statusBar.debuggingBackground#009688
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#e0e0e0
  • statusBarItem.hoverBackground#0a1f44cc
  • tab.activeBackground#fafafa
  • tab.activeBorder#0a1f44
  • tab.activeForeground#111111
  • tab.border#cfd8dc
  • tab.inactiveBackground#e0e0e0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0a1f44
  • terminal.ansiBrightBlue#1565c0
  • terminal.ansiBrightCyan#00bfa5
  • terminal.ansiBrightGreen#66bb6a
  • terminal.ansiBrightMagenta#ab47bc
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#009688
  • terminal.ansiGreen#43a047
  • terminal.ansiMagenta#8e24aa
  • terminal.ansiRed#e53935
  • terminal.ansiYellow#fdd835
  • terminal.background#fafafa
  • terminal.foreground#111111
  • titleBar.activeBackground#0a1f44
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#e0e0e0
  • titleBar.inactiveForeground#111111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00bcd4
keyword, storage.type, storage.modifier#0a1f44bold
keyword.operator, punctuation.accessor#cfd8dc
variable, variable.other#111111
variable.parameter#00bcd4italic
entity.name.function, support.function#0a1f44
meta.function-call#cfd8dc
entity.name.class, entity.name.type.class, support.class#0a1f44bold
entity.name.type, support.type#b0bec5
entity.name.type.interface#009688italic
constant.numeric#ff7043
constant, constant.language, constant.character#ffca28
constant.language.boolean#ff7043bold
variable.other.property, support.variable.property#111111
meta.object-literal.key#0a1f44
entity.name.tag, punctuation.definition.tag#0a1f44
entity.other.attribute-name#d84315italic
punctuation, meta.brace#cfd8dc
string.regexp#ff7043
constant.character.escape#d84315
meta.decorator, punctuation.decorator#ffca28
invalid, invalid.illegal#e53935strikethrough
markup.heading, entity.name.section#0a1f44bold
markup.bold#ffca28bold
markup.italic#d84315italic
markup.underline.link#00bcd4
markup.inline.raw, markup.fenced_code#00bcd4
support.type.property-name.json#0a1f44
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffca28
support.type.property-name.css#0a1f44
support.constant.property-value.css#00bcd4