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#39C5FF
  • activityBar.background#0C0F15
  • activityBar.foreground#39C5FF
  • activityBarBadge.background#39C5FF
  • activityBarBadge.foreground#0A0C12
  • badge.background#39C5FF
  • badge.foreground#0A0C12
  • button.background#11202A
  • button.foreground#FFFFFF
  • button.hoverBackground#2F5C78
  • dropdown.background#0D1118
  • dropdown.border#11202A
  • dropdown.foreground#E1E3E8
  • editor.background#0A0C12
  • editor.findMatchBackground#39C5FF44
  • editor.findMatchHighlightBackground#39C5FF22
  • editor.foreground#E1E3E8
  • editor.lineHighlightBackground#11202A40
  • editor.lineHighlightBorder#11202A80
  • editor.selectionBackground#39C5FF44
  • editor.selectionHighlightBackground#39C5FF22
  • editorBracketMatch.background#39C5FF33
  • editorBracketMatch.border#39C5FF
  • editorCursor.foreground#39C5FF
  • editorGroupHeader.tabsBackground#0A0C12
  • editorIndentGuide.activeBackground#3A4A5C88
  • editorIndentGuide.background#3A4A5C44
  • editorLineNumber.activeForeground#39C5FF
  • editorLineNumber.foreground#425766
  • editorWhitespace.foreground#3A4A5C
  • focusBorder#39C5FF
  • gitDecoration.conflictingResourceForeground#FFD93B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#39C5FF
  • gitDecoration.untrackedResourceForeground#A3E630
  • input.background#0D1118
  • input.border#11202A
  • input.foreground#E1E3E8
  • input.placeholderForeground#425766
  • inputOption.activeBorder#39C5FF
  • list.activeSelectionBackground#11202A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#11202A
  • list.highlightForeground#39C5FF
  • list.hoverBackground#11202A66
  • minimap.background#0A0C12
  • minimapSlider.activeBackground#39C5FF66
  • minimapSlider.background#39C5FF22
  • minimapSlider.hoverBackground#39C5FF44
  • panel.background#0A0C12
  • panel.border#11202A
  • panelTitle.activeBorder#39C5FF
  • panelTitle.activeForeground#39C5FF
  • panelTitle.inactiveForeground#B0C4D9
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#39C5FF88
  • scrollbarSlider.background#42576644
  • scrollbarSlider.hoverBackground#42576688
  • sideBar.background#0D1118
  • sideBar.foreground#B0C4D9
  • sideBarSectionHeader.background#0C0F15
  • sideBarSectionHeader.foreground#39C5FF
  • sideBarTitle.foreground#39C5FF
  • statusBar.background#11202A
  • statusBar.debuggingBackground#39C5FF
  • statusBar.foreground#E1E3E8
  • statusBar.noFolderBackground#0C0F15
  • statusBarItem.hoverBackground#2F5C78
  • tab.activeBackground#11202A
  • tab.activeBorder#39C5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0A0C12
  • tab.inactiveBackground#0D1118
  • tab.inactiveForeground#B0C4D9
  • terminal.ansiBlue#39C5FF
  • terminal.ansiBrightBlue#6ED9FF
  • terminal.ansiBrightCyan#5BF0EB
  • terminal.ansiBrightGreen#B8F04D
  • terminal.ansiBrightMagenta#E09CFF
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightYellow#FFE75E
  • terminal.ansiCyan#2ED5D1
  • terminal.ansiGreen#A3E630
  • terminal.ansiMagenta#D07BFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFD93B
  • terminal.background#0A0C12
  • terminal.foreground#E1E3E8
  • titleBar.activeBackground#0C0F15
  • titleBar.activeForeground#E1E3E8
  • titleBar.inactiveBackground#0A0C12
  • titleBar.inactiveForeground#B0C4D9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#A3E635
keyword, storage.type, storage.modifier#47B0FFbold
keyword.operator, punctuation.accessor#6C757D
variable, variable.other#E0E0E0
variable.parameter#FFD700italic
entity.name.function, support.function#26C6DA
meta.function-call#A8B8C8
entity.name.class, entity.name.type.class, support.class#BA68C8bold
entity.name.type, support.type#BA68C8
entity.name.type.interface#26C6DAitalic
constant.numeric#FFD700
constant, constant.language, constant.character#FFD700
constant.language.boolean#FFD700bold
variable.other.property, support.variable.property#A8B8C8
meta.object-literal.key#47B0FF
entity.name.tag, punctuation.definition.tag#47B0FF
entity.other.attribute-name#BA68C8italic
punctuation, meta.brace#6C757D
string.regexp#FF5555
constant.character.escape#BA68C8
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#47B0FFbold
markup.bold#FFD700bold
markup.italic#BA68C8italic
markup.underline.link#26C6DA
markup.inline.raw, markup.fenced_code#A3E635
support.type.property-name.json#47B0FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700
support.type.property-name.css#47B0FF
support.constant.property-value.css#A3E635