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#060A12
  • activityBar.foreground#4DD9AC
  • activityBar.inactiveForeground#1E2D40
  • activityBarBadge.background#4DD9AC
  • activityBarBadge.foreground#0A0E1A
  • badge.background#1A4A3A
  • badge.foreground#4DD9AC
  • button.background#1A4A3A
  • button.foreground#D4E8F0
  • button.hoverBackground#4DD9AC
  • dropdown.background#0D1420
  • dropdown.border#152035
  • dropdown.foreground#D4E8F0
  • editor.background#0A0E1A
  • editor.foreground#D4E8F0
  • editor.inactiveSelectionBackground#4DD9AC1A
  • editor.lineHighlightBackground#0F1525
  • editor.selectionBackground#4DD9AC33
  • editorCursor.foreground#4DD9AC
  • editorError.foreground#FF4444
  • editorGroupHeader.tabsBackground#080C16
  • editorInfo.foreground#4DB8C8
  • editorLineNumber.activeForeground#4DB8C8
  • editorLineNumber.foreground#1E2D40
  • editorWarning.foreground#F5C842
  • editorWhitespace.foreground#141C2E
  • focusBorder#4DD9AC
  • input.background#0D1420
  • input.border#152035
  • input.foreground#D4E8F0
  • input.placeholderForeground#1E2D40
  • list.activeSelectionBackground#152035
  • list.activeSelectionForeground#4DD9AC
  • list.hoverBackground#0F1525
  • list.hoverForeground#D4E8F0
  • list.inactiveSelectionBackground#0D1420
  • notifications.background#0D1420
  • notifications.border#152035
  • notifications.foreground#D4E8F0
  • panel.background#080C16
  • panel.border#152035
  • panelTitle.activeBorder#4DD9AC
  • panelTitle.activeForeground#4DD9AC
  • panelTitle.inactiveForeground#2E4A5A
  • progressBar.background#4DD9AC
  • scrollbarSlider.activeBackground#4DD9AC55
  • scrollbarSlider.background#15203577
  • scrollbarSlider.hoverBackground#4DD9AC33
  • sideBar.background#080C16
  • sideBar.foreground#A8C8D8
  • sideBarSectionHeader.background#0D1420
  • sideBarSectionHeader.foreground#45C7D4
  • sideBarTitle.foreground#4DD9AC
  • statusBar.background#0D1420
  • statusBar.foreground#4DD9AC
  • statusBarItem.hoverBackground#152035
  • tab.activeBackground#0A0E1A
  • tab.activeBorderTop#4DD9AC
  • tab.activeForeground#4DD9AC
  • tab.border#0F1525
  • tab.inactiveBackground#080C16
  • tab.inactiveForeground#2E4A5A
  • terminal.ansiBlue#6A9FE8
  • terminal.ansiBrightBlue#8AB8F0
  • terminal.ansiBrightCyan#7ADCE8
  • terminal.ansiBrightGreen#7AEAC0
  • terminal.ansiCyan#45C7D4
  • terminal.ansiGreen#4DD9AC
  • terminal.ansiMagenta#D970A8
  • terminal.ansiRed#FF4444
  • terminal.ansiYellow#F5C842
  • terminal.background#0A0E1A
  • terminal.foreground#D4E8F0
  • titleBar.activeBackground#060A12
  • titleBar.activeForeground#D4E8F0
  • titleBar.inactiveBackground#060A12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#1E3A4Aitalic
variable, string constant.other.placeholder#D4E8F0
invalid, invalid.illegal#FF4444
markup.deleted, invalid.broken#FF4444
keyword, storage.type, storage.modifier#4DD9ACbold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#2E6A7A
entity.name.tag, meta.tag.sgml#4DD9AC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#45C7D4
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#6A9FE8italic
variable.parameter#A8C8D8italic
string, constant.other.symbol, constant.other.key#D970A8
entity.other.inherited-class, markup.heading#A580E0
entity.name, support.type, support.class, support.other.namespace.php#A580E0bold
support.type#8A6FD0
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#45C7D4
entity.other.attribute-name#6A9FE8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6A9FE8italic
variable.language#4DD9ACitalic
string.regexp#45C7D4
constant.character.escape#4DD9AC
*url*, *link*, *uri*underline
markup.inserted#4DD9AC
markup.changed#6A9FE8
source.json meta.structure.dictionary.json support.type.property-name.json#4DD9AC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#45C7D4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A580E0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D970A8
markup.heading, markup.heading entity.name#4DD9ACbold
markup.italic#D970A8italic
markup.bold, markup.bold string#6A9FE8bold
markup.underline#A580E0underline
markup.table#D4E8F0
Aestwave Aurora Theme by Amelita Dela Torre - VS Code Theme