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—
themesmith by CyberBoost - VS Code Theme