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#5C6BC0
  • activityBar.background#E6EBFF
  • activityBar.foreground#FF4081
  • activityBarBadge.background#5C6BC0
  • activityBarBadge.foreground#FAF9FF
  • badge.background#FF4081
  • badge.foreground#FAF9FF
  • button.background#FF4081
  • button.foreground#FAF9FF
  • button.hoverBackground#FF408166
  • dropdown.background#F0F3FF
  • dropdown.border#D8E0FF
  • dropdown.foreground#2B2D3E
  • editor.background#FAF9FF
  • editor.findMatchBackground#FF6E40AA
  • editor.findMatchHighlightBackground#FF6E4044
  • editor.foreground#2B2D3E
  • editor.lineHighlightBackground#E0E4FF80
  • editor.lineHighlightBorder#E0E4FF
  • editor.selectionBackground#FF408155
  • editor.selectionHighlightBackground#FF408133
  • editorBracketMatch.background#FF408133
  • editorBracketMatch.border#FF4081
  • editorCursor.foreground#FF4081
  • editorGroupHeader.tabsBackground#FAF9FF
  • editorIndentGuide.activeBackground#A0A3B5
  • editorIndentGuide.background#C5C7D9
  • editorLineNumber.activeForeground#5C6BC0
  • editorLineNumber.foreground#A0A3B5
  • editorWhitespace.foreground#C5C7D9
  • focusBorder#FF4081
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#5C6BC0
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#F0F3FF
  • input.border#D8E0FF
  • input.foreground#2B2D3E
  • input.placeholderForeground#A0A3B5
  • inputOption.activeBorder#FF4081
  • list.activeSelectionBackground#D8E0FF
  • list.activeSelectionForeground#2B2D3E
  • list.focusBackground#D8E0FF
  • list.highlightForeground#FF4081
  • list.hoverBackground#E0E4FF66
  • minimap.background#FAF9FF
  • minimapSlider.activeBackground#5C6BC066
  • minimapSlider.background#5C6BC022
  • minimapSlider.hoverBackground#5C6BC044
  • panel.background#FAF9FF
  • panel.border#D8E0FF
  • panelTitle.activeBorder#FF4081
  • panelTitle.activeForeground#2B2D3E
  • panelTitle.inactiveForeground#5C6BC0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#FF408188
  • scrollbarSlider.background#C5C7D944
  • scrollbarSlider.hoverBackground#C5C7D988
  • sideBar.background#F0F3FF
  • sideBar.foreground#2B2D3E
  • sideBarSectionHeader.background#E6EBFF
  • sideBarSectionHeader.foreground#5C6BC0
  • sideBarTitle.foreground#FF4081
  • statusBar.background#D8E0FF
  • statusBar.debuggingBackground#FF6E40
  • statusBar.foreground#2B2D3E
  • statusBar.noFolderBackground#E6EBFF
  • statusBarItem.hoverBackground#5C6BC044
  • tab.activeBackground#D8E0FF
  • tab.activeBorder#FF4081
  • tab.activeForeground#2B2D3E
  • tab.border#E0E4FF
  • tab.inactiveBackground#F0F3FF
  • tab.inactiveForeground#5C6BC0
  • terminal.ansiBlue#5C6BC0
  • terminal.ansiBrightBlue#8192D2
  • terminal.ansiBrightCyan#40E0D0
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#FF4081
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAF9FF
  • terminal.foreground#2B2D3E
  • titleBar.activeBackground#E6EBFF
  • titleBar.activeForeground#2B2D3E
  • titleBar.inactiveBackground#FAF9FF
  • titleBar.inactiveForeground#5C6BC0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A3B5italic
string, string.quoted, string.template#FF4081
keyword, storage.type, storage.modifier#5C6BC0bold
keyword.operator, punctuation.accessor#8192D2
variable, variable.other#2B2D3E
variable.parameter#5C6BC0italic
entity.name.function, support.function#5C6BC0
meta.function-call#FF4081
entity.name.class, entity.name.type.class, support.class#5C6BC0bold
entity.name.type, support.type#5C6BC0
entity.name.type.interface#FF4081italic
constant.numeric#FF6E40
constant, constant.language, constant.character#8192D2
constant.language.boolean#5C6BC0bold
variable.other.property, support.variable.property#8192D2
meta.object-literal.key#8192D2
entity.name.tag, punctuation.definition.tag#FF4081
entity.other.attribute-name#FFEB3Bitalic
punctuation, meta.brace#8192D2
string.regexp#FF6E40
constant.character.escape#FF4081
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#5C6BC0bold
markup.bold#FF4081bold
markup.italic#8192D2italic
markup.underline.link#5C6BC0
markup.inline.raw, markup.fenced_code#FF6E40
support.type.property-name.json#5C6BC0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5C6BC0
support.type.property-name.css#8192D2
support.constant.property-value.css#FF6E40
themesmith by CyberBoost - VS Code Theme