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