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#7AAFD8
  • activityBar.background#EFE7F5
  • activityBar.foreground#7AAFD8
  • activityBarBadge.background#7AAFD8
  • activityBarBadge.foreground#F8F0FF
  • badge.background#7AAFD8
  • badge.foreground#F8F0FF
  • button.background#7AAFD8
  • button.foreground#F8F0FF
  • button.hoverBackground#6A9FC8
  • dropdown.background#EFE7F5
  • dropdown.border#C0C0D0
  • dropdown.foreground#2B2B40
  • editor.background#F8F0FF
  • editor.findMatchBackground#7AAFD844
  • editor.findMatchHighlightBackground#7AAFD822
  • editor.foreground#2B2B40
  • editor.lineHighlightBackground#7AAFD820
  • editor.lineHighlightBorder#7AAFD830
  • editor.selectionBackground#7AAFD830
  • editor.selectionHighlightBackground#7AAFD820
  • editorBracketMatch.background#7AAFD833
  • editorBracketMatch.border#7AAFD8
  • editorCursor.foreground#7AAFD8
  • editorGroupHeader.tabsBackground#F2F0FA
  • editorIndentGuide.activeBackground#C0C0D080
  • editorIndentGuide.background#C0C0D060
  • editorLineNumber.activeForeground#7AAFD8
  • editorLineNumber.foreground#AAAAAA
  • editorWhitespace.foreground#C0C0D0
  • focusBorder#7AAFD8
  • gitDecoration.conflictingResourceForeground#E5C07B
  • gitDecoration.deletedResourceForeground#D98585
  • gitDecoration.modifiedResourceForeground#7AAFD8
  • gitDecoration.untrackedResourceForeground#6FBF8F
  • input.background#EFE7F5
  • input.border#C0C0D0
  • input.foreground#2B2B40
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#7AAFD8
  • list.activeSelectionBackground#7AAFD830
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#7AAFD830
  • list.highlightForeground#7AAFD8
  • list.hoverBackground#7AAFD820
  • minimap.background#F8F0FF
  • minimapSlider.activeBackground#7AAFD866
  • minimapSlider.background#7AAFD822
  • minimapSlider.hoverBackground#7AAFD844
  • panel.background#F8F0FF
  • panel.border#D8D2E0
  • panelTitle.activeBorder#7AAFD8
  • panelTitle.activeForeground#2B2B40
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C0C0D080
  • scrollbarSlider.background#C0C0D040
  • scrollbarSlider.hoverBackground#C0C0D060
  • sideBar.background#F0E9FA
  • sideBar.foreground#2B2B40
  • sideBarSectionHeader.background#E9E0F5
  • sideBarSectionHeader.foreground#7AAFD8
  • sideBarTitle.foreground#7AAFD8
  • statusBar.background#E5E0F0
  • statusBar.debuggingBackground#7AAFD8
  • statusBar.foreground#2B2B40
  • statusBar.noFolderBackground#E5E0F0
  • statusBarItem.hoverBackground#D0C0E0
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#7AAFD8
  • tab.activeForeground#2B2B40
  • tab.border#D8D2E0
  • tab.inactiveBackground#F2F0FA
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#7AAFD8
  • terminal.ansiBrightBlue#9CCFFD
  • terminal.ansiBrightCyan#9CD9B5
  • terminal.ansiBrightGreen#9CD9B5
  • terminal.ansiBrightMagenta#D1C4E0
  • terminal.ansiBrightRed#FFB2B2
  • terminal.ansiBrightYellow#FFF28C
  • terminal.ansiCyan#7AAFD8
  • terminal.ansiGreen#6FBF8F
  • terminal.ansiMagenta#C8B4E6
  • terminal.ansiRed#D98585
  • terminal.ansiYellow#E5C07B
  • terminal.background#F8F0FF
  • terminal.foreground#2B2B40
  • titleBar.activeBackground#EDE4FA
  • titleBar.activeForeground#2B2B40
  • titleBar.inactiveBackground#E0D5F0
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#6FBF8F
keyword, storage.type, storage.modifier#7AAFD8bold
keyword.operator, punctuation.accessor#C8B4E6
variable, variable.other#2B2B40
variable.parameter#C8B4E6italic
entity.name.function, support.function#7AAFD8
meta.function-call#7AAFD8
entity.name.class, entity.name.type.class, support.class#C8B4E6bold
entity.name.type, support.type#C8B4E6
entity.name.type.interface#C8B4E6italic
constant.numeric#D98585
constant, constant.language, constant.character#E5C07B
constant.language.boolean#D98585bold
variable.other.property, support.variable.property#7AAFD8
meta.object-literal.key#7AAFD8
entity.name.tag, punctuation.definition.tag#7AAFD8
entity.other.attribute-name#C8B4E6italic
punctuation, meta.brace#B0B0C0
string.regexp#6FBF8F
constant.character.escape#C8B4E6
meta.decorator, punctuation.decorator#E5C07B
invalid, invalid.illegal#D98585strikethrough
markup.heading, entity.name.section#7AAFD8bold
markup.bold#E5C07Bbold
markup.italic#C8B4E6italic
markup.underline.link#7AAFD8
markup.inline.raw, markup.fenced_code#6FBF8F
support.type.property-name.json#7AAFD8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C8B4E6
support.type.property-name.css#7AAFD8
support.constant.property-value.css#6FBF8F