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#ff5e5e
  • activityBar.background#0e0f2a
  • activityBar.foreground#ff5e5e
  • activityBarBadge.background#ff5e5e
  • activityBarBadge.foreground#0a0c1f
  • badge.background#ff5e5e
  • badge.foreground#0a0c1f
  • button.background#1b1e3a
  • button.foreground#ffffff
  • button.hoverBackground#2a2d4d
  • dropdown.background#0e0f2a
  • dropdown.border#1b1e3a
  • dropdown.foreground#c0c8e0
  • editor.background#0a0c1f
  • editor.findMatchBackground#ff5e5e44
  • editor.findMatchHighlightBackground#ff5e5e22
  • editor.foreground#c0c8e0
  • editor.lineHighlightBackground#1b1e3a80
  • editor.lineHighlightBorder#1b1e3aff
  • editor.selectionBackground#ff5e5e55
  • editor.selectionHighlightBackground#ff5e5e33
  • editorBracketMatch.background#ff5e5e33
  • editorBracketMatch.border#ff5e5e
  • editorCursor.foreground#ff5e5e
  • editorGroupHeader.tabsBackground#0a0c1f
  • editorIndentGuide.activeBackground#2a2d4d88
  • editorIndentGuide.background#2a2d4d44
  • editorLineNumber.activeForeground#ff5e5e
  • editorLineNumber.foreground#5b5f7a
  • editorWhitespace.foreground#2a2d4d
  • focusBorder#ff5e5e
  • gitDecoration.conflictingResourceForeground#e6b749
  • gitDecoration.deletedResourceForeground#ff8a8a
  • gitDecoration.modifiedResourceForeground#ff5e5e
  • gitDecoration.untrackedResourceForeground#66d96b
  • input.background#0e0f2a
  • input.border#1b1e3a
  • input.foreground#c0c8e0
  • input.placeholderForeground#5b5f7a
  • inputOption.activeBorder#ff5e5e
  • list.activeSelectionBackground#1b1e3a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1b1e3a
  • list.highlightForeground#ff5e5e
  • list.hoverBackground#1b1e3a66
  • minimap.background#0a0c1f
  • minimapSlider.activeBackground#ff5e5e66
  • minimapSlider.background#ff5e5e22
  • minimapSlider.hoverBackground#ff5e5e44
  • panel.background#0a0c1f
  • panel.border#1b1e3a
  • panelTitle.activeBorder#ff5e5e
  • panelTitle.activeForeground#ff5e5e
  • panelTitle.inactiveForeground#a1a8c5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff5e5e88
  • scrollbarSlider.background#5b5f7a44
  • scrollbarSlider.hoverBackground#5b5f7a88
  • sideBar.background#0e0f2a
  • sideBar.foreground#a1a8c5
  • sideBarSectionHeader.background#141636
  • sideBarSectionHeader.foreground#ff5e5e
  • sideBarTitle.foreground#ff5e5e
  • statusBar.background#1b1e3a
  • statusBar.debuggingBackground#ff5e5e
  • statusBar.foreground#c0c8e0
  • statusBar.noFolderBackground#0e0f2a
  • statusBarItem.hoverBackground#2a2d4d
  • tab.activeBackground#1b1e3a
  • tab.activeBorder#ff5e5e
  • tab.activeForeground#ffffff
  • tab.border#0a0c1f
  • tab.inactiveBackground#0e0f2a
  • tab.inactiveForeground#a1a8c5
  • terminal.ansiBlue#5b5fa7
  • terminal.ansiBrightBlue#7a88d9
  • terminal.ansiBrightCyan#8ae6c0
  • terminal.ansiBrightGreen#85e08c
  • terminal.ansiBrightMagenta#d96a6a
  • terminal.ansiBrightRed#ff8a8a
  • terminal.ansiBrightYellow#ffdd80
  • terminal.ansiCyan#5fd7a7
  • terminal.ansiGreen#66d96b
  • terminal.ansiMagenta#c83737
  • terminal.ansiRed#ff5e5e
  • terminal.ansiYellow#e6b749
  • terminal.background#0a0c1f
  • terminal.foreground#c0c8e0
  • titleBar.activeBackground#0e0f2a
  • titleBar.activeForeground#c0c8e0
  • titleBar.inactiveBackground#0a0c1f
  • titleBar.inactiveForeground#7d5c6a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5b5f7aitalic
string, string.quoted, string.template#5fd7a7—
keyword, storage.type, storage.modifier#ff5e5ebold
keyword.operator, punctuation.accessor#c0c8e0—
variable, variable.other#c0c8e0—
variable.parameter#e6b749italic
entity.name.function, support.function#66d96b—
meta.function-call#66d96b—
entity.name.class, entity.name.type.class, support.class#c83737bold
entity.name.type, support.type#c83737—
entity.name.type.interface#c83737italic
constant.numeric#e6b749—
constant, constant.language, constant.character#ffb86b—
constant.language.boolean#e6b749bold
variable.other.property, support.variable.property#c0c8e0—
meta.object-literal.key#ffb86b—
entity.name.tag, punctuation.definition.tag#ff5e5e—
entity.other.attribute-name#c83737italic
punctuation, meta.brace#a1a8c5—
string.regexp#66d96b—
constant.character.escape#c83737—
meta.decorator, punctuation.decorator#ffb86b—
invalid, invalid.illegal#ff8a8astrikethrough
markup.heading, entity.name.section#ff5e5ebold
markup.bold#ffb86bbold
markup.italic#c83737italic
markup.underline.link#66d96b—
markup.inline.raw, markup.fenced_code#5fd7a7—
support.type.property-name.json#ffb86b—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffb86b—
support.type.property-name.css#66d96b—
support.constant.property-value.css#c83737—