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#3A9BFF
  • activityBar.background#11131E
  • activityBar.foreground#A0A8C0
  • activityBarBadge.background#3A9BFF
  • activityBarBadge.foreground#0A0B13
  • badge.background#3A9BFF
  • badge.foreground#0A0B13
  • button.background#3A9BFF
  • button.foreground#0A0B13
  • button.hoverBackground#3A9BFF80
  • dropdown.background#11131E
  • dropdown.border#2A2C38
  • dropdown.foreground#E0E0E0
  • editor.background#0A0B13
  • editor.findMatchBackground#FFB86C30
  • editor.findMatchHighlightBackground#FFB86C20
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#3A9BFF20
  • editor.lineHighlightBorder#3A9BFF40
  • editor.selectionBackground#3A9BFF40
  • editor.selectionHighlightBackground#3A9BFF30
  • editorBracketMatch.background#3A9BFF30
  • editorBracketMatch.border#3A9BFF
  • editorCursor.foreground#3A9BFF
  • editorGroupHeader.tabsBackground#0A0B13
  • editorIndentGuide.activeBackground#4F556A
  • editorIndentGuide.background#2A2C38
  • editorLineNumber.activeForeground#3A9BFF
  • editorLineNumber.foreground#4F556A
  • editorWhitespace.foreground#2A2C38
  • focusBorder#3A9BFF
  • gitDecoration.conflictingResourceForeground#FF79C6
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#FFB86C
  • gitDecoration.untrackedResourceForeground#6FFFE4
  • input.background#11131E
  • input.border#2A2C38
  • input.foreground#E0E0E0
  • input.placeholderForeground#4F556A
  • inputOption.activeBorder#3A9BFF
  • list.activeSelectionBackground#3A9BFF30
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#3A9BFF30
  • list.highlightForeground#3A9BFF
  • list.hoverBackground#3A9BFF20
  • minimap.background#0A0B13
  • minimapSlider.activeBackground#3A9BFF66
  • minimapSlider.background#3A9BFF22
  • minimapSlider.hoverBackground#3A9BFF44
  • panel.background#0A0B13
  • panel.border#3A9BFF
  • panelTitle.activeBorder#3A9BFF
  • panelTitle.activeForeground#3A9BFF
  • panelTitle.inactiveForeground#4F556A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#2A2C38CC
  • scrollbarSlider.background#2A2C3888
  • scrollbarSlider.hoverBackground#2A2C38AA
  • sideBar.background#11131E
  • sideBar.foreground#B0B4C3
  • sideBarSectionHeader.background#11131E
  • sideBarSectionHeader.foreground#3A9BFF
  • sideBarTitle.foreground#3A9BFF
  • statusBar.background#3A9BFF
  • statusBar.debuggingBackground#FFB86C
  • statusBar.foreground#0A0B13
  • statusBar.noFolderBackground#11131E
  • statusBarItem.hoverBackground#3A9BFF80
  • tab.activeBackground#0A0B13
  • tab.activeBorder#3A9BFF
  • tab.activeForeground#E0E0E0
  • tab.border#0A0B13
  • tab.inactiveBackground#11131E
  • tab.inactiveForeground#A0A8C0
  • terminal.ansiBlue#3A9BFF
  • terminal.ansiBrightBlue#8C62FF
  • terminal.ansiBrightCyan#6FFFE4
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightYellow#FFB86C
  • terminal.ansiCyan#6FFFE4
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFB86C
  • terminal.background#0A0B13
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#11131E
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0A0B13
  • titleBar.inactiveForeground#4F556A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4F556Aitalic
string, string.quoted, string.template#6FFFE4
keyword, storage.type, storage.modifier#3A9BFFbold
keyword.operator, punctuation.accessor#8C62FF
variable, variable.other#B0BEC5
variable.parameter#FFB86Citalic
entity.name.function, support.function#8C62FF
meta.function-call#8C62FF
entity.name.class, entity.name.type.class, support.class#FF79C6bold
entity.name.type, support.type#FFB86C
entity.name.type.interface#FFB86Citalic
constant.numeric#FF9E64
constant, constant.language, constant.character#FF9E64
constant.language.boolean#3A9BFFbold
variable.other.property, support.variable.property#FFB86C
meta.object-literal.key#8C62FF
entity.name.tag, punctuation.definition.tag#FF79C6
entity.other.attribute-name#FFB86Citalic
punctuation, meta.brace#A0A8C0
string.regexp#FF9E64
constant.character.escape#FFB86C
meta.decorator, punctuation.decorator#FFD369
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#3A9BFFbold
markup.bold#FFB86Cbold
markup.italic#6FFFE4italic
markup.underline.link#8C62FF
markup.inline.raw, markup.fenced_code#6FFFE4
support.type.property-name.json#8C62FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF79C6
support.type.property-name.css#FFD369
support.constant.property-value.css#6FFFE4