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—
themesmith by CyberBoost - VS Code Theme