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#ff7200
  • activityBar.background#0c0b0d
  • activityBar.foreground#d1490d
  • activityBarBadge.background#d1490d
  • activityBarBadge.foreground#0b0a0c
  • badge.background#d1490d
  • badge.foreground#0b0a0c
  • button.background#151416
  • button.foreground#e0d8d0
  • button.hoverBackground#1e1c1e
  • dropdown.background#0c0b0d
  • dropdown.border#151416
  • dropdown.foreground#e0d8d0
  • editor.background#0b0a0c
  • editor.findMatchBackground#ff720044
  • editor.findMatchHighlightBackground#ff720022
  • editor.foreground#e0d8d0
  • editor.lineHighlightBackground#1e1c1e80
  • editor.lineHighlightBorder#ff720033
  • editor.selectionBackground#d1492233
  • editor.selectionHighlightBackground#d1492244
  • editorBracketMatch.background#d1492233
  • editorBracketMatch.border#d14922
  • editorCursor.foreground#ff7200
  • editorGroupHeader.tabsBackground#0b0a0c
  • editorIndentGuide.activeBackground#ff720088
  • editorIndentGuide.background#4b3f4544
  • editorLineNumber.activeForeground#ff7200
  • editorLineNumber.foreground#5a5356
  • editorWhitespace.foreground#4b3f45
  • focusBorder#d1490d
  • gitDecoration.conflictingResourceForeground#ff7200
  • gitDecoration.deletedResourceForeground#d1490d
  • gitDecoration.modifiedResourceForeground#ff7200
  • gitDecoration.untrackedResourceForeground#68c3a3
  • input.background#0c0b0d
  • input.border#151416
  • input.foreground#e0d8d0
  • input.placeholderForeground#5a5356
  • inputOption.activeBorder#d1490d
  • list.activeSelectionBackground#151416
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#151416
  • list.highlightForeground#ff7200
  • list.hoverBackground#15141666
  • minimap.background#0b0a0c
  • minimapSlider.activeBackground#d1492299
  • minimapSlider.background#d1492244
  • minimapSlider.hoverBackground#d1492266
  • panel.background#0b0a0c
  • panel.border#151416
  • panelTitle.activeBorder#ff7200
  • panelTitle.activeForeground#ff7200
  • panelTitle.inactiveForeground#7a6e71
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#d1492288
  • scrollbarSlider.background#5a535644
  • scrollbarSlider.hoverBackground#5a535688
  • sideBar.background#0c0b0d
  • sideBar.foreground#c8beba
  • sideBarSectionHeader.background#0b0a0c
  • sideBarSectionHeader.foreground#d1490d
  • sideBarTitle.foreground#ff7200
  • statusBar.background#151416
  • statusBar.debuggingBackground#d1490d
  • statusBar.foreground#e0d8d0
  • statusBar.noFolderBackground#0c0b0d
  • statusBarItem.hoverBackground#1e1c1e
  • tab.activeBackground#151416
  • tab.activeBorder#ff7200
  • tab.activeForeground#ffffff
  • tab.border#0b0a0c
  • tab.inactiveBackground#0c0b0d
  • tab.inactiveForeground#c8beba
  • terminal.ansiBlue#4a90e2
  • terminal.ansiBrightBlue#7ab4ff
  • terminal.ansiBrightCyan#8df5e3
  • terminal.ansiBrightGreen#84ffd9
  • terminal.ansiBrightMagenta#e6a9c9
  • terminal.ansiBrightRed#ff5c33
  • terminal.ansiBrightYellow#ffb84d
  • terminal.ansiCyan#6dd9c5
  • terminal.ansiGreen#68c3a3
  • terminal.ansiMagenta#c27ea3
  • terminal.ansiRed#d1490d
  • terminal.ansiYellow#ff8c00
  • terminal.background#0b0a0c
  • terminal.foreground#e0d8d0
  • titleBar.activeBackground#0c0b0d
  • titleBar.activeForeground#e0d8d0
  • titleBar.inactiveBackground#0b0a0c
  • titleBar.inactiveForeground#7a6e71

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e5e66italic
string, string.quoted, string.template#68c3a3
keyword, storage.type, storage.modifier#d1490dbold
keyword.operator, punctuation.accessor#ff8c00
variable, variable.other#e0d8d0
variable.parameter#ff7200italic
entity.name.function, support.function#c8beba
meta.function-call#a28c9f
entity.name.class, entity.name.type.class, support.class#d1490dbold
entity.name.type, support.type#ff7200
entity.name.type.interface#68c3a3italic
constant.numeric#ff8c00
constant, constant.language, constant.character#d1490d
constant.language.boolean#d1490dbold
variable.other.property, support.variable.property#a28c9f
meta.object-literal.key#e0d8d0
entity.name.tag, punctuation.definition.tag#d1490d
entity.other.attribute-name#68c3a3italic
punctuation, meta.brace#ff7200
string.regexp#c27ea3
constant.character.escape#ff7200
meta.decorator, punctuation.decorator#ff8c00
invalid, invalid.illegal#d1490dstrikethrough
markup.heading, entity.name.section#d1490dbold
markup.bold#ff7200bold
markup.italic#68c3a3italic
markup.underline.link#68c3a3
markup.inline.raw, markup.fenced_code#68c3a3
support.type.property-name.json#e0d8d0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff7200
support.type.property-name.css#e0d8d0
support.constant.property-value.css#68c3a3