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#f57c00
  • activityBar.background#21222c
  • activityBar.foreground#c0c0d0
  • activityBarBadge.background#fbc02d
  • activityBarBadge.foreground#1e1e2f
  • badge.background#d32f2f
  • badge.foreground#f5f5f5
  • button.background#388e3c
  • button.foreground#f5f5f5
  • button.hoverBackground#4caf50
  • dropdown.background#282a36
  • dropdown.border#38384d
  • dropdown.foreground#d0d0e0
  • editor.background#1e1e2f
  • editor.findMatchBackground#f57c00
  • editor.findMatchHighlightBackground#fbc02d
  • editor.foreground#d0d0e0
  • editor.lineHighlightBackground#38384d
  • editor.lineHighlightBorder#38384d
  • editor.selectionBackground#1976d2
  • editor.selectionHighlightBackground#388e3c
  • editorBracketMatch.background#388e3c
  • editorBracketMatch.border#388e3c
  • editorCursor.foreground#f5f5f5
  • editorGroupHeader.tabsBackground#21222c
  • editorIndentGuide.activeBackground#8888aa
  • editorIndentGuide.background#444466
  • editorLineNumber.activeForeground#f5f5f5
  • editorLineNumber.foreground#777788
  • editorWhitespace.foreground#555577
  • focusBorder#f57c00
  • gitDecoration.conflictingResourceForeground#fbc02d
  • gitDecoration.deletedResourceForeground#d32f2f
  • gitDecoration.modifiedResourceForeground#1976d2
  • gitDecoration.untrackedResourceForeground#f57c00
  • input.background#282a36
  • input.border#38384d
  • input.foreground#d0d0e0
  • input.placeholderForeground#777788
  • inputOption.activeBorder#1976d2
  • list.activeSelectionBackground#1976d2
  • list.activeSelectionForeground#f5f5f5
  • list.focusBackground#1976d2
  • list.highlightForeground#f57c00
  • list.hoverBackground#38384d
  • minimap.background#21222c
  • minimapSlider.activeBackground#38384d
  • minimapSlider.background#38384d
  • minimapSlider.hoverBackground#38384d
  • panel.background#21222c
  • panel.border#38384d
  • panelTitle.activeBorder#d32f2f
  • panelTitle.activeForeground#f5f5f5
  • panelTitle.inactiveForeground#c0c0d0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#38384d
  • scrollbarSlider.background#38384d
  • scrollbarSlider.hoverBackground#38384d
  • sideBar.background#21222c
  • sideBar.foreground#c0c0d0
  • sideBarSectionHeader.background#282a36
  • sideBarSectionHeader.foreground#f5f5f5
  • sideBarTitle.foreground#d0d0e0
  • statusBar.background#21222c
  • statusBar.debuggingBackground#1976d2
  • statusBar.foreground#f5f5f5
  • statusBar.noFolderBackground#282a36
  • statusBarItem.hoverBackground#388e3c
  • tab.activeBackground#282a36
  • tab.activeBorder#d32f2f
  • tab.activeForeground#f5f5f5
  • tab.border#1e1e2f
  • tab.inactiveBackground#21222c
  • tab.inactiveForeground#c0c0d0
  • terminal.ansiBlue#1976d2
  • terminal.ansiBrightBlue#63a4ff
  • terminal.ansiBrightCyan#00e5ff
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#e040fb
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightYellow#ffff8d
  • terminal.ansiCyan#00acc1
  • terminal.ansiGreen#388e3c
  • terminal.ansiMagenta#9c27b0
  • terminal.ansiRed#d32f2f
  • terminal.ansiYellow#fbc02d
  • terminal.background#1e1e2f
  • terminal.foreground#d0d0e0
  • titleBar.activeBackground#282a36
  • titleBar.activeForeground#f5f5f5
  • titleBar.inactiveBackground#21222c
  • titleBar.inactiveForeground#c0c0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777788italic
string, string.quoted, string.template#f57c00
keyword, storage.type, storage.modifier#d32f2fbold
keyword.operator, punctuation.accessor#1976d2
variable, variable.other#c0c0d0
variable.parameter#388e3citalic
entity.name.function, support.function#fbc02d
meta.function-call#f5f5f5
entity.name.class, entity.name.type.class, support.class#00acc1bold
entity.name.type, support.type#9c27b0
entity.name.type.interface#e65100italic
constant.numeric#63a4ff
constant, constant.language, constant.character#69f0ae
constant.language.boolean#ff6e6ebold
variable.other.property, support.variable.property#e040fb
meta.object-literal.key#ffff8d
entity.name.tag, punctuation.definition.tag#d32f2f
entity.other.attribute-name#388e3citalic
punctuation, meta.brace#c0c0d0
string.regexp#f57c00
constant.character.escape#fbc02d
meta.decorator, punctuation.decorator#1976d2
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#f5f5f5bold
markup.bold#fbc02dbold
markup.italic#f57c00italic
markup.underline.link#1976d2
markup.inline.raw, markup.fenced_code#388e3c
support.type.property-name.json#63a4ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e65100
support.type.property-name.css#d32f2f
support.constant.property-value.css#69f0ae