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#5B9BD5
  • activityBar.background#F2C9A0
  • activityBar.foreground#333333
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D4AF37
  • badge.foreground#FFFFFF
  • button.background#5B9BD5
  • button.foreground#FFFFFF
  • button.hoverBackground#4A90E2
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAF9F4
  • editor.findMatchBackground#D4AF3799
  • editor.findMatchHighlightBackground#F5C6A599
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9E5
  • editor.lineHighlightBorder#D4AF37
  • editor.selectionBackground#5B9BD54D
  • editor.selectionHighlightBackground#F2C9A04D
  • editorBracketMatch.background#FFF9E5
  • editorBracketMatch.border#D4AF37
  • editorCursor.foreground#5B9BD5
  • editorGroupHeader.tabsBackground#F2C9A0
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#5B9BD5
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#5B9BD5
  • gitDecoration.conflictingResourceForeground#C79FD4
  • gitDecoration.deletedResourceForeground#D9534F
  • gitDecoration.modifiedResourceForeground#6CB4EE
  • gitDecoration.untrackedResourceForeground#7BBF6A
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#5B9BD5
  • list.activeSelectionBackground#5B9BD5
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#D4AF37
  • list.highlightForeground#5B9BD5
  • list.hoverBackground#F2C9A0
  • minimap.background#FAF9F4
  • minimapSlider.activeBackground#CCCCCC
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#CCCCCCB3
  • panel.background#FAF9F4
  • panel.border#CCCCCC
  • panelTitle.activeBorder#D4AF37
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#AAAAAA
  • scrollbarSlider.activeBackground#CCCCCC
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#CCCCCCB3
  • sideBar.background#F5F5F5
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F2C9A0
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#5B9BD5
  • statusBar.background#5B9BD5
  • statusBar.debuggingBackground#D4AF37
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#F2C9A0
  • statusBarItem.hoverBackground#4A90E2
  • tab.activeBackground#FAF9F4
  • tab.activeBorder#D4AF37
  • tab.activeForeground#333333
  • tab.border#CCCCCC
  • tab.inactiveBackground#EAEAEA
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5B9BD5
  • terminal.ansiBrightBlue#85B8E5
  • terminal.ansiBrightCyan#9ED8F5
  • terminal.ansiBrightGreen#A2D99D
  • terminal.ansiBrightMagenta#D9BEE9
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#F7C56E
  • terminal.ansiCyan#6CB4EE
  • terminal.ansiGreen#7BBF6A
  • terminal.ansiMagenta#C79FD4
  • terminal.ansiRed#D9534F
  • terminal.ansiYellow#F0AD4E
  • terminal.background#FAF9F4
  • terminal.foreground#333333
  • titleBar.activeBackground#F2C9A0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#EAEAEA
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B8E92italic
string, string.quoted, string.template#D4AF37
keyword, storage.type, storage.modifier#5B9BD5bold
keyword.operator, punctuation.accessor#555555
variable, variable.other#5C9E8F
variable.parameter#5C9E8Fitalic
entity.name.function, support.function#C79FD4
meta.function-call#D9BEE9
entity.name.class, entity.name.type.class, support.class#5B9BD5bold
entity.name.type, support.type#5C9E8F
entity.name.type.interface#5C9E8Fitalic
constant.numeric#F0AD4E
constant, constant.language, constant.character#F0AD4E
constant.language.boolean#F0AD4Ebold
variable.other.property, support.variable.property#5C9E8F
meta.object-literal.key#5C9E8F
entity.name.tag, punctuation.definition.tag#D9534F
entity.other.attribute-name#D9534Fitalic
punctuation, meta.brace#555555
string.regexp#C79FD4
constant.character.escape#C79FD4
meta.decorator, punctuation.decorator#C79FD4
invalid, invalid.illegal#D9534Fstrikethrough
markup.heading, entity.name.section#5B9BD5bold
markup.bold#5B9BD5bold
markup.italic#5C9E8Fitalic
markup.underline.link#5B9BD5
markup.inline.raw, markup.fenced_code#7BBF6A
support.type.property-name.json#5C9E8F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C79FD4
support.type.property-name.css#F0AD4E
support.constant.property-value.css#D4AF37