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#00E5FF
  • activityBar.background#F0F0FF
  • activityBar.foreground#FF4081
  • activityBarBadge.background#FF4081
  • activityBarBadge.foreground#FAFAFF
  • badge.background#FF4081
  • badge.foreground#FAFAFF
  • button.background#FF4081
  • button.foreground#FAFAFF
  • button.hoverBackground#FF80AB
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFF
  • editor.findMatchBackground#FFAB91
  • editor.findMatchHighlightBackground#FFAB9166
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#F0F8FF
  • editor.lineHighlightBorder#C0C0FF
  • editor.selectionBackground#B3E5FC88
  • editor.selectionHighlightBackground#B3E5FC55
  • editorBracketMatch.background#E1F5FE
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#FF4081
  • editorGroupHeader.tabsBackground#F5F5FF
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FF4081
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF4081
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF5252
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF4081
  • list.activeSelectionBackground#E1F5FE
  • list.activeSelectionForeground#FF4081
  • list.focusBackground#E1F5FE
  • list.highlightForeground#00E5FF
  • list.hoverBackground#E3F2FD
  • minimap.background#FAFAFF
  • minimapSlider.activeBackground#FF408166
  • minimapSlider.background#CCCCCC22
  • minimapSlider.hoverBackground#CCCCCC44
  • panel.background#FAFAFF
  • panel.border#E0E0E0
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#FF4081
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF408188
  • scrollbarSlider.background#AAAAAA44
  • scrollbarSlider.hoverBackground#BBBBBB66
  • sideBar.background#F5F5FF
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#EBEBFF
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#FF4081
  • statusBar.background#E0E0FF
  • statusBar.debuggingBackground#FF4081
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#EBEBFF
  • statusBarItem.hoverBackground#D0D0FF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#00E5FF
  • tab.activeForeground#FF4081
  • tab.border#DADAEA
  • tab.inactiveBackground#F5F5FF
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFFF8D
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#FF4081
  • terminal.ansiRed#FF5252
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFF
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#F0F0FF
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#E8E8FF
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#00C853—
keyword, storage.type, storage.modifier#FF4081bold
keyword.operator, punctuation.accessor#00E5FF—
variable, variable.other#2E2E2E—
variable.parameter#FF4081italic
entity.name.function, support.function#00E5FF—
meta.function-call#69F0AE—
entity.name.class, entity.name.type.class, support.class#FF80ABbold
entity.name.type, support.type#64B5F6—
entity.name.type.interface#FFAB91italic
constant.numeric#FFEB3B—
constant, constant.language, constant.character#FFAB91—
constant.language.boolean#FFEB3Bbold
variable.other.property, support.variable.property#64B5F6—
meta.object-literal.key#FF80AB—
entity.name.tag, punctuation.definition.tag#FF4081—
entity.other.attribute-name#FFAB91italic
punctuation, meta.brace#2E2E2E—
string.regexp#FFEB3B—
constant.character.escape#FF80AB—
meta.decorator, punctuation.decorator#FFEB3B—
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FF4081bold
markup.italic#00E5FFitalic
markup.underline.link#64B5F6—
markup.inline.raw, markup.fenced_code#00C853—
support.type.property-name.json#FF4081—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B—
support.type.property-name.css#00E5FF—
support.constant.property-value.css#69F0AE—
themesmith by CyberBoost - VS Code Theme