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—
themesmith by CyberBoost - VS Code Theme