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#FF6A00
  • activityBar.background#111217
  • activityBar.foreground#FF6A00
  • activityBarBadge.background#FF6A00
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF6A00
  • badge.foreground#0B0C10
  • button.background#FF6A00
  • button.foreground#0B0C10
  • button.hoverBackground#FF6A0088
  • dropdown.background#15161D
  • dropdown.border#FF6A00
  • dropdown.foreground#E0E0E0
  • editor.background#0B0C10
  • editor.findMatchBackground#5A9BFF40
  • editor.findMatchHighlightBackground#5A9BFF20
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#FF6A0020
  • editor.lineHighlightBorder#FF6A0080
  • editor.selectionBackground#FF6A0040
  • editor.selectionHighlightBackground#FF6A0030
  • editorBracketMatch.background#5A9BFF33
  • editorBracketMatch.border#5A9BFF
  • editorCursor.foreground#FF6A00
  • editorGroupHeader.tabsBackground#111217
  • editorIndentGuide.activeBackground#40406088
  • editorIndentGuide.background#40406044
  • editorLineNumber.activeForeground#FF6A00
  • editorLineNumber.foreground#606060
  • editorWhitespace.foreground#404060
  • focusBorder#FF6A00
  • gitDecoration.conflictingResourceForeground#FFD96A
  • gitDecoration.deletedResourceForeground#FF6A6A
  • gitDecoration.modifiedResourceForeground#FF6A00
  • gitDecoration.untrackedResourceForeground#96FF99
  • input.background#15161D
  • input.border#FF6A00
  • input.foreground#E0E0E0
  • input.placeholderForeground#606060
  • inputOption.activeBorder#FF6A00
  • list.activeSelectionBackground#FF6A0033
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF6A0044
  • list.highlightForeground#FF6A00
  • list.hoverBackground#FF6A0022
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF6A0066
  • minimapSlider.background#FF6A0022
  • minimapSlider.hoverBackground#FF6A0044
  • panel.background#111217
  • panel.border#FF6A00
  • panelTitle.activeBorder#FF6A00
  • panelTitle.activeForeground#FF6A00
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6A0088
  • scrollbarSlider.background#40406044
  • scrollbarSlider.hoverBackground#40406088
  • sideBar.background#111217
  • sideBar.foreground#C8C8C8
  • sideBarSectionHeader.background#111217
  • sideBarSectionHeader.foreground#FF6A00
  • sideBarTitle.foreground#FF6A00
  • statusBar.background#111217
  • statusBar.debuggingBackground#FF6A00
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#0B0C10
  • statusBarItem.hoverBackground#FF6A0333
  • tab.activeBackground#15161D
  • tab.activeBorder#FF6A00
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C10
  • tab.inactiveBackground#111217
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#5A9BFF
  • terminal.ansiBrightBlue#8ABFFF
  • terminal.ansiBrightCyan#8CFFEF
  • terminal.ansiBrightGreen#B4FFB0
  • terminal.ansiBrightMagenta#E0B3FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFE599
  • terminal.ansiCyan#5AFFD5
  • terminal.ansiGreen#96FF99
  • terminal.ansiMagenta#D085FF
  • terminal.ansiRed#FF6A6A
  • terminal.ansiYellow#FFD96A
  • terminal.background#0B0C10
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#111217
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0C0C10
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555A73italic
string, string.quoted, string.template#96FF99
keyword, storage.type, storage.modifier#FF6A00bold
keyword.operator, punctuation.accessor#5A9BFF
variable, variable.other#E0E0E0
variable.parameter#96FF99italic
entity.name.function, support.function#5A9BFF
meta.function-call#FF6A00
entity.name.class, entity.name.type.class, support.class#FF6A00bold
entity.name.type, support.type#5A9BFF
entity.name.type.interface#5A9BFFitalic
constant.numeric#96FF99
constant, constant.language, constant.character#FFD96A
constant.language.boolean#FFD96Abold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#E0E0E0
entity.name.tag, punctuation.definition.tag#FF6A00
entity.other.attribute-name#5A9BFFitalic
punctuation, meta.brace#E0E0E0
string.regexp#FFD96A
constant.character.escape#FFD96A
meta.decorator, punctuation.decorator#D085FF
invalid, invalid.illegal#FF6A6Astrikethrough
markup.heading, entity.name.section#FF6A00bold
markup.bold#FFD96Abold
markup.italic#5A9BFFitalic
markup.underline.link#5A9BFF
markup.inline.raw, markup.fenced_code#96FF99
support.type.property-name.json#5A9BFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D085FF
support.type.property-name.css#FF6A00
support.constant.property-value.css#96FF99