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#39C070
  • activityBar.background#F0F0F0
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#39C070
  • activityBarBadge.foreground#FFFFFF
  • badge.background#39C070
  • badge.foreground#FFFFFF
  • button.background#39C070
  • button.foreground#FFFFFF
  • button.hoverBackground#2FA764
  • dropdown.background#EBEBEB
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#39C07044
  • editor.findMatchHighlightBackground#39C07033
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#39C07010
  • editor.lineHighlightBorder#39C07030
  • editor.selectionBackground#39C07033
  • editor.selectionHighlightBackground#39C07022
  • editorBracketMatch.background#39C07022
  • editorBracketMatch.border#39C070
  • editorCursor.foreground#39C070
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#39C070
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#39C070
  • gitDecoration.conflictingResourceForeground#F4C749
  • gitDecoration.deletedResourceForeground#E84A5F
  • gitDecoration.modifiedResourceForeground#39C070
  • gitDecoration.untrackedResourceForeground#3A8DFF
  • input.background#EBEBEB
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#39C070
  • list.activeSelectionBackground#39C07022
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#39C07010
  • list.highlightForeground#39C070
  • list.hoverBackground#39C07010
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#C0C0C066
  • minimapSlider.background#C0C0C022
  • minimapSlider.hoverBackground#C0C0C044
  • panel.background#F7F7F7
  • panel.border#C0C0C0
  • panelTitle.activeBorder#39C070
  • panelTitle.activeForeground#39C070
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#C0C0CCCC
  • scrollbarSlider.background#C0C0C044
  • scrollbarSlider.hoverBackground#C0C0C088
  • sideBar.background#F7F7F7
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#EBEBEB
  • sideBarSectionHeader.foreground#39C070
  • sideBarTitle.foreground#39C070
  • statusBar.background#E8E8E8
  • statusBar.debuggingBackground#39C070
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#E8E8E8
  • statusBarItem.hoverBackground#D0D0D0
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#39C070
  • tab.activeForeground#2B2B2B
  • tab.border#C0C0C0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#3A8DFF
  • terminal.ansiBrightBlue#5AA7FF
  • terminal.ansiBrightCyan#86D9C9
  • terminal.ansiBrightGreen#70D68A
  • terminal.ansiBrightMagenta#D382FF
  • terminal.ansiBrightRed#FF7A85
  • terminal.ansiBrightYellow#FFDB6E
  • terminal.ansiCyan#6ABFBD
  • terminal.ansiGreen#39C070
  • terminal.ansiMagenta#C663FF
  • terminal.ansiRed#E84A5F
  • terminal.ansiYellow#F4C749
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#3A8DFF—
keyword, storage.type, storage.modifier#39C070bold
keyword.operator, punctuation.accessor#39C070—
variable, variable.other#2B2B2B—
variable.parameter#7A7A7Aitalic
entity.name.function, support.function#3A8DFF—
meta.function-call#5A5A5A—
entity.name.class, entity.name.type.class, support.class#39C070bold
entity.name.type, support.type#3A8DFF—
entity.name.type.interface#3A8DFFitalic
constant.numeric#F4C749—
constant, constant.language, constant.character#F4C749—
constant.language.boolean#F4C749bold
variable.other.property, support.variable.property#5A5A5A—
meta.object-literal.key#39C070—
entity.name.tag, punctuation.definition.tag#39C070—
entity.other.attribute-name#C663FFitalic
punctuation, meta.brace#7A7A7A—
string.regexp#F4C749—
constant.character.escape#C663FF—
meta.decorator, punctuation.decorator#F4C749—
invalid, invalid.illegal#E84A5Fstrikethrough
markup.heading, entity.name.section#39C070bold
markup.bold#F4C749bold
markup.italic#C663FFitalic
markup.underline.link#3A8DFF—
markup.inline.raw, markup.fenced_code#39C070—
support.type.property-name.json#39C070—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F4C749—
support.type.property-name.css#3A8DFF—
support.constant.property-value.css#F4C749—