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#E5E5E5
  • activityBar.foreground#FF8C00
  • activityBarBadge.background#FF8C00
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FF8C00
  • badge.foreground#FAFAFA
  • button.background#3A7D44
  • button.foreground#FAFAFA
  • button.hoverBackground#66BB6A
  • dropdown.background#F5F5F5
  • dropdown.border#3A7D44
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFAB0055
  • editor.findMatchHighlightBackground#FFAB0022
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#A5D6A730
  • editor.lineHighlightBorder#A5D6A760
  • editor.selectionBackground#FF8C0055
  • editor.selectionHighlightBackground#FF8C0033
  • editorBracketMatch.background#FF8C0033
  • editorBracketMatch.border#FF8C00
  • editorCursor.foreground#FF8C00
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#FF8C00
  • editorLineNumber.foreground#B0B0B0
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#FF8C00
  • gitDecoration.conflictingResourceForeground#FFCA28
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.modifiedResourceForeground#FF8C00
  • gitDecoration.untrackedResourceForeground#66BB6A
  • input.background#F5F5F5
  • input.border#3A7D44
  • input.foreground#2E2E2E
  • input.placeholderForeground#B0B0B0
  • inputOption.activeBorder#FF8C00
  • list.activeSelectionBackground#A5D6A730
  • list.activeSelectionForeground#FF8C00
  • list.focusBackground#A5D6A730
  • list.highlightForeground#FF8C00
  • list.hoverBackground#A5D6A740
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FF8C0060
  • minimapSlider.background#FF8C0020
  • minimapSlider.hoverBackground#FF8C0040
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF8C00
  • panelTitle.activeForeground#FF8C00
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FF8C0080
  • scrollbarSlider.background#C0C0C080
  • scrollbarSlider.hoverBackground#C0C0C0A0
  • sideBar.background#F5F5F5
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#E5E5E5
  • sideBarSectionHeader.foreground#FF8C00
  • sideBarTitle.foreground#FF8C00
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF8C00
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#A5D6A7
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#FF8C00
  • tab.activeForeground#FF8C00
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#42A5F5
  • terminal.ansiBrightBlue#80D6FF
  • terminal.ansiBrightCyan#84FFFF
  • terminal.ansiBrightGreen#B2FF59
  • terminal.ansiBrightMagenta#E040FB
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFFF8D
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#EF5350
  • terminal.ansiYellow#FFCA28
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#E5E5E5
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FF8C00bold
keyword.operator, punctuation.accessor#FFCA28
variable, variable.other#2E2E2E
variable.parameter#FFCA28italic
entity.name.function, support.function#42A5F5
meta.function-call#80D6FF
entity.name.class, entity.name.type.class, support.class#AB47BCbold
entity.name.type, support.type#AB47BC
entity.name.type.interface#AB47BCitalic
constant.numeric#FFCA28
constant, constant.language, constant.character#FFCA28
constant.language.boolean#FFCA28bold
variable.other.property, support.variable.property#42A5F5
meta.object-literal.key#80D6FF
entity.name.tag, punctuation.definition.tag#FF8C00
entity.other.attribute-name#FFCA28italic
punctuation, meta.brace#2E2E2E
string.regexp#FFCA28
constant.character.escape#AB47BC
meta.decorator, punctuation.decorator#FFCA28
invalid, invalid.illegal#EF5350strikethrough
markup.heading, entity.name.section#FF8C00bold
markup.bold#FF8C00bold
markup.italic#FFCA28italic
markup.underline.link#80D6FF
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#80D6FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCA28
support.type.property-name.css#42A5F5
support.constant.property-value.css#FF8C00