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#FF7F50
  • activityBar.background#E0F2FF
  • activityBar.foreground#0066CC
  • activityBarBadge.background#FF7F50
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF7F50
  • badge.foreground#FFFFFF
  • button.background#FF7F50
  • button.foreground#FFFFFF
  • button.hoverBackground#FF6640
  • dropdown.background#FFFFFF
  • dropdown.border#5DAEDB
  • dropdown.foreground#2E3A48
  • editor.background#F5FAFF
  • editor.findMatchBackground#FFB74D44
  • editor.findMatchHighlightBackground#FFB74D22
  • editor.foreground#2E3A48
  • editor.lineHighlightBackground#CDEFFF80
  • editor.lineHighlightBorder#5DAEDB
  • editor.selectionBackground#5DAEDB33
  • editor.selectionHighlightBackground#FF7F5033
  • editorBracketMatch.background#5DAEDB33
  • editorBracketMatch.border#5DAEDB
  • editorCursor.foreground#FF7F50
  • editorGroupHeader.tabsBackground#F5FAFF
  • editorIndentGuide.activeBackground#B0C4DE80
  • editorIndentGuide.background#B0C4DE40
  • editorLineNumber.activeForeground#0066CC
  • editorLineNumber.foreground#B0C4DE
  • editorWhitespace.foreground#B0C4DE
  • focusBorder#FF7F50
  • gitDecoration.conflictingResourceForeground#FFDC7A
  • gitDecoration.deletedResourceForeground#D9534F
  • gitDecoration.modifiedResourceForeground#5DAEDB
  • gitDecoration.untrackedResourceForeground#3CB371
  • input.background#FFFFFF
  • input.border#5DAEDB
  • input.foreground#2E3A48
  • input.placeholderForeground#A8B6C1
  • inputOption.activeBorder#FF7F50
  • list.activeSelectionBackground#CDEFFF
  • list.activeSelectionForeground#0066CC
  • list.focusBackground#CDEFFF
  • list.highlightForeground#FF7F50
  • list.hoverBackground#CDEFFF66
  • minimap.background#F5FAFF
  • minimapSlider.activeBackground#5DAEDB66
  • minimapSlider.background#5DAEDB22
  • minimapSlider.hoverBackground#5DAEDB44
  • panel.background#F5FAFF
  • panel.border#D0EFFE
  • panelTitle.activeBorder#FF7F50
  • panelTitle.activeForeground#0066CC
  • panelTitle.inactiveForeground#8FA2B3
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#5DAEDB80
  • scrollbarSlider.background#B0C4DE40
  • scrollbarSlider.hoverBackground#B0C4DE80
  • sideBar.background#E8F5FF
  • sideBar.foreground#2E3A48
  • sideBarSectionHeader.background#D0EFFE
  • sideBarSectionHeader.foreground#0066CC
  • sideBarTitle.foreground#0066CC
  • statusBar.background#D0EFFE
  • statusBar.debuggingBackground#FFB74D
  • statusBar.foreground#2E3A48
  • statusBar.noFolderBackground#E0F2FF
  • statusBarItem.hoverBackground#C0DEFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF7F50
  • tab.activeForeground#0066CC
  • tab.border#D0EFFE
  • tab.inactiveBackground#F5FAFF
  • tab.inactiveForeground#8FA2B3
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#70C0E8
  • terminal.ansiBrightGreen#3CB371
  • terminal.ansiBrightMagenta#C58AFF
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFDC7A
  • terminal.ansiCyan#5DAEDB
  • terminal.ansiGreen#2E8B57
  • terminal.ansiMagenta#A06ACD
  • terminal.ansiRed#D9534F
  • terminal.ansiYellow#F0AD4E
  • terminal.background#F5FAFF
  • terminal.foreground#2E3A48
  • titleBar.activeBackground#E0F2FF
  • titleBar.activeForeground#2E3A48
  • titleBar.inactiveBackground#F5FAFF
  • titleBar.inactiveForeground#8FA2B3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8B6C1italic
string, string.quoted, string.template#2E8B57
keyword, storage.type, storage.modifier#0066CCbold
keyword.operator, punctuation.accessor#5DAEDB
variable, variable.other#2E3A48
variable.parameter#5DAEDBitalic
entity.name.function, support.function#5DAEDB
meta.function-call#0066CC
entity.name.class, entity.name.type.class, support.class#FF7F50bold
entity.name.type, support.type#FF7F50
entity.name.type.interface#FFDC7Aitalic
constant.numeric#FFB74D
constant, constant.language, constant.character#FF7F50
constant.language.boolean#D9534Fbold
variable.other.property, support.variable.property#5DAEDB
meta.object-literal.key#5DAEDB
entity.name.tag, punctuation.definition.tag#0066CC
entity.other.attribute-name#A06ACDitalic
punctuation, meta.brace#2E3A48
string.regexp#D9534F
constant.character.escape#D9534F
meta.decorator, punctuation.decorator#FFDC7A
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#0066CCbold
markup.bold#FF7F50bold
markup.italic#A06ACDitalic
markup.underline.link#0066CC
markup.inline.raw, markup.fenced_code#2E8B57
support.type.property-name.json#0066CC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFDC7A
support.type.property-name.css#5DAEDB
support.constant.property-value.css#2E8B57
themesmith by CyberBoost - VS Code Theme