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#00E5FF
  • activityBar.background#111213
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#FFB84D
  • activityBarBadge.foreground#0B0C0D
  • badge.background#00E5FF
  • badge.foreground#0B0C0D
  • button.background#1A1B1D
  • button.foreground#FFFFFF
  • button.hoverBackground#262729
  • dropdown.background#111213
  • dropdown.border#1A1B1D
  • dropdown.foreground#C5C8C6
  • editor.background#0B0C0D
  • editor.findMatchBackground#FFB84D44
  • editor.findMatchHighlightBackground#FFB84D22
  • editor.foreground#C5C8C6
  • editor.lineHighlightBackground#1F202240
  • editor.lineHighlightBorder#00E5FF80
  • editor.selectionBackground#00E5FF33
  • editor.selectionHighlightBackground#00E5FF22
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B0C0D
  • editorIndentGuide.activeBackground#00E5FF88
  • editorIndentGuide.background#33383944
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#4A4D50
  • editorWhitespace.foreground#333839
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFB84D
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A8FF60
  • input.background#111213
  • input.border#1A1B1D
  • input.foreground#C5C8C6
  • input.placeholderForeground#55585C
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#1A1B1D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1B1D
  • list.highlightForeground#00E5FF
  • list.hoverBackground#1A1B1D66
  • minimap.background#0B0C0D
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0B0C0D
  • panel.border#1A1B1D
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#A0A1A7
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#44444444
  • scrollbarSlider.hoverBackground#44444488
  • sideBar.background#111213
  • sideBar.foreground#A0A1A7
  • sideBarSectionHeader.background#141516
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#1A1B1D
  • statusBar.debuggingBackground#FF4F4F
  • statusBar.foreground#C5C8C6
  • statusBar.noFolderBackground#111213
  • statusBarItem.hoverBackground#262729
  • tab.activeBackground#1A1B1D
  • tab.activeBorder#00E5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C0D
  • tab.inactiveBackground#111213
  • tab.inactiveForeground#A0A1A7
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#5BD9FF
  • terminal.ansiBrightCyan#48E8FF
  • terminal.ansiBrightGreen#C1FF8A
  • terminal.ansiBrightMagenta#FF9BDE
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightYellow#FFCA75
  • terminal.ansiCyan#20E7FF
  • terminal.ansiGreen#A8FF60
  • terminal.ansiMagenta#FF6EC7
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFB84D
  • terminal.background#0B0C0D
  • terminal.foreground#C5C8C6
  • titleBar.activeBackground#111213
  • titleBar.activeForeground#C5C8C6
  • titleBar.inactiveBackground#0B0C0D
  • titleBar.inactiveForeground#A0A1A7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#55585Citalic
string, string.quoted, string.template#A8FF60
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#C5C8C6
variable, variable.other#C5C8C6
variable.parameter#FFB84Ditalic
entity.name.function, support.function#00E5FF
meta.function-call#A0A1A7
entity.name.class, entity.name.type.class, support.class#00E5FFbold
entity.name.type, support.type#20E7FF
entity.name.type.interface#20E7FFitalic
constant.numeric#FFB84D
constant, constant.language, constant.character#FFB84D
constant.language.boolean#FFB84Dbold
variable.other.property, support.variable.property#A0A1A7
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#FF6F6F
entity.other.attribute-name#FF6EC7italic
punctuation, meta.brace#C5C8C6
string.regexp#FF6F6F
constant.character.escape#FF6EC7
meta.decorator, punctuation.decorator#FFB84D
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FFB84Dbold
markup.italic#FF6EC7italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#A8FF60
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB84D
support.type.property-name.css#00E5FF
support.constant.property-value.css#A8FF60
themesmith by CyberBoost - VS Code Theme