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#4a90e2
  • activityBar.background#111314
  • activityBar.foreground#a8c0ff
  • activityBarBadge.background#4caf50
  • activityBarBadge.foreground#ffffff
  • badge.background#4caf50
  • badge.foreground#ffffff
  • button.background#4a90e2
  • button.foreground#ffffff
  • button.hoverBackground#5c9ef0
  • dropdown.background#1b1e20
  • dropdown.border#283593
  • dropdown.foreground#d0d0d0
  • editor.background#0b0d0e
  • editor.findMatchBackground#ff5252
  • editor.findMatchHighlightBackground#ff8a80
  • editor.foreground#d0d0d0
  • editor.lineHighlightBackground#1e2733
  • editor.lineHighlightBorder#283593
  • editor.selectionBackground#334155
  • editor.selectionHighlightBackground#445566
  • editorBracketMatch.background#3b4d61
  • editorBracketMatch.border#4a90e2
  • editorCursor.foreground#ffcc00
  • editorGroupHeader.tabsBackground#111314
  • editorIndentGuide.activeBackground#4a90e2
  • editorIndentGuide.background#2c3e50
  • editorLineNumber.activeForeground#a8c0ff
  • editorLineNumber.foreground#5c6e7d
  • editorWhitespace.foreground#4b5866
  • focusBorder#4a90e2
  • gitDecoration.conflictingResourceForeground#e91e63
  • gitDecoration.deletedResourceForeground#f44336
  • gitDecoration.modifiedResourceForeground#ff9800
  • gitDecoration.untrackedResourceForeground#8bc34a
  • input.background#1b1e20
  • input.border#283593
  • input.foreground#d0d0d0
  • input.placeholderForeground#7f8c8d
  • inputOption.activeBorder#4a90e2
  • list.activeSelectionBackground#283593
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#334155
  • list.highlightForeground#ffcc00
  • list.hoverBackground#2c3e50
  • minimap.background#0b0d0e
  • minimapSlider.activeBackground#4a90e2
  • minimapSlider.background#2c3e50
  • minimapSlider.hoverBackground#3d5a73
  • panel.background#111314
  • panel.border#283593
  • panelTitle.activeBorder#4a90e2
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#7f8c8d
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#4a90e2
  • scrollbarSlider.background#2c3e50
  • scrollbarSlider.hoverBackground#3d5a73
  • sideBar.background#111418
  • sideBar.foreground#c7d1e0
  • sideBarSectionHeader.background#111314
  • sideBarSectionHeader.foreground#a8c0ff
  • sideBarTitle.foreground#c7d1e0
  • statusBar.background#1b1e20
  • statusBar.debuggingBackground#b71c1c
  • statusBar.foreground#a8c0ff
  • statusBar.noFolderBackground#2c3e50
  • statusBarItem.hoverBackground#283593
  • tab.activeBackground#15181a
  • tab.activeBorder#4a90e2
  • tab.activeForeground#e0e0e0
  • tab.border#1c1f21
  • tab.inactiveBackground#0b0d0e
  • tab.inactiveForeground#7f8c8d
  • terminal.ansiBlue#4a90e2
  • terminal.ansiBrightBlue#5c9ef0
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#a3e75f
  • terminal.ansiBrightMagenta#f06292
  • terminal.ansiBrightRed#ff6f61
  • terminal.ansiBrightYellow#ffff72
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#8bc34a
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#f44336
  • terminal.ansiYellow#ffeb3b
  • terminal.background#0b0d0e
  • terminal.foreground#d0d0d0
  • titleBar.activeBackground#0f1112
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#080909
  • titleBar.inactiveForeground#7f8c8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6e7ditalic
string, string.quoted, string.template#8bc34a
keyword, storage.type, storage.modifier#ff9800bold
keyword.operator, punctuation.accessor#a8c0ff
variable, variable.other#e0e0e0
variable.parameter#ffcc00italic
entity.name.function, support.function#4a90e2
meta.function-call#5c9ef0
entity.name.class, entity.name.type.class, support.class#ffeb3bbold
entity.name.type, support.type#ffcc00
entity.name.type.interface#ff9800italic
constant.numeric#ffcc00
constant, constant.language, constant.character#ff9800
constant.language.boolean#ff9800bold
variable.other.property, support.variable.property#8bc34a
meta.object-literal.key#ffeb3b
entity.name.tag, punctuation.definition.tag#ff9800
entity.other.attribute-name#ffcc00italic
punctuation, meta.brace#a8c0ff
string.regexp#ffcc00
constant.character.escape#ff9800
meta.decorator, punctuation.decorator#ffeb3b
invalid, invalid.illegal#f44336strikethrough
markup.heading, entity.name.section#ff9800bold
markup.bold#ff9800bold
markup.italic#ffcc00italic
markup.underline.link#4a90e2
markup.inline.raw, markup.fenced_code#e0e0e0
support.type.property-name.json#ffeb3b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff9800
support.type.property-name.css#8bc34a
support.constant.property-value.css#ffcc00