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#FF69B4
  • activityBar.background#121225
  • activityBar.foreground#F4B3D2
  • activityBarBadge.background#FF69B4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8C00
  • badge.foreground#FFFFFF
  • button.background#FF69B4
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8C00
  • dropdown.background#1A1A2E
  • dropdown.border#333355
  • dropdown.foreground#E0E0FF
  • editor.background#1E1E2F
  • editor.findMatchBackground#FF8C00AA
  • editor.findMatchHighlightBackground#FF8C0080
  • editor.foreground#E0E0F0
  • editor.lineHighlightBackground#2A2A3A
  • editor.lineHighlightBorder#FF69B4
  • editor.selectionBackground#FF69B4AA
  • editor.selectionHighlightBackground#FFB6C180
  • editorBracketMatch.background#FF69B420
  • editorBracketMatch.border#FF69B4
  • editorCursor.foreground#FFB6C1
  • editorGroupHeader.tabsBackground#14142B
  • editorIndentGuide.activeBackground#7777AA
  • editorIndentGuide.background#333355
  • editorLineNumber.activeForeground#FFB6C1
  • editorLineNumber.foreground#555577
  • editorWhitespace.foreground#555577
  • focusBorder#FF69B4
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#66B2FF
  • gitDecoration.untrackedResourceForeground#88FF88
  • input.background#1A1A2E
  • input.border#333355
  • input.foreground#E0E0FF
  • input.placeholderForeground#777788
  • inputOption.activeBorder#FF69B4
  • list.activeSelectionBackground#2A2A3A
  • list.activeSelectionForeground#FFB6C1
  • list.focusBackground#2A2A3A
  • list.highlightForeground#FF69B4
  • list.hoverBackground#2A2A3A80
  • minimap.background#1E1E2F
  • minimapSlider.activeBackground#FF69B480
  • minimapSlider.background#55555580
  • minimapSlider.hoverBackground#777777A0
  • panel.background#14142B
  • panel.border#0F0F1A
  • panelTitle.activeBorder#FF69B4
  • panelTitle.activeForeground#FFB6C1
  • panelTitle.inactiveForeground#777788
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#FF69B480
  • scrollbarSlider.background#55555580
  • scrollbarSlider.hoverBackground#777777A0
  • sideBar.background#1A1A2E
  • sideBar.foreground#E0E0FF
  • sideBarSectionHeader.background#14142B
  • sideBarSectionHeader.foreground#FFB6C1
  • sideBarTitle.foreground#F4B3D2
  • statusBar.background#14142B
  • statusBar.debuggingBackground#FF8C00
  • statusBar.foreground#FFB6C1
  • statusBar.noFolderBackground#2C2C3E
  • statusBarItem.hoverBackground#2A2A3A
  • tab.activeBackground#1A1A2E
  • tab.activeBorder#FF69B4
  • tab.activeForeground#FFB6C1
  • tab.border#0F0F1A
  • tab.inactiveBackground#14142B
  • tab.inactiveForeground#777788
  • terminal.ansiBlue#66B2FF
  • terminal.ansiBrightBlue#99CCFF
  • terminal.ansiBrightCyan#AAF0FF
  • terminal.ansiBrightGreen#AAFFAA
  • terminal.ansiBrightMagenta#E39FFF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFF1A1
  • terminal.ansiCyan#88FFFF
  • terminal.ansiGreen#88FF88
  • terminal.ansiMagenta#D37FFF
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFEF88
  • terminal.background#1E1E2F
  • terminal.foreground#E0E0F0
  • titleBar.activeBackground#14142B
  • titleBar.activeForeground#FFB6C1
  • titleBar.inactiveBackground#111122
  • titleBar.inactiveForeground#777788

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#FFB6C1
keyword, storage.type, storage.modifier#FF69B4bold
keyword.operator, punctuation.accessor#D37FFF
variable, variable.other#A0A0FF
variable.parameter#C0C0FFitalic
entity.name.function, support.function#66B2FF
meta.function-call#88FFFF
entity.name.class, entity.name.type.class, support.class#FF8C00bold
entity.name.type, support.type#FFD700
entity.name.type.interface#F4C1FFitalic
constant.numeric#FFEF88
constant, constant.language, constant.character#FFEF88
constant.language.boolean#FF8C00bold
variable.other.property, support.variable.property#FFB6C1
meta.object-literal.key#FF69B4
entity.name.tag, punctuation.definition.tag#D37FFF
entity.other.attribute-name#D37FFFitalic
punctuation, meta.brace#E0E0F0
string.regexp#FFB6C1
constant.character.escape#FF8C00
meta.decorator, punctuation.decorator#FF69B4
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FF69B4bold
markup.bold#FF69B4bold
markup.italic#FFB6C1italic
markup.underline.link#66B2FF
markup.inline.raw, markup.fenced_code#88FFFF
support.type.property-name.json#FFB6C1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D37FFF
support.type.property-name.css#FFEF88
support.constant.property-value.css#66B2FF