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