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#ff6f00
  • activityBar.background#111217
  • activityBar.foreground#ff6f00
  • activityBarBadge.background#ff6f00
  • activityBarBadge.foreground#0b0c0f
  • badge.background#ff6f00
  • badge.foreground#0b0c0f
  • button.background#1a1b20
  • button.foreground#ffffff
  • button.hoverBackground#262b30
  • dropdown.background#111217
  • dropdown.border#1a1b20
  • dropdown.foreground#d0d0d0
  • editor.background#0b0c0f
  • editor.findMatchBackground#ff6f0088
  • editor.findMatchHighlightBackground#ff6f0044
  • editor.foreground#d0d0d0
  • editor.lineHighlightBackground#262b30a0
  • editor.lineHighlightBorder#262b30d0
  • editor.selectionBackground#ff6f0040
  • editor.selectionHighlightBackground#ff6f0030
  • editorBracketMatch.background#ff6f0033
  • editorBracketMatch.border#ff6f00
  • editorCursor.foreground#ff6f00
  • editorGroupHeader.tabsBackground#0b0c0f
  • editorIndentGuide.activeBackground#33384488
  • editorIndentGuide.background#33384444
  • editorLineNumber.activeForeground#ff6f00
  • editorLineNumber.foreground#555b66
  • editorWhitespace.foreground#333844
  • focusBorder#ff6f00
  • gitDecoration.conflictingResourceForeground#ffea00
  • gitDecoration.deletedResourceForeground#ff3d00
  • gitDecoration.modifiedResourceForeground#ff6f00
  • gitDecoration.untrackedResourceForeground#a5ff5e
  • input.background#111217
  • input.border#1a1b20
  • input.foreground#d0d0d0
  • input.placeholderForeground#555b66
  • inputOption.activeBorder#ff6f00
  • list.activeSelectionBackground#1a1b20
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1a1b20
  • list.highlightForeground#ff6f00
  • list.hoverBackground#1a1b20a0
  • minimap.background#0b0c0f
  • minimapSlider.activeBackground#ff6f0066
  • minimapSlider.background#ff6f0022
  • minimapSlider.hoverBackground#ff6f0044
  • panel.background#0b0c0f
  • panel.border#1a1b20
  • panelTitle.activeBorder#ff6f00
  • panelTitle.activeForeground#ff6f00
  • panelTitle.inactiveForeground#c0c0c0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff6f0088
  • scrollbarSlider.background#555b6644
  • scrollbarSlider.hoverBackground#555b6688
  • sideBar.background#111217
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#1a1b20
  • sideBarSectionHeader.foreground#ff6f00
  • sideBarTitle.foreground#ff6f00
  • statusBar.background#1a1b20
  • statusBar.debuggingBackground#ff3d00
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#111217
  • statusBarItem.hoverBackground#22242c
  • tab.activeBackground#1a1b20
  • tab.activeBorder#ff6f00
  • tab.activeForeground#ffffff
  • tab.border#0b0c0f
  • tab.inactiveBackground#111217
  • tab.inactiveForeground#c0c0c0
  • terminal.ansiBlue#5c7cfa
  • terminal.ansiBrightBlue#7c9fff
  • terminal.ansiBrightCyan#33f7ff
  • terminal.ansiBrightGreen#b8ff88
  • terminal.ansiBrightMagenta#ff90ff
  • terminal.ansiBrightRed#ff6f66
  • terminal.ansiBrightYellow#fff560
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#a5ff5e
  • terminal.ansiMagenta#ff61f6
  • terminal.ansiRed#ff3d00
  • terminal.ansiYellow#ffea00
  • terminal.background#0b0c0f
  • terminal.foreground#d0d0d0
  • titleBar.activeBackground#111217
  • titleBar.activeForeground#d0d0d0
  • titleBar.inactiveBackground#0b0c0f
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555b66italic
string, string.quoted, string.template#a5ff5e
keyword, storage.type, storage.modifier#ff6f00bold
keyword.operator, punctuation.accessor#ff8f40
variable, variable.other#d0d0d0
variable.parameter#ff6f00italic
entity.name.function, support.function#ff6f00
meta.function-call#d0d0d0
entity.name.class, entity.name.type.class, support.class#ff6f00bold
entity.name.type, support.type#ff6f00
entity.name.type.interface#00e5ffitalic
constant.numeric#a5ff5e
constant, constant.language, constant.character#a5ff5e
constant.language.boolean#a5ff5ebold
variable.other.property, support.variable.property#d0d0d0
meta.object-literal.key#ff6f00
entity.name.tag, punctuation.definition.tag#ff6f00
entity.other.attribute-name#00e5ffitalic
punctuation, meta.brace#ff8f40
string.regexp#a5ff5e
constant.character.escape#ff8f40
meta.decorator, punctuation.decorator#00e5ff
invalid, invalid.illegal#ff3d00strikethrough
markup.heading, entity.name.section#ff6f00bold
markup.bold#a5ff5ebold
markup.italic#a5ff5eitalic
markup.underline.link#ff6f00
markup.inline.raw, markup.fenced_code#00e5ff
support.type.property-name.json#ff6f00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00e5ff
support.type.property-name.css#ff6f00
support.constant.property-value.css#d0d0d0