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#FFD700
  • activityBar.background#11132F
  • activityBar.foreground#C7D0FF
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F61
  • badge.foreground#FFFFFF
  • button.background#FF6F61
  • button.foreground#FFFFFF
  • button.hoverBackground#FF4500
  • dropdown.background#0F0F2A
  • dropdown.border#2B1B3A
  • dropdown.foreground#E3E4F1
  • editor.background#0B0C1D
  • editor.findMatchBackground#FF6F6180
  • editor.findMatchHighlightBackground#FF6F6140
  • editor.foreground#E3E4F1
  • editor.lineHighlightBackground#1A1A3D
  • editor.lineHighlightBorder#2B1B3A
  • editor.selectionBackground#2B1B3A80
  • editor.selectionHighlightBackground#1A1A3D80
  • editorBracketMatch.background#2B1B3A40
  • editorBracketMatch.border#FFD700
  • editorCursor.foreground#FFD700
  • editorGroupHeader.tabsBackground#11132F
  • editorIndentGuide.activeBackground#FFD700
  • editorIndentGuide.background#2B1B3A
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#8A8AB1
  • editorWhitespace.foreground#5A5A80
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#FF6F61
  • gitDecoration.deletedResourceForeground#FF4500
  • gitDecoration.modifiedResourceForeground#FFB400
  • gitDecoration.untrackedResourceForeground#6AFF8D
  • input.background#0F0F2A
  • input.border#2B1B3A
  • input.foreground#E3E4F1
  • input.placeholderForeground#5A5A80
  • inputOption.activeBorder#FFD700
  • list.activeSelectionBackground#2B1B3A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A3D
  • list.highlightForeground#FFD700
  • list.hoverBackground#1A1A3D
  • minimap.background#0B0C1D
  • minimapSlider.activeBackground#FF6F6180
  • minimapSlider.background#2B1B3A80
  • minimapSlider.hoverBackground#2B1B3ABF
  • panel.background#11132F
  • panel.border#2B1B3A
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#8A8AB1
  • scrollbar.shadow#0B0C1D
  • scrollbarSlider.activeBackground#FF6F6180
  • scrollbarSlider.background#2B1B3A80
  • scrollbarSlider.hoverBackground#2B1B3ABF
  • sideBar.background#0F0F2A
  • sideBar.foreground#C7D0FF
  • sideBarSectionHeader.background#11132F
  • sideBarSectionHeader.foreground#C7D0FF
  • sideBarTitle.foreground#FFD700
  • statusBar.background#11132F
  • statusBar.debuggingBackground#FF4500
  • statusBar.foreground#E3E4F1
  • statusBar.noFolderBackground#2B1B3A
  • statusBarItem.hoverBackground#2B1B3A
  • tab.activeBackground#0F0F2A
  • tab.activeBorder#FFD700
  • tab.activeForeground#FFFFFF
  • tab.border#2B1B3A
  • tab.inactiveBackground#0B0C1D
  • tab.inactiveForeground#8A8AB1
  • terminal.ansiBlue#A8B6FF
  • terminal.ansiBrightBlue#C5C5FF
  • terminal.ansiBrightCyan#8FFFD0
  • terminal.ansiBrightGreen#8FFF8F
  • terminal.ansiBrightMagenta#FF9E6A
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFB400
  • terminal.ansiCyan#6AEFFF
  • terminal.ansiGreen#6AFF8D
  • terminal.ansiMagenta#FF6F61
  • terminal.ansiRed#FF4500
  • terminal.ansiYellow#FFD700
  • terminal.background#0B0C1D
  • terminal.foreground#E3E4F1
  • titleBar.activeBackground#11132F
  • titleBar.activeForeground#E3E4F1
  • titleBar.inactiveBackground#0B0C1D
  • titleBar.inactiveForeground#8A8AB1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A80italic
string, string.quoted, string.template#FFD280
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#C5C5FF
variable, variable.other#A8B6FF
variable.parameter#B0B0E0italic
entity.name.function, support.function#FFB400
meta.function-call#FFB400
entity.name.class, entity.name.type.class, support.class#FF6F61bold
entity.name.type, support.type#FFB400
entity.name.type.interface#B0B0E0italic
constant.numeric#FF9E6A
constant, constant.language, constant.character#FF9E6A
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#A8B6FF
meta.object-literal.key#A8B6FF
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#A8B6FFitalic
punctuation, meta.brace#C5C5FF
string.regexp#FFB400
constant.character.escape#FF9E6A
meta.decorator, punctuation.decorator#FF6F61
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FFD700bold
markup.bold#FFD700bold
markup.italic#FFB400italic
markup.underline.link#A8B6FF
markup.inline.raw, markup.fenced_code#FFB400
support.type.property-name.json#A8B6FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F61
support.type.property-name.css#FFB400
support.constant.property-value.css#A8B6FF