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#FF8A50
  • activityBar.background#1E1A1A
  • activityBar.foreground#FF7043
  • activityBarBadge.background#FF7043
  • activityBarBadge.foreground#15100F
  • badge.background#FF7043
  • badge.foreground#15100F
  • button.background#231F1F
  • button.foreground#FFFFFF
  • button.hoverBackground#2B2424
  • dropdown.background#1E1A1A
  • dropdown.border#231F1F
  • dropdown.foreground#E8E2D9
  • editor.background#15100F
  • editor.findMatchBackground#FF8A5080
  • editor.findMatchHighlightBackground#FF8A5050
  • editor.foreground#E8E2D9
  • editor.lineHighlightBackground#2B242480
  • editor.lineHighlightBorder#FF704340
  • editor.selectionBackground#FF704340
  • editor.selectionHighlightBackground#FF704322
  • editorBracketMatch.background#FF704322
  • editorBracketMatch.border#FF7043
  • editorCursor.foreground#FF7043
  • editorGroupHeader.tabsBackground#15100F
  • editorIndentGuide.activeBackground#FF704388
  • editorIndentGuide.background#3A34344A
  • editorLineNumber.activeForeground#FF7043
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#3A3434
  • focusBorder#FF7043
  • gitDecoration.conflictingResourceForeground#FFE066
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#FF7043
  • gitDecoration.untrackedResourceForeground#A8E61D
  • input.background#1E1A1A
  • input.border#231F1F
  • input.foreground#E8E2D9
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF7043
  • list.activeSelectionBackground#231F1F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#231F1F
  • list.highlightForeground#FF7043
  • list.hoverBackground#231F1F66
  • minimap.background#15100F
  • minimapSlider.activeBackground#FF704366
  • minimapSlider.background#FF704322
  • minimapSlider.hoverBackground#FF704344
  • panel.background#15100F
  • panel.border#231F1F
  • panelTitle.activeBorder#FF7043
  • panelTitle.activeForeground#FF7043
  • panelTitle.inactiveForeground#A89F96
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF704388
  • scrollbarSlider.background#3A343444
  • scrollbarSlider.hoverBackground#3A343488
  • sideBar.background#1A1616
  • sideBar.foreground#D1C5B9
  • sideBarSectionHeader.background#1E1A1A
  • sideBarSectionHeader.foreground#FFD166
  • sideBarTitle.foreground#FFD166
  • statusBar.background#231F1F
  • statusBar.debuggingBackground#FF7043
  • statusBar.foreground#E8E2D9
  • statusBar.noFolderBackground#1E1A1A
  • statusBarItem.hoverBackground#2B2424
  • tab.activeBackground#231F1F
  • tab.activeBorder#FF7043
  • tab.activeForeground#FFFFFF
  • tab.border#15100F
  • tab.inactiveBackground#15100F
  • tab.inactiveForeground#A89F96
  • terminal.ansiBlue#4FD1C5
  • terminal.ansiBrightBlue#7FFFD4
  • terminal.ansiBrightCyan#66FFD0
  • terminal.ansiBrightGreen#C3FF00
  • terminal.ansiBrightMagenta#FFB2A6
  • terminal.ansiBrightRed#FF9980
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#5CC1A6
  • terminal.ansiGreen#A8E61D
  • terminal.ansiMagenta#FF8A50
  • terminal.ansiRed#FF7043
  • terminal.ansiYellow#FFC966
  • terminal.background#15100F
  • terminal.foreground#E8E2D9
  • titleBar.activeBackground#1E1A1A
  • titleBar.activeForeground#E8E2D9
  • titleBar.inactiveBackground#15100F
  • titleBar.inactiveForeground#A89F96

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A5F5Fitalic
string, string.quoted, string.template#4FD1C5
keyword, storage.type, storage.modifier#FF7043bold
keyword.operator, punctuation.accessor#FF8A50
variable, variable.other#E8E2D9
variable.parameter#FF8A50italic
entity.name.function, support.function#FFC966
meta.function-call#E8E2D9
entity.name.class, entity.name.type.class, support.class#FF7043bold
entity.name.type, support.type#FFC966
entity.name.type.interface#FF8A50italic
constant.numeric#FF8A50
constant, constant.language, constant.character#FF8A50
constant.language.boolean#FF4D4Dbold
variable.other.property, support.variable.property#E8E2D9
meta.object-literal.key#FFC966
entity.name.tag, punctuation.definition.tag#FF7043
entity.other.attribute-name#FF8A50italic
punctuation, meta.brace#FFC966
string.regexp#FF4D4D
constant.character.escape#FF8A50
meta.decorator, punctuation.decorator#FFE066
invalid, invalid.illegal#FF4D4Dstrikethrough
markup.heading, entity.name.section#FF7043bold
markup.bold#FF8A50bold
markup.italic#4FD1C5italic
markup.underline.link#FFC966
markup.inline.raw, markup.fenced_code#A8E61D
support.type.property-name.json#FF7043
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE066
support.type.property-name.css#FFC966
support.constant.property-value.css#4FD1C5
themesmith by CyberBoost - VS Code Theme