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#FF8C00
  • activityBar.background#0C0C0C
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FF6F00
  • badge.foreground#0A0A0A
  • button.background#FF6F00
  • button.foreground#0A0A0A
  • button.hoverBackground#FF8C00
  • dropdown.background#121212
  • dropdown.border#333333
  • dropdown.foreground#E8D5C6
  • editor.background#0A0A0A
  • editor.findMatchBackground#FF4E00CC
  • editor.findMatchHighlightBackground#FFB74D66
  • editor.foreground#E8D5C6
  • editor.lineHighlightBackground#33220044
  • editor.lineHighlightBorder#FF6F00
  • editor.selectionBackground#FF6F0033
  • editor.selectionHighlightBackground#FFB74D66
  • editorBracketMatch.background#FF6F0033
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#FFB74D
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#FFB74D
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FF6F00
  • gitDecoration.deletedResourceForeground#B71C1C
  • gitDecoration.modifiedResourceForeground#FF8C00
  • gitDecoration.untrackedResourceForeground#FFC107
  • input.background#121212
  • input.border#333333
  • input.foreground#E8D5C6
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#332200
  • list.activeSelectionForeground#FFB74D
  • list.focusBackground#332200
  • list.highlightForeground#FF6F00
  • list.hoverBackground#33220066
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#0A0A0A
  • panel.border#FF6F00
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FFB74D
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6F0088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#121212
  • sideBar.foreground#E8D5C6
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FFB74D
  • statusBar.background#1F0B00
  • statusBar.debuggingBackground#FF4E00
  • statusBar.foreground#E8D5C6
  • statusBar.noFolderBackground#0C1200
  • statusBarItem.hoverBackground#3B1F00
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FFB74D
  • tab.border#0A0A0A
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3B8EDC
  • terminal.ansiBrightBlue#6AB7FF
  • terminal.ansiBrightCyan#52F9F5
  • terminal.ansiBrightGreen#B2FF66
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF8C42
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#1ED3D1
  • terminal.ansiGreen#8DCE5A
  • terminal.ansiMagenta#D45C9B
  • terminal.ansiRed#FF6F00
  • terminal.ansiYellow#FFC107
  • terminal.background#0A0A0A
  • terminal.foreground#E8D5C6
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#E8D5C6
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#A7937F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#FFC107
keyword, storage.type, storage.modifier#FF4500bold
keyword.operator, punctuation.accessor#FF8C42
variable, variable.other#E0C39E
variable.parameter#E0C39Eitalic
entity.name.function, support.function#FFB84D
meta.function-call#FF8C42
entity.name.class, entity.name.type.class, support.class#FF7043bold
entity.name.type, support.type#FF7043
entity.name.type.interface#FF8C42italic
constant.numeric#FF8C42
constant, constant.language, constant.character#FF8C42
constant.language.boolean#FF4500bold
variable.other.property, support.variable.property#E0C39E
meta.object-literal.key#FFB84D
entity.name.tag, punctuation.definition.tag#FF4500
entity.other.attribute-name#FF8C42italic
punctuation, meta.brace#FF8C42
string.regexp#FF8C42
constant.character.escape#FF8C42
meta.decorator, punctuation.decorator#FFC107
invalid, invalid.illegal#B71C1Cstrikethrough
markup.heading, entity.name.section#FF4500bold
markup.bold#FF4500bold
markup.italic#FF8C42italic
markup.underline.link#FFB84D
markup.inline.raw, markup.fenced_code#FFC107
support.type.property-name.json#FF8C42
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF4500
support.type.property-name.css#FFB84D
support.constant.property-value.css#FFC107