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#FF6F3C
  • activityBar.background#141212
  • activityBar.foreground#CBB8A6
  • activityBarBadge.background#FF6F3C
  • activityBarBadge.foreground#0A0808
  • badge.background#FF6F3C
  • badge.foreground#0A0808
  • button.background#FF6F3C
  • button.foreground#0A0808
  • button.hoverBackground#FF8A5055
  • dropdown.background#141212
  • dropdown.border#141212
  • dropdown.foreground#CBB8A6
  • editor.background#0A0808
  • editor.findMatchBackground#FF8A5044
  • editor.findMatchHighlightBackground#FF8A5022
  • editor.foreground#CBB8A6
  • editor.lineHighlightBackground#FF6F3C40
  • editor.lineHighlightBorder#FF6F3C80
  • editor.selectionBackground#FF6F3C55
  • editor.selectionHighlightBackground#FF6F3C33
  • editorBracketMatch.background#FF6F3C22
  • editorBracketMatch.border#FF6F3C
  • editorCursor.foreground#FF6F3C
  • editorGroupHeader.tabsBackground#0A0808
  • editorIndentGuide.activeBackground#5A534F80
  • editorIndentGuide.background#5A534F40
  • editorLineNumber.activeForeground#FF6F3C
  • editorLineNumber.foreground#7A7875
  • editorWhitespace.foreground#5A534F80
  • focusBorder#FF6F3C
  • gitDecoration.conflictingResourceForeground#F9C859
  • gitDecoration.deletedResourceForeground#FF6F3C
  • gitDecoration.modifiedResourceForeground#FF8A58
  • gitDecoration.untrackedResourceForeground#FF6F3C
  • input.background#141212
  • input.border#141212
  • input.foreground#CBB8A6
  • input.placeholderForeground#5A534F80
  • inputOption.activeBorder#FF6F3C
  • list.activeSelectionBackground#FF6F3C33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF6F3C33
  • list.highlightForeground#FF6F3C
  • list.hoverBackground#FF6F3C22
  • minimap.background#0A0808
  • minimapSlider.activeBackground#FF6F3C66
  • minimapSlider.background#FF6F3C22
  • minimapSlider.hoverBackground#FF6F3C44
  • panel.background#0A0808
  • panel.border#141212
  • panelTitle.activeBorder#FF6F3C
  • panelTitle.activeForeground#FF6F3C
  • panelTitle.inactiveForeground#7A7875
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F3C80
  • scrollbarSlider.background#5A534F40
  • scrollbarSlider.hoverBackground#5A534F80
  • sideBar.background#141212
  • sideBar.foreground#CBB8A6
  • sideBarSectionHeader.background#141212
  • sideBarSectionHeader.foreground#FF6F3C
  • sideBarTitle.foreground#FF6F3C
  • statusBar.background#141212
  • statusBar.debuggingBackground#FF8A58
  • statusBar.foreground#CBB8A6
  • statusBar.noFolderBackground#0A0808
  • statusBarItem.hoverBackground#FF6F3C33
  • tab.activeBackground#141212
  • tab.activeBorder#FF6F3C
  • tab.activeForeground#FF6F3C
  • tab.border#0A0808
  • tab.inactiveBackground#0A0808
  • tab.inactiveForeground#7A7875
  • terminal.ansiBlue#5A9BD4
  • terminal.ansiBrightBlue#8AB9FF
  • terminal.ansiBrightCyan#9EF0FF
  • terminal.ansiBrightGreen#8AFF9E
  • terminal.ansiBrightMagenta#E6B9FF
  • terminal.ansiBrightRed#FF8A58
  • terminal.ansiBrightYellow#FFEB80
  • terminal.ansiCyan#5AC8D4
  • terminal.ansiGreen#6FDD8B
  • terminal.ansiMagenta#C78CD7
  • terminal.ansiRed#FF6F3C
  • terminal.ansiYellow#F9C859
  • terminal.background#0A0808
  • terminal.foreground#CBB8A6
  • titleBar.activeBackground#141212
  • titleBar.activeForeground#CBB8A6
  • titleBar.inactiveBackground#0A0808
  • titleBar.inactiveForeground#7A7875

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A534Fitalic
string, string.quoted, string.template#FFB86C
keyword, storage.type, storage.modifier#FF5733bold
keyword.operator, punctuation.accessor#FF7F50
variable, variable.other#CBB8A6
variable.parameter#FF8A58italic
entity.name.function, support.function#FF9F70
meta.function-call#FF9F70
entity.name.class, entity.name.type.class, support.class#FF9F70bold
entity.name.type, support.type#FFA07A
entity.name.type.interface#FF9F70italic
constant.numeric#F9C859
constant, constant.language, constant.character#F9C859
constant.language.boolean#F9C859bold
variable.other.property, support.variable.property#CBB8A6
meta.object-literal.key#CBB8A6
entity.name.tag, punctuation.definition.tag#FF6F3C
entity.other.attribute-name#FF8A58italic
punctuation, meta.brace#CBB8A6
string.regexp#FF9F70
constant.character.escape#FF8A58
meta.decorator, punctuation.decorator#FF7F50
invalid, invalid.illegal#FF4E3Astrikethrough
markup.heading, entity.name.section#FF6F3Cbold
markup.bold#FF6F3Cbold
markup.italic#FF8A58italic
markup.underline.link#FFB04A
markup.inline.raw, markup.fenced_code#FF9F70
support.type.property-name.json#FF6F3C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF8A58
support.type.property-name.css#FF9F70
support.constant.property-value.css#FF8A58
themesmith by CyberBoost - VS Code Theme