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#B58900
  • activityBar.background#E0E0E0
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#B58900
  • activityBarBadge.foreground#FAFAFA
  • badge.background#B58900
  • badge.foreground#FAFAFA
  • button.background#B58900
  • button.foreground#FAFAFA
  • button.hoverBackground#C9A563
  • dropdown.background#F5F5F5
  • dropdown.border#D0D0D0
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#B58900AA
  • editor.findMatchHighlightBackground#B5890088
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#E2E2E240
  • editor.lineHighlightBorder#E2E2E280
  • editor.selectionBackground#B5890080
  • editor.selectionHighlightBackground#B5890040
  • editorBracketMatch.background#B5890040
  • editorBracketMatch.border#B58900
  • editorCursor.foreground#B58900
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#AAAAAA88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#B58900
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#BBBBBB
  • focusBorder#B58900
  • gitDecoration.conflictingResourceForeground#B58F9A
  • gitDecoration.deletedResourceForeground#C0392B
  • gitDecoration.modifiedResourceForeground#8ACD66
  • gitDecoration.untrackedResourceForeground#D4B160
  • input.background#F5F5F5
  • input.border#D0D0D0
  • input.foreground#2B2B2B
  • input.placeholderForeground#777777
  • inputOption.activeBorder#B58900
  • list.activeSelectionBackground#C0C0C0
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#C0C0C0
  • list.highlightForeground#B58900
  • list.hoverBackground#C0C0C066
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#B5890066
  • minimapSlider.background#B5890022
  • minimapSlider.hoverBackground#B5890044
  • panel.background#FAFAFA
  • panel.border#D0D0D0
  • panelTitle.activeBorder#B58900
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B5895588
  • scrollbarSlider.background#BBBBBB44
  • scrollbarSlider.hoverBackground#BBBBBB88
  • sideBar.background#F0F0F0
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#B58900
  • sideBarTitle.foreground#2B2B2B
  • statusBar.background#D8D8D8
  • statusBar.debuggingBackground#C0392B
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#C0C0C0
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#B58900
  • tab.activeForeground#B58900
  • tab.border#CCCCCC
  • tab.inactiveBackground#E8E8E8
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5F9EA0
  • terminal.ansiBrightBlue#7ABED1
  • terminal.ansiBrightCyan#85CFAF
  • terminal.ansiBrightGreen#A3D977
  • terminal.ansiBrightMagenta#C89FAF
  • terminal.ansiBrightRed#D04A4A
  • terminal.ansiBrightYellow#E5C56A
  • terminal.ansiCyan#6FB3A2
  • terminal.ansiGreen#8ACD66
  • terminal.ansiMagenta#B58F9A
  • terminal.ansiRed#C0392B
  • terminal.ansiYellow#D4B160
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#E8E8E8
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#0066CC
keyword, storage.type, storage.modifier#B58900bold
keyword.operator, punctuation.accessor#C2A063
variable, variable.other#2B2B2B
variable.parameter#C2A063italic
entity.name.function, support.function#5C9E3E
meta.function-call#B58900
entity.name.class, entity.name.type.class, support.class#D4B160bold
entity.name.type, support.type#B58F9A
entity.name.type.interface#67823Aitalic
constant.numeric#D4B160
constant, constant.language, constant.character#C2A063
constant.language.boolean#B58900bold
variable.other.property, support.variable.property#8ACD66
meta.object-literal.key#B58900
entity.name.tag, punctuation.definition.tag#B58F9A
entity.other.attribute-name#C2A063italic
punctuation, meta.brace#C2A063
string.regexp#D4B160
constant.character.escape#B58F9A
meta.decorator, punctuation.decorator#5F9EA0
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#B58900bold
markup.bold#D4B160bold
markup.italic#C2A063italic
markup.underline.link#5F9EA0
markup.inline.raw, markup.fenced_code#5C9E3E
support.type.property-name.json#B58900
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5F9EA0
support.type.property-name.css#B58900
support.constant.property-value.css#D4B160
themesmith by CyberBoost - VS Code Theme