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#ff9e7a
  • activityBar.background#111525
  • activityBar.foreground#ff9e7a
  • activityBarBadge.background#ff9e7a
  • activityBarBadge.foreground#0b0f1c
  • badge.background#ff9e7a
  • badge.foreground#0b0f1c
  • button.background#1a2238
  • button.foreground#ffffff
  • button.hoverBackground#262e44
  • dropdown.background#0e1422
  • dropdown.border#1a2238
  • dropdown.foreground#d8dbe3
  • editor.background#0b0f1c
  • editor.findMatchBackground#ff9e7a44
  • editor.findMatchHighlightBackground#ff9e7a22
  • editor.foreground#d8dbe3
  • editor.lineHighlightBackground#1a223840
  • editor.lineHighlightBorder#1a223880
  • editor.selectionBackground#8a7ba655
  • editor.selectionHighlightBackground#8a7ba633
  • editorBracketMatch.background#ff9e7a33
  • editorBracketMatch.border#ff9e7a
  • editorCursor.foreground#ff9e7a
  • editorGroupHeader.tabsBackground#0b0f1c
  • editorIndentGuide.activeBackground#35415e88
  • editorIndentGuide.background#35415e44
  • editorLineNumber.activeForeground#ff9e7a
  • editorLineNumber.foreground#5a6a7a
  • editorWhitespace.foreground#35415e
  • focusBorder#ff9e7a
  • gitDecoration.conflictingResourceForeground#e6c07b
  • gitDecoration.deletedResourceForeground#8a7ba6
  • gitDecoration.modifiedResourceForeground#ff9e7a
  • gitDecoration.untrackedResourceForeground#73d2a2
  • input.background#0e1422
  • input.border#1a2238
  • input.foreground#d8dbe3
  • input.placeholderForeground#5a6a7a
  • inputOption.activeBorder#ff9e7a
  • list.activeSelectionBackground#1a2238
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1a2238
  • list.highlightForeground#ff9e7a
  • list.hoverBackground#1a223866
  • minimap.background#0b0f1c
  • minimapSlider.activeBackground#ff9e7a66
  • minimapSlider.background#ff9e7a22
  • minimapSlider.hoverBackground#ff9e7a44
  • panel.background#0b0f1c
  • panel.border#1a2238
  • panelTitle.activeBorder#ff9e7a
  • panelTitle.activeForeground#ff9e7a
  • panelTitle.inactiveForeground#a0b0c5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff9e7a88
  • scrollbarSlider.background#5a6a7a44
  • scrollbarSlider.hoverBackground#5a6a7a88
  • sideBar.background#0e1422
  • sideBar.foreground#a0b0c5
  • sideBarSectionHeader.background#111525
  • sideBarSectionHeader.foreground#ff9e7a
  • sideBarTitle.foreground#ff9e7a
  • statusBar.background#1a2238
  • statusBar.debuggingBackground#8a7ba6
  • statusBar.foreground#d8dbe3
  • statusBar.noFolderBackground#111525
  • statusBarItem.hoverBackground#262e44
  • tab.activeBackground#1a2238
  • tab.activeBorder#ff9e7a
  • tab.activeForeground#ffffff
  • tab.border#0b0f1c
  • tab.inactiveBackground#0e1422
  • tab.inactiveForeground#a0b0c5
  • terminal.ansiBlue#8a7ba6
  • terminal.ansiBrightBlue#9a8cbf
  • terminal.ansiBrightCyan#8be5b5
  • terminal.ansiBrightGreen#8be5b5
  • terminal.ansiBrightMagenta#d58df5
  • terminal.ansiBrightRed#ffb089
  • terminal.ansiBrightYellow#f0d29f
  • terminal.ansiCyan#73d2a2
  • terminal.ansiGreen#73d2a2
  • terminal.ansiMagenta#c27ddf
  • terminal.ansiRed#ff9e7a
  • terminal.ansiYellow#e6c07b
  • terminal.background#0b0f1c
  • terminal.foreground#d8dbe3
  • titleBar.activeBackground#111525
  • titleBar.activeForeground#d8dbe3
  • titleBar.inactiveBackground#0b0f1c
  • titleBar.inactiveForeground#a0b0c5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6a7aitalic
string, string.quoted, string.template#73d2a2
keyword, storage.type, storage.modifier#ff9e7abold
keyword.operator, punctuation.accessor#d8dbe3
variable, variable.other#c27ddf
variable.parameter#c27ddfitalic
entity.name.function, support.function#d8dbe3
meta.function-call#e1c6f4
entity.name.class, entity.name.type.class, support.class#ff9e7abold
entity.name.type, support.type#8a7ba6
entity.name.type.interface#8a7ba6italic
constant.numeric#e6c07b
constant, constant.language, constant.character#e6c07b
constant.language.boolean#ff9e7abold
variable.other.property, support.variable.property#e1c6f4
meta.object-literal.key#d8dbe3
entity.name.tag, punctuation.definition.tag#ff9e7a
entity.other.attribute-name#8a7ba6italic
punctuation, meta.brace#a0b0c5
string.regexp#ff9e7a
constant.character.escape#73d2a2
meta.decorator, punctuation.decorator#e6c07b
invalid, invalid.illegal#ff9e7astrikethrough
markup.heading, entity.name.section#ff9e7abold
markup.bold#e6c07bbold
markup.italic#8a7ba6italic
markup.underline.link#73d2a2
markup.inline.raw, markup.fenced_code#73d2a2
support.type.property-name.json#d8dbe3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff9e7a
support.type.property-name.css#d8dbe3
support.constant.property-value.css#73d2a2