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#D35400
  • activityBar.background#FFFAF0
  • activityBar.foreground#D35400
  • activityBarBadge.background#D35400
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D35400
  • badge.foreground#FFFFFF
  • button.background#D35400
  • button.foreground#FFFFFF
  • button.hoverBackground#FFB84D
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#FFF9E6
  • editor.findMatchBackground#FFB385
  • editor.findMatchHighlightBackground#FFCC99
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#FFF2D5
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#FFD8A6
  • editor.selectionHighlightBackground#FFE5B4
  • editorBracketMatch.background#FFE5B4
  • editorBracketMatch.border#D35400
  • editorCursor.foreground#D35400
  • editorGroupHeader.tabsBackground#FFFAF0
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#DADADA
  • editorLineNumber.activeForeground#D35400
  • editorLineNumber.foreground#8C8C8C
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#D35400
  • gitDecoration.conflictingResourceForeground#FFB385
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#D35400
  • gitDecoration.untrackedResourceForeground#34C759
  • input.background#FFFFFF
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#D35400
  • list.activeSelectionBackground#FFE5B4
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#FFE5B4
  • list.highlightForeground#D35400
  • list.hoverBackground#FFF0D9
  • minimap.background#FFF5E0
  • minimapSlider.activeBackground#808080AA
  • minimapSlider.background#C0C0C0AA
  • minimapSlider.hoverBackground#A0A0A0AA
  • panel.background#FFF9E6
  • panel.border#D0D0D0
  • panelTitle.activeBorder#D35400
  • panelTitle.activeForeground#D35400
  • panelTitle.inactiveForeground#9A9A9A
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#808080AA
  • scrollbarSlider.background#C0C0C0AA
  • scrollbarSlider.hoverBackground#A0A0A0AA
  • sideBar.background#FFF5E0
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#FFEED5
  • sideBarSectionHeader.foreground#3A7D8C
  • sideBarTitle.foreground#D35400
  • statusBar.background#3A7D8C
  • statusBar.debuggingBackground#D35400
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#D9D9D9
  • statusBarItem.hoverBackground#FFB385
  • tab.activeBackground#FFF9E6
  • tab.activeBorder#D35400
  • tab.activeForeground#2B2B2B
  • tab.border#D4CFCF
  • tab.inactiveBackground#EFE0CB
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#3A7D8C
  • terminal.ansiBrightBlue#8AC7FF
  • terminal.ansiBrightCyan#7FE8E8
  • terminal.ansiBrightGreen#66FF99
  • terminal.ansiBrightMagenta#E099FF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFD166
  • terminal.ansiCyan#5FD7D7
  • terminal.ansiGreen#34C759
  • terminal.ansiMagenta#D687FF
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB84D
  • terminal.background#FFF9E6
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#FFFAF0
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F0E0D0
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#34C759
keyword, storage.type, storage.modifier#D35400bold
keyword.operator, punctuation.accessor#D35400
variable, variable.other#2B2B2B
variable.parameter#D35400italic
entity.name.function, support.function#3A7D8C
meta.function-call#3A7D8C
entity.name.class, entity.name.type.class, support.class#3A7D8Cbold
entity.name.type, support.type#3A7D8C
entity.name.type.interface#3A7D8Citalic
constant.numeric#D35400
constant, constant.language, constant.character#D35400
constant.language.boolean#D35400bold
variable.other.property, support.variable.property#3A7D8C
meta.object-literal.key#3A7D8C
entity.name.tag, punctuation.definition.tag#D35400
entity.other.attribute-name#D35400italic
punctuation, meta.brace#2B2B2B
string.regexp#D35400
constant.character.escape#D35400
meta.decorator, punctuation.decorator#3A7D8C
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#D35400bold
markup.bold#D35400bold
markup.italic#D35400italic
markup.underline.link#3A7D8C
markup.inline.raw, markup.fenced_code#34C759
support.type.property-name.json#3A7D8C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3A7D8C
support.type.property-name.css#D35400
support.constant.property-value.css#34C759