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#eaedf0
  • activityBarBadge.background#4b6b7d
  • breadcrumb.activeSelectionForeground#2a2f37
  • breadcrumb.background#f3f4f6
  • breadcrumb.focusForeground#2a2f37
  • breadcrumb.foreground#5b6472
  • breadcrumbPicker.background#eceff3e6
  • diffEditor.insertedTextBackground#4b7d5355
  • diffEditor.removedTextBackground#b03e3455
  • dropdown.background#eceff3e6
  • dropdown.border#d9dee5
  • editor.background#f3f4f6
  • editor.findMatchBackground#4b6b7d55
  • editor.findMatchBorder#4b6b7d
  • editor.findMatchHighlightBackground#4b6b7d30
  • editor.findRangeHighlightBackground#00000010
  • editor.foldBackground#00000008
  • editor.foreground#2a2f37
  • editor.hoverHighlightBackground#4b6b7d22
  • editor.lineHighlightBackground#e6e8ec
  • editor.linkedEditingBackground#4b6b7d15
  • editor.selectionBackground#ccd3dd
  • editor.selectionForeground#000000
  • editor.selectionHighlightBackground#ccd3dd66
  • editor.wordHighlightBackground#00000014
  • editor.wordHighlightStrongBackground#00000022
  • editorBracketHighlight.foreground1#2f6d86
  • editorBracketHighlight.foreground2#4b7d53
  • editorBracketHighlight.foreground3#8b6f2e
  • editorBracketHighlight.foreground4#7a4f7f
  • editorBracketHighlight.foreground5#3f5f8f
  • editorBracketHighlight.foreground6#b03e34
  • editorBracketPairGuide.activeBackground1#2f6d8640
  • editorBracketPairGuide.activeBackground2#4b7d5340
  • editorBracketPairGuide.activeBackground3#8b6f2e40
  • editorBracketPairGuide.activeBackground4#7a4f7f40
  • editorBracketPairGuide.activeBackground5#3f5f8f40
  • editorBracketPairGuide.activeBackground6#b03e3440
  • editorBracketPairGuide.background1#2f6d8618
  • editorBracketPairGuide.background2#4b7d5318
  • editorBracketPairGuide.background3#8b6f2e18
  • editorBracketPairGuide.background4#7a4f7f18
  • editorBracketPairGuide.background5#3f5f8f18
  • editorBracketPairGuide.background6#b03e3418
  • editorGroupHeader.tabsBackground#f0f2f5
  • editorGutter.addedBackground#4b7d53
  • editorGutter.deletedBackground#b03e34
  • editorGutter.modifiedBackground#8b6f2e
  • editorInlayHint.background#00000010
  • editorInlayHint.foreground#4a5160
  • editorInlayHint.parameterBackground#00000010
  • editorInlayHint.parameterForeground#495364
  • editorInlayHint.typeBackground#00000010
  • editorInlayHint.typeForeground#4a5160
  • editorLineNumber.activeForeground#8b6f2e
  • editorLineNumber.foreground#8f98a3
  • editorRuler.foreground#c9cfd6
  • editorStickyScroll.background#f3f4f6
  • editorStickyScroll.border#d9dee5
  • editorStickyScrollHover.background#eaedf1
  • editorSuggestWidget.background#e9ebefe6
  • editorSuggestWidget.border#d9dee5
  • editorSuggestWidget.foreground#2a2f37
  • editorSuggestWidget.highlightForeground#4b6b7d
  • editorSuggestWidget.selectedBackground#e6eaee
  • editorSuggestWidget.selectedForeground#2a2f37
  • editorWhitespace.foreground#9aa3ad
  • editorWidget.background#eaedf1dd
  • editorWidget.border#4b6b7d
  • focusBorder#4b6b7d
  • gitDecoration.conflictingResourceForeground#7a4f7f
  • gitDecoration.deletedResourceForeground#b03e34
  • gitDecoration.ignoredResourceForeground#9aa3ad
  • gitDecoration.modifiedResourceForeground#8b6f2e
  • gitDecoration.untrackedResourceForeground#4b7d53
  • input.border#4b6b7d
  • list.activeSelectionBackground#d4dce4
  • list.activeSelectionForeground#2a2f37
  • list.focusBackground#c0ccd5
  • list.focusForeground#2a2f37
  • list.focusOutline#4b6b7d
  • list.highlightForeground#4b6b7d
  • list.hoverBackground#e9edf1
  • list.inactiveSelectionForeground#2a2f37
  • menu.background#eceff3e6
  • menu.selectionBackground#e6eaee
  • minimap.background#eef1f5
  • minimap.findMatchHighlight#8b6f2edd
  • minimap.selectionHighlight#4b6b7d55
  • minimapGutter.addedBackground#4b7d53
  • minimapGutter.deletedBackground#b03e34
  • minimapGutter.modifiedBackground#8b6f2e
  • notificationCenter.border#d9dee5
  • notificationLink.foreground#4b6b7d
  • notifications.background#eceff3e6
  • notificationToast.border#d9dee5
  • panel.background#eef2f4
  • panel.border#d9dee5
  • peekView.border#4b6b7d
  • peekViewEditor.background#e9edf2f0
  • peekViewEditor.matchHighlightBackground#4b6b7d30
  • peekViewResult.background#eceff3
  • peekViewResult.matchHighlightBackground#4b6b7d30
  • peekViewResult.selectionBackground#dfe5ea
  • peekViewTitle.background#eef1f5e6
  • peekViewTitleDescription.foreground#4e5865
  • peekViewTitleLabel.foreground#2a2f37
  • pickerGroup.foreground#4b6b7d
  • progressBar.background#4b6b7d
  • quickInput.background#eceff3e6
  • quickInputList.focusBackground#e6eaee
  • scrollbar.shadow#cfd5dc30
  • scrollbarSlider.activeBackground#4b6b7d
  • selection.background#4b6b7d44
  • sideBar.background#ebeef1
  • sideBar.border#d9dee5
  • sideBarSectionHeader.background#eef0f3
  • sideBarTitle.foreground#2a2f37
  • statusBar.background#e9ebef
  • statusBar.border#d9dee5
  • statusBar.debuggingBackground#4b6b7d
  • statusBar.debuggingForeground#2a2f37
  • statusBar.foreground#2a2f37
  • statusBar.noFolderBackground#e9ebef
  • statusBar.noFolderForeground#2a2f37
  • tab.activeBorder#4b6b7d
  • tab.activeModifiedBorder#8b6f2e
  • tab.hoverBackground#f3f4f6
  • tab.inactiveBackground#edf1f5
  • tab.inactiveForeground#5b6472
  • tab.inactiveModifiedBorder#8b6f2e88
  • tab.unfocusedActiveBorder#59788a
  • terminal.ansiBlack#4a4a4a
  • terminal.ansiBlue#2f6d86
  • terminal.ansiBrightBlack#9b9fa5
  • terminal.ansiBrightBlue#6391a4
  • terminal.ansiBrightCyan#6f87ab
  • terminal.ansiBrightGreen#789e7e
  • terminal.ansiBrightMagenta#9b7b9f
  • terminal.ansiBrightRed#c36e67
  • terminal.ansiBrightWhite#5f6369
  • terminal.ansiBrightYellow#a89362
  • terminal.ansiCyan#3f5f8f
  • terminal.ansiGreen#4b7d53
  • terminal.ansiMagenta#7a4f7f
  • terminal.ansiRed#b03e34
  • terminal.ansiWhite#2a2f37
  • terminal.ansiYellow#8b6f2e
  • terminal.background#eaedf1
  • terminal.foreground#2a2f37
  • terminal.selectionBackground#4b6b7d80
  • terminalCursor.background#2a2f37
  • terminalCursor.foreground#2a2f37
  • textLink.foreground#4b6b7d
  • titleBar.activeBackground#e9ebef
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6f7aitalic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator#7a4f7f
string, string.quoted, string.template#4b7d53
constant.numeric, constant.character, constant.language, support.constant#7a5f22
string.regexp, constant.character.escape#3f5f8f
invalid, invalid.illegal#b03e34
punctuation, meta.brace, meta.bracket, meta.delimiter, keyword.other.template, keyword.other.substitution#2a2f37
entity.name.function, entity.name.method, meta.function-call, support.function#2f6d86bold
variable, variable.other.readwrite, string constant.other.placeholder#2a2f37
variable.parameter, meta.parameter#556c82
entity.name.type, entity.name.class, support.type, support.class, support.type.sys-types#8b6f2ebold
entity.name.type.interface, support.type.interface#556c82
entity.name.type.enum, variable.other.enummember, constant.other.enummember#a08f52
variable.other.property, variable.other.object.property, support.variable.property, meta.property.object, meta.object-literal.key, meta.member#3f5f8f
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.decorator, meta.attribute, entity.name.attribute, entity.name.function.decorator, variable.function.decorator#2f6d86italic
variable.language, variable.language.this, variable.language.super, variable.language.self, constant.language.null, constant.language.undefined#b03e34italic
source.ts entity.name.function, source.tsx entity.name.function, source.js entity.name.function, source.jsx entity.name.function, source.ts entity.name.method, source.tsx entity.name.method, source.js entity.name.method, source.jsx entity.name.method#2f6d86
source.ts variable.parameter, source.tsx variable.parameter, source.js variable.parameter, source.jsx variable.parameter#556c82
source.ts variable.other.property, source.ts meta.object-literal.key, source.js variable.other.property, source.js meta.object-literal.key, support.variable.property.js, support.variable.property.ts#3f5f8f
source.ts entity.name.type, source.ts entity.name.class, source.tsx entity.name.type, source.tsx entity.name.class, source.ts entity.name.type.interface, source.tsx entity.name.type.interface, source.ts entity.name.type.enum, source.tsx entity.name.type.enum#8b6f2e
source.ts entity.name.type.interface, source.tsx entity.name.type.interface#556c82
source.ts keyword.other.type-alias, source.tsx keyword.other.type-alias#8b6f2eitalic
source.ts meta.type.annotation, source.tsx meta.type.annotation, source.ts storage.type, source.tsx storage.type#8b6f2e
entity.name.tag.tsx, entity.name.tag.jsx, meta.tag.tsx, meta.tag.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#b03e34
source.ts variable.function, source.tsx variable.function, source.js variable.function, source.jsx variable.function#3f6d86
source.ts meta.decorator, source.tsx meta.decorator#2f6d86italic
source.python entity.name.function, source.python meta.function-call, source.python support.function#2f6d86
source.python variable.parameter.function, source.python variable.parameter#556c82
source.python entity.name.class, source.python support.type, source.python support.class#8b6f2e
source.python support.function.builtin, source.python support.type.builtin, constant.language.python#7a5f22
source.python variable.language.self#b03e34italic
source.cs entity.name.method, source.cs meta.method-call, source.cs support.function#2f6d86
source.cs variable.parameter, source.cs meta.parameter#556c82
source.cs variable.parameter.primary-constructor#e9c28a
source.cs entity.name.type, source.cs entity.name.class, source.cs entity.name.struct, source.cs entity.name.interface, source.cs entity.name.enum, source.cs support.type, source.cs support.class#8b6f2e
source.cs entity.name.namespace, source.cs support.namespace#2f6d86
source.cs meta.attribute, source.cs entity.name.attribute#2f6d86italic
source.cs keyword.other.access-modifier#724f7f
source.cs keyword.other.record#824f7f
source.cs keyword.other.async#7a4f7fitalic
source.cs storage.modifier.static#7a4f7fbold
source.cs keyword.other.linq#7a4f7funderline
source.cs keyword.other.pattern#7a4f7fbold
source.cs keyword, source.cs storage.type, source.cs storage.modifier#7a4f7f
source.json support.type.property-name.json#3f6d86
source.json string.quoted.double.json#4b7d53
entity.name.tag.yaml, meta.mapping.key.yaml#2f6d86
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.yaml#4b7d53
constant.numeric.yaml#9a7f42
constant.language.boolean.yaml#b03e34
entity.name.tag.yaml, variable.other.alias.yaml#7a4f7f
comment.line.yaml#6a6f7aitalic
meta.embedded.expression, meta.embedded.expression.yaml, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin.yaml, punctuation.section.embedded.end.yaml#3f5f8f
variable.other.template.yaml, meta.template.expression.yaml, entity.name.function.template.yaml, support.function.template.yaml#2f6d86
markup.heading, markdown.heading, markup.heading.markdown punctuation.definition.heading.markdown#4b7d53
string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown#4b6b7d
source.dockerfile entity.name.instruction, source.dockerfile keyword.other, source.dockerfile keyword.control#8b6f2ebold
source.dockerfile variable.parameter, source.dockerfile variable.other#3f5f8f
source.dockerfile comment, source.dockerfile punctuation.definition.comment#6a6f7aitalic
meta.mapping.key.yaml, entity.name.tag.yaml, support.type.property-name.yaml#2f6d86
meta.preprocessor.cs, keyword.control.directive.cs, punctuation.definition.preprocessor.cs#6a6f7aitalic
keyword.other.export, storage.modifier.export#7a4f7fbold
variable.other.property.readonly, meta.property.readonly, storage.modifier.readonly#7a5f22