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#FFB400
  • activityBar.background#E8F5E9
  • activityBar.foreground#333333
  • activityBarBadge.background#FF8C00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8C00
  • badge.foreground#FFFFFF
  • button.background#FFB400
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8C00
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFECB3
  • editor.findMatchHighlightBackground#FFE082
  • editor.foreground#333333
  • editor.lineHighlightBackground#E0F7FA
  • editor.lineHighlightBorder#B2EBF2
  • editor.selectionBackground#B2DFDB
  • editor.selectionHighlightBackground#C8E6C9
  • editorBracketMatch.background#FFF9C4
  • editorBracketMatch.border#FFEB3B
  • editorCursor.foreground#5B9C51
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#BDBDBD
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#5B9C51
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FFB400
  • gitDecoration.conflictingResourceForeground#AB47BC
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.modifiedResourceForeground#5C6BC0
  • gitDecoration.untrackedResourceForeground#66BB6A
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FFB400
  • list.activeSelectionBackground#B2DFDB
  • list.activeSelectionForeground#333333
  • list.focusBackground#E0F2F1
  • list.highlightForeground#FFB400
  • list.hoverBackground#E0F2F1
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#AAAAAA80
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#BBBBBB80
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FFB400
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#AAAAAA80
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB80
  • sideBar.background#FAFAFA
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E3F2FD
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#E8F5E9
  • statusBar.debuggingBackground#FFB400
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#E3F2FD
  • statusBarItem.hoverBackground#FF8C00
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFB400
  • tab.activeForeground#333333
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5C6BC0
  • terminal.ansiBrightBlue#3949AB
  • terminal.ansiBrightCyan#00ACC1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#EC407A
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#EF5350
  • terminal.ansiYellow#FFB400
  • terminal.background#FAFAFA
  • terminal.foreground#333333
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5B9C51italic
string, string.quoted, string.template#FFB400
keyword, storage.type, storage.modifier#5C6BC0bold
keyword.operator, punctuation.accessor#5C6BC0
variable, variable.other#333333
variable.parameter#333333italic
entity.name.function, support.function#26C6DA
meta.function-call#26C6DA
entity.name.class, entity.name.type.class, support.class#5B9C51bold
entity.name.type, support.type#5C6BC0
entity.name.type.interface#26C6DAitalic
constant.numeric#FF8C00
constant, constant.language, constant.character#AB47BC
constant.language.boolean#FF8C00bold
variable.other.property, support.variable.property#4CAF50
meta.object-literal.key#AB47BC
entity.name.tag, punctuation.definition.tag#EF5350
entity.other.attribute-name#26C6DAitalic
punctuation, meta.brace#9E9E9E
string.regexp#AB47BC
constant.character.escape#EF5350
meta.decorator, punctuation.decorator#AB47BC
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#5C6BC0bold
markup.bold#5C6BC0bold
markup.italic#EF5350italic
markup.underline.link#FF8C00
markup.inline.raw, markup.fenced_code#26C6DA
support.type.property-name.json#5C6BC0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5B9C51
support.type.property-name.css#26C6DA
support.constant.property-value.css#FF8C00