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#FFFFFF
  • activityBar.foreground#334155
  • activityBar.inactiveForeground#94A3B8
  • activityBarBadge.background#2563EB
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#475569
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#475569
  • breadcrumb.foreground#64748B
  • breadcrumbPicker.background#F1F5F9
  • button.background#2563EB
  • button.foreground#FFFFFF
  • diffEditor.insertedTextBackground#A5F3FC33
  • dropdown.background#E2E8F0
  • dropdown.border#E2E8F0
  • dropdown.foreground#0F172A
  • editor.background#FFFFFF
  • editor.findMatchBackground#7DD3FC
  • editor.findMatchHighlightBackground#BAE6FD
  • editor.lineHighlightBackground#F1F5F9
  • editor.selectionBackground#CBD5E1
  • editorCursor.foreground#0F172A
  • editorError.foreground#B91C1C
  • editorGroup.border#E2E8F0
  • editorGroup.emptyBackground#E2E8F0
  • editorGroupHeader.tabsBackground#F1F5F9
  • editorHoverWidget.background#F1F5F9
  • editorHoverWidget.border#E2E8F0
  • editorIndentGuide.background#CBD5E1
  • editorLineNumber.foreground#94A3B8
  • editorRuler.foreground#CBD5E1
  • editorSuggestWidget.background#F1F5F9
  • editorSuggestWidget.border#E2E8F0
  • editorSuggestWidget.selectedBackground#E2E8F0
  • editorUnnecessaryCode.opacity#00000082
  • editorWhitespace.foreground#CBD5E1
  • editorWidget.background#F1F5F9
  • gitDecoration.addedResourceForeground#047857
  • gitDecoration.conflictingResourceForeground#DC2626
  • gitDecoration.deletedResourceForeground#B91C1C
  • gitDecoration.ignoredResourceForeground#94A3B8
  • gitDecoration.modifiedResourceForeground#A16207
  • gitDecoration.renamedResourceForeground#047857
  • gitDecoration.stageDeletedResourceForeground#B91C1C
  • gitDecoration.stageModifiedResourceForeground#A16207
  • gitDecoration.submoduleResourceForeground#0284C7
  • gitDecoration.untrackedResourceForeground#047857
  • gitlens.gutterBackgroundColor#F1F5F9
  • gitlens.gutterForegroundColor#64748B
  • gitlens.lineHighlightBackgroundColor#BAE6FD40
  • gitlens.lineHighlightOverviewRulerColor#BAE6FD
  • gitlens.trailingLineForegroundColor#94A3B8
  • input.background#E2E8F0
  • input.foreground#334155
  • input.placeholderForeground#64748B
  • inputOption.activeBackground#BAE6FD
  • inputOption.activeForeground#334155
  • inputOption.hoverBackground#CBD5E1
  • list.activeSelectionBackground#E2E8F0
  • list.activeSelectionForeground#334155
  • list.focusBackground#E2E8F0
  • list.highlightForeground#334155
  • list.hoverBackground#FFFFFF
  • list.inactiveSelectionBackground#E2E8F0
  • list.inactiveSelectionForeground#334155
  • notifications.background#F1F5F9
  • scrollbarSlider.activeBackground#94A3B880
  • scrollbarSlider.background#E2E8F080
  • scrollbarSlider.hoverBackground#CBD5E180
  • sideBar.background#F1F5F9
  • sideBar.foreground#475569
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#475569
  • sideBarTitle.foreground#475569
  • statusBar.background#F1F5F9
  • statusBar.debuggingBackground#F1F5F9
  • statusBar.foreground#64748B
  • statusBar.noFolderBackground#F1F5F9
  • statusBarItem.hoverBackground#E2E8F0
  • tab.activeBackground#E2E8F0
  • tab.border#E2E8F0
  • tab.inactiveBackground#F1F5F9
  • terminal.ansiBlack#E2E8F0
  • terminal.ansiBlue#2563EB
  • terminal.ansiBrightBlack#94A3B8
  • terminal.ansiBrightBlue#2563EB
  • terminal.ansiBrightCyan#0D9488
  • terminal.ansiBrightGreen#059669
  • terminal.ansiBrightMagenta#E879F9
  • terminal.ansiBrightRed#EF4444
  • terminal.ansiBrightWhite#334155
  • terminal.ansiBrightYellow#CA8A04
  • terminal.ansiCyan#0D9488
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#9333EA
  • terminal.ansiRed#DC2626
  • terminal.ansiWhite#334155
  • terminal.ansiYellow#CA8A04
  • terminal.foreground#64748B
  • textLink.foreground#2563EB
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#64748B
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#94A3B8
  • window.activeBorder#2563EB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#94A3B8—
string, string.template#CA8A04—
constant.numeric#9333EA—
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#9333EA—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#64748B—
constant.language#0D9488—
constant.character, constant.other#0D9488—
variable.language#DC2626—
keyword, keyword.operator.logical, keyword.operator.constructor#DC2626—
keyword.operator#DC2626—
storage#DC2626—
storage.type#0D9488—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#0284C7—
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#0284C7—
variable.other, variable.other.property, variable.other.block#334155—
entity.other.inherited-class#059669—
storage.modifier.import, storage.modifier.package#0284C7—
entity.name.function, support.function#059669—
variable.parameter, entity.name.variable.parameter, parameter.variable#F97316italic
entity.name.function-call#64748B—
function.support.builtin, function.support.core#059669—
text.html.derivative, meta.jsx.children#334155—
punctuation.definition.tag.begin, punctuation.definition.tag.end, keyword.operator.assignment#64748B—
entity.name.tag, entity.name.tag.class.js#DC2626—
entity.name.tag.class, entity.name.tag.id#0D9488—
entity.other.attribute-name#059669—
support.constant#0D9488—
support.type, support.variable#0D9488—
support.dictionary.json#0D9488—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#64748B—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#0D9488—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#059669—
variable.css, variable.scss, variable.less, variable.sass#0D9488—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#CA8A04—
unit.css, unit.scss, unit.less, unit.sass#9333EA—
function.css, function.scss, function.less, function.sass#0D9488—
support.other.variable—
invalid#0F172A—
invalid.deprecated#0F172A—
support.type.property-name.json#0D9488—
string.detected-link#0284C7—
meta.diff, meta.diff.header#94A3B8—
markup.deleted#DC2626—
markup.inserted#059669—
markup.changed#CA8A04—
constant.numeric.line-number.find-in-files - match#0D9488A0—
entity.name.filename.find-in-files#CA8A04—
markup.italic, markup.italic.markdown—italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#94A3B8—
punctuation.definition.italic.markdown—italic
markup.underline.link.markdown#0284C7—
markup.bold.markdown—bold
markup.heading.markdown#DC2626bold
markup.quote.markdown#059669—
meta.separator.markdown#9333EAbold
markup.raw.inline.markdown, markup.raw.block.markdown#0D9488—
punctuation.definition.list_item.markdown#0F172Abold
meta.objectliteral#334155—