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#FF4081
  • activityBar.background#120F2A
  • activityBar.foreground#FF4081
  • activityBarBadge.background#FF4081
  • activityBarBadge.foreground#0F0C1F
  • badge.background#FF4081
  • badge.foreground#0F0C1F
  • button.background#1A182B
  • button.foreground#FFFFFF
  • button.hoverBackground#2B283D
  • dropdown.background#120F2A
  • dropdown.border#1A182B
  • dropdown.foreground#E6E6FA
  • editor.background#0F0C1F
  • editor.findMatchBackground#FF408144
  • editor.findMatchHighlightBackground#FF408122
  • editor.foreground#E6E6FA
  • editor.lineHighlightBackground#1A182B80
  • editor.lineHighlightBorder#1A182BFF
  • editor.selectionBackground#7C4DFF55
  • editor.selectionHighlightBackground#7C4DFF33
  • editorBracketMatch.background#7C4DFF33
  • editorBracketMatch.border#7C4DFF
  • editorCursor.foreground#FF4081
  • editorGroupHeader.tabsBackground#0F0C1F
  • editorIndentGuide.activeBackground#33334F88
  • editorIndentGuide.background#33334F44
  • editorLineNumber.activeForeground#FF4081
  • editorLineNumber.foreground#55557F
  • editorWhitespace.foreground#33334F
  • focusBorder#FF4081
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF3D00
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#00E676
  • input.background#120F2A
  • input.border#1A182B
  • input.foreground#E6E6FA
  • input.placeholderForeground#777795
  • inputOption.activeBorder#FF4081
  • list.activeSelectionBackground#1A182B
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A182B
  • list.highlightForeground#FF4081
  • list.hoverBackground#1A182B66
  • minimap.background#0F0C1F
  • minimapSlider.activeBackground#FF408166
  • minimapSlider.background#FF408122
  • minimapSlider.hoverBackground#FF408144
  • panel.background#0F0C1F
  • panel.border#1A182B
  • panelTitle.activeBorder#FF4081
  • panelTitle.activeForeground#FF4081
  • panelTitle.inactiveForeground#C0C0FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF408188
  • scrollbarSlider.background#55557F44
  • scrollbarSlider.hoverBackground#55557F88
  • sideBar.background#120F2A
  • sideBar.foreground#C0C0FF
  • sideBarSectionHeader.background#140F2F
  • sideBarSectionHeader.foreground#FF4081
  • sideBarTitle.foreground#FF4081
  • statusBar.background#1A182B
  • statusBar.debuggingBackground#FF4081
  • statusBar.foreground#E6E6FA
  • statusBar.noFolderBackground#140F2F
  • statusBarItem.hoverBackground#2B283D
  • tab.activeBackground#1A182B
  • tab.activeBorder#FF4081
  • tab.activeForeground#FFFFFF
  • tab.border#0F0C1F
  • tab.inactiveBackground#120F2A
  • tab.inactiveForeground#C0C0FF
  • terminal.ansiBlue#304FFE
  • terminal.ansiBrightBlue#536DFE
  • terminal.ansiBrightCyan#18FFFF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF6E40
  • terminal.ansiBrightYellow#FFFF8D
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#00E676
  • terminal.ansiMagenta#FF4081
  • terminal.ansiRed#FF3D00
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0F0C1F
  • terminal.foreground#E6E6FA
  • titleBar.activeBackground#140F2F
  • titleBar.activeForeground#E6E6FA
  • titleBar.inactiveBackground#0F0C1F
  • titleBar.inactiveForeground#C0C0FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#55557Fitalic
string, string.quoted, string.template#00E5FF
keyword, storage.type, storage.modifier#FF4081bold
keyword.operator, punctuation.accessor#FF4081
variable, variable.other#E6E6FA
variable.parameter#FFEB3Bitalic
entity.name.function, support.function#7C4DFF
meta.function-call#00E676
entity.name.class, entity.name.type.class, support.class#304FFEbold
entity.name.type, support.type#304FFE
entity.name.type.interface#7C4DFFitalic
constant.numeric#FFEB3B
constant, constant.language, constant.character#FF4081
constant.language.boolean#FFEB3Bbold
variable.other.property, support.variable.property#E6E6FA
meta.object-literal.key#7C4DFF
entity.name.tag, punctuation.definition.tag#FF4081
entity.other.attribute-name#FFEB3Bitalic
punctuation, meta.brace#C0C0FF
string.regexp#FF4081
constant.character.escape#FFEB3B
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF3D00strikethrough
markup.heading, entity.name.section#FF4081bold
markup.bold#FFEB3Bbold
markup.italic#FF4081italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#00E676
support.type.property-name.json#7C4DFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#7C4DFF
support.constant.property-value.css#FF4081