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#EDF2F6
  • activityBar.foreground#008DC9
  • activityBarBadge.background#008DC9
  • activityBarBadge.foreground#FFFFFF
  • badge.background#008DC9
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#5B6C78
  • breadcrumb.foreground#8A97A1
  • button.background#008DC9
  • button.foreground#FFFFFF
  • button.hoverBackground#009FDB
  • button.secondaryBackground#E3ECF3
  • button.secondaryForeground#0B1A24
  • button.secondaryHoverBackground#D0E0EC
  • commandCenter.activeBorder#00000000
  • commandCenter.border#00000000
  • commandCenter.hoverBorder#00000000
  • dropdown.background#FFFFFF
  • dropdown.border#D9E1E7
  • dropdown.foreground#10212D
  • editor.background#F7F9FB
  • editor.foreground#10212D
  • editor.inactiveSelectionBackground#E4EDF4
  • editor.lineHighlightBackground#F0F4F7
  • editor.selectionBackground#D9E7F0
  • editorCursor.foreground#008DC9
  • editorGroup.border#CDD7DF
  • editorGroupHeader.noTabsBackground#EDF2F6
  • editorGroupHeader.tabsBackground#EDF2F6
  • editorIndentGuide.activeBackground1#5B6C78
  • editorIndentGuide.background1#CDD7DF
  • editorLineNumber.activeForeground#2F7AB3
  • editorLineNumber.foreground#bec6cc
  • editorOverviewRuler.border#00000000
  • editorWhitespace.foreground#CDD7DF
  • editorWidget.background#F7F9FB
  • editorWidget.foreground#10212D
  • explorer.decorations.ignoredForeground#6C7B87
  • extensionButton.background#008DC9
  • extensionButton.foreground#FFFFFF
  • extensionButton.hoverBackground#009FDB
  • extensionButton.prominentBackground#008DC9
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#009FDB
  • focusBorder#008DC9
  • gitDecoration.ignoredResourceForeground#6C7B87
  • input.background#FFFFFF
  • input.border#FFFFFF
  • input.foreground#051018
  • input.placeholderForeground#6C7B87
  • keybindingTable.rowsBackground#CFDAE2
  • list.activeSelectionBackground#D9E7F0
  • list.activeSelectionForeground#051018
  • list.focusBackground#D9E7F0
  • list.highlightForeground#006EA6
  • list.hoverBackground#EAF2F8
  • list.hoverForeground#051018
  • list.inactiveSelectionBackground#EAF2F8
  • notificationCenterHeader.background#EDF2F6
  • notifications.background#F7F9FB
  • notifications.border#D9E1E7
  • notifications.foreground#051018
  • notificationsErrorIcon.foreground#BE0D22
  • notificationsInfoIcon.foreground#40AEDD
  • notificationsWarningIcon.foreground#B69F10
  • panel.background#FFFFFF
  • panel.border#D9E1E7
  • panelSectionHeader.background#CFDAE2
  • panelTitle.activeForeground#051018
  • panelTitle.inactiveForeground#6C7B87
  • quickInput.background#FFFFFF
  • quickInput.foreground#0F1F2A
  • quickInput.list.focusBackground#D9E7F0
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#9BB5CBAD
  • scrollbarSlider.background#C3D3DF66
  • scrollbarSlider.hoverBackground#B0C3D788
  • sideBar.background#EDF2F6
  • sideBar.foreground#5B6C78
  • sideBarSectionHeader.background#F7F9FB
  • sideBarSectionHeader.foreground#10212D
  • statusBar.background#EDF2F6
  • statusBar.debuggingBackground#E2EAF0
  • statusBar.foreground#10212D
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.remoteBackground#008DC9
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F7F9FB
  • tab.activeBorderTop#008DC9
  • tab.activeForeground#051018
  • tab.border#00000000
  • tab.editor-group-tab-background#EDF2F6
  • tab.hoverBackground#F7F9FB
  • tab.inactiveBackground#EDF2F6
  • tab.inactiveForeground#6C7B87
  • terminal.ansiBlack#D9E1E7
  • terminal.ansiBlue#008DC9
  • terminal.ansiBrightBlack#A6B4BF
  • terminal.ansiBrightBlue#009FDB
  • terminal.ansiBrightCyan#64C8F2
  • terminal.ansiBrightGreen#57B74F
  • terminal.ansiBrightMagenta#4694CC
  • terminal.ansiBrightRed#E24858
  • terminal.ansiBrightWhite#182938
  • terminal.ansiBrightYellow#D1BC3C
  • terminal.ansiCyan#40AEDD
  • terminal.ansiGreen#3C9B3A
  • terminal.ansiMagenta#2F7AB3
  • terminal.ansiRed#BE0D22
  • terminal.ansiWhite#0B1A24
  • terminal.ansiYellow#B69F10
  • terminal.background#FFFFFF
  • terminal.foreground#0B1A24
  • textLink.foreground#006EA6
  • textLink.hoverForeground#006EA6
  • titleBar.activeBackground#EDF2F6
  • titleBar.activeForeground#051018
  • titleBar.inactiveBackground#EDF2F6
  • titleBar.inactiveForeground#6C7B87
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F7A82italic
punctuation.definition.comment.php, punctuation.section.comment.haml#4F4F4F
punctuation, meta.brace, keyword.operator.accessor#73818B
punctuation.separator.colon.python#0E3F5A
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#616161
keyword.operator#0E3F5A
keyword.operator.assignment#486172
keyword.control, keyword.other.import, keyword.other.export, storage.type.function.arrow.js, storage.type.function.arrow.ts, punctuation.definition.arrow.php#005F86
keyword, keyword.operator.type#0E3F5A
storage, storage.type, storage.modifier, keyword.declaration#008DC9
storage.type.modifier, storage.modifier.access, storage.modifier.visibility, keyword.other.access, keyword.other.access.visibility, keyword.other.access.visibility.java#B0BABE
keyword.operator.new, constant.language.null.ts#768991
variable, variable.other.readwrite#004F70
variable.other.object.js, variable.other.object.js.jsx, variable.other.readwrite.alias#004F70
variable.parameter#2E98C4
variable.other.property, support.variable.property, variable.other.object.property#0070A1
meta.object-literal.key.ts, meta.object-literal.key.js, meta.object.member, support.type.property-name, support.type.property-name.json#0070A1
variable.other.constant, variable.language, variable.language.this, variable.language.super, meta.definition.variable#B51224
constant.numeric, constant.language, constant.character, keyword.other.unit#B51224
string, string.quoted#868E00
string.regexp#B51224
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#6C7478
entity.name.function, meta.function-call, variable.function, support.function#006EA6
entity.name.function.member, meta.method-call, variable.function.js#0087BE
entity.name.type, entity.name.class, support.type, support.class#2F7AB3
storage.type.annotation, meta.type.annotation#2B9FC8
entity.name.type.module, support.other.module, storage.type.namespace#2F7AB3
entity.other.attribute-name, meta.annotation#B51224
support.class.promise.js, support.class.promise.ts#0087BE
text.html.derivative#172630
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#B51224
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#005F86
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#868E00
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#73818B
meta.tag.sgml.doctype, comment.block.html#B0B9C0italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#B51224
entity.other.attribute-name.js, entity.other.attribute-name.tsx#005F86
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B51224
support.type.property-name.css, meta.property-name.css#0070A1
support.constant.property-value.css, meta.property-value.css#B51224
keyword.other.unit.css#97A748
entity.other.attribute-name.id.css#A7B5BA
variable.css, custom-property.name.css#A1B1B8
punctuation.definition.document.begin.yaml#222222
text.html.markdown#172630
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#005F86bold
punctuation.definition.heading.markdown, punctuation.definition.heading.begin.markdown#1F98C9
markup.bold, markup.bold.markdown#B51224bold
punctuation.definition.bold.markdown#7F939C
markup.italic.markdown#B51224italic
punctuation.definition.italic.markdown#7F939C
string.other.link.title.markdown#005F87underline
markup.underline.link, markup.underline.link.image.markdown, markup.link.url.markdown#6E7600
markup.underline.link.markdown#20A0CE
markup.table, markup.table.markdown#A7B5BA
punctuation.definition.table.markdown#5A8597
punctuation.definition.fenced.markdown#222222
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.markdown#007EB6
fenced_code.block.language, constant.other.language-name#7C8A90
markup.inline.raw.string.markdown, markup.raw.inline.markdown, markup.inline.raw.code.markdown, markup.inline.raw.code.mdx#20A0CE
punctuation.definition.raw.markdown#6C7478
markup.inline.raw.string.markdown#48A9CE
markup.quote, markup.quote.markdown#B51224italic
markup.list, markup.list.markdown, markup.list.numbered, markup.list.unnumbered, markup.list.numbered.markdown, markup.list.unnumbered.markdown#172630
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin#73818B
meta.separator.markdown#C6CDD3
comment.block.html.markdown#B0B9C0italic
meta.diff.header.from-file, punctuation.definition.from-file.diff#B51224bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#5B8A1Cbold
meta.diff.range, meta.diff.index#006EA6
markup.inserted.diff, punctuation.definition.inserted.diff#6C931E
markup.deleted.diff#B51224
markup.changed.diff#A18A1A
meta.diff.context, meta.diff#88949E
punctuation.definition.range.diff#006EA6
meta.diff.header, meta.separator.diff#2F7AB3
punctuation.definition.inserted.diff#006EA6
invalid, invalid.deprecated, invalid.illegal#C11124
Neo Sploosh by monoooki - VS Code Theme