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#14142b
  • activityBar.foreground#ff00ff
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#0a0a1f
  • badge.background#ff00ff
  • badge.foreground#0a0a1f
  • button.background#1a1a33
  • button.foreground#ffffff
  • button.hoverBackground#2a2244
  • dropdown.background#14142b
  • dropdown.border#1a1a33
  • dropdown.foreground#d0d0ff
  • editor.background#0a0a1f
  • editor.findMatchBackground#ff00ff44
  • editor.findMatchHighlightBackground#ff00ff22
  • editor.foreground#d0d0ff
  • editor.lineHighlightBackground#1a1a3388
  • editor.lineHighlightBorder#1a1a33aa
  • editor.selectionBackground#3b3b7f88
  • editor.selectionHighlightBackground#3b3b7f44
  • editorBracketMatch.background#ff00ff33
  • editorBracketMatch.border#ff00ff
  • editorCursor.foreground#00e5ff
  • editorGroupHeader.tabsBackground#0a0a1f
  • editorIndentGuide.activeBackground#3b3b7f88
  • editorIndentGuide.background#3b3b7f44
  • editorLineNumber.activeForeground#00e5ff
  • editorLineNumber.foreground#555577
  • editorWhitespace.foreground#3b3b7f
  • focusBorder#00e5ff
  • gitDecoration.conflictingResourceForeground#ffef00
  • gitDecoration.deletedResourceForeground#ff4d4d
  • gitDecoration.modifiedResourceForeground#00e5ff
  • gitDecoration.untrackedResourceForeground#a4ff00
  • input.background#14142b
  • input.border#1a1a33
  • input.foreground#d0d0ff
  • input.placeholderForeground#555577
  • inputOption.activeBorder#00e5ff
  • list.activeSelectionBackground#1a1a33
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1a1a33
  • list.highlightForeground#00e5ff
  • list.hoverBackground#1a1a3366
  • minimap.background#0a0a1f
  • minimapSlider.activeBackground#ff00ff66
  • minimapSlider.background#ff00ff22
  • minimapSlider.hoverBackground#ff00ff44
  • panel.background#0a0a1f
  • panel.border#1a1a33
  • panelTitle.activeBorder#00e5ff
  • panelTitle.activeForeground#00e5ff
  • panelTitle.inactiveForeground#c0c0e0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00e5ff88
  • scrollbarSlider.background#55557744
  • scrollbarSlider.hoverBackground#55557788
  • sideBar.background#14142b
  • sideBar.foreground#c0c0e0
  • sideBarSectionHeader.background#1a1a33
  • sideBarSectionHeader.foreground#00e5ff
  • sideBarTitle.foreground#00e5ff
  • statusBar.background#1a1a33
  • statusBar.debuggingBackground#ff00ff
  • statusBar.foreground#d0d0ff
  • statusBar.noFolderBackground#14142b
  • statusBarItem.hoverBackground#2a2244
  • tab.activeBackground#1a1a33
  • tab.activeBorder#00e5ff
  • tab.activeForeground#ffffff
  • tab.border#0a0a1f
  • tab.inactiveBackground#14142b
  • tab.inactiveForeground#c0c0e0
  • terminal.ansiBlue#00e5ff
  • terminal.ansiBrightBlue#66ffff
  • terminal.ansiBrightCyan#00d4ff
  • terminal.ansiBrightGreen#baff34
  • terminal.ansiBrightMagenta#ff6bff
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightYellow#ffff6b
  • terminal.ansiCyan#00c5ff
  • terminal.ansiGreen#a4ff00
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff4d4d
  • terminal.ansiYellow#ffef00
  • terminal.background#0a0a1f
  • terminal.foreground#d0d0ff
  • titleBar.activeBackground#14142b
  • titleBar.activeForeground#d0d0ff
  • titleBar.inactiveBackground#0a0a1f
  • titleBar.inactiveForeground#c0c0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555577italic
string, string.quoted, string.template#a4ff00
keyword, storage.type, storage.modifier#ff00ffbold
keyword.operator, punctuation.accessor#00e5ff
variable, variable.other#d0d0ff
variable.parameter#ffef00italic
entity.name.function, support.function#00c5ff
meta.function-call#c0c0e0
entity.name.class, entity.name.type.class, support.class#ff00ffbold
entity.name.type, support.type#00e5ff
entity.name.type.interface#00c5ffitalic
constant.numeric#ffef00
constant, constant.language, constant.character#ffef00
constant.language.boolean#ffef00bold
variable.other.property, support.variable.property#c0c0e0
meta.object-literal.key#00c5ff
entity.name.tag, punctuation.definition.tag#ff00ff
entity.other.attribute-name#ffef00italic
punctuation, meta.brace#00e5ff
string.regexp#ff4d4d
constant.character.escape#ff00ff
meta.decorator, punctuation.decorator#ffef00
invalid, invalid.illegal#ff4d4dstrikethrough
markup.heading, entity.name.section#ff00ffbold
markup.bold#ffef00bold
markup.italic#00c5ffitalic
markup.underline.link#00e5ff
markup.inline.raw, markup.fenced_code#a4ff00
support.type.property-name.json#00c5ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffef00
support.type.property-name.css#00c5ff
support.constant.property-value.css#a4ff00
themesmith by CyberBoost - VS Code Theme