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#ff6e96
  • activityBar.background#111418
  • activityBar.foreground#ff6e96
  • activityBarBadge.background#ff6e96
  • activityBarBadge.foreground#14171c
  • badge.background#ff6e96
  • badge.foreground#14171c
  • button.background#1c1f24
  • button.foreground#ffffff
  • button.hoverBackground#262a31
  • dropdown.background#111418
  • dropdown.border#1c1f24
  • dropdown.foreground#d0d2d5
  • editor.background#14171c
  • editor.findMatchBackground#ff6e9644
  • editor.findMatchHighlightBackground#ff6e9622
  • editor.foreground#d0d2d5
  • editor.lineHighlightBackground#1c1f2440
  • editor.lineHighlightBorder#1c1f2480
  • editor.selectionBackground#6c8eff33
  • editor.selectionHighlightBackground#6c8eff22
  • editorBracketMatch.background#6c8eff33
  • editorBracketMatch.border#6c8eff
  • editorCursor.foreground#ff6e96
  • editorGroupHeader.tabsBackground#14171c
  • editorIndentGuide.activeBackground#262a3188
  • editorIndentGuide.background#262a3144
  • editorLineNumber.activeForeground#6c8eff
  • editorLineNumber.foreground#5a5d62
  • editorWhitespace.foreground#262a31
  • focusBorder#6c8eff
  • gitDecoration.conflictingResourceForeground#ffd966
  • gitDecoration.deletedResourceForeground#ff6e96
  • gitDecoration.modifiedResourceForeground#6c8eff
  • gitDecoration.untrackedResourceForeground#7ef9b2
  • input.background#111418
  • input.border#1c1f24
  • input.foreground#d0d2d5
  • input.placeholderForeground#5a5d62
  • inputOption.activeBorder#6c8eff
  • list.activeSelectionBackground#1c1f24
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1c1f24
  • list.highlightForeground#6c8eff
  • list.hoverBackground#1c1f2466
  • minimap.background#14171c
  • minimapSlider.activeBackground#6c8eff66
  • minimapSlider.background#6c8eff22
  • minimapSlider.hoverBackground#6c8eff44
  • panel.background#14171c
  • panel.border#1c1f24
  • panelTitle.activeBorder#ff6e96
  • panelTitle.activeForeground#ff6e96
  • panelTitle.inactiveForeground#8a8c90
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6c8eff88
  • scrollbarSlider.background#5a5d6244
  • scrollbarSlider.hoverBackground#5a5d6288
  • sideBar.background#111418
  • sideBar.foreground#b0b2b5
  • sideBarSectionHeader.background#111418
  • sideBarSectionHeader.foreground#6c8eff
  • sideBarTitle.foreground#6c8eff
  • statusBar.background#1c1f24
  • statusBar.debuggingBackground#6c8eff
  • statusBar.foreground#d0d2d5
  • statusBar.noFolderBackground#111418
  • statusBarItem.hoverBackground#262a31
  • tab.activeBackground#1c1f24
  • tab.activeBorder#ff6e96
  • tab.activeForeground#ffffff
  • tab.border#14171c
  • tab.inactiveBackground#111418
  • tab.inactiveForeground#8a8c90
  • terminal.ansiBlue#6c8eff
  • terminal.ansiBrightBlue#8cafff
  • terminal.ansiBrightCyan#8df5ff
  • terminal.ansiBrightGreen#a5ffd1
  • terminal.ansiBrightMagenta#ffb6f5
  • terminal.ansiBrightRed#ff93a8
  • terminal.ansiBrightYellow#ffe7b3
  • terminal.ansiCyan#5fd5ff
  • terminal.ansiGreen#7ef9b2
  • terminal.ansiMagenta#ff9bed
  • terminal.ansiRed#ff6e96
  • terminal.ansiYellow#ffd966
  • terminal.background#14171c
  • terminal.foreground#d0d2d5
  • titleBar.activeBackground#111418
  • titleBar.activeForeground#d0d2d5
  • titleBar.inactiveBackground#14171c
  • titleBar.inactiveForeground#8a8c90

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5d62italic
string, string.quoted, string.template#7ef9b2
keyword, storage.type, storage.modifier#ff6e96bold
keyword.operator, punctuation.accessor#6c8eff
variable, variable.other#d0d2d5
variable.parameter#ffd966italic
entity.name.function, support.function#6c8eff
meta.function-call#b0b2b5
entity.name.class, entity.name.type.class, support.class#8cafffbold
entity.name.type, support.type#8cafff
entity.name.type.interface#5fd5ffitalic
constant.numeric#ffd966
constant, constant.language, constant.character#ffd966
constant.language.boolean#ffd966bold
variable.other.property, support.variable.property#b0b2b5
meta.object-literal.key#6c8eff
entity.name.tag, punctuation.definition.tag#ff6e96
entity.other.attribute-name#ff9beditalic
punctuation, meta.brace#6c8eff
string.regexp#ffd966
constant.character.escape#ff9bed
meta.decorator, punctuation.decorator#ffd966
invalid, invalid.illegal#ff6e96strikethrough
markup.heading, entity.name.section#ff6e96bold
markup.bold#ffd966bold
markup.italic#ff9beditalic
markup.underline.link#6c8eff
markup.inline.raw, markup.fenced_code#7ef9b2
support.type.property-name.json#6c8eff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffd966
support.type.property-name.css#6c8eff
support.constant.property-value.css#ffd966
themesmith by CyberBoost - VS Code Theme