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#0099FF
  • activityBar.background#0A0A0A
  • activityBar.foreground#0099FF
  • activityBarBadge.background#0099FF
  • activityBarBadge.foreground#0B0C0D
  • badge.background#0099FF
  • badge.foreground#0B0C0D
  • button.background#0D0E0F
  • button.foreground#E5E5E5
  • button.hoverBackground#151516
  • dropdown.background#0C0C0D
  • dropdown.border#0D0E0F
  • dropdown.foreground#E5E5E5
  • editor.background#0B0C0D
  • editor.findMatchBackground#0099FF44
  • editor.findMatchHighlightBackground#0099FF22
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#0099FF20
  • editor.lineHighlightBorder#0099FF40
  • editor.selectionBackground#0099FF33
  • editor.selectionHighlightBackground#0099FF1A
  • editorBracketMatch.background#0099FF33
  • editorBracketMatch.border#0099FF
  • editorCursor.foreground#0099FF
  • editorGroupHeader.tabsBackground#0B0C0D
  • editorIndentGuide.activeBackground#25252588
  • editorIndentGuide.background#25252544
  • editorLineNumber.activeForeground#0099FF
  • editorLineNumber.foreground#4A4A4A
  • editorWhitespace.foreground#252525
  • focusBorder#0099FF
  • gitDecoration.conflictingResourceForeground#FFDD55
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#0099FF
  • gitDecoration.untrackedResourceForeground#7FFFD4
  • input.background#0C0C0D
  • input.border#0D0E0F
  • input.foreground#E5E5E5
  • input.placeholderForeground#666666
  • inputOption.activeBorder#0099FF
  • list.activeSelectionBackground#0D0E0F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0D0E0F
  • list.highlightForeground#0099FF
  • list.hoverBackground#0D0E0F66
  • minimap.background#0B0C0D
  • minimapSlider.activeBackground#0099FF66
  • minimapSlider.background#0099FF22
  • minimapSlider.hoverBackground#0099FF44
  • panel.background#0B0C0D
  • panel.border#0D0E0F
  • panelTitle.activeBorder#0099FF
  • panelTitle.activeForeground#0099FF
  • panelTitle.inactiveForeground#B0B0B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0099FF88
  • scrollbarSlider.background#4A4A4A44
  • scrollbarSlider.hoverBackground#4A4A4A88
  • sideBar.background#0C0C0D
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#0B0C0D
  • sideBarSectionHeader.foreground#0099FF
  • sideBarTitle.foreground#0099FF
  • statusBar.background#0D0E0F
  • statusBar.debuggingBackground#0099FF
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#0B0C0D
  • statusBarItem.hoverBackground#151516
  • tab.activeBackground#151516
  • tab.activeBorder#0099FF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C0D
  • tab.inactiveBackground#0C0C0D
  • tab.inactiveForeground#B0B0B0
  • terminal.ansiBlue#0099FF
  • terminal.ansiBrightBlue#5ABEFF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#9FFFCC
  • terminal.ansiBrightMagenta#E07CFF
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#5FD7FF
  • terminal.ansiGreen#7FFFD4
  • terminal.ansiMagenta#D877D8
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFDD55
  • terminal.background#0B0C0D
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#0B0C0D
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#B0B0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#7FFFD4
keyword, storage.type, storage.modifier#0099FFbold
keyword.operator, punctuation.accessor#5FD7FF
variable, variable.other#E5E5E5
variable.parameter#FFDD55italic
entity.name.function, support.function#5FD7FF
meta.function-call#B0B0B0
entity.name.class, entity.name.type.class, support.class#0099FFbold
entity.name.type, support.type#5FD7FF
entity.name.type.interface#7FFFD4italic
constant.numeric#FFDD55
constant, constant.language, constant.character#FFDD55
constant.language.boolean#FFDD55bold
variable.other.property, support.variable.property#B0B0B0
meta.object-literal.key#5FD7FF
entity.name.tag, punctuation.definition.tag#0099FF
entity.other.attribute-name#D877D8italic
punctuation, meta.brace#B0B0B0
string.regexp#FF6F6F
constant.character.escape#D877D8
meta.decorator, punctuation.decorator#FFDD55
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#0099FFbold
markup.bold#FFDD55bold
markup.italic#D877D8italic
markup.underline.link#7FFFD4
markup.inline.raw, markup.fenced_code#7FFFD4
support.type.property-name.json#0099FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFDD55
support.type.property-name.css#5FD7FF
support.constant.property-value.css#7FFFD4