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#C9981A
  • activityBar.background#111112
  • activityBar.foreground#C9981A
  • activityBarBadge.background#C9981A
  • activityBarBadge.foreground#0B0B0F
  • badge.background#C9981A
  • badge.foreground#0B0B0F
  • button.background#5A3A2B
  • button.foreground#F5EFE0
  • button.hoverBackground#6B4936
  • dropdown.background#151515
  • dropdown.border#4F463E
  • dropdown.foreground#E8D8B0
  • editor.background#0B0B0F
  • editor.findMatchBackground#C9981A44
  • editor.findMatchHighlightBackground#C9981A22
  • editor.foreground#E8D8B0
  • editor.lineHighlightBackground#2A2A2A80
  • editor.lineHighlightBorder#C9981A33
  • editor.selectionBackground#5A3A2B80
  • editor.selectionHighlightBackground#5A3A2B40
  • editorBracketMatch.background#C9981A33
  • editorBracketMatch.border#C9981A
  • editorCursor.foreground#C9981A
  • editorGroupHeader.tabsBackground#0B0B0F
  • editorIndentGuide.activeBackground#C9981A44
  • editorIndentGuide.background#4F463E44
  • editorLineNumber.activeForeground#C9981A
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#4F463E44
  • focusBorder#C9981A
  • gitDecoration.conflictingResourceForeground#D4A019
  • gitDecoration.deletedResourceForeground#A94530
  • gitDecoration.modifiedResourceForeground#C9981A
  • gitDecoration.untrackedResourceForeground#8B5F80
  • input.background#151515
  • input.border#4F463E
  • input.foreground#E8D8B0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#C9981A
  • list.activeSelectionBackground#5A3A2B
  • list.activeSelectionForeground#F5EFE0
  • list.focusBackground#5A3A2B66
  • list.highlightForeground#C9981A
  • list.hoverBackground#5A3A2B33
  • minimap.background#0B0B0F
  • minimapSlider.activeBackground#C9981A66
  • minimapSlider.background#C9981A22
  • minimapSlider.hoverBackground#C9981A44
  • panel.background#0B0B0F
  • panel.border#4F463E
  • panelTitle.activeBorder#C9981A
  • panelTitle.activeForeground#C9981A
  • panelTitle.inactiveForeground#A89C84
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C9981A66
  • scrollbarSlider.background#4F463E44
  • scrollbarSlider.hoverBackground#4F463E66
  • sideBar.background#151515
  • sideBar.foreground#D5C7A2
  • sideBarSectionHeader.background#111112
  • sideBarSectionHeader.foreground#C9981A
  • sideBarTitle.foreground#C9981A
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#C9981A
  • statusBar.foreground#E8D8B0
  • statusBar.noFolderBackground#151515
  • statusBarItem.hoverBackground#262626
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#C9981A
  • tab.activeForeground#F5EFE0
  • tab.border#0B0B0F
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#A89C84
  • terminal.ansiBlue#3A6B7D
  • terminal.ansiBrightBlue#466E8C
  • terminal.ansiBrightCyan#6FB8B9
  • terminal.ansiBrightGreen#7FA86F
  • terminal.ansiBrightMagenta#A67FA6
  • terminal.ansiBrightRed#B85A45
  • terminal.ansiBrightYellow#D4A019
  • terminal.ansiCyan#5F9EA0
  • terminal.ansiGreen#6C8A5D
  • terminal.ansiMagenta#8B5F80
  • terminal.ansiRed#A94530
  • terminal.ansiYellow#C9981A
  • terminal.background#0B0B0F
  • terminal.foreground#E8D8B0
  • titleBar.activeBackground#111112
  • titleBar.activeForeground#E8D8B0
  • titleBar.inactiveBackground#0B0B0F
  • titleBar.inactiveForeground#A89C84

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#D16B20
keyword, storage.type, storage.modifier#C9981Abold
keyword.operator, punctuation.accessor#D4A019
variable, variable.other#D5C7A2
variable.parameter#7A4F2Eitalic
entity.name.function, support.function#6FB8B9
meta.function-call#E8D8B0
entity.name.class, entity.name.type.class, support.class#C9981Abold
entity.name.type, support.type#466E8C
entity.name.type.interface#AA7F3Citalic
constant.numeric#D4A019
constant, constant.language, constant.character#C9981A
constant.language.boolean#D4A019bold
variable.other.property, support.variable.property#D5C7A2
meta.object-literal.key#7A4F2E
entity.name.tag, punctuation.definition.tag#C9981A
entity.other.attribute-name#AA7F3Citalic
punctuation, meta.brace#D4A019
string.regexp#A94530
constant.character.escape#AA7F3C
meta.decorator, punctuation.decorator#D4A019
invalid, invalid.illegal#A94530strikethrough
markup.heading, entity.name.section#C9981Abold
markup.bold#D4A019bold
markup.italic#AA7F3Citalic
markup.underline.link#7A4F2E
markup.inline.raw, markup.fenced_code#6C8A5D
support.type.property-name.json#7A4F2E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A019
support.type.property-name.css#7A4F2E
support.constant.property-value.css#AA7F3C
themesmith by CyberBoost - VS Code Theme