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