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#E0E0E0
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FFB300
  • badge.foreground#FAFAFA
  • button.background#FFB300
  • button.foreground#FFFFFF
  • button.hoverBackground#FFCA28
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFB30055
  • editor.findMatchHighlightBackground#FFB30033
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#FFB30033
  • editor.selectionBackground#FFB30033
  • editor.selectionHighlightBackground#FFB30022
  • editorBracketMatch.background#FFB30033
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#CCCCCC
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#BBBBBB
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FF9800
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#4CAF50
  • gitDecoration.untrackedResourceForeground#00A8A8
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#FFEB99
  • list.activeSelectionForeground#333333
  • list.focusBackground#FFE08299
  • list.highlightForeground#FFB300
  • list.hoverBackground#FFE08266
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#BBBBBB66
  • minimapSlider.background#BBBBBB22
  • minimapSlider.hoverBackground#BBBBBB44
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#BBBBBB44
  • scrollbarSlider.hoverBackground#BBBBBB66
  • sideBar.background#F5F5F5
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#D0D0D0
  • statusBar.debuggingBackground#FFB300
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#D0D0D0
  • statusBarItem.hoverBackground#C0C0C0
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFB300
  • tab.activeForeground#333333
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3A8BCD
  • terminal.ansiBrightBlue#5FA8FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#80FF80
  • terminal.ansiBrightMagenta#FF80FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFDB58
  • terminal.ansiCyan#00A8A8
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFB300
  • terminal.background#FAFAFA
  • terminal.foreground#333333
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#00A8A8
keyword, storage.type, storage.modifier#FFB300bold
keyword.operator, punctuation.accessor#4A4A4A
variable, variable.other#333333
variable.parameter#FFB300italic
entity.name.function, support.function#3A8BCD
meta.function-call#A0CFFF
entity.name.class, entity.name.type.class, support.class#FFB300bold
entity.name.type, support.type#FFB300
entity.name.type.interface#FFB300italic
constant.numeric#FF9800
constant, constant.language, constant.character#FFB300
constant.language.boolean#FF9800bold
variable.other.property, support.variable.property#A0CFFF
meta.object-literal.key#A0CFFF
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#FFB300italic
punctuation, meta.brace#4A4A4A
string.regexp#FF9800
constant.character.escape#FFB300
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#FFB300italic
markup.underline.link#3A8BCD
markup.inline.raw, markup.fenced_code#00A8A8
support.type.property-name.json#FFB300
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#A0CFFF
support.constant.property-value.css#3A8BCD