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.activeBorder#3961C7
  • activityBar.background#000
  • activityBar.foreground#fff
  • activityBar.inactiveForeground#666
  • activityBarBadge.background#3961C7
  • activityBarBadge.foreground#fff
  • badge.background#3961C7
  • badge.foreground#fff
  • breadcrumb.foreground#888
  • button.background#000
  • button.foreground#aaa
  • button.hoverBackground#000b
  • charts.blue#7cd5f1
  • charts.foreground#f2fffc
  • charts.green#a2e57b
  • charts.lines#6b7678
  • charts.orange#DBC139
  • charts.purple#baa0f8
  • charts.red#ff6d7e
  • charts.yellow#ffed72
  • diffEditor.insertedTextBackground#a2e57b19
  • diffEditor.removedTextBackground#ff6d7e19
  • editor.background#101316
  • editor.foreground#DDDBCC
  • editor.lineHighlightBackground#1A222E
  • editor.lineHighlightBorder#1A222E
  • editor.selectionBackground#3961C740
  • editor.selectionForeground#DDDBCC
  • editorBracketHighlight.foreground1#DDDBCC
  • editorBracketHighlight.foreground2#DDDBCC
  • editorBracketHighlight.foreground3#DDDBCC
  • editorBracketHighlight.foreground4#DDDBCC
  • editorBracketHighlight.foreground5#DDDBCC
  • editorBracketHighlight.foreground6#DDDBCC
  • editorCursor.background#DDDBCC
  • editorCursor.foreground#3961C7
  • editorGroupHeader.tabsBackground#161C25
  • editorGutter.addedBackground#a2e57b
  • editorGutter.background#101316
  • editorGutter.deletedBackground#ff6d7e
  • editorGutter.modifiedBackground#DBC139
  • editorIndentGuide.background#3a4449
  • editorLineNumber.activeForeground#DDDBCC
  • editorLineNumber.foreground#888
  • editorRuler.foreground#545f62
  • editorWhitespace.foreground#545f62
  • editorWidget.background#18202C
  • editorWidget.border#444
  • editorWidget.foreground#DDDBCC
  • focusBorder#3961C7
  • input.background#fff2
  • list.activeSelectionBackground#3961C780
  • list.activeSelectionForeground#fff
  • list.focusBackground#3961C760
  • list.hoverBackground#3961C740
  • list.inactiveSelectionBackground#3961C740
  • list.inactiveSelectionForeground#fff
  • merge.border#161C25
  • merge.commonContentBackground#f2fffc19
  • merge.commonHeaderBackground#f2fffc26
  • merge.currentContentBackground#ff6d7e19
  • merge.currentHeaderBackground#ff6d7e26
  • merge.incomingContentBackground#a2e57b19
  • merge.incomingHeaderBackground#a2e57b26
  • notificationCenter.border#3a4449
  • notificationCenterHeader.background#3a4449
  • notificationCenterHeader.foreground#8b9798
  • notificationLink.foreground#ffed72
  • notifications.background#3a4449
  • notifications.border#3a4449
  • notifications.foreground#b8c4c3
  • notificationsErrorIcon.foreground#ff6d7e
  • notificationsInfoIcon.foreground#7cd5f1
  • notificationsWarningIcon.foreground#DBC139
  • notificationToast.border#3a4449
  • quickInput.background#18202C
  • quickInput.border#444
  • quickInput.foreground#DDDBCC
  • sideBar.background#101316
  • sideBar.border#444
  • sideBar.foreground#888
  • sideBarSectionHeader.background#1A222E
  • sideBarSectionHeader.border#444
  • sideBarSectionHeader.foreground#DDDBCC
  • statusBar.background#000
  • statusBar.border#161b1e
  • statusBar.debuggingBackground#3961C7
  • statusBar.debuggingBorder#1d2528
  • statusBar.debuggingForeground#f2fffc
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#000
  • statusBar.noFolderBorder#161b1e
  • statusBar.noFolderForeground#6b7678
  • statusBarItem.activeBackground#161C25
  • statusBarItem.hoverBackground#f2fffc0c
  • statusBarItem.prominentBackground#3a4449
  • statusBarItem.prominentHoverBackground#3a4449
  • statusBarItem.remoteBackground#3961C7
  • statusBarItem.remoteForeground#aaa
  • tab.activeBackground#18202C
  • tab.activeBorder#ffed72
  • tab.activeForeground#DDDBCC
  • tab.activeModifiedBorder#545f62
  • tab.border#161C25
  • tab.hoverBackground#161C25
  • tab.hoverBorder#545f62
  • tab.inactiveBackground#161C25
  • tab.inactiveForeground#888
  • tab.inactiveModifiedBorder#545f62
  • tab.unfocusedActiveBorder#8b9798
  • tab.unfocusedActiveForeground#b8c4c3
  • tab.unfocusedActiveModifiedBorder#3a4449
  • tab.unfocusedHoverBackground#161C25
  • tab.unfocusedHoverBorder#161C25
  • tab.unfocusedInactiveForeground#8b9798
  • tab.unfocusedInactiveModifiedBorder#3961C7
  • terminal.ansiBlack#999
  • terminal.ansiBlue#4063D9
  • terminal.ansiBrightBlack#ccc
  • terminal.ansiBrightBlue#618BD7
  • terminal.ansiBrightCyan#92D1DB
  • terminal.ansiBrightGreen#A2CAA2
  • terminal.ansiBrightMagenta#DA6CA1
  • terminal.ansiBrightRed#D76673
  • terminal.ansiBrightWhite#333
  • terminal.ansiBrightYellow#E8C05C
  • terminal.ansiCyan#60B3BD
  • terminal.ansiGreen#82C06C
  • terminal.ansiMagenta#D4498C
  • terminal.ansiRed#D83649
  • terminal.ansiWhite#666
  • terminal.ansiYellow#E8B229
  • terminal.background#101316
  • terminal.border#3961C7
  • terminal.foreground#DDDBCC
  • terminal.selectionBackground#3961C740
  • terminalCursor.background#DDDBCC
  • terminalCursor.foreground#3961C7
  • titleBar.activeBackground#1d2528
  • titleBar.activeForeground#8b9798
  • titleBar.border#161b1e
  • titleBar.inactiveBackground#1d2528
  • titleBar.inactiveForeground#545f62
  • welcomePage.buttonBackground#3a4449
  • welcomePage.buttonHoverBackground#545f62

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888—
comment.block.preprocessor#888
comment.documentation, comment.block.documentation#888—
comment.block.documentation punctuation.definition.bracket.curly#2AB2A0—
comment.block storage.type—
comment.block.documentation punctuation.definition.block.tag#3961C7—
invalid.illegal#DD5441—
keyword.operator#DD5441—
keyword.operator.assignment, keyword.operator.type#DDDBCC
keyword.operator.arithmetic—
keyword, storage#3961C7—
keyword.control.flow, keyword.control.default, storage.modifier—bold
keyword.other.definition.ini#DDDBCC—
storage.type, support.type, keyword.control#3961C7bold
constant.language, support.constant, variable.language#3961C7—
constant.language.import-export-all#DDDBCC—
variable, support.variable#DDDBCC—
meta.tag.attributes variable.other#DDDBCC—
entity.name.function, support.function#3961C7bold
storage.type.function.arrow#DDDBCC
entity.name.type, entity.other.inherited-class, meta.type.annotation, support.class#D4498Citalic
support.class.component#DDDBCCbold
entity.name.exception#cc0000—
entity.name.section#3961C7bold
constant.numeric, constant.character, constant#DBC139—
string#55B45F—
constant.character.escape#888—
string.regexp punctuation.definition.string#2AB2A0—
string.regexp#2AB2A0—
constant.other.symbol#F4B02B—
punctuation#DDDBCC—
punctuation.definition.string#55B45F—
punctuation.definition.keyword#3961C7—
punctuation.definition.entity.ini#3961C7bold
punctuation.definition.tag#DDDBCC—
punctuation.definition.bold#DDDBCCbold
punctuation.definition.heading#3961C7
punctuation.definition.string.template#55B45F—
meta.tag.attributes punctuation#DDDBCC—
meta.definition.variable, meta.definition.variable entity.name.function#DDDBCC—
meta.function-call entity.name.function—
meta.link.inline#2AB2A0—
support.type, support.type.primitive, meta.type.parameters entity.name.type#D4498C—
meta.brace, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag#D4498C—
entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, punctuation.definition.tag#DDDBCCbold
entity.other.attribute-name, entity.name.tag.css, meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css#3961C7bold
keyword.other.unit#DBC139italic
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#2AB2A0italic
constant.character.entity, punctuation.definition.entity#DBC139—
meta.property-name, support.type.property-name#DDDBCC—
support.type.property-name.json—bold
meta.property-value, meta.property-value constant.other, support.constant.property-value#55B45F—
keyword.other.important—bold
meta.paragraph.markdown#DDDBCC—
markup.bold.markdown#D4498C—
markup.changed#DDDBCC—
markup.deleted#DDDBCC—
markup.italic—italic
markup.error#cc0000—
markup.inserted#DDDBCC—
meta.link#D4498C—
markup.output, markup.raw#888888—
markup.prompt#888888—
markup.heading#AA3731—
markup.bold—bold
markup.traceback#cc0000—
markup.underline—underline
markup.quote#3961C7—
markup.list#D4498C—
markup.bold, markup.italic#55B45F—
markup.inline.raw#D4498C
meta.diff.range, meta.diff.index, meta.separator#434343—
meta.diff.header.from-file#434343—
meta.diff.header.to-file#434343—
keyword.operator#3961C7italic
keyword, storage#3961C7italic
storage.type#3961C7italic
keyword.control#3961C7italic
meta.attribute, entity.name.function.attribute#DBC139bold italic