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—