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#FF6F00
  • activityBar.background#FFFFFF
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F00
  • badge.foreground#FFFFFF
  • button.background#FF6F00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8F20
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FF6F0060
  • editor.findMatchHighlightBackground#FF6F0030
  • editor.foreground#212121
  • editor.lineHighlightBackground#E8F0FF
  • editor.lineHighlightBorder#FF6F00
  • editor.selectionBackground#FF6F0030
  • editor.selectionHighlightBackground#FF6F0010
  • editorBracketMatch.background#FF6F0030
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#FF6F00
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#D81B60
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#009688
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#FFE0B2
  • list.activeSelectionForeground#FF6F00
  • list.focusBackground#FFE0B2
  • list.highlightForeground#FF6F00
  • list.hoverBackground#FFF3E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FF6F0088
  • scrollbarSlider.background#BDBDBD40
  • scrollbarSlider.hoverBackground#BDBDBD80
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#D0D0D0
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FF6F00
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#4285F4
  • terminal.ansiBrightCyan#00ACC1
  • terminal.ansiBrightGreen#26A69A
  • terminal.ansiBrightMagenta#FF4081
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#009688
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FDD835
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#0066CC
variable, variable.other#212121
variable.parameter#212121italic
entity.name.function, support.function#0066CC
meta.function-call#FF6F00
entity.name.class, entity.name.type.class, support.class#FF6F00bold
entity.name.type, support.type#0066CC
entity.name.type.interface#0066CCitalic
constant.numeric#FF6F00
constant, constant.language, constant.character#FF6F00
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#0066CC
meta.object-literal.key#0066CC
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#FF6F00italic
punctuation, meta.brace#212121
string.regexp#FF6F00
constant.character.escape#FF6F00
meta.decorator, punctuation.decorator#FF6F00
invalid, invalid.illegal#FF6F00strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FF6F00bold
markup.italic#FF6F00italic
markup.underline.link#0066CC
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#FF6F00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F00
support.type.property-name.css#0066CC
support.constant.property-value.css#009688