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#D97434
  • activityBar.background#15171B
  • activityBar.foreground#D97434
  • activityBarBadge.background#D97434
  • activityBarBadge.foreground#0F1115
  • badge.background#D97434
  • badge.foreground#0F1115
  • button.background#1A1C20
  • button.foreground#FFFFFF
  • button.hoverBackground#252830
  • dropdown.background#111317
  • dropdown.border#1A1C20
  • dropdown.foreground#C0C5D0
  • editor.background#0F1115
  • editor.findMatchBackground#D9743440
  • editor.findMatchHighlightBackground#D9743420
  • editor.foreground#C0C5D0
  • editor.lineHighlightBackground#1A1C20A0
  • editor.lineHighlightBorder#1A1C2090
  • editor.selectionBackground#3E8EA080
  • editor.selectionHighlightBackground#3E8EA050
  • editorBracketMatch.background#3E8EA050
  • editorBracketMatch.border#3E8EA0
  • editorCursor.foreground#D97434
  • editorGroupHeader.tabsBackground#0F1115
  • editorIndentGuide.activeBackground#3E8EA090
  • editorIndentGuide.background#25283060
  • editorLineNumber.activeForeground#D97434
  • editorLineNumber.foreground#555A6E
  • editorWhitespace.foreground#252830
  • focusBorder#D97434
  • gitDecoration.conflictingResourceForeground#D9A334
  • gitDecoration.deletedResourceForeground#D97434
  • gitDecoration.modifiedResourceForeground#D97434
  • gitDecoration.untrackedResourceForeground#8AB4C7
  • input.background#111317
  • input.border#1A1C20
  • input.foreground#C0C5D0
  • input.placeholderForeground#555A6E
  • inputOption.activeBorder#D97434
  • list.activeSelectionBackground#1A1C20
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1C20
  • list.highlightForeground#D97434
  • list.hoverBackground#1A1C2080
  • minimap.background#0F1115
  • minimapSlider.activeBackground#3E8EA066
  • minimapSlider.background#3E8EA022
  • minimapSlider.hoverBackground#3E8EA044
  • panel.background#0F1115
  • panel.border#1A1C20
  • panelTitle.activeBorder#D97434
  • panelTitle.activeForeground#D97434
  • panelTitle.inactiveForeground#A0A5B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3E8EA088
  • scrollbarSlider.background#555A6E44
  • scrollbarSlider.hoverBackground#555A6E88
  • sideBar.background#111317
  • sideBar.foreground#A0A5B0
  • sideBarSectionHeader.background#15171B
  • sideBarSectionHeader.foreground#D97434
  • sideBarTitle.foreground#D97434
  • statusBar.background#1A1C20
  • statusBar.debuggingBackground#D97434
  • statusBar.foreground#C0C5D0
  • statusBar.noFolderBackground#15171B
  • statusBarItem.hoverBackground#252830
  • tab.activeBackground#1A1C20
  • tab.activeBorder#D97434
  • tab.activeForeground#FFFFFF
  • tab.border#0F1115
  • tab.inactiveBackground#111317
  • tab.inactiveForeground#A0A5B0
  • terminal.ansiBlue#3E8EA0
  • terminal.ansiBrightBlue#4FA5B5
  • terminal.ansiBrightCyan#6BD2E0
  • terminal.ansiBrightGreen#9CCFD0
  • terminal.ansiBrightMagenta#C68BBC
  • terminal.ansiBrightRed#E2864F
  • terminal.ansiBrightYellow#E4A351
  • terminal.ansiCyan#5CC8D8
  • terminal.ansiGreen#8AB4C7
  • terminal.ansiMagenta#B58AB0
  • terminal.ansiRed#D97434
  • terminal.ansiYellow#D9A334
  • terminal.background#0F1115
  • terminal.foreground#C0C5D0
  • titleBar.activeBackground#15171B
  • titleBar.activeForeground#C0C5D0
  • titleBar.inactiveBackground#0F1115
  • titleBar.inactiveForeground#A0A5B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555A6Eitalic
string, string.quoted, string.template#5CC8D8
keyword, storage.type, storage.modifier#D97434bold
keyword.operator, punctuation.accessor#C0C5D0
variable, variable.other#C0C5D0
variable.parameter#D9A334italic
entity.name.function, support.function#8AB4C7
meta.function-call#A0B8C5
entity.name.class, entity.name.type.class, support.class#6F9EBBbold
entity.name.type, support.type#6F9EBB
entity.name.type.interface#6F9EBBitalic
constant.numeric#D9A334
constant, constant.language, constant.character#D9A334
constant.language.boolean#D9A334bold
variable.other.property, support.variable.property#A0B8C5
meta.object-literal.key#8AB4C7
entity.name.tag, punctuation.definition.tag#D97434
entity.other.attribute-name#B58AB0italic
punctuation, meta.brace#A0B8C5
string.regexp#D97434
constant.character.escape#B58AB0
meta.decorator, punctuation.decorator#D9A334
invalid, invalid.illegal#D97434strikethrough
markup.heading, entity.name.section#D97434bold
markup.bold#D9A334bold
markup.italic#B58AB0italic
markup.underline.link#8AB4C7
markup.inline.raw, markup.fenced_code#5CC8D8
support.type.property-name.json#8AB4C7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D9A334
support.type.property-name.css#8AB4C7
support.constant.property-value.css#A0B8C5
themesmith by CyberBoost - VS Code Theme