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#FF6EC7
  • activityBar.background#0A001A
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0B001F
  • badge.background#00E5FF
  • badge.foreground#0B001F
  • button.background#0C001E
  • button.foreground#E5E5E5
  • button.hoverBackground#1A001F
  • dropdown.background#0C001E
  • dropdown.border#333333
  • dropdown.foreground#E5E5E5
  • editor.background#0B001F
  • editor.findMatchBackground#00E5FF44
  • editor.findMatchHighlightBackground#FF6EC722
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#1A001F80
  • editor.lineHighlightBorder#00E5FF20
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#FF6EC722
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B001F
  • editorIndentGuide.activeBackground#00E5FF88
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF4081
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A6FF00
  • input.background#0C001E
  • input.border#333333
  • input.foreground#E5E5E5
  • input.placeholderForeground#555555
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#1A001F
  • list.activeSelectionForeground#00E5FF
  • list.focusBackground#1A001F
  • list.highlightForeground#00E5FF
  • list.hoverBackground#111A2B66
  • minimap.background#0B001F
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0B001F
  • panel.border#0C001E
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#33333344
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0C001E
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#0A001A
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#0B001F
  • statusBar.debuggingBackground#FF6EC7
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#0A001A
  • statusBarItem.hoverBackground#1A001F
  • tab.activeBackground#0C001E
  • tab.activeBorder#00E5FF
  • tab.activeForeground#00E5FF
  • tab.border#0A001A
  • tab.inactiveBackground#0B001F
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#88FFFF
  • terminal.ansiBrightGreen#B3FF33
  • terminal.ansiBrightMagenta#FF6EC7
  • terminal.ansiBrightRed#FF6B8B
  • terminal.ansiBrightYellow#FFE66B
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A6FF00
  • terminal.ansiMagenta#FF6EC7
  • terminal.ansiRed#FF4081
  • terminal.ansiYellow#FFD700
  • terminal.background#0B001F
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#0B001F
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#080012
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A6FF00
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#FF6EC7
variable, variable.other#E0E0E0
variable.parameter#FF6EC7italic
entity.name.function, support.function#00E5FF
meta.function-call#A8A8A8
entity.name.class, entity.name.type.class, support.class#FF6EC7bold
entity.name.type, support.type#00E5FF
entity.name.type.interface#A6FF00italic
constant.numeric#FFD700
constant, constant.language, constant.character#FF6EC7
constant.language.boolean#FFD700bold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#FF6EC7
entity.other.attribute-name#A6FF00italic
punctuation, meta.brace#888888
string.regexp#FF4081
constant.character.escape#A6FF00
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF4081strikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FF6EC7bold
markup.italic#A6FF00italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#A6FF00
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6EC7
support.type.property-name.css#00E5FF
support.constant.property-value.css#A6FF00