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#FFB300
  • activityBar.background#F0F0F0
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FFB300
  • badge.foreground#FAFAFA
  • button.background#E0E0E0
  • button.foreground#2E2E2E
  • button.hoverBackground#D0D0D0
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFB30044
  • editor.findMatchHighlightBackground#FFB30022
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFEBB340
  • editor.lineHighlightBorder#FFB30040
  • editor.selectionBackground#FFB30033
  • editor.selectionHighlightBackground#FFB30022
  • editorBracketMatch.background#FFB30033
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#909090
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#2E2E2E
  • editorLineNumber.foreground#8A8A8A
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#FFEBB340
  • list.activeSelectionForeground#2E2E2E
  • list.focusBackground#FFE0B3
  • list.highlightForeground#FFB300
  • list.hoverBackground#FFEBB320
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#CCCCCC66
  • minimapSlider.background#CCCCCC22
  • minimapSlider.hoverBackground#CCCCCC44
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#FFB300
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC66
  • sideBar.background#F5F5F5
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FFB300
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#E8E8E8
  • statusBarItem.hoverBackground#D0D0D0
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#FFB300
  • tab.activeForeground#2E2E2E
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#3B78E7
  • terminal.ansiBrightBlue#6DAEFF
  • terminal.ansiBrightCyan#6DE5FF
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#E084D1
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#3BC9DB
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C94F9D
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFB300
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#2E2E2E
  • 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#FFB300
keyword, storage.type, storage.modifier#00695Cbold
keyword.operator, punctuation.accessor#00695C
variable, variable.other#2E2E2E
variable.parameter#FFB300italic
entity.name.function, support.function#009688
meta.function-call#26A69A
entity.name.class, entity.name.type.class, support.class#FFB300bold
entity.name.type, support.type#FFB300
entity.name.type.interface#009688italic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#009688
meta.object-literal.key#009688
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#6A737Ditalic
punctuation, meta.brace#2E2E2E
string.regexp#FFB300
constant.character.escape#FFB300
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#6A737Dbold
markup.bold#FFB300bold
markup.italic#6A737Ditalic
markup.underline.link#009688
markup.inline.raw, markup.fenced_code#FFB300
support.type.property-name.json#6A737D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#009688
support.constant.property-value.css#FFB300