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#ff4d4d
  • activityBar.background#0d0f35
  • activityBar.foreground#7a8bff
  • activityBarBadge.background#ff4d4d
  • activityBarBadge.foreground#0b0d2a
  • badge.background#ff4d4d
  • badge.foreground#0b0d2a
  • button.background#ff4d4d
  • button.foreground#0b0d2a
  • button.hoverBackground#ff4d4d80
  • dropdown.background#0d0f35
  • dropdown.border#7a8bff
  • dropdown.foreground#c8cce4
  • editor.background#0b0d2a
  • editor.findMatchBackground#ff4d4d44
  • editor.findMatchHighlightBackground#ff4d4d22
  • editor.foreground#c8cce4
  • editor.lineHighlightBackground#5a6be540
  • editor.lineHighlightBorder#5a6be580
  • editor.selectionBackground#5a6be560
  • editor.selectionHighlightBackground#5a6be530
  • editorBracketMatch.background#5a6be530
  • editorBracketMatch.border#7a8bff
  • editorCursor.foreground#ff4d4d
  • editorGroupHeader.tabsBackground#0b0d2a
  • editorIndentGuide.activeBackground#555a70c0
  • editorIndentGuide.background#555a7080
  • editorLineNumber.activeForeground#c8cce4
  • editorLineNumber.foreground#555a70
  • editorWhitespace.foreground#555a70
  • focusBorder#ff4d4d
  • gitDecoration.conflictingResourceForeground#ffdf5d
  • gitDecoration.deletedResourceForeground#ff4d4d
  • gitDecoration.modifiedResourceForeground#7a8bff
  • gitDecoration.untrackedResourceForeground#00ffff
  • input.background#0d0f35
  • input.border#7a8bff
  • input.foreground#c8cce4
  • input.placeholderForeground#555a70
  • inputOption.activeBorder#ff4d4d
  • list.activeSelectionBackground#5a6be540
  • list.activeSelectionForeground#c8cce4
  • list.focusBackground#5a6be550
  • list.highlightForeground#ff4d4d
  • list.hoverBackground#5a6be530
  • minimap.background#0b0d2a
  • minimapSlider.activeBackground#5a6be360
  • minimapSlider.background#5a6be320
  • minimapSlider.hoverBackground#5a6be340
  • panel.background#0b0d2a
  • panel.border#7a8bff
  • panelTitle.activeBorder#ff4d4d
  • panelTitle.activeForeground#c8cce4
  • panelTitle.inactiveForeground#555a70
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#555a70c0
  • scrollbarSlider.background#555a7080
  • scrollbarSlider.hoverBackground#555a70a0
  • sideBar.background#0c0e30
  • sideBar.foreground#c8cce4
  • sideBarSectionHeader.background#0d0f35
  • sideBarSectionHeader.foreground#7a8bff
  • sideBarTitle.foreground#7a8bff
  • statusBar.background#0d0f35
  • statusBar.debuggingBackground#ff4d4d
  • statusBar.foreground#c8cce4
  • statusBar.noFolderBackground#0b0d2a
  • statusBarItem.hoverBackground#ff4d4d80
  • tab.activeBackground#0d0f35
  • tab.activeBorder#ff4d4d
  • tab.activeForeground#c8cce4
  • tab.border#0b0d2a
  • tab.inactiveBackground#0b0d2a
  • tab.inactiveForeground#555a70
  • terminal.ansiBlue#7a8bff
  • terminal.ansiBrightBlue#9ab0ff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#80ff80
  • terminal.ansiBrightMagenta#ff8080
  • terminal.ansiBrightRed#ff8080
  • terminal.ansiBrightYellow#fff799
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#6cdb6c
  • terminal.ansiMagenta#ff4d4d
  • terminal.ansiRed#ff4d4d
  • terminal.ansiYellow#ffdf5d
  • terminal.background#0b0d2a
  • terminal.foreground#c8cce4
  • titleBar.activeBackground#0d0f35
  • titleBar.activeForeground#c8cce4
  • titleBar.inactiveBackground#0b0d2a
  • titleBar.inactiveForeground#555a70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555a70italic
string, string.quoted, string.template#00ffff
keyword, storage.type, storage.modifier#ff4d4dbold
keyword.operator, punctuation.accessor#7a8bff
variable, variable.other#c8cce4
variable.parameter#7a8bffitalic
entity.name.function, support.function#ff4d4d
meta.function-call#ff4d4d
entity.name.class, entity.name.type.class, support.class#7a8bffbold
entity.name.type, support.type#7a8bff
entity.name.type.interface#7a8bffitalic
constant.numeric#6cdb6c
constant, constant.language, constant.character#ff4d4d
constant.language.boolean#ff4d4dbold
variable.other.property, support.variable.property#7a8bff
meta.object-literal.key#7a8bff
entity.name.tag, punctuation.definition.tag#ff4d4d
entity.other.attribute-name#7a8bffitalic
punctuation, meta.brace#7a8bff
string.regexp#00ffff
constant.character.escape#00ffff
meta.decorator, punctuation.decorator#ff4d4d
invalid, invalid.illegal#ff6f6fstrikethrough
markup.heading, entity.name.section#ff4d4dbold
markup.bold#ff4d4dbold
markup.italic#7a8bffitalic
markup.underline.link#7a8bff
markup.inline.raw, markup.fenced_code#00ffff
support.type.property-name.json#7a8bff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7a8bff
support.type.property-name.css#7a8bff
support.constant.property-value.css#00ffff