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#FF1AD9
  • activityBar.background#150C3A
  • activityBar.foreground#FF1AD9
  • activityBarBadge.background#FF1AD9
  • activityBarBadge.foreground#0F0A2E
  • badge.background#FF1AD9
  • badge.foreground#0F0A2E
  • button.background#1B0F45
  • button.foreground#FFFFFF
  • button.hoverBackground#2A005A
  • dropdown.background#130B36
  • dropdown.border#1B0F45
  • dropdown.foreground#E0E0FF
  • editor.background#0F0A2E
  • editor.findMatchBackground#FF1AD944
  • editor.findMatchHighlightBackground#FF1AD922
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#1B0F4550
  • editor.lineHighlightBorder#1B0F4580
  • editor.selectionBackground#3D007A55
  • editor.selectionHighlightBackground#3D007A33
  • editorBracketMatch.background#FF1AD933
  • editorBracketMatch.border#FF1AD9
  • editorCursor.foreground#FF1AD9
  • editorGroupHeader.tabsBackground#0F0A2E
  • editorIndentGuide.activeBackground#2A005A88
  • editorIndentGuide.background#2A005A44
  • editorLineNumber.activeForeground#FF1AD9
  • editorLineNumber.foreground#4A008A
  • editorWhitespace.foreground#2A005A
  • focusBorder#FF1AD9
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#FF1AD9
  • gitDecoration.untrackedResourceForeground#39FF14
  • input.background#130B36
  • input.border#1B0F45
  • input.foreground#E0E0FF
  • input.placeholderForeground#4A008A
  • inputOption.activeBorder#FF1AD9
  • list.activeSelectionBackground#1B0F45
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1B0F45
  • list.highlightForeground#FF1AD9
  • list.hoverBackground#1B0F4566
  • minimap.background#0F0A2E
  • minimapSlider.activeBackground#FF1AD966
  • minimapSlider.background#FF1AD922
  • minimapSlider.hoverBackground#FF1AD944
  • panel.background#0F0A2E
  • panel.border#1B0F45
  • panelTitle.activeBorder#FF1AD9
  • panelTitle.activeForeground#FF1AD9
  • panelTitle.inactiveForeground#A0A0E0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF1AD988
  • scrollbarSlider.background#4A008A44
  • scrollbarSlider.hoverBackground#4A008A88
  • sideBar.background#130B36
  • sideBar.foreground#A0A0E0
  • sideBarSectionHeader.background#150C3A
  • sideBarSectionHeader.foreground#FF1AD9
  • sideBarTitle.foreground#FF1AD9
  • statusBar.background#1B0F45
  • statusBar.debuggingBackground#FF00FF
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#150C3A
  • statusBarItem.hoverBackground#2A005A
  • tab.activeBackground#1B0F45
  • tab.activeBorder#FF1AD9
  • tab.activeForeground#FFFFFF
  • tab.border#0F0A2E
  • tab.inactiveBackground#130B36
  • tab.inactiveForeground#A0A0E0
  • terminal.ansiBlue#00F5FF
  • terminal.ansiBrightBlue#80FFFF
  • terminal.ansiBrightCyan#80E5FF
  • terminal.ansiBrightGreen#7CFC00
  • terminal.ansiBrightMagenta#FF80FF
  • terminal.ansiBrightRed#FF8080
  • terminal.ansiBrightYellow#FFFF80
  • terminal.ansiCyan#00B4FF
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF4D4D
  • terminal.ansiYellow#FFD700
  • terminal.background#0F0A2E
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#150C3A
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#0F0A2E
  • titleBar.inactiveForeground#A0A0E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555577italic
string, string.quoted, string.template#39FF14
keyword, storage.type, storage.modifier#FF1AD9bold
keyword.operator, punctuation.accessor#80FFFF
variable, variable.other#E0E0FF
variable.parameter#FF80FFitalic
entity.name.function, support.function#00B4FF
meta.function-call#A0A0E0
entity.name.class, entity.name.type.class, support.class#FF00FFbold
entity.name.type, support.type#FF80FF
entity.name.type.interface#00B4FFitalic
constant.numeric#FFD700
constant, constant.language, constant.character#FF80FF
constant.language.boolean#FFD700bold
variable.other.property, support.variable.property#A0A0E0
meta.object-literal.key#FF1AD9
entity.name.tag, punctuation.definition.tag#FF1AD9
entity.other.attribute-name#FF80FFitalic
punctuation, meta.brace#80FFFF
string.regexp#FF4D4D
constant.character.escape#FF80FF
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF4D4Dstrikethrough
markup.heading, entity.name.section#FF1AD9bold
markup.bold#FFD700bold
markup.italic#FF80FFitalic
markup.underline.link#00B4FF
markup.inline.raw, markup.fenced_code#39FF14
support.type.property-name.json#FF1AD9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700
support.type.property-name.css#00B4FF
support.constant.property-value.css#39FF14
themesmith by CyberBoost - VS Code Theme