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#4FD8FF
  • activityBar.background#090C1A
  • activityBar.foreground#4FD8FF
  • activityBarBadge.background#4FD8FF
  • activityBarBadge.foreground#0A0D1F
  • badge.background#4FD8FF
  • badge.foreground#0A0D1F
  • button.background#151A33
  • button.foreground#FFFFFF
  • button.hoverBackground#1A223A
  • dropdown.background#0D1025
  • dropdown.border#151A33
  • dropdown.foreground#C0C8D9
  • editor.background#0A0D1F
  • editor.findMatchBackground#A28BFF44
  • editor.findMatchHighlightBackground#A28BFF22
  • editor.foreground#C0C8D9
  • editor.lineHighlightBackground#151A3340
  • editor.lineHighlightBorder#151A3380
  • editor.selectionBackground#4FD8FF33
  • editor.selectionHighlightBackground#4FD8FF22
  • editorBracketMatch.background#4FD8FF33
  • editorBracketMatch.border#4FD8FF
  • editorCursor.foreground#4FD8FF
  • editorGroupHeader.tabsBackground#0A0D1F
  • editorIndentGuide.activeBackground#2A324A88
  • editorIndentGuide.background#2A324A44
  • editorLineNumber.activeForeground#4FD8FF
  • editorLineNumber.foreground#3A425A
  • editorWhitespace.foreground#2A324A
  • focusBorder#4FD8FF
  • gitDecoration.conflictingResourceForeground#FFD970
  • gitDecoration.deletedResourceForeground#FF6E6E
  • gitDecoration.modifiedResourceForeground#4FD8FF
  • gitDecoration.untrackedResourceForeground#5FFFAF
  • input.background#0D1025
  • input.border#151A33
  • input.foreground#C0C8D9
  • input.placeholderForeground#3A425A
  • inputOption.activeBorder#4FD8FF
  • list.activeSelectionBackground#151A33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151A33
  • list.highlightForeground#4FD8FF
  • list.hoverBackground#151A3366
  • minimap.background#0A0D1F
  • minimapSlider.activeBackground#4FD8FF66
  • minimapSlider.background#4FD8FF22
  • minimapSlider.hoverBackground#4FD8FF44
  • panel.background#0A0D1F
  • panel.border#151A33
  • panelTitle.activeBorder#4FD8FF
  • panelTitle.activeForeground#4FD8FF
  • panelTitle.inactiveForeground#A1A9B8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#4FD8F888
  • scrollbarSlider.background#3A425A44
  • scrollbarSlider.hoverBackground#3A425A88
  • sideBar.background#0D1025
  • sideBar.foreground#A1A9B8
  • sideBarSectionHeader.background#090C1A
  • sideBarSectionHeader.foreground#4FD8FF
  • sideBarTitle.foreground#4FD8FF
  • statusBar.background#151A33
  • statusBar.debuggingBackground#A28BFF
  • statusBar.foreground#C0C8D9
  • statusBar.noFolderBackground#090C1A
  • statusBarItem.hoverBackground#1A223A
  • tab.activeBackground#151A33
  • tab.activeBorder#4FD8FF
  • tab.activeForeground#FFFFFF
  • tab.border#0A0D1F
  • tab.inactiveBackground#0D1025
  • tab.inactiveForeground#A1A9B8
  • terminal.ansiBlue#4FD8FF
  • terminal.ansiBrightBlue#80E8FF
  • terminal.ansiBrightCyan#87FFAF
  • terminal.ansiBrightGreen#87FFAF
  • terminal.ansiBrightMagenta#BFA0FF
  • terminal.ansiBrightRed#FF8E8E
  • terminal.ansiBrightYellow#FFE080
  • terminal.ansiCyan#5FFFAF
  • terminal.ansiGreen#5FFFAF
  • terminal.ansiMagenta#A28BFF
  • terminal.ansiRed#FF6E6E
  • terminal.ansiYellow#FFD970
  • terminal.background#0A0D1F
  • terminal.foreground#C0C8D9
  • titleBar.activeBackground#090C1A
  • titleBar.activeForeground#C0C8D9
  • titleBar.inactiveBackground#0A0D1F
  • titleBar.inactiveForeground#A1A9B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6175italic
string, string.quoted, string.template#5FD7A7
keyword, storage.type, storage.modifier#00B1E1bold
keyword.operator, punctuation.accessor#00D7FF
variable, variable.other#C8D1E1
variable.parameter#D7A75Fitalic
entity.name.function, support.function#00D7FF
meta.function-call#A0A8B8
entity.name.class, entity.name.type.class, support.class#6A4EBFbold
entity.name.type, support.type#6A4EBF
entity.name.type.interface#5FD7A7italic
constant.numeric#D7875F
constant, constant.language, constant.character#D7A75F
constant.language.boolean#D7875Fbold
variable.other.property, support.variable.property#A0A8B8
meta.object-literal.key#00D7FF
entity.name.tag, punctuation.definition.tag#00B1E1
entity.other.attribute-name#6A4EBFitalic
punctuation, meta.brace#00D7FF
string.regexp#D7875F
constant.character.escape#6A4EBF
meta.decorator, punctuation.decorator#D7D787
invalid, invalid.illegal#D75F5Fstrikethrough
markup.heading, entity.name.section#00B1E1bold
markup.bold#D7A75Fbold
markup.italic#6A4EBFitalic
markup.underline.link#5FD7A7
markup.inline.raw, markup.fenced_code#5FD7A7
support.type.property-name.json#00B1E1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D7D787
support.type.property-name.css#00D7FF
support.constant.property-value.css#5FD7A7
themesmith by CyberBoost - VS Code Theme