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#f5c542
  • activityBar.background#141414
  • activityBar.foreground#f5c542
  • activityBarBadge.background#ff4b4b
  • activityBarBadge.foreground#ffffff
  • badge.background#ff4b4b
  • badge.foreground#ffffff
  • button.background#ff4b4b
  • button.foreground#ffffff
  • button.hoverBackground#ff6b6b
  • dropdown.background#1a1a1a
  • dropdown.border#333333
  • dropdown.foreground#e0e0e0
  • editor.background#0d0d0d
  • editor.findMatchBackgroundrgba(0,255,255,0.3)
  • editor.findMatchHighlightBackgroundrgba(255,165,0,0.3)
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#222222
  • editor.lineHighlightBorder#333333
  • editor.selectionBackgroundrgba(245,197,66,0.3)
  • editor.selectionHighlightBackgroundrgba(255,75,75,0.2)
  • editorBracketMatch.backgroundrgba(255,165,0,0.2)
  • editorBracketMatch.border#ff4b4b
  • editorCursor.foreground#ff4b4b
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#f5c542
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#444444
  • focusBorder#f5c542
  • gitDecoration.conflictingResourceForeground#ff79c6
  • gitDecoration.deletedResourceForeground#ff4b4b
  • gitDecoration.modifiedResourceForeground#ffde5f
  • gitDecoration.untrackedResourceForeground#a6e22e
  • input.background#1a1a1a
  • input.border#333333
  • input.foreground#e0e0e0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff4b4b
  • list.activeSelectionBackground#2a2a2a
  • list.activeSelectionForeground#f5c542
  • list.focusBackground#2a2a2a
  • list.highlightForeground#ff4b4b
  • list.hoverBackground#222222
  • minimap.background#0d0d0d
  • minimapSlider.activeBackgroundrgba(255,197,66,0.8)
  • minimapSlider.backgroundrgba(255,197,66,0.4)
  • minimapSlider.hoverBackgroundrgba(255,197,66,0.6)
  • panel.background#111111
  • panel.border#262626
  • panelTitle.activeBorder#ff4b4b
  • panelTitle.activeForeground#f5c542
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackgroundrgba(255,197,66,0.7)
  • scrollbarSlider.backgroundrgba(255,197,66,0.3)
  • scrollbarSlider.hoverBackgroundrgba(255,197,66,0.5)
  • sideBar.background#111111
  • sideBar.foreground#c9c9c9
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#c9c9c9
  • sideBarTitle.foreground#f5c542
  • statusBar.background#141414
  • statusBar.debuggingBackground#ff4b4b
  • statusBar.foreground#f5c542
  • statusBar.noFolderBackground#141414
  • statusBarItem.hoverBackground#2a2a2a
  • tab.activeBackground#0d0d0d
  • tab.activeBorder#ff4b4b
  • tab.activeForeground#f5c542
  • tab.border#262626
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4e9aef
  • terminal.ansiBrightBlue#5fb0ff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#b8e674
  • terminal.ansiBrightMagenta#ff92d0
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightYellow#ffde5f
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#a6e22e
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff4b4b
  • terminal.ansiYellow#f5c542
  • terminal.background#0d0d0d
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#f5c542
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#ffde5f
keyword, storage.type, storage.modifier#ff4b4bbold
keyword.operator, punctuation.accessor#ff79c6
variable, variable.other#e0e0e0
variable.parameter#a6e22eitalic
entity.name.function, support.function#4e9aef
meta.function-call#5fb0ff
entity.name.class, entity.name.type.class, support.class#ff6b6bbold
entity.name.type, support.type#5fb0ff
entity.name.type.interface#ff79c6italic
constant.numeric#ffde5f
constant, constant.language, constant.character#ff4b4b
constant.language.boolean#ff4b4bbold
variable.other.property, support.variable.property#a6e22e
meta.object-literal.key#4e9aef
entity.name.tag, punctuation.definition.tag#ff4b4b
entity.other.attribute-name#ff79c6italic
punctuation, meta.brace#e0e0e0
string.regexp#ff79c6
constant.character.escape#ffde5f
meta.decorator, punctuation.decorator#ff79c6
invalid, invalid.illegal#ff4b4bstrikethrough
markup.heading, entity.name.section#ff4b4bbold
markup.bold#ff4b4bbold
markup.italic#ff79c6italic
markup.underline.link#4e9aef
markup.inline.raw, markup.fenced_code#ffde5f
support.type.property-name.json#4e9aef
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff79c6
support.type.property-name.css#ff4b4b
support.constant.property-value.css#ffde5f