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#D72638
  • activityBar.background#EDEFF0
  • activityBar.foreground#D72638
  • activityBarBadge.background#0096C7
  • activityBarBadge.foreground#FAFAFA
  • badge.background#0096C7
  • badge.foreground#FAFAFA
  • button.background#D72638
  • button.foreground#FAFAFA
  • button.hoverBackground#D7264080
  • dropdown.background#F4F5F6
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#D7263C30
  • editor.findMatchHighlightBackground#D7263C20
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#0096C720
  • editor.lineHighlightBorder#0096C740
  • editor.selectionBackground#7FDB6D40
  • editor.selectionHighlightBackground#7FDB6D20
  • editorBracketMatch.background#7FDB6D30
  • editorBracketMatch.border#7FDB6D
  • editorCursor.foreground#D72638
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#0096C7
  • editorIndentGuide.background#CCCCCC
  • editorLineNumber.activeForeground#D72638
  • editorLineNumber.foreground#7A8A99
  • editorWhitespace.foreground#7A8A99
  • focusBorder#D72638
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#D72638
  • gitDecoration.modifiedResourceForeground#0096C7
  • gitDecoration.untrackedResourceForeground#7FDB6D
  • input.background#F4F5F6
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#7A8A99
  • inputOption.activeBorder#D72638
  • list.activeSelectionBackground#D7264030
  • list.activeSelectionForeground#FAFAFA
  • list.focusBackground#0096C720
  • list.highlightForeground#D72638
  • list.hoverBackground#D7263C20
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#D7263866
  • minimapSlider.background#D7263822
  • minimapSlider.hoverBackground#D7263844
  • panel.background#FAFAFA
  • panel.border#EDEFF0
  • panelTitle.activeBorder#D72638
  • panelTitle.activeForeground#D72638
  • panelTitle.inactiveForeground#7A8A99
  • scrollbar.shadow#00000011
  • scrollbarSlider.activeBackground#D7263888
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F4F5F6
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#EDEFF0
  • sideBarSectionHeader.foreground#0096C7
  • sideBarTitle.foreground#D72638
  • statusBar.background#EDEFF0
  • statusBar.debuggingBackground#D72638
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#EDEFF0
  • statusBarItem.hoverBackground#D7263833
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#D72638
  • tab.activeForeground#D72638
  • tab.border#EDEFF0
  • tab.inactiveBackground#F4F5F6
  • tab.inactiveForeground#7A8A99
  • terminal.ansiBlue#0096C7
  • terminal.ansiBrightBlue#33B5E5
  • terminal.ansiBrightCyan#66E5E5
  • terminal.ansiBrightGreen#9AEF9E
  • terminal.ansiBrightMagenta#FF6F76
  • terminal.ansiBrightRed#FF6F76
  • terminal.ansiBrightYellow#FFD75F
  • terminal.ansiCyan#55DDE0
  • terminal.ansiGreen#7FDB6D
  • terminal.ansiMagenta#D72638
  • terminal.ansiRed#D72638
  • terminal.ansiYellow#FFB400
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#EDEFF0
  • titleBar.inactiveForeground#7A8A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8A99italic
string, string.quoted, string.template#7FDB6D
keyword, storage.type, storage.modifier#D72638bold
keyword.operator, punctuation.accessor#0096C7
variable, variable.other#2E2E2E
variable.parameter#7FDB6Ditalic
entity.name.function, support.function#0096C7
meta.function-call#D72638
entity.name.class, entity.name.type.class, support.class#D72638bold
entity.name.type, support.type#0096C7
entity.name.type.interface#0096C7italic
constant.numeric#7FDB6D
constant, constant.language, constant.character#7FDB6D
constant.language.boolean#D72638bold
variable.other.property, support.variable.property#0096C7
meta.object-literal.key#D72638
entity.name.tag, punctuation.definition.tag#D72638
entity.other.attribute-name#0096C7italic
punctuation, meta.brace#2E2E2E
string.regexp#7FDB6D
constant.character.escape#D72638
meta.decorator, punctuation.decorator#0096C7
invalid, invalid.illegal#D72638strikethrough
markup.heading, entity.name.section#D72638bold
markup.bold#D72638bold
markup.italic#0096C7italic
markup.underline.link#0096C7
markup.inline.raw, markup.fenced_code#7FDB6D
support.type.property-name.json#D72638
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0096C7
support.type.property-name.css#0096C7
support.constant.property-value.css#7FDB6D