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#ff006e
  • activityBar.background#12002b
  • activityBar.foreground#ff006e
  • activityBarBadge.background#ff006e
  • activityBarBadge.foreground#0b001f
  • badge.background#ff006e
  • badge.foreground#0b001f
  • button.background#ff006e
  • button.foreground#0b001f
  • button.hoverBackground#ff3385
  • dropdown.background#150032
  • dropdown.border#333333
  • dropdown.foreground#d8d8d8
  • editor.background#0b001f
  • editor.findMatchBackground#ff006e44
  • editor.findMatchHighlightBackground#ff006e22
  • editor.foreground#d8d8d8
  • editor.lineHighlightBackground#33225555
  • editor.lineHighlightBorder#332255aa
  • editor.selectionBackground#0044ff44
  • editor.selectionHighlightBackground#0044ff22
  • editorBracketMatch.background#0044ff22
  • editorBracketMatch.border#ff006e
  • editorCursor.foreground#ff006e
  • editorGroupHeader.tabsBackground#0c001e
  • editorIndentGuide.activeBackground#77777788
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#ff006e
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#ff006e
  • gitDecoration.conflictingResourceForeground#ffdf00
  • gitDecoration.deletedResourceForeground#ff4d4d
  • gitDecoration.modifiedResourceForeground#ff006e
  • gitDecoration.untrackedResourceForeground#00ff80
  • input.background#150032
  • input.border#333333
  • input.foreground#d8d8d8
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff006e
  • list.activeSelectionBackground#0044ff44
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0044ff44
  • list.highlightForeground#ff006e
  • list.hoverBackground#44444466
  • minimap.background#0c001e
  • minimapSlider.activeBackground#ff006e88
  • minimapSlider.background#ff006e22
  • minimapSlider.hoverBackground#ff006e44
  • panel.background#12002b
  • panel.border#150032
  • panelTitle.activeBorder#ff006e
  • panelTitle.activeForeground#ff006e
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff006e88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#12002b
  • sideBar.foreground#d8d8d8
  • sideBarSectionHeader.background#140030
  • sideBarSectionHeader.foreground#ff006e
  • sideBarTitle.foreground#ff006e
  • statusBar.background#150032
  • statusBar.debuggingBackground#ff6600
  • statusBar.foreground#d8d8d8
  • statusBar.noFolderBackground#12002b
  • statusBarItem.hoverBackground#33001a
  • tab.activeBackground#0b001f
  • tab.activeBorder#ff006e
  • tab.activeForeground#ff006e
  • tab.border#0b001f
  • tab.inactiveBackground#1a0033
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#6a5eff
  • terminal.ansiBrightBlue#9f88ff
  • terminal.ansiBrightCyan#66ffe5
  • terminal.ansiBrightGreen#66ffb3
  • terminal.ansiBrightMagenta#ff80e5
  • terminal.ansiBrightRed#ff9999
  • terminal.ansiBrightYellow#fff280
  • terminal.ansiCyan#00d4ff
  • terminal.ansiGreen#00ff80
  • terminal.ansiMagenta#ff00c8
  • terminal.ansiRed#ff4d4d
  • terminal.ansiYellow#ffdf00
  • terminal.background#0b001f
  • terminal.foreground#d8d8d8
  • titleBar.activeBackground#150032
  • titleBar.activeForeground#d8d8d8
  • titleBar.inactiveBackground#150032
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555f71italic
string, string.quoted, string.template#00ffea
keyword, storage.type, storage.modifier#ff006ebold
keyword.operator, punctuation.accessor#ff8c00
variable, variable.other#d8d8d8
variable.parameter#ff8c00italic
entity.name.function, support.function#ff8c00
meta.function-call#ff8c00
entity.name.class, entity.name.type.class, support.class#ffb3ffbold
entity.name.type, support.type#ffb3ff
entity.name.type.interface#ffb3ffitalic
constant.numeric#ffdf00
constant, constant.language, constant.character#ff6600
constant.language.boolean#ff6600bold
variable.other.property, support.variable.property#ffb3ff
meta.object-literal.key#ffb3ff
entity.name.tag, punctuation.definition.tag#ff8c00
entity.other.attribute-name#ff8c00italic
punctuation, meta.brace#ff8c00
string.regexp#ffdf00
constant.character.escape#ff8c00
meta.decorator, punctuation.decorator#ffdf00
invalid, invalid.illegal#ff4d4dstrikethrough
markup.heading, entity.name.section#ff006ebold
markup.bold#ff006ebold
markup.italic#ff8c00italic
markup.underline.link#00d4ff
markup.inline.raw, markup.fenced_code#00ff80
support.type.property-name.json#ff8c00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff006e
support.type.property-name.css#ff8c00
support.constant.property-value.css#00ff80
themesmith by CyberBoost - VS Code Theme