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#E63946
  • activityBar.background#FFE5E5
  • activityBar.foreground#E63946
  • activityBarBadge.background#E63946
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E63946
  • badge.foreground#FFFFFF
  • button.background#E63946
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#FFB3C1
  • dropdown.foreground#2E2E2E
  • editor.background#FFF9F0
  • editor.findMatchBackground#F4C43080
  • editor.findMatchHighlightBackground#F4C43040
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFE8E8
  • editor.lineHighlightBorder#FFB3C1
  • editor.selectionBackground#FFB3C1AA
  • editor.selectionHighlightBackground#FFE0E0
  • editorBracketMatch.background#FFB3C1
  • editorBracketMatch.border#E63946
  • editorCursor.foreground#E63946
  • editorGroupHeader.tabsBackground#FFF9F0
  • editorIndentGuide.activeBackground#C0C0C0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#E63946
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#E63946
  • gitDecoration.conflictingResourceForeground#BD10E0
  • gitDecoration.deletedResourceForeground#C62828
  • gitDecoration.modifiedResourceForeground#F4C430
  • gitDecoration.untrackedResourceForeground#7ED321
  • input.background#FFFFFF
  • input.border#FFB3C1
  • input.foreground#2E2E2E
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#E63946
  • list.activeSelectionBackground#FFB3C1
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FFB3C1
  • list.highlightForeground#E63946
  • list.hoverBackground#FFE8E8
  • minimap.background#FFF9F0
  • minimapSlider.activeBackground#AAAAAA
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#BBBBBB
  • panel.background#FFF9F0
  • panel.border#FFB3C1
  • panelTitle.activeBorder#E63946
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#AAAAAA
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB
  • sideBar.background#FFFAF6
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#FFF0F0
  • sideBarSectionHeader.foreground#E63946
  • sideBarTitle.foreground#E63946
  • statusBar.background#FFB3C1
  • statusBar.debuggingBackground#F4C430
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#FFE5E5
  • statusBarItem.hoverBackground#F4C430
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#E63946
  • tab.activeForeground#E63946
  • tab.border#FFB3C1
  • tab.inactiveBackground#FFF5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#357ABD
  • terminal.ansiBrightCyan#3ED9C0
  • terminal.ansiBrightGreen#9ED24A
  • terminal.ansiBrightMagenta#D100E0
  • terminal.ansiBrightRed#C62828
  • terminal.ansiBrightYellow#F7B500
  • terminal.ansiCyan#50E3C2
  • terminal.ansiGreen#7ED321
  • terminal.ansiMagenta#BD10E0
  • terminal.ansiRed#E63946
  • terminal.ansiYellow#F5A623
  • terminal.background#FFF9F0
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FFE5E5
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FFF5F5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#7ED321
keyword, storage.type, storage.modifier#E63946bold
keyword.operator, punctuation.accessor#4A90E2
variable, variable.other#2E2E2E
variable.parameter#F4C430italic
entity.name.function, support.function#BD10E0
meta.function-call#BD10E0
entity.name.class, entity.name.type.class, support.class#FF6B6Bbold
entity.name.type, support.type#4A90E2
entity.name.type.interface#FF6B6Bitalic
constant.numeric#FFB300
constant, constant.language, constant.character#E63946
constant.language.boolean#E63946bold
variable.other.property, support.variable.property#2E2E2E
meta.object-literal.key#2E2E2E
entity.name.tag, punctuation.definition.tag#4A90E2
entity.other.attribute-name#FF6B6Bitalic
punctuation, meta.brace#2E2E2E
string.regexp#BD10E0
constant.character.escape#F4C430
meta.decorator, punctuation.decorator#FF6B6B
invalid, invalid.illegal#C62828strikethrough
markup.heading, entity.name.section#E63946bold
markup.bold#E63946bold
markup.italic#F4C430italic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#7ED321
support.type.property-name.json#4A90E2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6B6B
support.type.property-name.css#E63946
support.constant.property-value.css#7ED321