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.background#0a0a0a
  • activityBar.foreground#e0e0e0
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#f0c674
  • activityBarBadge.foreground#111111
  • badge.background#f0c674
  • badge.foreground#111111
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.focusForeground#c0c0c0
  • breadcrumb.foreground#666666
  • button.background#f0c674
  • button.foreground#111111
  • button.hoverBackground#f5d48a
  • diffEditor.insertedTextBackground#b5bd6833
  • diffEditor.removedTextBackground#e06c7533
  • dropdown.background#1a1a1a
  • dropdown.foreground#e0e0e0
  • editor.background#111111
  • editor.findMatchBackground#5c4a1f
  • editor.findMatchHighlightBackground#5c4a1f80
  • editor.findRangeHighlightBackground#2a2a2a80
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#181818
  • editor.lineHighlightBorder#18181800
  • editor.selectionBackground#333333
  • editor.selectionHighlightBackground#2a2a2a
  • editor.wordHighlightBackground#2f2f2f
  • editor.wordHighlightStrongBackground#3a3a3a
  • editorBracketHighlight.foreground1#f0c674
  • editorBracketHighlight.foreground2#81a2be
  • editorBracketHighlight.foreground3#8abeb7
  • editorBracketHighlight.foreground4#b294bb
  • editorBracketHighlight.foreground5#b5bd68
  • editorBracketHighlight.foreground6#e06c75
  • editorBracketMatch.background#f0c67420
  • editorBracketMatch.border#f0c674
  • editorBracketPairGuide.activeBackground1#f0c67480
  • editorBracketPairGuide.activeBackground2#81a2be80
  • editorBracketPairGuide.activeBackground3#8abeb780
  • editorBracketPairGuide.activeBackground4#b294bb80
  • editorBracketPairGuide.activeBackground5#b5bd6880
  • editorBracketPairGuide.activeBackground6#e06c7580
  • editorCursor.foreground#f0c674
  • editorError.foreground#e06c75
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGutter.addedBackground#b5bd68
  • editorGutter.deletedBackground#e06c75
  • editorGutter.modifiedBackground#81a2be
  • editorIndentGuide.activeBackground1#444444
  • editorIndentGuide.background1#222222
  • editorInfo.foreground#81a2be
  • editorLineNumber.activeForeground#b0b0b0
  • editorLineNumber.foreground#555555
  • editorRuler.foreground#222222
  • editorWarning.foreground#f0c674
  • editorWhitespace.foreground#2a2a2a
  • gitDecoration.conflictingResourceForeground#e06c75
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#f0c674
  • gitDecoration.untrackedResourceForeground#b5bd68
  • input.background#1a1a1a
  • input.border#2a2a2a
  • input.foreground#e0e0e0
  • input.placeholderForeground#666666
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#e0e0e0
  • list.errorForeground#e06c75
  • list.focusBackground#222222
  • list.highlightForeground#f0c674
  • list.hoverBackground#1a1a1a
  • list.inactiveSelectionBackground#1a1a1a
  • list.inactiveSelectionForeground#c0c0c0
  • list.warningForeground#f0c674
  • minimap.errorHighlight#e06c75
  • minimap.findMatchHighlight#f0c674
  • minimap.selectionHighlight#333333
  • minimap.warningHighlight#f0c674
  • panel.background#0c0c0c
  • panel.border#1a1a1a
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#666666
  • peekView.border#f0c674
  • peekViewEditor.background#0c0c0c
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#111111
  • scrollbarSlider.activeBackground#444444cc
  • scrollbarSlider.background#44444466
  • scrollbarSlider.hoverBackground#44444499
  • sideBar.background#0c0c0c
  • sideBar.border#1a1a1a
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.border#1a1a1a
  • sideBarSectionHeader.foreground#c0c0c0
  • sideBarTitle.foreground#c0c0c0
  • statusBar.background#0a0a0a
  • statusBar.border#1a1a1a
  • statusBar.debuggingBackground#f0c674
  • statusBar.debuggingForeground#111111
  • statusBar.foreground#c0c0c0
  • statusBar.noFolderBackground#0a0a0a
  • statusBarItem.remoteBackground#8abeb7
  • tab.activeBackground#111111
  • tab.activeBorderTop#f0c674
  • tab.activeForeground#e0e0e0
  • tab.border#1a1a1a
  • tab.inactiveBackground#0c0c0c
  • tab.inactiveForeground#666666
  • terminal.ansiBlack#1d1f21
  • terminal.ansiBlue#81a2be
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#81a2be
  • terminal.ansiBrightCyan#8abeb7
  • terminal.ansiBrightGreen#b5bd68
  • terminal.ansiBrightMagenta#b294bb
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#e0e0e0
  • terminal.ansiBrightYellow#f0c674
  • terminal.ansiCyan#8abeb7
  • terminal.ansiGreen#b5bd68
  • terminal.ansiMagenta#b294bb
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#c5c8c6
  • terminal.ansiYellow#f0c674
  • terminal.background#111111
  • terminal.foreground#e0e0e0
  • terminal.selectionBackground#333333
  • terminalCursor.foreground#f0c674
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#c0c0c0
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
keyword, storage.type, storage.modifier#b294bb
keyword.control#b294bb
string, constant.other.placeholder#b5bd68
constant.numeric#de935f
entity.name.function, meta.function-call, support.function#81a2be
variable, entity.name.variable#e0e0e0
entity.name.type, entity.name.class, support.type, support.class#f0c674
constant, entity.name.constant, variable.other.constant#de935f
entity.name.tag#e06c75
entity.other.attribute-name#de935f
string.quoted, meta.attribute-value#b5bd68
entity.name.type.class, meta.class#f0c674
entity.name.function.method, meta.method#81a2be
variable.other.property, meta.property, support.type.property-name#e0e0e0
keyword.control.import, keyword.control.export, keyword.control.from#b294bb
punctuation.decorator, meta.decorator, entity.name.function.decorator#f0c674
string.template#b5bd68
meta.template.expression, punctuation.definition.template-expression#8abeb7
string.regexp#8abeb7
keyword.operator#8abeb7
support.type.property-name.json#e06c75
markup.heading, entity.name.section.markdown#81a2bebold
markup.bold#f0c674bold
markup.italic#b294bbitalic
markup.underline.link, string.other.link#81a2be
markup.inline.raw, markup.fenced_code#b5bd68