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