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#FF00C8
  • activityBar.background#15142B
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0D0C1F
  • badge.background#FF00C8
  • badge.foreground#0D0C1F
  • button.background#00E5FF
  • button.foreground#0D0C1F
  • button.hoverBackground#00E5FF88
  • dropdown.background#15142B
  • dropdown.border#00E5FF
  • dropdown.foreground#E0E0FF
  • editor.background#0D0C1F
  • editor.findMatchBackground#FF00C844
  • editor.findMatchHighlightBackground#FF00C822
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#00E5FF10
  • editor.lineHighlightBorder#00E5FF30
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#00E5FF22
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0D0C1F
  • editorIndentGuide.activeBackground#00E5FF55
  • editorIndentGuide.background#8A8ABF33
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#8A8ABF
  • editorWhitespace.foreground#8A8ABF55
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FF00C8
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#7CFF00
  • input.background#15142B
  • input.border#00E5FF
  • input.foreground#E0E0FF
  • input.placeholderForeground#8A8ABF
  • inputOption.activeBorder#FF00C8
  • list.activeSelectionBackground#00E5FF33
  • list.activeSelectionForeground#E0E0FF
  • list.focusBackground#00E5FF44
  • list.highlightForeground#FF00C8
  • list.hoverBackground#00E5FF22
  • minimap.background#0D0C1F
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0D0C1F
  • panel.border#15142B
  • panelTitle.activeBorder#FF00C8
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#8A8ABF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#8A8ABF44
  • scrollbarSlider.hoverBackground#8A8ABF88
  • sideBar.background#181734
  • sideBar.foreground#E0E0FF
  • sideBarSectionHeader.background#1F1E3A
  • sideBarSectionHeader.foreground#FF00C8
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#15142B
  • statusBar.debuggingBackground#FF00C8
  • statusBar.foreground#00E5FF
  • statusBar.noFolderBackground#0D0C1F
  • statusBarItem.hoverBackground#00E5FF33
  • tab.activeBackground#0D0C1F
  • tab.activeBorder#FF00C8
  • tab.activeForeground#E0E0FF
  • tab.border#0D0C1F
  • tab.inactiveBackground#15142B
  • tab.inactiveForeground#8A8ABF
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#66FFEE
  • terminal.ansiBrightGreen#A0FF66
  • terminal.ansiBrightMagenta#FF00C8
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFF777
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#7CFF00
  • terminal.ansiMagenta#FF00C8
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFEE33
  • terminal.background#0D0C1F
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#0D0C1F
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#15142B
  • titleBar.inactiveForeground#8A8ABF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8ABFitalic
string, string.quoted, string.template#7CFF00
keyword, storage.type, storage.modifier#FF00C8bold
keyword.operator, punctuation.accessor#00E5FF
variable, variable.other#E0E0FF
variable.parameter#FF00C8italic
entity.name.function, support.function#00E5FF
meta.function-call#00E5FF
entity.name.class, entity.name.type.class, support.class#FF00C8bold
entity.name.type, support.type#00E5FF
entity.name.type.interface#FF00C8italic
constant.numeric#FF5555
constant, constant.language, constant.character#FF5555
constant.language.boolean#FF00C8bold
variable.other.property, support.variable.property#00E5FF
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#FF00C8
entity.other.attribute-name#FF00C8italic
punctuation, meta.brace#00E5FF
string.regexp#FF00C8
constant.character.escape#FF00C8
meta.decorator, punctuation.decorator#FF00C8
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#FF00C8bold
markup.bold#FF00C8bold
markup.italic#FF00C8italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#7CFF00
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF00C8
support.type.property-name.css#00E5FF
support.constant.property-value.css#7CFF00
themesmith by CyberBoost - VS Code Theme