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#FF7A45underline
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