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#1E5BFF
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#B8CCFF
  • activityBarBadge.background#D45A20
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D45A20
  • badge.foreground#FFFFFF
  • button.background#1E5BFF
  • button.foreground#FFFFFF
  • button.hoverBackground#4D8CFF
  • descriptionForeground#5A6080
  • dropdown.background#FFFFFF
  • dropdown.border#C8D4F0
  • dropdown.foreground#1A1A2E
  • editor.background#F4F7FF
  • editor.findMatchBackground#FFD70055
  • editor.findMatchHighlightBackground#FFD70033
  • editor.foreground#1A1A2E
  • editor.inactiveSelectionBackground#1E5BFF18
  • editor.lineHighlightBackground#E8EEFF
  • editor.selectionBackground#1E5BFF33
  • editor.wordHighlightBackground#1E5BFF22
  • editor.wordHighlightStrongBackground#1E5BFF33
  • editorBracketMatch.background#1E5BFF22
  • editorBracketMatch.border#1E5BFF
  • editorCursor.foreground#1E5BFF
  • editorError.foreground#D45A20
  • editorGroupHeader.tabsBackground#EEF2FF
  • editorGutter.background#F4F7FF
  • editorHint.foreground#0E8A96
  • editorIndentGuide.activeBackground#1E5BFF55
  • editorIndentGuide.background#D0DAF0
  • editorInfo.foreground#1E5BFF
  • editorLineNumber.activeForeground#1E5BFF
  • editorLineNumber.foreground#8B96B8
  • editorWarning.foreground#B8860B
  • editorWhitespace.foreground#C8D4F0
  • focusBorder#1E5BFF
  • foreground#1A1A2E
  • gitDecoration.deletedResourceForeground#D45A20
  • gitDecoration.ignoredResourceForeground#8B96B8
  • gitDecoration.modifiedResourceForeground#B8860B
  • gitDecoration.untrackedResourceForeground#0A9E6E
  • input.background#FFFFFF
  • input.border#C8D4F0
  • input.foreground#1A1A2E
  • input.placeholderForeground#8B96B8
  • list.activeSelectionBackground#1E5BFF33
  • list.activeSelectionForeground#1A1A2E
  • list.highlightForeground#B8860B
  • list.hoverBackground#1E5BFF18
  • list.inactiveSelectionBackground#D8E4FF
  • panel.background#F4F7FF
  • panel.border#D0DAF0
  • scrollbarSlider.activeBackground#1E5BFF77
  • scrollbarSlider.background#1E5BFF33
  • scrollbarSlider.hoverBackground#1E5BFF55
  • sideBar.background#EEF2FF
  • sideBar.foreground#2A2A4A
  • sideBarSectionHeader.background#D8E4FF
  • sideBarSectionHeader.foreground#1A1A2E
  • sideBarTitle.foreground#1E5BFF
  • statusBar.background#1E5BFF
  • statusBar.debuggingBackground#D45A20
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#1E5BFF
  • tab.activeBackground#F4F7FF
  • tab.activeForeground#1E5BFF
  • tab.border#D0DAF0
  • tab.inactiveBackground#EEF2FF
  • tab.inactiveForeground#6B7DB3
  • terminal.ansiBlue#1E5BFF
  • terminal.ansiCyan#0284C7
  • terminal.ansiGreen#0A9E6E
  • terminal.ansiMagenta#CC4488
  • terminal.ansiRed#D45A20
  • terminal.ansiYellow#B8860B
  • terminal.background#F4F7FF
  • terminal.foreground#1A1A2E
  • textLink.activeForeground#B8860B
  • textLink.foreground#1E5BFF
  • titleBar.activeBackground#1A1A2E
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#2A2A4A
  • titleBar.inactiveForeground#B8CCFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#0E8A96italic
keyword, storage.type, storage.modifier, keyword.control#1E5BFFbold
string, constant.other.symbol#B8860B
constant.numeric, constant.language#9A7200
constant.language.boolean#CC4488
entity.name.function, support.function, meta.function-call#0284C7
entity.name.type, entity.name.class, support.type, support.class#C43D52bold
variable, variable.other, variable.parameter#2A2A4A
variable.other.property, support.variable.property#3A3A6A
entity.name.tag#D45A20
entity.other.attribute-name#B8860B
keyword.operator#5A6080
punctuation, meta.brace#5A6080
entity.name.namespace, support.type.namespace#C43D52bold
meta.decorator, entity.name.function.decorator#B8860Bitalic
keyword.control.import, keyword.control.export, keyword.control.from#0A9E6E
string.regexp#CC4488
constant.character.escape#0284C7
invalid, invalid.illegal#D45A20underline
markup.heading, entity.name.section.markdown#1E5BFFbold
markup.bold#B8860Bbold
markup.italic#0284C7italic
markup.underline.link#0A9E6E
markup.inline.raw, markup.fenced_code.block#9A7200
support.type.property-name.json#1E5BFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B8860B
support.type.property-name.css#1E5BFF
support.constant.property-value.css#9A7200
Sonic Inspired Theme by AndreLuizJPoles - VS Code Theme