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#C0580C
  • activityBar.background#F0EFEB
  • activityBar.foreground#333333
  • activityBarBadge.background#C0580C
  • activityBarBadge.foreground#FAF9F5
  • badge.background#C0580C
  • badge.foreground#FAF9F5
  • button.background#C0580C
  • button.foreground#FAF9F5
  • button.hoverBackground#D96A3C
  • dropdown.background#F0EFEB
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAF9F5
  • editor.findMatchBackground#C0580C44
  • editor.findMatchHighlightBackground#C0580C22
  • editor.foreground#333333
  • editor.lineHighlightBackground#E8E6E3AA
  • editor.lineHighlightBorder#E8E6E3
  • editor.selectionBackground#C0580C55
  • editor.selectionHighlightBackground#C0580C33
  • editorBracketMatch.background#7CB34233
  • editorBracketMatch.border#7CB342
  • editorCursor.foreground#7CB342
  • editorGroupHeader.tabsBackground#F0EFEB
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#C0580C
  • editorLineNumber.foreground#AAAAAA
  • editorWhitespace.foreground#BBBBBB
  • focusBorder#C0580C
  • gitDecoration.conflictingResourceForeground#C0580C
  • gitDecoration.deletedResourceForeground#C0580C
  • gitDecoration.modifiedResourceForeground#7CB342
  • gitDecoration.untrackedResourceForeground#7CB342
  • input.background#F0EFEB
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#C0580C
  • list.activeSelectionBackground#E0DFDC
  • list.activeSelectionForeground#333333
  • list.focusBackground#E0DFDC
  • list.highlightForeground#C0580C
  • list.hoverBackground#E0DFDC66
  • minimap.background#FAF9F5
  • minimapSlider.activeBackground#C0580C66
  • minimapSlider.background#C0580C22
  • minimapSlider.hoverBackground#C0580C44
  • panel.background#FAF9F5
  • panel.border#F0EFEB
  • panelTitle.activeBorder#C0580C
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#BBBBBB88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F0EFEB
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#FAF9F5
  • sideBarSectionHeader.foreground#C0580C
  • sideBarTitle.foreground#333333
  • statusBar.background#FAF9F5
  • statusBar.debuggingBackground#C0580C
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#F0EFEB
  • statusBarItem.hoverBackground#E0DFDC
  • tab.activeBackground#F0EFEB
  • tab.activeBorder#C0580C
  • tab.activeForeground#333333
  • tab.border#E5E5E5
  • tab.inactiveBackground#FAF9F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#6A7F68
  • terminal.ansiBrightBlue#8FA99C
  • terminal.ansiBrightCyan#8FA99C
  • terminal.ansiBrightGreen#A5D574
  • terminal.ansiBrightMagenta#D97A3C
  • terminal.ansiBrightRed#D96A3C
  • terminal.ansiBrightYellow#A5D574
  • terminal.ansiCyan#6A7F68
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#C0580C
  • terminal.ansiRed#C0580C
  • terminal.ansiYellow#7CB342
  • terminal.background#FAF9F5
  • terminal.foreground#333333
  • titleBar.activeBackground#F0EFEB
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#FAF9F5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#7CB342
keyword, storage.type, storage.modifier#C0580Cbold
keyword.operator, punctuation.accessor#6A7F68
variable, variable.other#333333
variable.parameter#6A7F68italic
entity.name.function, support.function#7CB342
meta.function-call#7CB342
entity.name.class, entity.name.type.class, support.class#C0580Cbold
entity.name.type, support.type#6A7F68
entity.name.type.interface#6A7F68italic
constant.numeric#7CB342
constant, constant.language, constant.character#7CB342
constant.language.boolean#C0580Cbold
variable.other.property, support.variable.property#333333
meta.object-literal.key#6A7F68
entity.name.tag, punctuation.definition.tag#C0580C
entity.other.attribute-name#6A7F68italic
punctuation, meta.brace#333333
string.regexp#7CB342
constant.character.escape#6A7F68
meta.decorator, punctuation.decorator#C0580C
invalid, invalid.illegal#C0580Cstrikethrough
markup.heading, entity.name.section#C0580Cbold
markup.bold#C0580Cbold
markup.italic#6A7F68italic
markup.underline.link#6A7F68
markup.inline.raw, markup.fenced_code#7CB342
support.type.property-name.json#6A7F68
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6A7F68
support.type.property-name.css#6A7F68
support.constant.property-value.css#7CB342
themesmith by CyberBoost - VS Code Theme