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#1e293b
  • activityBar.border#334155
  • activityBar.foreground#38BDF8
  • activityBar.inactiveForeground#2D3F55
  • activityBarBadge.background#2DD4BF
  • activityBarBadge.foreground#0F172A
  • badge.background#2DD4BF
  • badge.foreground#0F172A
  • breadcrumb.activeSelectionForeground#2DD4BF
  • breadcrumb.focusForeground#E2E8F0
  • breadcrumb.foreground#475569
  • button.background#2DD4BF
  • button.foreground#0F172A
  • button.hoverBackground#0E7490
  • dropdown.background#1e293b
  • dropdown.border#334155
  • dropdown.foreground#E2E8F0
  • editor.background#0F172A
  • editor.findMatchBackground#2DD4BF50
  • editor.findMatchHighlightBackground#2DD4BF30
  • editor.foreground#E2E8F0
  • editor.inactiveSelectionBackground#2DD4BF18
  • editor.lineHighlightBackground#1e293b
  • editor.selectionBackground#2DD4BF30
  • editorBracketMatch.background#2DD4BF25
  • editorBracketMatch.border#2DD4BF
  • editorCursor.foreground#2DD4BF
  • editorError.foreground#F87171
  • editorGroupHeader.tabsBackground#1e293b
  • editorGroupHeader.tabsBorder#334155
  • editorGutter.addedBackground#86EFAC60
  • editorGutter.deletedBackground#F8717160
  • editorGutter.modifiedBackground#38BDF860
  • editorHint.foreground#2DD4BF
  • editorIndentGuide.activeBackground1#2DD4BF50
  • editorIndentGuide.background1#334155
  • editorInfo.foreground#38BDF8
  • editorLineNumber.activeForeground#2DD4BF
  • editorLineNumber.foreground#2D3F55
  • editorOverviewRuler.addedForeground#86EFAC
  • editorOverviewRuler.border#334155
  • editorOverviewRuler.deletedForeground#F87171
  • editorOverviewRuler.modifiedForeground#38BDF8
  • editorWarning.foreground#FDE68A
  • editorWhitespace.foreground#2D3F55
  • focusBorder#2DD4BF
  • gitDecoration.addedResourceForeground#86EFAC
  • gitDecoration.conflictingResourceForeground#FDE68A
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#2D3F55
  • gitDecoration.modifiedResourceForeground#38BDF8
  • gitDecoration.untrackedResourceForeground#2DD4BF
  • input.background#1e293b
  • input.border#334155
  • input.foreground#E2E8F0
  • input.placeholderForeground#2D3F55
  • inputOption.activeBackground#2DD4BF20
  • inputOption.activeBorder#2DD4BF
  • list.activeSelectionBackground#334155
  • list.activeSelectionForeground#E2E8F0
  • list.focusBackground#334155
  • list.highlightForeground#2DD4BF
  • list.hoverBackground#33415580
  • list.inactiveSelectionBackground#33415580
  • menu.background#1e293b
  • menu.foreground#E2E8F0
  • menu.selectionBackground#334155
  • menu.selectionForeground#E2E8F0
  • menu.separatorBackground#334155
  • notifications.background#1e293b
  • notifications.border#334155
  • notifications.foreground#E2E8F0
  • panel.background#0F172A
  • panel.border#334155
  • panelTitle.activeBorder#2DD4BF
  • panelTitle.activeForeground#2DD4BF
  • panelTitle.inactiveForeground#475569
  • pickerGroup.foreground#2DD4BF
  • progressBar.background#2DD4BF
  • quickInput.background#1e293b
  • quickInput.foreground#E2E8F0
  • quickInputHighlightForeground#2DD4BF
  • scrollbarSlider.activeBackground#2DD4BF60
  • scrollbarSlider.background#33415580
  • scrollbarSlider.hoverBackground#2DD4BF40
  • selection.background#2DD4BF40
  • sideBar.background#1e293b
  • sideBar.border#334155
  • sideBar.foreground#CBD5E1
  • sideBarSectionHeader.background#0F172A
  • sideBarSectionHeader.border#334155
  • sideBarSectionHeader.foreground#2DD4BF
  • sideBarTitle.foreground#2DD4BF
  • statusBar.background#2DD4BF
  • statusBar.debuggingBackground#0E7490
  • statusBar.foreground#0F172A
  • statusBar.noFolderBackground#0F172A
  • statusBarItem.hoverBackground#0E749080
  • statusBarItem.remoteBackground#38BDF8
  • statusBarItem.remoteForeground#0F172A
  • tab.activeBackground#0F172A
  • tab.activeBorder#2DD4BF
  • tab.activeForeground#E2E8F0
  • tab.border#334155
  • tab.hoverBackground#334155
  • tab.inactiveBackground#1e293b
  • tab.inactiveForeground#475569
  • terminal.ansiBlack#334155
  • terminal.ansiBlue#38BDF8
  • terminal.ansiBrightBlack#475569
  • terminal.ansiBrightBlue#7DD3FA
  • terminal.ansiBrightCyan#5EEAD4
  • terminal.ansiBrightGreen#BBF7D0
  • terminal.ansiBrightMagenta#E879F9
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#F8FAFC
  • terminal.ansiBrightYellow#FEF08A
  • terminal.ansiCyan#2DD4BF
  • terminal.ansiGreen#86EFAC
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#E2E8F0
  • terminal.ansiYellow#FDE68A
  • terminal.background#0F172A
  • terminal.foreground#E2E8F0
  • terminal.selectionBackground#2DD4BF40
  • titleBar.activeBackground#0F172A
  • titleBar.activeForeground#E2E8F0
  • titleBar.border#334155
  • titleBar.inactiveBackground#0F172A
  • titleBar.inactiveForeground#475569

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2D3F55italic
variable, string constant.other.placeholder#E2E8F0
invalid, invalid.illegal#F87171
keyword, storage.type, storage.modifier#2DD4BF
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#38BDF8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FCA5A5
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#38BDF8
meta.block variable.other#FCA5A5
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FDE68A
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#86EFAC
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FDE68A
support.type#7DD3FA
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#7DD3FA
entity.other.attribute-name#2DD4BF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FDE68Aitalic
entity.other.attribute-name.class#FDE68A
markup.inserted#86EFAC
markup.deleted#F87171
markup.changed#2DD4BF
string.regexp#38BDF8
constant.character.escape#38BDF8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#38BDF8italic
source.json meta.structure.dictionary.json support.type.property-name.json#2DD4BF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#38BDF8
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#FDE68A
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2DD4BF
markup.bold, markup.bold string#FCA5A5bold
markup.italic#FCA5A5italic
string.other.link.title.markdown#38BDF8