Skip to main content
Coding Theme

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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#0078D4
  • activityBar.background#181818
  • activityBar.border#2B2B2B
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078D4
  • activityBarBadge.foreground#FFFFFF
  • agentsCard.border#00000000
  • agentsChatInput.border#303031
  • agentsChatInput.focusBorder#007ACC
  • agentsNewSessionButton.border#303031
  • agentsPanel.border#303031
  • badge.background#616161
  • badge.foreground#F8F8F8
  • button.background#0078D4
  • button.border#ffffff1a
  • button.foreground#FFFFFF
  • button.hoverBackground#026EC1
  • button.secondaryBackground#00000000
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#2B2B2B
  • chat.editedFileForeground#E2C08D
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#85B6FF
  • checkbox.background#313131
  • checkbox.border#3C3C3C
  • debugToolBar.background#181818
  • descriptionForeground#9D9D9D
  • dropdown.background#313131
  • dropdown.border#3C3C3C
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#1F1F1F
  • editor.background#1F1F1F
  • editor.findMatchBackground#9E6A03
  • editor.foreground#abb2bf
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#0078D4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#6E7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#F85149
  • focusBorder#0078D4
  • foreground#CCCCCC
  • icon.foreground#CCCCCC
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CCCCCC
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489DB82
  • inputOption.activeBorder#2488DB
  • keybindingLabel.foreground#CCCCCC
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • menu.background#1F1F1F
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • modernActivityBar.activeBackground#FFFFFF22
  • modernActivityBar.background#00000000
  • modernActivityBar.hoverBackground#FFFFFF11
  • notificationCenterHeader.background#1F1F1F
  • notificationCenterHeader.foreground#CCCCCC
  • notifications.background#1F1F1F
  • notifications.border#2B2B2B
  • notifications.foreground#CCCCCC
  • panel.background#181818
  • panel.border#2B2B2B
  • panelInput.border#2B2B2B
  • panelTitle.activeBorder#0078D4
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9D9D9D
  • peekViewEditor.background#1F1F1F
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#1F1F1F
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078D4
  • quickInput.background#222222
  • quickInput.foreground#CCCCCC
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#181818
  • sideBar.border#2B2B2B
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2B2B2B
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#181818
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#0078D4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#0078D4
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.focusBorder#0078D4
  • statusBarItem.hoverBackground#F1F1F133
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#0078D4
  • statusBarItem.remoteForeground#FFFFFF
  • surface.border#252526
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#1F1F1F
  • tab.activeBorderTop#0078D4
  • tab.activeForeground#FFFFFF
  • tab.border#2B2B2B
  • tab.hoverBackground#1F1F1F
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9D9D9D
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#37373D
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#FFFFFF
  • tab.unfocusedActiveBorder#1F1F1F
  • tab.unfocusedActiveBorderTop#2B2B2B
  • tab.unfocusedHoverBackground#1F1F1F
  • terminal.foreground#CCCCCC
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.tab.activeBorder#0078D4
  • textBlockQuote.background#2B2B2B
  • textBlockQuote.border#616161
  • textCodeBlock.background#2B2B2B
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#2B2B2B
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#9D9D9D
  • welcomePage.progress.foreground#0078D4
  • welcomePage.tileBackground#2B2B2B
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#abb2bf
comment, punctuation.definition.comment#5c6370
string#98c379
constant.character.escape, constant.character.escape.*#56b6c2
constant.numeric#d19a66
constant.language#d19a66
variable.other.constant#d19a66
constant.other.caps.python#abb2bf
keyword, storage.type, storage.modifier#c678dd
keyword.operator#abb2bf
entity.name.function, support.function, variable.function, meta.function-call.generic.python#61afef
entity.name.type, entity.name.class, entity.other.inherited-class#e5c07b
entity.name.type.interface#e5c07b
variable.parameter#d19a66
variable.other.property, variable.other.member, variable.other.field#e06c75
variable.other.global#e06c75
variable.other.readwrite, variable.other#abb2bf
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator#e5c07b
entity.name.tag#e06c75
entity.other.attribute-name#d19a66
constant.character.entity#e06c75
entity.name.label#c678dd
punctuation#abb2bf
comment.block.documentation storage.type.class, comment.block.documentation entity.name.tag, comment.line.documentation entity.name.tag#c678dd
keyword.control.python, keyword.other.python, storage.type.function.python, storage.modifier.python#c678dd
support.function.builtin.python, support.type.python, support.constant.python#56b6c2
meta.function.parameters.python support.type.python, meta.function.return-type.python support.type.python, meta.function.result-type.python support.type.python, meta.type.annotation.python support.type.python, meta.type.annotation.python entity.name.type, meta.function.parameters.python entity.name.type, meta.function.return-type.python entity.name.type, meta.function.result-type.python entity.name.type, meta.function.result-type.python support.class.python, meta.function.return-type.python support.class.python, meta.function.result-type.python variable.other.readwrite.python, meta.function.return-type.python variable.other.readwrite.python, meta.function.result-type.python meta.indexed-name.python variable.other.readwrite.python, meta.function.return-type.python meta.indexed-name.python variable.other.readwrite.python, meta.function.result-type.python meta.member.access.python meta.attribute.python, meta.function.return-type.python meta.member.access.python meta.attribute.python, meta.function.result-type.python meta.member.access.python variable.other.member.python, meta.function.return-type.python meta.member.access.python variable.other.member.python, meta.function.parameters.python variable.other.readwrite.python, meta.function.parameters.python meta.indexed-name.python variable.other.readwrite.python, meta.function.parameters.python meta.member.access.python meta.attribute.python, meta.function.parameters.python meta.member.access.python variable.other.member.python#e5c07b
meta.function.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#e5c07b
variable.parameter.function-call.python, variable.parameter.keyword.python#d19a66
variable.language.special.self.python, variable.parameter.function.language.special.self.python#c678dd
support.function.magic.python entity.name.function, entity.name.function.magic.python#61afef
entity.name.namespace.js, entity.name.namespace.ts, entity.name.namespace.tsx, entity.name.namespace.jsx, support.module.node, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts#e5c07b
variable.other.global.js, variable.other.global.ts, variable.other.global.jsx, variable.other.global.tsx#e06c75
string.regexp.js, string.regexp.ts, string.regexp.jsx, string.regexp.tsx#56b6c2
entity.name.type.parameter.ts, entity.name.type.parameter.tsx#e5c07b
variable.other.property.js, variable.other.property.ts, variable.other.property.jsx, variable.other.property.tsx#e06c75
support.type.property-name.json, support.type.property-name.json.comments, string.json support.type.property-name.json#e06c75
constant.language.json, constant.language.json.comments#d19a66
entity.name.tag.html, entity.name.tag.xml#e06c75
entity.other.attribute-name.html, entity.other.attribute-name.xml#d19a66
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#98c379
constant.character.entity.html, constant.character.entity.xml#e06c75
entity.name.namespace.xml, entity.other.attribute-name.namespace.xml#d19a66
meta.tag.preprocessor.xml#abb2bf
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#e06c75
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less#d39a63
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less#61afef
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.scss#56b6c2
support.function.misc.css, support.function.misc.scss, support.function.misc.less, entity.name.function.css#61afef
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less, constant.other.color.rgb-value.hex.css#d19a66
constant.other.color.css, constant.other.color.rgb-value.css, constant.other.color.scss, constant.other.color.less#56b6c2
keyword.other.important.css, keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.less#c678dd
meta.function.url.css string.quoted, meta.function.url.scss string.quoted, meta.function.url.less string.quoted#d19a66
variable.scss, variable.other.less#e06c75
entity.name.function.scss, entity.name.function.mixin.scss#d19a66
entity.name.tag.yaml, meta.mapping.key.yaml string.unquoted.plain.out.yaml, meta.mapping.key.yaml string.unquoted.plain.in.yaml#e06c75
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#98c379
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#e5c07b
support.function.builtin.shell, entity.name.function.shell, meta.function-call.shell variable.function#61afef
string.unquoted.heredoc.shell, string.quoted.heredoc.shell#98c379
punctuation.definition.heredoc.shell, keyword.control.heredoc-token.shell#c678dd
comment.line.shebang, comment.line.shebang.shell#5c6370bold
keyword.control.go, keyword.package.go, keyword.import.go, storage.type.go, storage.modifier.go#c678dd
entity.name.function.go, support.function.go#61afef
variable.parameter.go#d19a66
entity.name.type.go#e5c07b
support.type.go#e5c07b
constant.language.go#d19a66
entity.name.function.rust, meta.function.call.rust entity.name.function, support.function.rust#61afef
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#61afef
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust#56b6c2
support.type.primitive.rust, entity.name.type.rust#e5c07b
entity.name.type.type-parameter.rust#e5c07b
variable.parameter.rust#d19a66
variable.language.self.rust, variable.parameter.self.rust#c678dd
entity.name.type.variant.rust, constant.other.enum.rust#d19a66
entity.name.type.alias.rust#e5c07bitalic
keyword.control.java, storage.modifier.java, storage.type.java#c678dd
string.quoted.double.java, string.quoted.single.java#98c379
constant.character.escape.java#56b6c2
entity.name.type.annotation.kotlin, meta.annotation.kotlin#e5c07b
constant.other.enum.kotlin, variable.other.enummember.kotlin#d19a66
variable.parameter.function-call.kotlin#d19a66
entity.name.type.parameter.kotlin, entity.name.type.alias.kotlin#e5c07b
keyword.control.c, keyword.control.cpp, storage.type.c, storage.type.cpp, storage.modifier.c, storage.modifier.cpp#c678dd
keyword.control.directive.c, keyword.control.directive.cpp, meta.preprocessor.c keyword, meta.preprocessor.cpp keyword#c678dd
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp, constant.other.preprocessor.c, constant.other.preprocessor.cpp#e06c75
variable.parameter.preprocessor.c, variable.parameter.preprocessor.cpp#d19a66
entity.name.type.c, entity.name.type.cpp, entity.name.class.cpp, entity.name.struct.cpp#e5c07b
variable.other.property.objc, variable.other.member.objc#e06c75
entity.name.function.objc, entity.name.function.method.objc#61afef
comment.line.number-sign.ruby#5c6370
variable.other.constant.ruby, constant.other.symbol.ruby#d19a66
variable.other.readwrite.global.ruby#e06c75
variable.other.readwrite.ruby, variable.parameter.ruby#d19a66
entity.name.function.ruby, support.function.ruby#61afef
string.regexp.ruby, constant.other.symbol.ruby#56b6c2
string.unquoted.heredoc.ruby, string.quoted.heredoc.ruby#98c379
punctuation.definition.string.heredoc.ruby#c678dd
variable.other.php meta.function.parameters.php, variable.parameter.php#d19a66
constant.other.php, support.constant.core.php#d19a66
entity.name.type.alias.php, support.class.php#e5c07b
keyword.operator.heredoc.php, punctuation.definition.string.begin.php#c678dd
variable.parameter.function-call.swift, variable.parameter.label.swift#56b6c2
meta.attribute.swift variable.parameter#d19a66
comment.line.shebang.swift#5c6370bold
constant.other.enum.dart, variable.other.enummember.dart#d19a66
entity.name.function.dart, entity.name.function.getter.dart, entity.name.function.setter.dart#61afef
markup.heading, punctuation.definition.heading.markdown#56b6c2
markup.inline.raw.string.markdown, markup.raw.inline.markdown#98c379
punctuation.definition.raw.markdown#98c379
string.other.link.title.markdown#98c379
punctuation.separator.table.markdown#5c6370
markup.bold.markdownbold
markup.italic.markdownitalic
constant.character.character-class.regexp, constant.character.escape.regexp#56b6c2
punctuation.definition.quantifier.regexp, punctuation.definition.character-class.regexp#d19a66
keyword.operator.quantifier.regexp, keyword.operator.or.regexp#c678dd
meta.key-value.key.properties, support.type.property-name.properties#d19a66
entity.name.tag.django, keyword.control.django#c678dd
support.function.filter.django#56b6c2
constant.keyword.clojure#df6a73
constant.numeric.clojure#d19a66
string.quoted.clojure#98c379
entity.name.tag.pug, entity.name.tag.jade#e06c75
entity.other.attribute-name.class.pug, entity.other.attribute-name.class.jade#d19a66
entity.other.attribute-name.id.pug, entity.other.attribute-name.id.jade#61afef
keyword.control.blade, entity.name.function.blade#c678dd
meta.function-call.generic.python, meta.function-call.generic.python support.type.python, meta.function-call.generic.python support.class.python, meta.function-call.generic.python entity.name.type, meta.function-call.generic.python entity.name.type.class.python, meta.function-call.python support.type.python, meta.function-call.python support.class.python, meta.function-call.python entity.name.type, meta.function-call.python entity.name.type.class.python#61afef
string.quoted.python, string.quoted.single.python, string.quoted.double.python, string.quoted.multi.python, string.quoted.docstring.python, string.quoted.docstring.single.python, string.quoted.docstring.multi.python, string.quoted.docstring.raw.single.python, string.quoted.docstring.raw.multi.python, string.interpolated.python#98c379
storage.type.string.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python#98c379
constant.character.escape.python, constant.character.escape.unicode.python, constant.character.format.placeholder.other.python#56b6c2
string.regexp.python, meta.regexp.python#56b6c2
constant.character.character-class.regexp, constant.character.escape.regexp, constant.character.character-class.regexp.python, constant.character.escape.regexp.python#56b6c2
punctuation.definition.quantifier.regexp, punctuation.definition.character-class.regexp, punctuation.definition.quantifier.regexp.python, punctuation.definition.character-class.regexp.python#d19a66
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp.python, keyword.operator.or.regexp.python#c678dd
storage.type.ts, storage.type.function.ts, storage.type.class.ts, storage.type.interface.ts, storage.type.enum.ts, storage.type.namespace.ts, storage.type.type.ts, storage.type.property.ts, storage.modifier.ts, storage.modifier.async.ts, storage.type.internaldeclaration.ts, storage.type.tsx, storage.type.function.tsx, storage.type.class.tsx, storage.type.interface.tsx, storage.type.enum.tsx, storage.type.namespace.tsx, storage.type.type.tsx, storage.type.property.tsx, storage.modifier.tsx, storage.modifier.async.tsx, storage.type.internaldeclaration.tsx#c678dd
storage.type.function.arrow.ts, storage.type.function.arrow.tsx#abb2bf
storage.type.numeric.bigint.ts, storage.type.numeric.bigint.tsx#d19a66
entity.name.type.alias.ts, entity.name.type.class.ts, entity.name.type.interface.ts, entity.name.type.enum.ts, entity.name.type.module.ts, entity.name.type.parameter.ts, entity.name.namespace.ts, entity.name.type.alias.tsx, entity.name.type.class.tsx, entity.name.type.interface.tsx, entity.name.type.enum.tsx, entity.name.type.module.tsx, entity.name.type.parameter.tsx, entity.name.namespace.tsx#e5c07b
support.class.ts, support.class.promise.ts, support.class.tsx, support.class.promise.tsx, support.class.js, support.class.promise.js, support.class.jsx, support.class.promise.jsx#e5c07b
support.constant.ts, support.constant.tsx, support.constant.js, support.constant.jsx#d19a66
support.variable.property.ts, support.variable.property.importmeta.ts, support.variable.property.target.ts, support.variable.property.tsx, support.variable.property.importmeta.tsx, support.variable.property.target.tsx, support.variable.property.js, support.variable.property.importmeta.js, support.variable.property.target.js, support.variable.property.jsx, support.variable.property.importmeta.jsx, support.variable.property.target.jsx#e06c75
support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx, support.type.primitive.js, support.type.builtin.js, support.type.primitive.jsx, support.type.builtin.jsx#c678dd
support.type.object.module.ts, support.type.object.module.tsx, support.type.object.module.js, support.type.object.module.jsx#abb2bf
string.quoted.docstring.multi.python, string.quoted.docstring.raw.multi.python, string.quoted.docstring.single.python, string.quoted.docstring.raw.single.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python, string.quoted.docstring.raw.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.raw.multi.python punctuation.definition.string.end.python, string.quoted.docstring.raw.multi.python storage.type.string.python, string.quoted.docstring.raw.single.python storage.type.string.python#5c6370
string.quoted.docstring.python entity.name.tag, string.quoted.docstring.multi.python entity.name.tag, string.quoted.docstring.python keyword.other.documentation, string.quoted.docstring.multi.python keyword.other.documentation#c678dd
entity.name.function.sql#abb2bf
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx#c678dd
support.variable.magic.python#abb2bf
constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.null.ts, constant.language.boolean.true.tsx, constant.language.boolean.false.tsx, constant.language.null.tsx, constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.null.js, constant.language.boolean.true.jsx, constant.language.boolean.false.jsx, constant.language.null.jsx#c678dd
constant.language.python#c678dd
meta.member.access.python variable.other.property, meta.member.access.python variable.other.property.python, meta.member.access.python variable.other.member, meta.member.access.python variable.other.member.python, meta.member.access.python variable.other.field, meta.member.access.python variable.other.field.python, meta.attribute.python variable.other.property, meta.attribute.python variable.other.property.python, meta.attribute.python variable.other.member, meta.attribute.python variable.other.member.python#abb2bf
meta.function.call.generic.python entity.name.type.class, meta.function.call.generic.python entity.name.type.class.python, meta.function-call.generic.python entity.name.type.class, meta.function-call.generic.python entity.name.type.class.python, meta.function.call.python entity.name.type.class, meta.function.call.python entity.name.type.class.python, meta.function-call.python entity.name.type.class, meta.function-call.python entity.name.type.class.python#61afef
support.function.python, support.function.builtin.python, support.type.python, support.class.python, support.constant.python#56b6c2
meta.function-call.generic.python support.type.exception.python, meta.function-call.python support.type.exception.python#61afef