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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#0078d4
  • activityBar.background#101010
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • breadcrumbPicker.background#101010
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#222222
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#222222
  • checkbox.border#3c3c3c
  • checkbox.selectBackground#101010
  • debugToolBar.background#101010
  • descriptionForeground#9d9d9d
  • dropdown.background#222222
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#101010
  • editor.background#101010
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editorActionList.background#101010
  • editorBracketHighlight.foreground1#5caeef
  • editorBracketHighlight.foreground2#dfb976
  • editorBracketHighlight.foreground3#c172d9
  • editorBracketHighlight.foreground4#4fb1bc
  • editorBracketHighlight.foreground5#97c26c
  • editorBracketHighlight.foreground6#abb2c0
  • editorBracketHighlight.unexpectedBracket.foreground#db6165
  • editorGroup.border#ffffff17
  • editorGroup.dropIntoPromptBackground#101010
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorHoverWidget.background#101010
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorSuggestWidget.background#101010
  • editorWidget.background#101010
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#222222
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#101010
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#101010
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#101010
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#101010
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#101010
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#101010
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#101010
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#222222
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#101010
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#101010
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#101010
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#101010
  • tab.activeBorder#101010
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#101010
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.selectedBackground#101010
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#101010
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#101010
  • 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#101010
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source, variable.other.readwrite, punctuation.definition.variable#cdd6f4—
punctuation#9399b2
comment, punctuation.definition.comment#6c7086italic
string, punctuation.definition.string#a6e3a1—
constant.character.escape#f5c2e7—
constant.numeric, variable.other.constant, entity.name.constant, constant.language.boolean, constant.language.false, constant.language.true, keyword.other.unit.user-defined, keyword.other.unit.suffix.floating-point#fab387—
keyword, keyword.operator.word, keyword.operator.new, variable.language.super, support.type.primitive, storage.type, storage.modifier, punctuation.definition.keyword#cba6f7
entity.name.tag.documentation#cba6f7—
keyword.operator, punctuation.accessor, punctuation.definition.generic, meta.function.closure punctuation.section.parameters, punctuation.definition.tag, punctuation.separator.key-value#94e2d5—
entity.name.function, meta.function-call.method, support.function, support.function.misc, variable.function#89b4faitalic
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct#f9e2afitalic
entity.name.enum#f9e2afitalic
meta.enum variable.other.readwrite, variable.other.enummember#94e2d5—
meta.property.object#94e2d5—
meta.type, meta.type-alias, support.type, entity.name.type#f9e2afitalic
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator#fab387—
variable.parameter, meta.function.parameters#eba0acitalic
constant.language, support.function.builtin#f38ba8—
entity.other.attribute-name.documentation#f38ba8—
keyword.control.directive, punctuation.definition.directive#f9e2af—
punctuation.definition.typeparameters#89dceb—
entity.name.namespace#f9e2af—
support.type.property-name.css#89b4fa
variable.language.this, variable.language.this punctuation.definition.variable#f38ba8—
variable.object.property#cdd6f4—
string.template variable, string variable#cdd6f4—
keyword.operator.new—bold
storage.modifier.specifier.extern.cpp#cba6f7—
entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.function.definition.cpp#f9e2af—
storage.type.class.doxygen—
storage.modifier.reference.cpp#94e2d5—
meta.interpolation.cs#cdd6f4—
comment.block.documentation.cs#cdd6f4—
source.css entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css#f9e2af—
punctuation.separator.operator.css#94e2d5—
source.css entity.other.attribute-name.pseudo-class#94e2d5—
source.css constant.other.unicode-range#fab387—
source.css variable.parameter.url#a6e3a1
support.type.vendored.property-name#89dceb—
source.css meta.property-value variable, source.css meta.property-value variable.other.less, source.css meta.property-value variable.other.less punctuation.definition.variable.less, meta.definition.variable.scss#eba0ac—
source.css meta.property-list variable, meta.property-list variable.other.less, meta.property-list variable.other.less punctuation.definition.variable.less#89b4fa—
keyword.other.unit.percentage.css#fab387—
source.css meta.attribute-selector#a6e3a1—
keyword.other.definition.ini, punctuation.support.type.property-name.json, support.type.property-name.json, punctuation.support.type.property-name.toml, support.type.property-name.toml, entity.name.tag.yaml, punctuation.support.type.property-name.yaml, support.type.property-name.yaml#89b4fa
constant.language.json, constant.language.yaml#fab387—
entity.name.type.anchor.yaml, variable.other.alias.yaml#f9e2af
support.type.property-name.table, entity.name.section.group-title.ini#f9e2af—
constant.other.time.datetime.offset.toml#f5c2e7—
punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#f5c2e7—
entity.other.document.begin.yaml#f5c2e7—
markup.changed.diff#fab387—
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#89b4fa—
markup.inserted.diff#a6e3a1—
markup.deleted.diff#f38ba8—
variable.other.env#89b4fa—
string.quoted variable.other.env#cdd6f4—
support.function.builtin.gdscript#89b4fa—
constant.language.gdscript#fab387—
comment meta.annotation.go#eba0ac—
comment meta.annotation.parameters.go#fab387—
constant.language.go#fab387—
variable.graphql#cdd6f4—
string.unquoted.alias.graphql#f2cdcd—
constant.character.enum.graphql#94e2d5—
meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql#f2cdcd—
keyword.other.doctype, meta.tag.sgml.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag#cba6f7—
entity.name.tag#89b4fa
text.html constant.character.entity, text.html constant.character.entity punctuation, constant.character.entity.xml, constant.character.entity.xml punctuation, constant.character.entity.js.jsx, constant.charactger.entity.js.jsx punctuation, constant.character.entity.tsx, constant.character.entity.tsx punctuation#f38ba8—
entity.other.attribute-name#f9e2af—
support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.vue#f5c2e7
punctuation.definition.annotation, storage.type.annotation#fab387—
constant.other.enum.java#94e2d5—
storage.modifier.import.java#cdd6f4—
comment.block.javadoc.java keyword.other.documentation.javadoc.java—
meta.export variable.other.readwrite.js#eba0ac—
variable.other.constant.js, variable.other.constant.ts, variable.other.property.js, variable.other.property.ts#cdd6f4—
variable.other.jsdoc, comment.block.documentation variable.other#eba0ac
storage.type.class.jsdoc—
support.type.object.console.js#cdd6f4—
support.constant.node, support.type.object.module.js#cba6f7—
storage.modifier.implements#cba6f7—
constant.language.null.js, constant.language.null.ts, constant.language.undefined.js, constant.language.undefined.ts, support.type.builtin.ts#cba6f7—
variable.parameter.generic#f9e2af—
keyword.declaration.function.arrow.js, storage.type.function.arrow.ts#94e2d5—
punctuation.decorator.ts#89b4faitalic
keyword.operator.expression.in.js, keyword.operator.expression.in.ts, keyword.operator.expression.infer.ts, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.is, keyword.operator.expression.keyof.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.typeof.ts#cba6f7—
support.function.macro.julia#94e2d5italic
constant.language.julia#fab387—
constant.other.symbol.julia#eba0ac—
text.tex keyword.control.preamble#94e2d5—
text.tex support.function.be#89dceb—
constant.other.general.math.tex#f2cdcd—
variable.language.liquid#f5c2e7—
comment.line.double-dash.documentation.lua storage.type.annotation.lua#cba6f7
comment.line.double-dash.documentation.lua entity.name.variable.lua, comment.line.double-dash.documentation.lua variable.lua#cdd6f4—
heading.1.markdown punctuation.definition.heading.markdown, heading.1.markdown, heading.1.quarto punctuation.definition.heading.quarto, heading.1.quarto, markup.heading.atx.1.mdx, markup.heading.atx.1.mdx punctuation.definition.heading.mdx, markup.heading.setext.1.markdown, markup.heading.heading-0.asciidoc#f38ba8—
heading.2.markdown punctuation.definition.heading.markdown, heading.2.markdown, heading.2.quarto punctuation.definition.heading.quarto, heading.2.quarto, markup.heading.atx.2.mdx, markup.heading.atx.2.mdx punctuation.definition.heading.mdx, markup.heading.setext.2.markdown, markup.heading.heading-1.asciidoc#fab387—
heading.3.markdown punctuation.definition.heading.markdown, heading.3.markdown, heading.3.quarto punctuation.definition.heading.quarto, heading.3.quarto, markup.heading.atx.3.mdx, markup.heading.atx.3.mdx punctuation.definition.heading.mdx, markup.heading.heading-2.asciidoc#f9e2af—
heading.4.markdown punctuation.definition.heading.markdown, heading.4.markdown, heading.4.quarto punctuation.definition.heading.quarto, heading.4.quarto, markup.heading.atx.4.mdx, markup.heading.atx.4.mdx punctuation.definition.heading.mdx, markup.heading.heading-3.asciidoc#a6e3a1—
heading.5.markdown punctuation.definition.heading.markdown, heading.5.markdown, heading.5.quarto punctuation.definition.heading.quarto, heading.5.quarto, markup.heading.atx.5.mdx, markup.heading.atx.5.mdx punctuation.definition.heading.mdx, markup.heading.heading-4.asciidoc#89b4fa—
heading.6.markdown punctuation.definition.heading.markdown, heading.6.markdown, heading.6.quarto punctuation.definition.heading.quarto, heading.6.quarto, markup.heading.atx.6.mdx, markup.heading.atx.6.mdx punctuation.definition.heading.mdx, markup.heading.heading-5.asciidoc#cba6f7—
markup.bold#f38ba8bold
markup.italic#f38ba8italic
markup.strikethrough#a6adc8strikethrough
punctuation.definition.link, markup.underline.link#89b4fa—
text.html.markdown punctuation.definition.link.title, text.html.quarto punctuation.definition.link.title, string.other.link.title.markdown, string.other.link.title.quarto, markup.link, punctuation.definition.constant.markdown, punctuation.definition.constant.quarto, constant.other.reference.link.markdown, constant.other.reference.link.quarto, markup.substitution.attribute-reference#b4befe—
punctuation.definition.raw.markdown, punctuation.definition.raw.quarto, markup.inline.raw.string.markdown, markup.inline.raw.string.quarto, markup.raw.block.markdown, markup.raw.block.quarto#a6e3a1—
fenced_code.block.language#89dceb—
markup.fenced_code.block punctuation.definition, markup.raw support.asciidoc#9399b2—
markup.quote, punctuation.definition.quote.begin#f5c2e7—
meta.separator.markdown#94e2d5—
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.quarto, markup.list.bullet#94e2d5—
markup.heading.quarto—bold
entity.other.attribute-name.multipart.nix, entity.other.attribute-name.single.nix#89b4fa—
variable.parameter.name.nix#cdd6f4
meta.embedded variable.parameter.name.nix#b4befe
string.unquoted.path.nix#f5c2e7
support.attribute.builtin, meta.attribute.php#f9e2af—
meta.function.parameters.php punctuation.definition.variable.php#eba0ac—
constant.language.php#cba6f7—
text.html.php support.function#89dceb—
keyword.other.phpdoc.php—
support.variable.magic.python, meta.function-call.arguments.python#cdd6f4—
support.function.magic.python#89dcebitalic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#f38ba8italic
keyword.control.flow.python, keyword.operator.logical.python#cba6f7—
storage.type.function.python#cba6f7—
support.token.decorator.python, meta.function.decorator.identifier.python#89dceb—
meta.function-call.python#89b4fa—
entity.name.function.decorator.python, punctuation.definition.decorator.python#fab387italic
constant.character.format.placeholder.other.python#f5c2e7—
support.type.exception.python, support.function.builtin.python#fab387—
support.type.python#fab387—
constant.language.python#cba6f7—
meta.indexed-name.python, meta.item-access.python#eba0acitalic
storage.type.string.python#a6e3a1italic
meta.function.parameters.python—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f5c2e7—
keyword.control.anchor.regexp#cba6f7—
string.regexp.ts#cdd6f4—
punctuation.definition.group.regexp, keyword.other.back-reference.regexp#a6e3a1—
punctuation.definition.character-class.regexp#f9e2af—
constant.other.character-class.regexp#f5c2e7—
constant.other.character-class.range.regexp#f5e0dc—
keyword.operator.quantifier.regexp#94e2d5—
constant.character.numeric.regexp#fab387—
punctuation.definition.group.no-capture.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp#89b4fa—
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust#f9e2afitalic
meta.attribute.rust string.quoted.double.rust, meta.attribute.rust string.quoted.single.char.rust—
entity.name.function.macro.rules.rust, storage.type.module.rust, storage.modifier.rust, storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.union.rust, storage.type.impl.rust, storage.type.rust, storage.type.function.rust, storage.type.type.rust#cba6f7
entity.name.type.numeric.rust#cba6f7
meta.generic.rust#fab387—
entity.name.impl.rust#f9e2afitalic
entity.name.module.rust#fab387—
entity.name.trait.rust#f9e2afitalic
storage.type.source.rust#f9e2af—
entity.name.union.rust#f9e2af—
meta.enum.rust storage.type.source.rust#94e2d5—
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust#89b4faitalic
storage.modifier.lifetime.rust, entity.name.type.lifetime#89b4faitalic
string.quoted.double.rust constant.other.placeholder.rust#f5c2e7—
meta.function.return-type.rust meta.generic.rust storage.type.rust#cdd6f4—
meta.function.call.rust#89b4fa—
punctuation.brackets.angle.rust#89dceb—
constant.other.caps.rust#fab387—
meta.function.definition.rust variable.other.rust#eba0ac—
meta.function.call.rust variable.other.rust#cdd6f4—
variable.language.self.rust#f38ba8—
variable.other.metavariable.name.rust, meta.macro.metavariable.rust keyword.operator.macro.dollar.rust#f5c2e7—
comment.line.shebang, comment.line.shebang punctuation.definition.comment, comment.line.shebang, punctuation.definition.comment.shebang.shell, meta.shebang.shell#f5c2e7italic
comment.line.shebang constant.language#94e2d5italic
meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation, meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation#f38ba8—
meta.string meta.interpolation.parameter.shell variable.other.readwrite#fab387italic
source.shell punctuation.section.interpolation, punctuation.definition.evaluation.backticks.shell#94e2d5—
entity.name.tag.heredoc.shell#cba6f7—
string.quoted.double.shell variable.other.normal.shell#cdd6f4—