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#FF6B35
  • activityBar.background#11100C
  • activityBar.foreground#FF6B35
  • activityBarBadge.background#FF6B35
  • activityBarBadge.foreground#0B0A07
  • badge.background#FF6B35
  • badge.foreground#0B0A07
  • button.background#1D1913
  • button.foreground#FFFFFF
  • button.hoverBackground#2C221A
  • dropdown.background#120F0A
  • dropdown.border#1D1913
  • dropdown.foreground#E4E1DC
  • editor.background#0B0A07
  • editor.findMatchBackground#FF6B3544
  • editor.findMatchHighlightBackground#FF6B3522
  • editor.foreground#E4E1DC
  • editor.lineHighlightBackground#1D191340
  • editor.lineHighlightBorder#1D191380
  • editor.selectionBackground#3E2A1F55
  • editor.selectionHighlightBackground#3E2A1F33
  • editorBracketMatch.background#FF6B3333
  • editorBracketMatch.border#FF6B35
  • editorCursor.foreground#FF6B35
  • editorGroupHeader.tabsBackground#0B0A07
  • editorIndentGuide.activeBackground#2C221A88
  • editorIndentGuide.background#2C221A44
  • editorLineNumber.activeForeground#FF6B35
  • editorLineNumber.foreground#5E5048
  • editorWhitespace.foreground#2C221A
  • focusBorder#FF6B35
  • gitDecoration.conflictingResourceForeground#FF805C
  • gitDecoration.deletedResourceForeground#FF6B35
  • gitDecoration.modifiedResourceForeground#FF945E
  • gitDecoration.untrackedResourceForeground#7A6F5D
  • input.background#120F0A
  • input.border#1D1913
  • input.foreground#E4E1DC
  • input.placeholderForeground#5E5048
  • inputOption.activeBorder#FF6B35
  • list.activeSelectionBackground#1D1913
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1D1913
  • list.highlightForeground#FF6B35
  • list.hoverBackground#1D191366
  • minimap.background#0B0A07
  • minimapSlider.activeBackground#FF6B6666
  • minimapSlider.background#FF6B2222
  • minimapSlider.hoverBackground#FF6B4444
  • panel.background#0B0A07
  • panel.border#1D1913
  • panelTitle.activeBorder#FF6B35
  • panelTitle.activeForeground#FF6B35
  • panelTitle.inactiveForeground#8C877E
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6B3588
  • scrollbarSlider.background#5E504844
  • scrollbarSlider.hoverBackground#5E504888
  • sideBar.background#120F0A
  • sideBar.foreground#C8C5BF
  • sideBarSectionHeader.background#11100C
  • sideBarSectionHeader.foreground#FF6B35
  • sideBarTitle.foreground#FF6B35
  • statusBar.background#1D1913
  • statusBar.debuggingBackground#FF6B35
  • statusBar.foreground#E4E1DC
  • statusBar.noFolderBackground#11100C
  • statusBarItem.hoverBackground#2C221A
  • tab.activeBackground#1D1913
  • tab.activeBorder#FF6B35
  • tab.activeForeground#FFFFFF
  • tab.border#0B0A07
  • tab.inactiveBackground#120F0A
  • tab.inactiveForeground#8C877E
  • terminal.ansiBlue#7A5E4A
  • terminal.ansiBrightBlue#8A6E55
  • terminal.ansiBrightCyan#D1CAC0
  • terminal.ansiBrightGreen#8A7F6D
  • terminal.ansiBrightMagenta#AA8B7A
  • terminal.ansiBrightRed#FF805C
  • terminal.ansiBrightYellow#FFB275
  • terminal.ansiCyan#C8C5BF
  • terminal.ansiGreen#7A6F5D
  • terminal.ansiMagenta#9A776A
  • terminal.ansiRed#FF6B35
  • terminal.ansiYellow#FF945E
  • terminal.background#0B0A07
  • terminal.foreground#E4E1DC
  • titleBar.activeBackground#11100C
  • titleBar.activeForeground#E4E1DC
  • titleBar.inactiveBackground#0B0A07
  • titleBar.inactiveForeground#8C877E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5E5048italic
string, string.quoted, string.template#FF945E
keyword, storage.type, storage.modifier#FF6B35bold
keyword.operator, punctuation.accessor#FF805C
variable, variable.other#C8C5BF
variable.parameter#E4E1DCitalic
entity.name.function, support.function#FF805C
meta.function-call#E4E1DC
entity.name.class, entity.name.type.class, support.class#FF945Ebold
entity.name.type, support.type#FF805C
entity.name.type.interface#C8C5BFitalic
constant.numeric#FF945E
constant, constant.language, constant.character#FF805C
constant.language.boolean#FF6B35bold
variable.other.property, support.variable.property#C8C5BF
meta.object-literal.key#E4E1DC
entity.name.tag, punctuation.definition.tag#FF6B35
entity.other.attribute-name#C8C5BFitalic
punctuation, meta.brace#8C877E
string.regexp#FF945E
constant.character.escape#FF805C
meta.decorator, punctuation.decorator#FF945E
invalid, invalid.illegal#FF6B35strikethrough
markup.heading, entity.name.section#FF6B35bold
markup.bold#FF945Ebold
markup.italic#C8C5BFitalic
markup.underline.link#FF805C
markup.inline.raw, markup.fenced_code#7A6F5D
support.type.property-name.json#E4E1DC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF945E
support.type.property-name.css#E4E1DC
support.constant.property-value.css#FF805C