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#ff5f57
  • activityBar.background#0a0a0c
  • activityBar.foreground#ff5f57
  • activityBarBadge.background#ff5f57
  • activityBarBadge.foreground#0a0a0c
  • badge.background#ff5f57
  • badge.foreground#0a0a0c
  • button.background#141418
  • button.foreground#ffffff
  • button.hoverBackground#2b2b2e
  • dropdown.background#141418
  • dropdown.border#2b2b2e
  • dropdown.foreground#d0d5da
  • editor.background#0a0a0c
  • editor.findMatchBackground#ff8c7b44
  • editor.findMatchHighlightBackground#ff8c7b22
  • editor.foreground#d0d5da
  • editor.lineHighlightBackground#1e1e1f40
  • editor.lineHighlightBorder#1e1e1f80
  • editor.selectionBackground#ff5f5722
  • editor.selectionHighlightBackground#ff5f5711
  • editorBracketMatch.background#ff8c7b33
  • editorBracketMatch.border#ff8c7b
  • editorCursor.foreground#ff5f57
  • editorGroupHeader.tabsBackground#0a0a0c
  • editorIndentGuide.activeBackground#525860
  • editorIndentGuide.background#353a44
  • editorLineNumber.activeForeground#ff5f57
  • editorLineNumber.foreground#393c44
  • editorWhitespace.foreground#2b2b2e
  • focusBorder#ff5f57
  • gitDecoration.conflictingResourceForeground#d06cb9
  • gitDecoration.deletedResourceForeground#ff5f57
  • gitDecoration.modifiedResourceForeground#ffb84d
  • gitDecoration.untrackedResourceForeground#8cc34a
  • input.background#141418
  • input.border#2b2b2e
  • input.foreground#d0d5da
  • input.placeholderForeground#5a5e66
  • inputOption.activeBorder#ff5f57
  • list.activeSelectionBackground#141418
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#141418
  • list.highlightForeground#ff5f57
  • list.hoverBackground#14141866
  • minimap.background#0a0a0c
  • minimapSlider.activeBackground#ff5f5766
  • minimapSlider.background#ff5f5722
  • minimapSlider.hoverBackground#ff5f5744
  • panel.background#0a0a0c
  • panel.border#141418
  • panelTitle.activeBorder#ff5f57
  • panelTitle.activeForeground#ff5f57
  • panelTitle.inactiveForeground#5a5e66
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff5f5788
  • scrollbarSlider.background#2b2b2e44
  • scrollbarSlider.hoverBackground#2b2b2e88
  • sideBar.background#0a0a0c
  • sideBar.foreground#a5aab5
  • sideBarSectionHeader.background#0a0a0c
  • sideBarSectionHeader.foreground#ff5f57
  • sideBarTitle.foreground#ff5f57
  • statusBar.background#141418
  • statusBar.debuggingBackground#ff5f57
  • statusBar.foreground#d0d5da
  • statusBar.noFolderBackground#0a0a0c
  • statusBarItem.hoverBackground#2b2b2e
  • tab.activeBackground#141418
  • tab.activeBorder#ff5f57
  • tab.activeForeground#ffffff
  • tab.border#0a0a0c
  • tab.inactiveBackground#0a0a0c
  • tab.inactiveForeground#5a5e66
  • terminal.ansiBlue#5c87c6
  • terminal.ansiBrightBlue#7a9ed8
  • terminal.ansiBrightCyan#7fd9d9
  • terminal.ansiBrightGreen#a5e68a
  • terminal.ansiBrightMagenta#e29edb
  • terminal.ansiBrightRed#ff8c80
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#5dc8c8
  • terminal.ansiGreen#8cc34a
  • terminal.ansiMagenta#d06cb9
  • terminal.ansiRed#ff5f57
  • terminal.ansiYellow#ffb84d
  • terminal.background#0a0a0c
  • terminal.foreground#d0d5da
  • titleBar.activeBackground#0a0a0c
  • titleBar.activeForeground#d0d5da
  • titleBar.inactiveBackground#0a0a0c
  • titleBar.inactiveForeground#5a5e66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5e66italic
string, string.quoted, string.template#ffb84d
keyword, storage.type, storage.modifier#ff5f57bold
keyword.operator, punctuation.accessor#d0d5da
variable, variable.other#d0d5da
variable.parameter#ffb84ditalic
entity.name.function, support.function#d0d5da
meta.function-call#a5aab5
entity.name.class, entity.name.type.class, support.class#d06cb9bold
entity.name.type, support.type#d06cb9
entity.name.type.interface#5dc8c8italic
constant.numeric#ffb84d
constant, constant.language, constant.character#ffb84d
constant.language.boolean#ff5f57bold
variable.other.property, support.variable.property#a5aab5
meta.object-literal.key#d0d5da
entity.name.tag, punctuation.definition.tag#ff5f57
entity.other.attribute-name#d06cb9italic
punctuation, meta.brace#a5aab5
string.regexp#ffb84d
constant.character.escape#d06cb9
meta.decorator, punctuation.decorator#ffb84d
invalid, invalid.illegal#ff5f57strikethrough
markup.heading, entity.name.section#ff5f57bold
markup.bold#ffb84dbold
markup.italic#d06cb9italic
markup.underline.link#5dc8c8
markup.inline.raw, markup.fenced_code#ffb84d
support.type.property-name.json#d0d5da
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff5f57
support.type.property-name.css#d0d5da
support.constant.property-value.css#ffb84d
themesmith by CyberBoost - VS Code Theme