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#D12E2E
  • activityBar.background#0C0C12
  • activityBar.foreground#D12E2E
  • activityBarBadge.background#D12E2E
  • activityBarBadge.foreground#0B0B0F
  • badge.background#D12E2E
  • badge.foreground#0B0B0F
  • button.background#3A3A48
  • button.foreground#D2D2E0
  • button.hoverBackground#D12E2E
  • dropdown.background#0C0C12
  • dropdown.border#3A3A48
  • dropdown.foreground#D2D2E0
  • editor.background#0B0B0F
  • editor.findMatchBackground#D12E2E99
  • editor.findMatchHighlightBackground#3A3A48AA
  • editor.foreground#D2D2E0
  • editor.lineHighlightBackground#15151D
  • editor.lineHighlightBorder#3A3A48
  • editor.selectionBackground#D12E2E80
  • editor.selectionHighlightBackground#3A3A4870
  • editorBracketMatch.background#D12E2E33
  • editorBracketMatch.border#D12E2E
  • editorCursor.foreground#D12E2E
  • editorGroupHeader.tabsBackground#0B0B0F
  • editorIndentGuide.activeBackground#D12E2E
  • editorIndentGuide.background#5A5A6E44
  • editorLineNumber.activeForeground#D12E2E
  • editorLineNumber.foreground#5A5A6E
  • editorWhitespace.foreground#5A5A6E
  • focusBorder#D12E2E
  • gitDecoration.conflictingResourceForeground#E8B23E
  • gitDecoration.deletedResourceForeground#FF7A7A
  • gitDecoration.modifiedResourceForeground#D12E2E
  • gitDecoration.untrackedResourceForeground#A8D96F
  • input.background#0C0C12
  • input.border#3A3A48
  • input.foreground#D2D2E0
  • input.placeholderForeground#7A7A8A
  • inputOption.activeBorder#D12E2E
  • list.activeSelectionBackground#191923
  • list.activeSelectionForeground#D2D2E0
  • list.focusBackground#191923
  • list.highlightForeground#D12E2E
  • list.hoverBackground#19192380
  • minimap.background#0B0B0F
  • minimapSlider.activeBackground#5A5A6E66
  • minimapSlider.background#5A5A6E22
  • minimapSlider.hoverBackground#5A5A6E44
  • panel.background#0B0B0F
  • panel.border#3A3A48
  • panelTitle.activeBorder#D12E2E
  • panelTitle.activeForeground#D2D2E0
  • panelTitle.inactiveForeground#7A7A8A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A5A6E88
  • scrollbarSlider.background#5A5A6E44
  • scrollbarSlider.hoverBackground#5A5A6E66
  • sideBar.background#0C0C12
  • sideBar.foreground#D2D2E0
  • sideBarSectionHeader.background#0C0C12
  • sideBarSectionHeader.foreground#D12E2E
  • sideBarTitle.foreground#D12E2E
  • statusBar.background#2F2F38
  • statusBar.debuggingBackground#D12E2E
  • statusBar.foreground#D2D2E0
  • statusBar.noFolderBackground#0C0C12
  • statusBarItem.hoverBackground#D12E2E80
  • tab.activeBackground#0C0C12
  • tab.activeBorder#D12E2E
  • tab.activeForeground#D2D2E0
  • tab.border#0B0B0F
  • tab.inactiveBackground#0B0B0F
  • tab.inactiveForeground#3A3A48
  • terminal.ansiBlue#4B9BEF
  • terminal.ansiBrightBlue#72B7FF
  • terminal.ansiBrightCyan#71FFFF
  • terminal.ansiBrightGreen#C5FF94
  • terminal.ansiBrightMagenta#FF7A90
  • terminal.ansiBrightRed#FF7A7A
  • terminal.ansiBrightYellow#FFE878
  • terminal.ansiCyan#4FD8E9
  • terminal.ansiGreen#A8D96F
  • terminal.ansiMagenta#D12E2E
  • terminal.ansiRed#D12E2E
  • terminal.ansiYellow#E8B23E
  • terminal.background#0B0B0F
  • terminal.foreground#D2D2E0
  • titleBar.activeBackground#0C0C12
  • titleBar.activeForeground#D2D2E0
  • titleBar.inactiveBackground#0B0B0F
  • titleBar.inactiveForeground#3A3A48

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5E5E72italic
string, string.quoted, string.template#A8D96F
keyword, storage.type, storage.modifier#D12E2Ebold
keyword.operator, punctuation.accessor#3A3A48
variable, variable.other#D2D2E0
variable.parameter#D12E2Eitalic
entity.name.function, support.function#D12E2E
meta.function-call#D2D2E0
entity.name.class, entity.name.type.class, support.class#D12E2Ebold
entity.name.type, support.type#3A3A48
entity.name.type.interface#D12E2Eitalic
constant.numeric#E8B23E
constant, constant.language, constant.character#E8B23E
constant.language.boolean#D12E2Ebold
variable.other.property, support.variable.property#D2D2E0
meta.object-literal.key#D12E2E
entity.name.tag, punctuation.definition.tag#D12E2E
entity.other.attribute-name#3A3A48italic
punctuation, meta.brace#D2D2E0
string.regexp#E8B23E
constant.character.escape#D12E2E
meta.decorator, punctuation.decorator#E8B23E
invalid, invalid.illegal#FF7A7Astrikethrough
markup.heading, entity.name.section#D12E2Ebold
markup.bold#D12E2Ebold
markup.italic#3A3A48italic
markup.underline.link#4B9BEF
markup.inline.raw, markup.fenced_code#A8D96F
support.type.property-name.json#D12E2E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4B9BEF
support.type.property-name.css#D12E2E
support.constant.property-value.css#A8D96F