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#FF6FCF
  • activityBar.background#FFEBF5
  • activityBar.foreground#BF4080
  • activityBarBadge.background#FF6FCF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF1493
  • badge.foreground#FFFFFF
  • button.background#FF6FCF
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8AB8
  • dropdown.background#FFF5FA
  • dropdown.border#FFB3D9
  • dropdown.foreground#222222
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFB6C1
  • editor.findMatchHighlightBackground#FFC0D5
  • editor.foreground#222222
  • editor.lineHighlightBackground#FFF0F5
  • editor.lineHighlightBorder#FFB3D9
  • editor.selectionBackground#FFD1DC
  • editor.selectionHighlightBackground#FFEBF5
  • editorBracketMatch.background#FFE4F0
  • editorBracketMatch.border#FF6FCF
  • editorCursor.foreground#FF1493
  • editorGroupHeader.tabsBackground#FFE0EE
  • editorIndentGuide.activeBackground#FFB3D9
  • editorIndentGuide.background#F0D0E0
  • editorLineNumber.activeForeground#BF4080
  • editorLineNumber.foreground#B08090
  • editorWhitespace.foreground#E0C0D0
  • focusBorder#FF6FCF
  • gitDecoration.conflictingResourceForeground#FF1493
  • gitDecoration.deletedResourceForeground#FF6FCF
  • gitDecoration.modifiedResourceForeground#FFB3D9
  • gitDecoration.untrackedResourceForeground#A0C8FF
  • input.background#FFFFFF
  • input.border#FFB3D9
  • input.foreground#222222
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#FF6FCF
  • list.activeSelectionBackground#FFB3D9
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FFD1DC
  • list.highlightForeground#FF6FCF
  • list.hoverBackground#FFE0EE
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#FF6FCF
  • minimapSlider.background#FFB3D9
  • minimapSlider.hoverBackground#FF8AB8
  • panel.background#FFF5FA
  • panel.border#FFB3D9
  • panelTitle.activeBorder#FF6FCF
  • panelTitle.activeForeground#BF4080
  • panelTitle.inactiveForeground#AA5A80
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FF6FCF
  • scrollbarSlider.background#FFB3D9
  • scrollbarSlider.hoverBackground#FF8AB8
  • sideBar.background#FFF5FA
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#FFE0EE
  • sideBarSectionHeader.foreground#BF4080
  • sideBarTitle.foreground#BF4080
  • statusBar.background#FF6FCF
  • statusBar.debuggingBackground#FF1493
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#FFB6C1
  • statusBarItem.hoverBackground#FF8AB8
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6FCF
  • tab.activeForeground#BF4080
  • tab.border#FFB3D9
  • tab.inactiveBackground#FFE0EE
  • tab.inactiveForeground#AA5A80
  • terminal.ansiBlue#A0C8FF
  • terminal.ansiBrightBlue#6080FF
  • terminal.ansiBrightCyan#60FFD0
  • terminal.ansiBrightGreen#60FF60
  • terminal.ansiBrightMagenta#C060FF
  • terminal.ansiBrightRed#FF6060
  • terminal.ansiBrightYellow#FFD040
  • terminal.ansiCyan#A0FFF0
  • terminal.ansiGreen#B0FFA0
  • terminal.ansiMagenta#D0A0FF
  • terminal.ansiRed#FF8FA0
  • terminal.ansiYellow#FFEB99
  • terminal.background#FFFFFF
  • terminal.foreground#222222
  • titleBar.activeBackground#FFEBF5
  • titleBar.activeForeground#BF4080
  • titleBar.inactiveBackground#F0E0E8
  • titleBar.inactiveForeground#A08090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FF6FCFbold
keyword.operator, punctuation.accessor#BF4080
variable, variable.other#222222
variable.parameter#AA5A80italic
entity.name.function, support.function#0066CC
meta.function-call#0077BB
entity.name.class, entity.name.type.class, support.class#BF4080bold
entity.name.type, support.type#0077AA
entity.name.type.interface#AA5A80italic
constant.numeric#C47F00
constant, constant.language, constant.character#C47F00
constant.language.boolean#FF6FCFbold
variable.other.property, support.variable.property#222222
meta.object-literal.key#BF4080
entity.name.tag, punctuation.definition.tag#FF6FCF
entity.other.attribute-name#AA5A80italic
punctuation, meta.brace#333333
string.regexp#C47F00
constant.character.escape#C47F00
meta.decorator, punctuation.decorator#FF1493
invalid, invalid.illegal#FF1493strikethrough
markup.heading, entity.name.section#FF6FCFbold
markup.bold#FF6FCFbold
markup.italic#AA5A80italic
markup.underline.link#0066CC
markup.inline.raw, markup.fenced_code#808080
support.type.property-name.json#BF4080
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0066CC
support.type.property-name.css#008080
support.constant.property-value.css#C47F00
themesmith by CyberBoost - VS Code Theme