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#FF2D70
  • activityBar.background#0B0B0B
  • activityBar.foreground#FF2D70
  • activityBarBadge.background#FF2D70
  • activityBarBadge.foreground#0B0B0B
  • badge.background#FF2D70
  • badge.foreground#0B0B0B
  • button.background#FF2D70
  • button.foreground#0B0B0B
  • button.hoverBackground#FF5F9E
  • dropdown.background#0B0B0B
  • dropdown.border#FF2D70
  • dropdown.foreground#D0D0D0
  • editor.background#0B0B0B
  • editor.findMatchBackground#A0FF5560
  • editor.findMatchHighlightBackground#A0FF5520
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#00E5FF20
  • editor.lineHighlightBorder#00E5FF80
  • editor.selectionBackground#FF2D7060
  • editor.selectionHighlightBackground#FF2D7040
  • editorBracketMatch.background#A0FF5520
  • editorBracketMatch.border#A0FF55
  • editorCursor.foreground#FF2D70
  • editorGroupHeader.tabsBackground#0B0B0B
  • editorIndentGuide.activeBackground#55555588
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#FF2D70
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#FF2D70
  • gitDecoration.conflictingResourceForeground#FF2D70
  • gitDecoration.deletedResourceForeground#FF2D70
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A0FF55
  • input.background#0B0B0B
  • input.border#FF2D70
  • input.foreground#D0D0D0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF2D70
  • list.activeSelectionBackground#FF2D7060
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF2D7060
  • list.highlightForeground#FF2D70
  • list.hoverBackground#FF2D6060
  • minimap.background#0B0B0B
  • minimapSlider.activeBackground#FF2D7066
  • minimapSlider.background#FF2D7022
  • minimapSlider.hoverBackground#FF2D7044
  • panel.background#0B0B0B
  • panel.border#00E5FF
  • panelTitle.activeBorder#FF2D70
  • panelTitle.activeForeground#D0D0D0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF2D7088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0B0B0B
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#0B0B0B
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#FF2D70
  • statusBar.background#0B0B0B
  • statusBar.debuggingBackground#FF2D70
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0B0B0B
  • statusBarItem.hoverBackground#FF2D7060
  • tab.activeBackground#0B0B0B
  • tab.activeBorder#FF2D70
  • tab.activeForeground#D0D0D0
  • tab.border#0B0B0B
  • tab.inactiveBackground#0B0B0B
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#33F0FF
  • terminal.ansiBrightCyan#33F0FF
  • terminal.ansiBrightGreen#B3FF88
  • terminal.ansiBrightMagenta#FF5FA0
  • terminal.ansiBrightRed#FF5FA0
  • terminal.ansiBrightYellow#FFDD55
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A0FF55
  • terminal.ansiMagenta#FF2D70
  • terminal.ansiRed#FF2D70
  • terminal.ansiYellow#FFCC33
  • terminal.background#0B0B0B
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#0B0B0B
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0B0B
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A0FF55
keyword, storage.type, storage.modifier#FF2D70bold
keyword.operator, punctuation.accessor#00E5FF
variable, variable.other#D0D0D0
variable.parameter#00E5FFitalic
entity.name.function, support.function#FF2D70
meta.function-call#00E5FF
entity.name.class, entity.name.type.class, support.class#FF2D70bold
entity.name.type, support.type#00E5FF
entity.name.type.interface#00E5FFitalic
constant.numeric#A0FF55
constant, constant.language, constant.character#A0FF55
constant.language.boolean#FF2D70bold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#FF2D70
entity.other.attribute-name#A0FF55italic
punctuation, meta.brace#D0D0D0
string.regexp#A0FF55
constant.character.escape#A0FF55
meta.decorator, punctuation.decorator#00E5FF
invalid, invalid.illegal#FF2D70strikethrough
markup.heading, entity.name.section#FF2D70bold
markup.bold#FF2D70bold
markup.italic#00E5FFitalic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#A0FF55
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF2D70
support.type.property-name.css#00E5FF
support.constant.property-value.css#A0FF55