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#ff2abf
  • activityBar.background#071217
  • activityBar.foreground#0fffe5
  • activityBarBadge.background#ff2abf
  • activityBarBadge.foreground#0b1a20
  • badge.background#ff2abf
  • badge.foreground#0b1a20
  • button.background#1b2e3a
  • button.foreground#ffffff
  • button.hoverBackground#162d36
  • dropdown.background#0a141d
  • dropdown.border#1b2e3a
  • dropdown.foreground#cfd8e3
  • editor.background#0b1a20
  • editor.findMatchBackground#ff2abf44
  • editor.findMatchHighlightBackground#0fffe522
  • editor.foreground#cfd8e3
  • editor.lineHighlightBackground#1b2e3a66
  • editor.lineHighlightBorder#0fffe540
  • editor.selectionBackground#0fffe533
  • editor.selectionHighlightBackground#ff2abf22
  • editorBracketMatch.background#ff2abf33
  • editorBracketMatch.border#ff2abf
  • editorCursor.foreground#0fffe5
  • editorGroupHeader.tabsBackground#0b1a20
  • editorIndentGuide.activeBackground#0fffe888
  • editorIndentGuide.background#162d36
  • editorLineNumber.activeForeground#0fffe5
  • editorLineNumber.foreground#203c48
  • editorWhitespace.foreground#162d36
  • focusBorder#0fffe5
  • gitDecoration.conflictingResourceForeground#ffdd57
  • gitDecoration.deletedResourceForeground#ff6e7b
  • gitDecoration.modifiedResourceForeground#0fffe5
  • gitDecoration.untrackedResourceForeground#a8ff6e
  • input.background#0a141d
  • input.border#1b2e3a
  • input.foreground#cfd8e3
  • input.placeholderForeground#203c48
  • inputOption.activeBorder#0fffe5
  • list.activeSelectionBackground#1b2e3a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1b2e3a
  • list.highlightForeground#0fffe5
  • list.hoverBackground#1b2e3a66
  • minimap.background#0b1a20
  • minimapSlider.activeBackground#0fffe566
  • minimapSlider.background#0fffe522
  • minimapSlider.hoverBackground#0fffe544
  • panel.background#0b1a20
  • panel.border#1b2e3a
  • panelTitle.activeBorder#0fffe5
  • panelTitle.activeForeground#0fffe5
  • panelTitle.inactiveForeground#b0c4d1
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0fffe888
  • scrollbarSlider.background#162d36
  • scrollbarSlider.hoverBackground#162d36aa
  • sideBar.background#0a141d
  • sideBar.foreground#b0c4d1
  • sideBarSectionHeader.background#071217
  • sideBarSectionHeader.foreground#0fffe5
  • sideBarTitle.foreground#0fffe5
  • statusBar.background#12242e
  • statusBar.debuggingBackground#ff2abf
  • statusBar.foreground#cfd8e3
  • statusBar.noFolderBackground#071217
  • statusBarItem.hoverBackground#1b2e3a
  • tab.activeBackground#12242e
  • tab.activeBorder#0fffe5
  • tab.activeForeground#ffffff
  • tab.border#0b1a20
  • tab.inactiveBackground#0a141d
  • tab.inactiveForeground#b0c4d1
  • terminal.ansiBlue#3a8cff
  • terminal.ansiBrightBlue#6ab4ff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#c8ffb0
  • terminal.ansiBrightMagenta#ff6de0
  • terminal.ansiBrightRed#ff9aa5
  • terminal.ansiBrightYellow#ffe88a
  • terminal.ansiCyan#0fffe5
  • terminal.ansiGreen#a8ff6e
  • terminal.ansiMagenta#ff2abf
  • terminal.ansiRed#ff6e7b
  • terminal.ansiYellow#ffdd57
  • terminal.background#0b1a20
  • terminal.foreground#cfd8e3
  • titleBar.activeBackground#071217
  • titleBar.activeForeground#cfd8e3
  • titleBar.inactiveBackground#0b1a20
  • titleBar.inactiveForeground#b0c4d1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555e66italic
string, string.quoted, string.template#a0ff7f
keyword, storage.type, storage.modifier#00e5ffbold
keyword.operator, punctuation.accessor#ff00c8
variable, variable.other#e2e5e9
variable.parameter#ffd77aitalic
entity.name.function, support.function#00e5ff
meta.function-call#a8b8c0
entity.name.class, entity.name.type.class, support.class#ff00c8bold
entity.name.type, support.type#00e5ff
entity.name.type.interface#a0ff7fitalic
constant.numeric#ffd77a
constant, constant.language, constant.character#ffd77a
constant.language.boolean#ffd77abold
variable.other.property, support.variable.property#a8b8c0
meta.object-literal.key#00e5ff
entity.name.tag, punctuation.definition.tag#ff00c8
entity.other.attribute-name#a0ff7fitalic
punctuation, meta.brace#ff00c8
string.regexp#ff5e8a
constant.character.escape#a0ff7f
meta.decorator, punctuation.decorator#ffd77a
invalid, invalid.illegal#ff5e8astrikethrough
markup.heading, entity.name.section#00e5ffbold
markup.bold#ffd77abold
markup.italic#a0ff7fitalic
markup.underline.link#00e5ff
markup.inline.raw, markup.fenced_code#a0ff7f
support.type.property-name.json#00e5ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffd77a
support.type.property-name.css#00e5ff
support.constant.property-value.css#a0ff7f
themesmith by CyberBoost - VS Code Theme