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#FF6F00
  • activityBar.background#E0F7FF
  • activityBar.foreground#0066CC
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#F5FBFF
  • badge.background#FF6F00
  • badge.foreground#F5FBFF
  • button.background#0066CC
  • button.foreground#F5FBFF
  • button.hoverBackground#0055A0
  • dropdown.background#E8F5FF
  • dropdown.border#C0D8E0
  • dropdown.foreground#2E2E2E
  • editor.background#F5FBFF
  • editor.findMatchBackground#FFC40033
  • editor.findMatchHighlightBackground#FFC40022
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#B8E0FF40
  • editor.lineHighlightBorder#B8E0FF80
  • editor.selectionBackground#FF6F0033
  • editor.selectionHighlightBackground#FF6F0033
  • editorBracketMatch.background#FFC40033
  • editorBracketMatch.border#FFC400
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#E0F7FF
  • editorIndentGuide.activeBackground#A0C0D0
  • editorIndentGuide.background#C0D8E0
  • editorLineNumber.activeForeground#0066CC
  • editorLineNumber.foreground#8FA3B2
  • editorWhitespace.foreground#C0D8E0
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#C71585
  • gitDecoration.deletedResourceForeground#FF6F00
  • gitDecoration.modifiedResourceForeground#FFC400
  • gitDecoration.untrackedResourceForeground#00BFA6
  • input.background#E8F5FF
  • input.border#C0D8E0
  • input.foreground#2E2E2E
  • input.placeholderForeground#8FA3B2
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#B8E0FF
  • list.activeSelectionForeground#0066CC
  • list.focusBackground#B8E0FF
  • list.highlightForeground#FF6F00
  • list.hoverBackground#B8E0FF66
  • minimap.background#F5FBFF
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#F5FBFF
  • panel.border#D0EBFF
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#0066CC
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FF6F0080
  • scrollbarSlider.background#C0D8E080
  • scrollbarSlider.hoverBackground#C0D8E0B0
  • sideBar.background#E8F5FF
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#E0F7FF
  • sideBarSectionHeader.foreground#0066CC
  • sideBarTitle.foreground#0066CC
  • statusBar.background#D0EBFF
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#D0EBFF
  • statusBarItem.hoverBackground#B8E0FF
  • tab.activeBackground#F5FBFF
  • tab.activeBorder#FF6F00
  • tab.activeForeground#0066CC
  • tab.border#C0D8E0
  • tab.inactiveBackground#E0F7FF
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#33FFCC
  • terminal.ansiBrightGreen#33FF99
  • terminal.ansiBrightMagenta#FF66B2
  • terminal.ansiBrightRed#FF944D
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00BFA6
  • terminal.ansiGreen#00A551
  • terminal.ansiMagenta#C71585
  • terminal.ansiRed#FF6F00
  • terminal.ansiYellow#FFC400
  • terminal.background#F5FBFF
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#E0F7FF
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#D0EBFF
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#00BFA6
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#0066CC
variable, variable.other#2E2E2E
variable.parameter#FF6F00italic
entity.name.function, support.function#0066CC
meta.function-call#3399FF
entity.name.class, entity.name.type.class, support.class#FF6F00bold
entity.name.type, support.type#00A551
entity.name.type.interface#00A551italic
constant.numeric#FFC400
constant, constant.language, constant.character#FF6F00
constant.language.boolean#FFC400bold
variable.other.property, support.variable.property#0066CC
meta.object-literal.key#3399FF
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#C71585italic
punctuation, meta.brace#2E2E2E
string.regexp#FF6F00
constant.character.escape#C71585
meta.decorator, punctuation.decorator#FFC400
invalid, invalid.illegal#FF6F00strikethrough
markup.heading, entity.name.section#FFC400bold
markup.bold#FF6F00bold
markup.italic#C71585italic
markup.underline.link#3399FF
markup.inline.raw, markup.fenced_code#00BFA6
support.type.property-name.json#3399FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C71585
support.type.property-name.css#00A551
support.constant.property-value.css#FFC400