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#00E5FF
  • activityBar.background#121212
  • activityBar.foreground#FF2D9E
  • activityBarBadge.background#FF2D9E
  • activityBarBadge.foreground#0D0D13
  • badge.background#FF2D9E
  • badge.foreground#0D0D13
  • button.background#1A1A1A
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2A
  • dropdown.background#121212
  • dropdown.border#1A1A1A
  • dropdown.foreground#E6E6E6
  • editor.background#0D0D13
  • editor.findMatchBackground#00E5FF44
  • editor.findMatchHighlightBackground#00E5FF22
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#1A1A1A40
  • editor.lineHighlightBorder#00E5FF30
  • editor.selectionBackground#FF2D9E40
  • editor.selectionHighlightBackground#00E5FF20
  • editorBracketMatch.background#FF2D9E33
  • editorBracketMatch.border#FF2D9E
  • editorCursor.foreground#FF2D9E
  • editorGroupHeader.tabsBackground#0D0D13
  • editorIndentGuide.activeBackground#00E5FF88
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FF2D9E
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#00E5FF
  • input.background#121212
  • input.border#1A1A1A
  • input.foreground#E6E6E6
  • input.placeholderForeground#555555
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A1A
  • list.highlightForeground#00E5FF
  • list.hoverBackground#1A1A1A66
  • minimap.background#0D0D13
  • minimapSlider.activeBackground#FF2D9E66
  • minimapSlider.background#FF2D9E22
  • minimapSlider.hoverBackground#FF2D9E44
  • panel.background#0D0D13
  • panel.border#1A1A1A
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#A8A8A8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#121212
  • sideBar.foreground#A8A8A8
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#FF2D9E
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#121212
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#00E5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0D0D13
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#A8A8A8
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#66FFFF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#C8FF9E
  • terminal.ansiBrightMagenta#FF66B3
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A8FF60
  • terminal.ansiMagenta#FF2D9E
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFFF33
  • terminal.background#0D0D13
  • terminal.foreground#E6E6E6
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#0D0D13
  • titleBar.inactiveForeground#A8A8A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555566italic
string, string.quoted, string.template#A8FF60
keyword, storage.type, storage.modifier#FF2D9Ebold
keyword.operator, punctuation.accessor#FFFF33
variable, variable.other#E6E6E6
variable.parameter#FF6B6Bitalic
entity.name.function, support.function#00E5FF
meta.function-call#E6E6E6
entity.name.class, entity.name.type.class, support.class#FF2D9Ebold
entity.name.type, support.type#00E5FF
entity.name.type.interface#A8FF60italic
constant.numeric#FF6B6B
constant, constant.language, constant.character#FF6B6B
constant.language.boolean#FF6B6Bbold
variable.other.property, support.variable.property#E6E6E6
meta.object-literal.key#FFFF33
entity.name.tag, punctuation.definition.tag#FF2D9E
entity.other.attribute-name#A8FF60italic
punctuation, meta.brace#FFFF33
string.regexp#FF6B6B
constant.character.escape#00E5FF
meta.decorator, punctuation.decorator#FFFF33
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#FF2D9Ebold
markup.bold#FFFF33bold
markup.italic#00E5FFitalic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#A8FF60
support.type.property-name.json#FFFF33
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF2D9E
support.type.property-name.css#FFFF33
support.constant.property-value.css#00E5FF