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#2b2f33
  • activityBarBadge.background#9a8f7a
  • breadcrumb.activeSelectionForeground#e3e0dc
  • breadcrumb.background#2f3336
  • breadcrumb.focusForeground#e3e0dc
  • breadcrumb.foreground#c1bbb2
  • breadcrumbPicker.background#2c3033e6
  • diffEditor.insertedTextBackground#95ad6355
  • diffEditor.removedTextBackground#ce6f6555
  • dropdown.background#2c3033e6
  • dropdown.border#3a3e42
  • editor.background#2f3336
  • editor.findMatchBackground#9a8f7a55
  • editor.findMatchBorder#9a8f7a
  • editor.findMatchHighlightBackground#9a8f7a30
  • editor.findRangeHighlightBackground#ffffff10
  • editor.foldBackground#ffffff08
  • editor.foreground#e3e0dc
  • editor.hoverHighlightBackground#9a8f7a22
  • editor.lineHighlightBackground#3c4146
  • editor.linkedEditingBackground#9a8f7a15
  • editor.selectionBackground#6a6472
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#6a647255
  • editor.wordHighlightBackground#ffffff1a
  • editor.wordHighlightStrongBackground#ffffff30
  • editorBracketHighlight.foreground1#8fa0a0
  • editorBracketHighlight.foreground2#95ad63
  • editorBracketHighlight.foreground3#d6b56f
  • editorBracketHighlight.foreground4#a6789f
  • editorBracketHighlight.foreground5#c7d4e2
  • editorBracketHighlight.foreground6#ce6f65
  • editorBracketPairGuide.activeBackground1#8fa0a040
  • editorBracketPairGuide.activeBackground2#95ad6340
  • editorBracketPairGuide.activeBackground3#d6b56f40
  • editorBracketPairGuide.activeBackground4#a6789f40
  • editorBracketPairGuide.activeBackground5#c7d4e240
  • editorBracketPairGuide.activeBackground6#ce6f6540
  • editorBracketPairGuide.background1#8fa0a020
  • editorBracketPairGuide.background2#95ad6320
  • editorBracketPairGuide.background3#d6b56f20
  • editorBracketPairGuide.background4#a6789f20
  • editorBracketPairGuide.background5#c7d4e220
  • editorBracketPairGuide.background6#ce6f6520
  • editorGroupHeader.tabsBackground#2b2f32
  • editorGutter.addedBackground#95ad63
  • editorGutter.deletedBackground#ce6f65
  • editorGutter.modifiedBackground#d6b56f
  • editorInlayHint.background#00000033
  • editorInlayHint.foreground#e7e1d8
  • editorInlayHint.parameterBackground#00000033
  • editorInlayHint.parameterForeground#f0eae1
  • editorInlayHint.typeBackground#00000033
  • editorInlayHint.typeForeground#e7e1d8
  • editorLineNumber.activeForeground#d6b56f
  • editorLineNumber.foreground#a19a91
  • editorRuler.foreground#878078
  • editorStickyScroll.background#2f3336
  • editorStickyScroll.border#3a3e42
  • editorStickyScrollHover.background#33373b
  • editorSuggestWidget.background#2a2e31e6
  • editorSuggestWidget.border#3a3e42
  • editorSuggestWidget.foreground#e3e0dc
  • editorSuggestWidget.highlightForeground#9a8f7a
  • editorSuggestWidget.selectedBackground#33373b
  • editorSuggestWidget.selectedForeground#ffffff
  • editorWhitespace.foreground#908a82
  • editorWidget.background#33373bdd
  • editorWidget.border#9a8f7a
  • focusBorder#9a8f7a
  • gitDecoration.conflictingResourceForeground#a6789f
  • gitDecoration.deletedResourceForeground#ce6f65
  • gitDecoration.ignoredResourceForeground#908a82
  • gitDecoration.modifiedResourceForeground#d6b56f
  • gitDecoration.untrackedResourceForeground#95ad63
  • input.border#9a8f7a
  • list.activeSelectionBackground#33373b
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#9a8f7a
  • list.focusForeground#ffffff
  • list.focusOutline#d6b56f
  • list.highlightForeground#cfa776
  • list.hoverBackground#33373b
  • list.inactiveSelectionForeground#e3e0dc
  • menu.background#2c3033e6
  • menu.selectionBackground#33373b
  • minimap.background#2a2e32
  • minimap.findMatchHighlight#d6b56faa
  • minimap.selectionHighlight#9a8f7a80
  • minimapGutter.addedBackground#95ad63
  • minimapGutter.deletedBackground#ce6f65
  • minimapGutter.modifiedBackground#d6b56f
  • notificationCenter.border#3a3e42
  • notificationLink.foreground#cfa776
  • notifications.background#2c3033e6
  • notificationToast.border#3a3e42
  • panel.background#2c3033
  • panel.border#3a3e42
  • peekView.border#9a8f7a
  • peekViewEditor.background#30353af0
  • peekViewEditor.matchHighlightBackground#9a8f7a30
  • peekViewResult.background#2c3033
  • peekViewResult.matchHighlightBackground#9a8f7a30
  • peekViewResult.selectionBackground#33373b
  • peekViewTitle.background#2d3135e6
  • peekViewTitleDescription.foreground#b9b2a7
  • peekViewTitleLabel.foreground#e3e0dc
  • pickerGroup.foreground#cfa776
  • progressBar.background#d6b56f
  • quickInput.background#2c3033e6
  • quickInputList.focusBackground#33373b
  • scrollbar.shadow#3b404540
  • scrollbarSlider.activeBackground#9a8f7a
  • selection.background#9a8f7a33
  • sideBar.background#2b2f33
  • sideBar.border#3a3e42
  • sideBarSectionHeader.background#34393d
  • sideBarTitle.foreground#e3e0dc
  • statusBar.background#2a2e31
  • statusBar.border#3a3e42
  • statusBar.debuggingBackground#9a8f7a
  • statusBar.debuggingForeground#2a2e31
  • statusBar.noFolderBackground#2a2e31
  • statusBar.noFolderForeground#ffffff
  • tab.activeBorder#9a8f7a
  • tab.activeModifiedBorder#d6b56f
  • tab.hoverBackground#2f3336
  • tab.inactiveBackground#293034
  • tab.inactiveForeground#c1bbb2
  • tab.inactiveModifiedBorder#d6b56f88
  • tab.unfocusedActiveBorder#7a7160
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#8fa0a0
  • terminal.ansiBrightBlack#908a82
  • terminal.ansiBrightBlue#8fa0a0
  • terminal.ansiBrightCyan#c7d4e2
  • terminal.ansiBrightGreen#95ad63
  • terminal.ansiBrightMagenta#a6789f
  • terminal.ansiBrightRed#ce6f65
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d6b56f
  • terminal.ansiCyan#c7d4e2
  • terminal.ansiGreen#95ad63
  • terminal.ansiMagenta#a6789f
  • terminal.ansiRed#ce6f65
  • terminal.ansiWhite#e3e0dc
  • terminal.ansiYellow#d6b56f
  • terminal.background#33373b
  • terminal.foreground#e3e0dc
  • terminal.selectionBackground#9a8f7aa0
  • terminalCursor.background#e3e0dc
  • terminalCursor.foreground#e3e0dc
  • textLink.foreground#cfa776
  • titleBar.activeBackground#2a2e31
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#908a82italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator#c48573
string, string.quoted, string.template#95ad63
constant.numeric, constant.character, constant.language, support.constant#a08550
string.regexp, constant.character.escape#c7d4e2
invalid, invalid.illegal#ce6f65
punctuation, meta.brace, meta.bracket, meta.delimiter, keyword.other.template, keyword.other.substitution#e3e0dc
entity.name.function, entity.name.method, meta.function-call, support.function#e0a46abold
variable, variable.other.readwrite, string constant.other.placeholder#e3e0dc
variable.parameter, meta.parameter#c2cdda
entity.name.type, entity.name.class, support.type, support.class, support.type.sys-types#d6b56fbold
entity.name.type.interface, support.type.interface#c2cdda
entity.name.type.enum, variable.other.enummember, constant.other.enummember#e8b860
variable.other.property, variable.other.object.property, support.variable.property, meta.property.object, meta.object-literal.key, meta.member#c7d4e2
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#d6b56fitalic
variable.language, variable.language.this, variable.language.super, variable.language.self, constant.language.null, constant.language.undefined#ce6f65italic
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#e0a46a
source.ts variable.parameter, source.tsx variable.parameter, source.js variable.parameter, source.jsx variable.parameter#c2cdda
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#c7d4e2
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#d6b56f
source.ts entity.name.type.interface, source.tsx entity.name.type.interface#c2cdda
source.ts keyword.other.type-alias, source.tsx keyword.other.type-alias#d6b56fitalic
source.ts meta.type.annotation, source.tsx meta.type.annotation, source.ts storage.type, source.tsx storage.type#d6b56f
entity.name.tag.tsx, entity.name.tag.jsx, meta.tag.tsx, meta.tag.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#ce6f65
source.ts variable.function, source.tsx variable.function, source.js variable.function, source.jsx variable.function#e0a46a
source.ts meta.decorator, source.tsx meta.decorator#d6b56fitalic
source.python entity.name.function, source.python meta.function-call, source.python support.function#e0a46a
source.python variable.parameter.function, source.python variable.parameter#c2cdda
source.python entity.name.class, source.python support.type, source.python support.class#d6b56f
source.python support.function.builtin, source.python support.type.builtin, constant.language.python#e2c48f
source.python variable.language.self#ce6f65italic
source.cs entity.name.method, source.cs meta.method-call, source.cs support.function#e0a46a
source.cs variable.parameter, source.cs meta.parameter#c2cdda
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#d6b56f
source.cs entity.name.namespace, source.cs support.namespace#bda980
source.cs meta.attribute, source.cs entity.name.attribute#d6b56fitalic
source.cs keyword.other.access-modifier#c07e6d
source.cs keyword.other.record#c98573
source.cs keyword.other.async#c48573italic
source.cs storage.modifier.static#c48573bold
source.cs keyword.other.linq#c48573underline
source.cs keyword.other.pattern#c48573bold
source.cs keyword, source.cs storage.type, source.cs storage.modifier#c48573
source.json support.type.property-name.json#c7d4e2
source.json string.quoted.double.json#95ad63
entity.name.tag.yaml, meta.mapping.key.yaml#c7d4e2
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.yaml#95ad63
constant.numeric.yaml#e6c491
constant.language.boolean.yaml#ce6f65
entity.name.tag.yaml, variable.other.alias.yaml#c48573
comment.line.yaml#908a82italic
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#c7d4e2
variable.other.template.yaml, meta.template.expression.yaml, entity.name.function.template.yaml, support.function.template.yaml#e0a46a
markup.heading, markdown.heading, markup.heading.markdown punctuation.definition.heading.markdown#95ad63
string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown#cfa776
source.dockerfile entity.name.instruction, source.dockerfile keyword.other, source.dockerfile keyword.control#d6b56fbold
source.dockerfile variable.parameter, source.dockerfile variable.other#c7d4e2
source.dockerfile comment, source.dockerfile punctuation.definition.comment#908a82italic
meta.mapping.key.yaml, entity.name.tag.yaml, support.type.property-name.yaml#c7d4e2
meta.preprocessor.cs, keyword.control.directive.cs, punctuation.definition.preprocessor.cs#908a82italic
keyword.other.export, storage.modifier.export#c48573bold
variable.other.property.readonly, meta.property.readonly, storage.modifier.readonly#e2c48f