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#00D1FF
  • activityBar.background#1A1A1A
  • activityBar.foreground#00D1FF
  • activityBarBadge.background#FF5CFF
  • activityBarBadge.foreground#151515
  • badge.background#FF5CFF
  • badge.foreground#151515
  • button.background#222222
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2A
  • dropdown.background#191919
  • dropdown.border#222222
  • dropdown.foreground#E1E1E1
  • editor.background#151515
  • editor.findMatchBackground#FF5CFF44
  • editor.findMatchHighlightBackground#FF5CFF22
  • editor.foreground#E1E1E1
  • editor.lineHighlightBackground#2A2A2A40
  • editor.lineHighlightBorder#00D1FF20
  • editor.selectionBackground#00D1FF33
  • editor.selectionHighlightBackground#00D1FF1A
  • editorBracketMatch.background#00D1FF33
  • editorBracketMatch.border#00D1FF
  • editorCursor.foreground#00D1FF
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#00D1FF44
  • editorIndentGuide.background#2A2A2A44
  • editorLineNumber.activeForeground#00D1FF
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#2A2A2A
  • focusBorder#00D1FF
  • gitDecoration.conflictingResourceForeground#FFD75C
  • gitDecoration.deletedResourceForeground#FF5C5C
  • gitDecoration.modifiedResourceForeground#00D1FF
  • gitDecoration.untrackedResourceForeground#7CFF70
  • input.background#191919
  • input.border#222222
  • input.foreground#E1E1E1
  • input.placeholderForeground#6A6A6A
  • inputOption.activeBorder#00D1FF
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#222222
  • list.highlightForeground#00D1FF
  • list.hoverBackground#22222266
  • minimap.background#151515
  • minimapSlider.activeBackground#00D1FF66
  • minimapSlider.background#00D1FF22
  • minimapSlider.hoverBackground#00D1FF44
  • panel.background#151515
  • panel.border#222222
  • panelTitle.activeBorder#00D1FF
  • panelTitle.activeForeground#00D1FF
  • panelTitle.inactiveForeground#B0B0B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00D1FF88
  • scrollbarSlider.background#5A5A5A44
  • scrollbarSlider.hoverBackground#5A5A5A88
  • sideBar.background#191919
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#00D1FF
  • sideBarTitle.foreground#00D1FF
  • statusBar.background#222222
  • statusBar.debuggingBackground#FF5CFF
  • statusBar.foreground#E1E1E1
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#222222
  • tab.activeBorder#00D1FF
  • tab.activeForeground#FFFFFF
  • tab.border#151515
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#B0B0B0
  • terminal.ansiBlue#00D1FF
  • terminal.ansiBrightBlue#5CE1FF
  • terminal.ansiBrightCyan#7CFFE1
  • terminal.ansiBrightGreen#A0FF90
  • terminal.ansiBrightMagenta#FF86FF
  • terminal.ansiBrightRed#FF8686
  • terminal.ansiBrightYellow#FFE08A
  • terminal.ansiCyan#5CFFE1
  • terminal.ansiGreen#7CFF70
  • terminal.ansiMagenta#FF5CFF
  • terminal.ansiRed#FF5C5C
  • terminal.ansiYellow#FFD75C
  • terminal.background#151515
  • terminal.foreground#E1E1E1
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#E1E1E1
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#B0B0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A4A4Aitalic
string, string.quoted, string.template#7CFF70
keyword, storage.type, storage.modifier#00D1FFbold
keyword.operator, punctuation.accessor#00D1FF
variable, variable.other#E1E1E1
variable.parameter#FF5CFFitalic
entity.name.function, support.function#00D1FF
meta.function-call#B0B0B0
entity.name.class, entity.name.type.class, support.class#00D1FFbold
entity.name.type, support.type#00D1FF
entity.name.type.interface#5CFFE1italic
constant.numeric#FF5CFF
constant, constant.language, constant.character#FF5CFF
constant.language.boolean#FF5CFFbold
variable.other.property, support.variable.property#B0B0B0
meta.object-literal.key#00D1FF
entity.name.tag, punctuation.definition.tag#00D1FF
entity.other.attribute-name#5CFFE1italic
punctuation, meta.brace#B0B0B0
string.regexp#FF5C5C
constant.character.escape#5CFFE1
meta.decorator, punctuation.decorator#FF5CFF
invalid, invalid.illegal#FF5C5Cstrikethrough
markup.heading, entity.name.section#00D1FFbold
markup.bold#FF5CFFbold
markup.italic#5CFFE1italic
markup.underline.link#7CFF70
markup.inline.raw, markup.fenced_code#7CFF70
support.type.property-name.json#00D1FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF5CFF
support.type.property-name.css#00D1FF
support.constant.property-value.css#7CFF70
themesmith by CyberBoost - VS Code Theme