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#3EB7A0
  • activityBar.background#E0F0FF
  • activityBar.foreground#3EB7A0
  • activityBarBadge.background#D48CE0
  • activityBarBadge.foreground#F5F8FF
  • badge.background#D48CE0
  • badge.foreground#F5F8FF
  • button.background#6A85B8
  • button.foreground#F5F8FF
  • button.hoverBackground#8FB7E0
  • dropdown.background#E8F4FF
  • dropdown.border#6A85B8
  • dropdown.foreground#2B3B5A
  • editor.background#F5F8FF
  • editor.findMatchBackground#D48CE044
  • editor.findMatchHighlightBackground#D48CE022
  • editor.foreground#2B3B5A
  • editor.lineHighlightBackground#D0E8FF33
  • editor.lineHighlightBorder#D0E8FF66
  • editor.selectionBackground#A6C8FF55
  • editor.selectionHighlightBackground#A6C8FF33
  • editorBracketMatch.background#D48CE033
  • editorBracketMatch.border#D48CE0
  • editorCursor.foreground#3EB7A0
  • editorGroupHeader.tabsBackground#F5F8FF
  • editorIndentGuide.activeBackground#6A85B8
  • editorIndentGuide.background#A0B8D4
  • editorLineNumber.activeForeground#3EB7A0
  • editorLineNumber.foreground#A0B8D4
  • editorWhitespace.foreground#A0B8D4
  • focusBorder#3EB7A0
  • gitDecoration.conflictingResourceForeground#F2C86B
  • gitDecoration.deletedResourceForeground#E57A73
  • gitDecoration.modifiedResourceForeground#3EB7A0
  • gitDecoration.untrackedResourceForeground#88D191
  • input.background#E8F4FF
  • input.border#6A85B8
  • input.foreground#2B3B5A
  • input.placeholderForeground#A0B8D4
  • inputOption.activeBorder#3EB7A0
  • list.activeSelectionBackground#6A85B8
  • list.activeSelectionForeground#F5F8FF
  • list.focusBackground#6A85B8
  • list.highlightForeground#3EB7A0
  • list.hoverBackground#6A85B866
  • minimap.background#F5F8FF
  • minimapSlider.activeBackground#3EB7A066
  • minimapSlider.background#3EB7A022
  • minimapSlider.hoverBackground#3EB7A044
  • panel.background#F5F8FF
  • panel.border#6A85B8
  • panelTitle.activeBorder#3EB7A0
  • panelTitle.activeForeground#3EB7A0
  • panelTitle.inactiveForeground#6A85B8
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#3EB7A088
  • scrollbarSlider.background#A0B8D444
  • scrollbarSlider.hoverBackground#A0B8D488
  • sideBar.background#E8F4FF
  • sideBar.foreground#2B3B5A
  • sideBarSectionHeader.background#E8F4FF
  • sideBarSectionHeader.foreground#6A85B8
  • sideBarTitle.foreground#3EB7A0
  • statusBar.background#6A85B8
  • statusBar.debuggingBackground#D48CE0
  • statusBar.foreground#F5F8FF
  • statusBar.noFolderBackground#E0F0FF
  • statusBarItem.hoverBackground#8FB7E0
  • tab.activeBackground#E0F0FF
  • tab.activeBorder#3EB7A0
  • tab.activeForeground#3EB7A0
  • tab.border#C0D4E8
  • tab.inactiveBackground#F5F8FF
  • tab.inactiveForeground#6A85B8
  • terminal.ansiBlue#6A85B8
  • terminal.ansiBrightBlue#8FABFF
  • terminal.ansiBrightCyan#5FD9C5
  • terminal.ansiBrightGreen#9BE6A5
  • terminal.ansiBrightMagenta#E79BFF
  • terminal.ansiBrightRed#FF928B
  • terminal.ansiBrightYellow#FFE08A
  • terminal.ansiCyan#3EB7A0
  • terminal.ansiGreen#88D191
  • terminal.ansiMagenta#D48CE0
  • terminal.ansiRed#E57A73
  • terminal.ansiYellow#F2C86B
  • terminal.background#F5F8FF
  • terminal.foreground#2B3B5A
  • titleBar.activeBackground#E0F0FF
  • titleBar.activeForeground#2B3B5A
  • titleBar.inactiveBackground#F5F8FF
  • titleBar.inactiveForeground#6A85B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A8C0italic
string, string.quoted, string.template#88D191
keyword, storage.type, storage.modifier#D48CE0bold
keyword.operator, punctuation.accessor#6A85B8
variable, variable.other#2B3B5A
variable.parameter#3EB7A0italic
entity.name.function, support.function#5FD9C5
meta.function-call#8FABFF
entity.name.class, entity.name.type.class, support.class#E57A73bold
entity.name.type, support.type#E57A73
entity.name.type.interface#E57A73italic
constant.numeric#F2C86B
constant, constant.language, constant.character#F2C86B
constant.language.boolean#F2C86Bbold
variable.other.property, support.variable.property#6A85B8
meta.object-literal.key#6A85B8
entity.name.tag, punctuation.definition.tag#D48CE0
entity.other.attribute-name#D48CE0italic
punctuation, meta.brace#6A85B8
string.regexp#F2C86B
constant.character.escape#D48CE0
meta.decorator, punctuation.decorator#88D191
invalid, invalid.illegal#E57A73strikethrough
markup.heading, entity.name.section#D48CE0bold
markup.bold#D48CE0bold
markup.italic#D48CE0italic
markup.underline.link#3EB7A0
markup.inline.raw, markup.fenced_code#88D191
support.type.property-name.json#6A85B8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D48CE0
support.type.property-name.css#88D191
support.constant.property-value.css#6A85B8
themesmith by CyberBoost - VS Code Theme