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.background#0D1B4D
  • activityBar.foreground#FFD700
  • activityBar.inactiveForeground#6B7DB3
  • activityBarBadge.background#FF7A45
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF7A45
  • badge.foreground#FFFFFF
  • button.background#1E5BFF
  • button.foreground#FFFFFF
  • button.hoverBackground#4D8CFF
  • descriptionForeground#8B96B8
  • dropdown.background#121829
  • dropdown.border#1E2540
  • dropdown.foreground#E8ECF4
  • editor.background#0A0E1A
  • editor.findMatchBackground#FFD70044
  • editor.findMatchHighlightBackground#FFD70022
  • editor.foreground#E8ECF4
  • editor.inactiveSelectionBackground#1E5BFF22
  • editor.lineHighlightBackground#121829
  • editor.selectionBackground#1E5BFF44
  • editor.wordHighlightBackground#1E5BFF33
  • editor.wordHighlightStrongBackground#1E5BFF55
  • editorBracketMatch.background#1E5BFF33
  • editorBracketMatch.border#1E5BFF
  • editorCursor.foreground#FFD700
  • editorError.foreground#FF7A45
  • editorGroupHeader.tabsBackground#0C1222
  • editorGutter.background#0A0E1A
  • editorHint.foreground#5BC8D4
  • editorIndentGuide.activeBackground#1E5BFF66
  • editorIndentGuide.background#1E2540
  • editorInfo.foreground#4D8CFF
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#4A5578
  • editorWarning.foreground#FFD700
  • editorWhitespace.foreground#2A3350
  • focusBorder#1E5BFF
  • foreground#E8ECF4
  • gitDecoration.deletedResourceForeground#FF7A45
  • gitDecoration.ignoredResourceForeground#4A5578
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#3DDBA8
  • input.background#121829
  • input.border#1E2540
  • input.foreground#E8ECF4
  • input.placeholderForeground#4A5578
  • list.activeSelectionBackground#1E5BFF44
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#FFD700
  • list.hoverBackground#1E5BFF22
  • list.inactiveSelectionBackground#1E2540
  • panel.background#0A0E1A
  • panel.border#1E2540
  • scrollbarSlider.activeBackground#1E5BFF88
  • scrollbarSlider.background#1E5BFF44
  • scrollbarSlider.hoverBackground#1E5BFF66
  • sideBar.background#0C1222
  • sideBar.foreground#C8D0E8
  • sideBarSectionHeader.background#0D1B4D
  • sideBarSectionHeader.foreground#4D8CFF
  • sideBarTitle.foreground#FFD700
  • statusBar.background#0D1B4D
  • statusBar.debuggingBackground#FF7A45
  • statusBar.foreground#C8D0E8
  • statusBar.noFolderBackground#0D1B4D
  • tab.activeBackground#0A0E1A
  • tab.activeForeground#FFD700
  • tab.border#0D1B4D
  • tab.inactiveBackground#0C1222
  • tab.inactiveForeground#6B7DB3
  • terminal.ansiBlue#1E5BFF
  • terminal.ansiCyan#4D8CFF
  • terminal.ansiGreen#3DDBA8
  • terminal.ansiMagenta#FF6B9D
  • terminal.ansiRed#FF7A45
  • terminal.ansiYellow#FFD700
  • terminal.background#0A0E1A
  • terminal.foreground#E8ECF4
  • textLink.activeForeground#FFD700
  • textLink.foreground#4D8CFF
  • titleBar.activeBackground#080C18
  • titleBar.activeForeground#E8ECF4
  • titleBar.inactiveBackground#080C18
  • titleBar.inactiveForeground#6B7DB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5BC8D4italic
keyword, storage.type, storage.modifier, keyword.control#4D8CFFbold
string, constant.other.symbol#FFD700—
constant.numeric, constant.language#F0C040—
constant.language.boolean#FF6B9D—
entity.name.function, support.function, meta.function-call#7DD3FC—
entity.name.type, entity.name.class, support.type, support.class#FF9EAAbold
variable, variable.other, variable.parameter#C8D8FF—
variable.other.property, support.variable.property#A8C4FF—
entity.name.tag#FF7A45—
entity.other.attribute-name#FFD700—
keyword.operator#8B96B8—
punctuation, meta.brace#8B96B8—
entity.name.namespace, support.type.namespace#FF9EAAbold
meta.decorator, entity.name.function.decorator#FFD700italic
keyword.control.import, keyword.control.export, keyword.control.from#3DDBA8—
string.regexp#FF6B9D—
constant.character.escape#7DD3FC—
invalid, invalid.illegal#FF7A45bold underline
markup.heading, entity.name.section.markdown#4D8CFFbold
markup.bold#FFD700bold
markup.italic#7DD3FCitalic
markup.underline.link#3DDBA8—
markup.inline.raw, markup.fenced_code.block#F0C040—
support.type.property-name.json#4D8CFF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700—
support.type.property-name.css#4D8CFF—
support.constant.property-value.css#F0C040—