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#00FFC8
  • activityBar.background#0F112A
  • activityBar.foreground#00FFC8
  • activityBarBadge.background#A078FF
  • activityBarBadge.foreground#0A0C1F
  • badge.background#00FFC8
  • badge.foreground#0A0C1F
  • button.background#00FFC8
  • button.foreground#0A0C1F
  • button.hoverBackground#00FFCCAA
  • dropdown.background#0F112A
  • dropdown.border#00FFC8
  • dropdown.foreground#D0D5E9
  • editor.background#0A0C1F
  • editor.findMatchBackground#A078FF44
  • editor.findMatchHighlightBackground#A078FF22
  • editor.foreground#D0D5E9
  • editor.lineHighlightBackground#14183F
  • editor.lineHighlightBorder#14183F
  • editor.selectionBackground#14183F99
  • editor.selectionHighlightBackground#14183F66
  • editorBracketMatch.background#00FFC833
  • editorBracketMatch.border#00FFC8
  • editorCursor.foreground#00FFC8
  • editorGroupHeader.tabsBackground#0A0C1F
  • editorIndentGuide.activeBackground#00FFC888
  • editorIndentGuide.background#5A6A8C44
  • editorLineNumber.activeForeground#00FFC8
  • editorLineNumber.foreground#5A6A8C
  • editorWhitespace.foreground#5A6A8C
  • focusBorder#00FFC8
  • gitDecoration.conflictingResourceForeground#FF6F6F
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#00FFC8
  • gitDecoration.untrackedResourceForeground#A078FF
  • input.background#0F112A
  • input.border#00FFC8
  • input.foreground#D0D5E9
  • input.placeholderForeground#5A6A8C
  • inputOption.activeBorder#00FFC8
  • list.activeSelectionBackground#14183C80
  • list.activeSelectionForeground#D0D5E9
  • list.focusBackground#14183C
  • list.highlightForeground#00FFC8
  • list.hoverBackground#14183C66
  • minimap.background#0A0C1F
  • minimapSlider.activeBackground#00FFC866
  • minimapSlider.background#00FFC822
  • minimapSlider.hoverBackground#00FFC844
  • panel.background#0A0C1F
  • panel.border#A078FF
  • panelTitle.activeBorder#00FFC8
  • panelTitle.activeForeground#00FFC8
  • panelTitle.inactiveForeground#5A6A8C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00FFC888
  • scrollbarSlider.background#5A6A8C44
  • scrollbarSlider.hoverBackground#5A6A8C88
  • sideBar.background#0C0F2A
  • sideBar.foreground#D0D5E9
  • sideBarSectionHeader.background#10132F
  • sideBarSectionHeader.foreground#A078FF
  • sideBarTitle.foreground#00FFC8
  • statusBar.background#A078FF
  • statusBar.debuggingBackground#00FFC8
  • statusBar.foreground#0A0C1F
  • statusBar.noFolderBackground#0F112A
  • statusBarItem.hoverBackground#00FFC880
  • tab.activeBackground#0F112A
  • tab.activeBorder#00FFC8
  • tab.activeForeground#D0D5E9
  • tab.border#0A0C1F
  • tab.inactiveBackground#0A0C1F
  • tab.inactiveForeground#5A6A8C
  • terminal.ansiBlue#5A6A8C
  • terminal.ansiBrightBlue#7A88A0
  • terminal.ansiBrightCyan#B8FF9F
  • terminal.ansiBrightGreen#C8FFB8
  • terminal.ansiBrightMagenta#FF9F73
  • terminal.ansiBrightRed#FF9F73
  • terminal.ansiBrightYellow#FFD27F
  • terminal.ansiCyan#7CFF7A
  • terminal.ansiGreen#7CFF7A
  • terminal.ansiMagenta#00FFC8
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFDE5A
  • terminal.background#0A0C1F
  • terminal.foreground#D0D5E9
  • titleBar.activeBackground#0F112A
  • titleBar.activeForeground#D0D5E9
  • titleBar.inactiveBackground#0A0C1F
  • titleBar.inactiveForeground#5A6A8C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A8Citalic
string, string.quoted, string.template#7CFF7A
keyword, storage.type, storage.modifier#00FFC8bold
keyword.operator, punctuation.accessor#A078FF
variable, variable.other#D0D5E9
variable.parameter#7CFF7Aitalic
entity.name.function, support.function#A078FF
meta.function-call#A078FF
entity.name.class, entity.name.type.class, support.class#00FFC8bold
entity.name.type, support.type#A078FF
entity.name.type.interface#66FFAAitalic
constant.numeric#00FFC8
constant, constant.language, constant.character#A078FF
constant.language.boolean#00FFC8bold
variable.other.property, support.variable.property#D0D5E9
meta.object-literal.key#00FFC8
entity.name.tag, punctuation.definition.tag#00FFC8
entity.other.attribute-name#A078FFitalic
punctuation, meta.brace#D0D5E9
string.regexp#00FFC8
constant.character.escape#A078FF
meta.decorator, punctuation.decorator#A078FF
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#00FFC8bold
markup.bold#A078FFbold
markup.italic#7CFF7Aitalic
markup.underline.link#7CFF7A
markup.inline.raw, markup.fenced_code#7CFF7A
support.type.property-name.json#00FFC8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A078FF
support.type.property-name.css#7CFF7A
support.constant.property-value.css#D0D5E9
themesmith by CyberBoost - VS Code Theme