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#d01257
  • activityBar.background#e0e0e0
  • activityBar.foreground#d01257
  • activityBarBadge.background#d01257
  • activityBarBadge.foreground#fafafa
  • badge.background#d01257
  • badge.foreground#fafafa
  • button.background#d01257
  • button.foreground#ffffff
  • button.hoverBackground#e03070
  • dropdown.background#f0f0f0
  • dropdown.border#d01257
  • dropdown.foreground#252525
  • editor.background#fafafa
  • editor.findMatchBackground#d01256aa
  • editor.findMatchHighlightBackground#d0125688
  • editor.foreground#252525
  • editor.lineHighlightBackground#d0125610
  • editor.lineHighlightBorder#d0125620
  • editor.selectionBackground#d0125640
  • editor.selectionHighlightBackground#d0125620
  • editorBracketMatch.background#d0125633
  • editorBracketMatch.border#d01257
  • editorCursor.foreground#d01257
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorIndentGuide.activeBackground#b0b0b088
  • editorIndentGuide.background#c0c0c044
  • editorLineNumber.activeForeground#d01257
  • editorLineNumber.foreground#8a8a8a
  • editorWhitespace.foreground#b0b0b0
  • focusBorder#d01257
  • gitDecoration.conflictingResourceForeground#ffeb3b
  • gitDecoration.deletedResourceForeground#d01257
  • gitDecoration.modifiedResourceForeground#159947
  • gitDecoration.untrackedResourceForeground#80d8ff
  • input.background#ffffff
  • input.border#d01257
  • input.foreground#252525
  • input.placeholderForeground#8a8a8a
  • inputOption.activeBorder#d01257
  • list.activeSelectionBackground#d0125620
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d0125620
  • list.highlightForeground#d01257
  • list.hoverBackground#d0125630
  • minimap.background#fafafa
  • minimapSlider.activeBackground#d0125666
  • minimapSlider.background#d0125622
  • minimapSlider.hoverBackground#d0125644
  • panel.background#fafafa
  • panel.border#d01257
  • panelTitle.activeBorder#d01257
  • panelTitle.activeForeground#d01257
  • panelTitle.inactiveForeground#8a8a8a
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#c0c0c0cc
  • scrollbarSlider.background#c0c0c044
  • scrollbarSlider.hoverBackground#c0c0c088
  • sideBar.background#f0f0f0
  • sideBar.foreground#252525
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#d01257
  • sideBarTitle.foreground#d01257
  • statusBar.background#d01257
  • statusBar.debuggingBackground#ff5722
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#e0e0e0
  • statusBarItem.hoverBackground#d0125680
  • tab.activeBackground#ffffff
  • tab.activeBorder#d01257
  • tab.activeForeground#252525
  • tab.border#c0c0c0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlue#64b5f6
  • terminal.ansiBrightCyan#4dd0e1
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#ba68c8
  • terminal.ansiBrightRed#ff5252
  • terminal.ansiBrightYellow#fff176
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#159947
  • terminal.ansiMagenta#9c27b0
  • terminal.ansiRed#d01257
  • terminal.ansiYellow#ffeb3b
  • terminal.background#fafafa
  • terminal.foreground#252525
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#252525
  • titleBar.inactiveBackground#e0e0e0
  • titleBar.inactiveForeground#8a8a8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8a8aitalic
string, string.quoted, string.template#159947
keyword, storage.type, storage.modifier#d01257bold
keyword.operator, punctuation.accessor#d01257
variable, variable.other#80d8ff
variable.parameter#ff9800italic
entity.name.function, support.function#9c27b0
meta.function-call#9c27b0
entity.name.class, entity.name.type.class, support.class#2196f3bold
entity.name.type, support.type#2196f3
entity.name.type.interface#159947italic
constant.numeric#ffb74d
constant, constant.language, constant.character#ffeb3b
constant.language.boolean#ff5252bold
variable.other.property, support.variable.property#00bcd4
meta.object-literal.key#00bcd4
entity.name.tag, punctuation.definition.tag#d01257
entity.other.attribute-name#9c27b0italic
punctuation, meta.brace#252525
string.regexp#159947
constant.character.escape#9c27b0
meta.decorator, punctuation.decorator#ffeb3b
invalid, invalid.illegal#f44336strikethrough
markup.heading, entity.name.section#d01257bold
markup.bold#d01257bold
markup.italic#9c27b0italic
markup.underline.link#2196f3
markup.inline.raw, markup.fenced_code#159947
support.type.property-name.json#9c27b0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d01257
support.type.property-name.css#2196f3
support.constant.property-value.css#159947