Skip to main content
CodingTheme

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#000000
  • activityBar.border#001425ff
  • activityBar.dropBackground#5a778fff
  • activityBar.foreground#5a778fff
  • activityBarBadge.background#405465ff
  • activityBarBadge.foreground#f2f2f2ff
  • badge.background#5a778fff
  • badge.foreground#f2f2f2ff
  • breadcrumb.activeSelectionForeground#f2f2f2ff
  • breadcrumb.focusForeground#f2f2f2ff
  • breadcrumb.foreground#9c91ddff
  • breadcrumbPicker.background#001020ff
  • button.background#7752f2cc
  • button.foreground#f2f2f2cc
  • button.hoverBackground#7752b8ff
  • contrastBorder#112a3eff
  • debugExceptionWidget.background#001425ff
  • debugExceptionWidget.border#5a778fff
  • debugToolBar.background#001425ff
  • diffEditor.insertedTextBackground#91adf223
  • diffEditor.insertedTextBorder#bbd8f233
  • diffEditor.removedTextBackground#e34ef233
  • diffEditor.removedTextBorder#e34ef24d
  • dropdown.background#001425ff
  • dropdown.border#5a778fff
  • dropdown.foreground#f2f2f2cc
  • editor.background#000000
  • editor.findMatchBackground#5a77f279
  • editor.findMatchHighlightBackground#0f7ef25d
  • editor.foreground#cbd2dfff
  • editor.hoverHighlightBackground#7752f25a
  • editor.inactiveSelectionBackground#7752f25a
  • editor.lineHighlightBackground#0002f2ff
  • editor.rangeHighlightBackground#7752f25a
  • editor.selectionBackground#1b384eff
  • editor.selectionHighlightBackground#5a77f279
  • editorBracketMatch.background#5a77f24d
  • editorCodeLens.foreground#597bf2b4
  • editorCursor.foreground#799bb8ff
  • editorError.foreground#e34e4cff
  • editorGroup.border#000000
  • editorGroup.dropBackground#000000
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#242736ff
  • editorGutter.addedBackground#94c15fff
  • editorGutter.background#000000
  • editorGutter.deletedBackground#e34e4cff
  • editorGutter.modifiedBackground#d6af39ff
  • editorHoverWidget.background#001425ff
  • editorHoverWidget.border#5a778fff
  • editorIndentGuide.activeBackground#000000
  • editorIndentGuide.background#000000
  • editorLineNumber.activeForeground#bbd8f0ff
  • editorLineNumber.foreground#475f72ff
  • editorMarkerNavigation.background#0a263eff
  • editorMarkerNavigationError.background#e34e4cff
  • editorMarkerNavigationWarning.background#f2bf26ff
  • editorOverviewRuler.commonContentForeground#7752b8ff
  • editorOverviewRuler.currentContentForeground#7752b8ff
  • editorOverviewRuler.incomingContentForeground#7752b8ff
  • editorRuler.foreground#597af252
  • editorSuggestWidget.background#292d3fff
  • editorSuggestWidget.border#282c3cff
  • editorSuggestWidget.foreground#cbd2dfff
  • editorSuggestWidget.highlightForeground#f2f2f2ff
  • editorSuggestWidget.selectedBackground#5a778fff
  • editorWarning.foreground#aa8d4fff
  • editorWidget.background#01121eff
  • editorWidget.border#5a778fff
  • errorForeground#e34e4cff
  • extensionButton.prominentBackground#7752f2cc
  • extensionButton.prominentForeground#f2f2f2cc
  • extensionButton.prominentHoverBackground#7752b8ff
  • focusBorder#112a3eff
  • foreground#cbd2dfff
  • gitDecoration.conflictingResourceForeground#f2dff2cc
  • gitDecoration.deletedResourceForeground#e34ef290
  • gitDecoration.ignoredResourceForeground#36556fff
  • gitDecoration.modifiedResourceForeground#99b5efff
  • gitDecoration.untrackedResourceForeground#bbd8f2ff
  • input.background#0a2337ff
  • input.border#5a778fff
  • input.foreground#f2f2f2cc
  • input.placeholderForeground#5a778fff
  • inputOption.activeBorder#f2f2f2cc
  • inputValidation.errorBackground#a202f2f2
  • inputValidation.errorBorder#e34e4cff
  • inputValidation.infoBackground#0053f2f2
  • inputValidation.infoBorder#5fabe9ff
  • inputValidation.warningBackground#6152f2f2
  • inputValidation.warningBorder#f2bf26ff
  • list.activeSelectionBackground#2149f28c
  • list.activeSelectionForeground#f2f2f2ff
  • list.dropBackground#001425ff
  • list.focusBackground#000c16ff
  • list.focusForeground#f2f2f2ff
  • list.highlightForeground#f2f2f2ff
  • list.hoverBackground#001425ff
  • list.hoverForeground#f2f2f2ff
  • list.inactiveSelectionBackground#0d263bff
  • list.inactiveSelectionForeground#5a778fff
  • list.invalidItemForeground#8f5a8cff
  • menu.background#000000
  • menu.border#000000
  • merge.currentHeaderBackground#5a778fff
  • merge.incomingHeaderBackground#7752f25a
  • meta.objectliteral.js#7ba1f2ff
  • notificationCenter.border#242736ff
  • notificationLink.foreground#79c0baff
  • notifications.background#00101bff
  • notifications.border#242736ff
  • notifications.foreground#f2f2f2cc
  • notificationToast.border#242736ff
  • panel.background#000000
  • panel.border#5a778fff
  • panel.foreground#f2f2f2ff
  • panelTitle.activeBorder#5a778fff
  • panelTitle.activeForeground#f2f2f2cc
  • panelTitle.inactiveForeground#cbd2f280
  • peekView.border#5a778fff
  • peekViewEditor.background#001425ff
  • peekViewEditor.matchHighlightBackground#7752f25a
  • peekViewResult.background#001425ff
  • peekViewResult.fileForeground#5a778fff
  • peekViewResult.lineForeground#5a778fff
  • peekViewResult.matchHighlightBackground#f2f2f2cc
  • peekViewResult.selectionBackground#2b2f4cff
  • peekViewResult.selectionForeground#5a778fff
  • peekViewTitle.background#001425ff
  • peekViewTitleDescription.foreground#636a90ff
  • peekViewTitleLabel.foreground#5a778fff
  • pickerGroup.border#001425ff
  • pickerGroup.foreground#c6a1f2ff
  • progress.background#7752b8ff
  • punctuation.definition.generic.begin.html#e34ef2f2
  • scrollbar.shadow#000a13ff
  • selection.background#3f6db8ff
  • sideBar.background#000000
  • sideBar.border#001425ff
  • sideBar.foreground#829bf2ff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#5a778fff
  • sideBarTitle.foreground#5a778fff
  • source.elm#5a778fff
  • statusBar.background#000000
  • statusBar.border#242736ff
  • statusBar.debuggingBackground#1e222eff
  • statusBar.debuggingBorder#1d212dff
  • statusBar.foreground#5a778fff
  • statusBar.noFolderBackground#001425ff
  • statusBar.noFolderBorder#232637ff
  • statusBarItem.activeBackground#1e222eff
  • statusBarItem.hoverBackground#1e222eff
  • statusBarItem.prominentBackground#1e222eff
  • statusBarItem.prominentHoverBackground#1e222eff
  • statusBarItem.remoteBackground#000000
  • string.quoted.single.js#f2f2f2ff
  • tab.activeBackground#0a263eff
  • tab.activeBorder#242736ff
  • tab.activeForeground#c7d2dbff
  • tab.border#252838ff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#5a778fff
  • tab.unfocusedActiveBorder#242736ff
  • tab.unfocusedActiveForeground#5a778fff
  • tab.unfocusedInactiveForeground#5a778fff
  • terminal.ansiBlack#001425ff
  • terminal.ansiBlue#7ba1f2ff
  • terminal.ansiBrightBlack#525151ff
  • terminal.ansiBrightBlue#7ba1f2ff
  • terminal.ansiBrightCyan#78d0bfff
  • terminal.ansiBrightGreen#20cf68ff
  • terminal.ansiBrightMagenta#bd8adeff
  • terminal.ansiBrightRed#e34e4cff
  • terminal.ansiBrightWhite#f2f2f2ff
  • terminal.ansiBrightYellow#f2df8dff
  • terminal.ansiCyan#1fbd9fff
  • terminal.ansiGreen#20cf68ff
  • terminal.ansiMagenta#bd8adeff
  • terminal.ansiRed#e34e4cff
  • terminal.ansiWhite#f2f2f2ff
  • terminal.ansiYellow#bbd872ff
  • terminal.background#000000
  • terminal.foreground#f2f2f2ff
  • terminal.selectionBackground#1988f24d
  • terminalCursor.background#21496aff
  • textCodeBlock.background#4b4b4bff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#e2e3f2ff
  • titleBar.inactiveBackground#000000
  • walkThrough.embeddedEditorBackground#001425ff
  • welcomePage.buttonBackground#001425ff
  • welcomePage.buttonHoverBackground#001425ff
  • widget.shadow#001425ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#99b5efffitalic
markup.deleted.diff#e34ef290italic
markup.inserted.diff#bbd8f2ffitalic
Global settings#cbd2dfff
comment#5e7171ffitalic
string#e0ba85ff
string.quoted, variable.other.readwrite.js#e0ba85ff
support.constant.math#bbd872ff
constant.numeric, constant.character.numeric#ea8566ff
constant.language, punctuation.definition.constant, variable.other.constant#7ba1f2ff
constant.character, constant.other#7ba1f2ff
constant.character.escape#ea8566ff
string.regexp, string.regexp keyword.other#579ed8ff
meta.function punctuation.separator.comma#5a778fff
variable#bbd872ff
punctuation.accessor, keyword#bd8adeffitalic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#bd8adeffitalic
storage.type#bd8adeff
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#f2c084ff
entity.other.inherited-class#bbd872ff
entity.name.function#bd8adeffitalic
punctuation.definition.tag, meta.tag#78d0bfff
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#bfe0daff
entity.other.attribute-name#bbd872ffitalic
entity.name.tag.custom#ea8566ff
support.function, support.constant#7ba1f2ff
support.constant.meta.property-value#78d0bfff
support.type, support.class#bbd872ff
support.variable.dom#bbd872ff
invalid#f2f2f2ff
invalid.deprecated#f2f2f2ff
keyword.operator#78d0bfff
keyword.operator.relational#bd8adeffitalic
keyword.operator.assignment#bd8adeff
keyword.operator.arithmetic#bd8adeff
keyword.operator.bitwise#bd8adeff
keyword.operator.increment#bd8adeff
keyword.operator.ternary#bd8adeff
comment.line.double-slash#5e7171ff
object#c2dfeaff
constant.language.null#f2536eff
meta.brace#cbd2dfff
meta.delimiter.period#bd8adeffitalic
punctuation.definition.string#cee8d1ff
punctuation.definition.string.begin.markdown#f2536eff
constant.language.boolean#f2536eff
object.comma#f2f2f2ff
variable.parameter.function#78d0bfff
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#79c0baff
meta.property-list entity.name.tag.reference#52dee4ff
constant.other.color.rgb-value punctuation.definition.constant#ea8566ff
constant.other.color#f2df8dff
keyword.other.unit#f2df8dff
meta.selector#bd8adeffitalic
entity.other.attribute-name.id#edc92dff
meta.property-name#79c0baff
entity.name.tag.doctype, meta.tag.sgml.doctype#bd8adeffitalic
punctuation.definition.parameters#cee8d1ff
keyword.control.operator#78d0bfff
keyword.operator.logical#bd8adeff
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#b0dfd6ff
variable.other.object.property#ede697ffitalic
variable.other.object.js
entity.name.function#7ba1f2ffitalic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#bd8adeffitalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#bd8adeff
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#78d0bfff
support.function#bbd872ff
invalid.broken#010d13ff
invalid.unimplemented#f2f2f2ff
invalid.illegal#f2f2f2ff
variable.language#78d0bfff
support.variable.property#78d0bfff
variable.function#7ba1f2ff
variable.interpolation#e05a61ff
meta.function-call#7ba1f2ff
punctuation.section.embedded#c83e3aff
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#cbd2dfff
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#cee8d1ff
string.template meta.template.expression#c83e3aff
string.template punctuation.definition.string#cbd2dfff
italic#bd8adeffitalic
bold#bbd872ffbold
quote#636a90ffitalic
raw#79c0baff
variable.assignment.coffee#2ed5dfff
variable.parameter.function.coffee#cbd2dfff
variable.assignment.coffee#78d0bfff
variable.other.readwrite.cs#cbd2dfff
entity.name.type.class.cs, storage.type.cs#f2c084ff
entity.name.type.namespace.cs#a9c1cbff
string.unquoted.preprocessor.message.cs#cbd2dfff
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#f2c084ffbold
variable.other.object.cs#a9c1cbff
entity.name.type.enum.cs#bbd872ff
string.interpolated.single.dart, string.interpolated.double.dart#f2c084ff
support.class.dart#f2c084ff
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#f25e5eff
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#78d0bfff
keyword.other.unit.css#f2df8dff
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#ea8566ff
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#7ba1f2ff
source.elixir entity.name.function#bbd872ff
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#7ba1f2ff
source.elixir punctuation.definition.string#bbd872ff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#bbd872ff
source.elixir .punctuation.binary.elixir#bd8adeffitalic
constant.keyword.clojure#78d0bfff
source.go meta.function-call.go#d1d1d1ff
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#bd8adeffitalic
source.go constant.language.go, source.go constant.other.placeholder.go#f2536eff
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#78d0f2ff
meta.namespace-block.cpp#d4d2bcff
storage.type.language.primitive.cpp#f2536eff
meta.preprocessor.macro.cpp#cbd2dfff
variable.parameter#f2c084ff
variable.other.readwrite.powershell#7ba1f2ff
support.function.powershell#78d0f2ff
entity.other.attribute-name.id.html#bbd872ff
punctuation.definition.tag.html#64dde4ff
meta.tag.sgml.doctype.html#bd8adeffitalic
meta.class entity.name.type.class.js#f2c084ff
meta.method.declaration storage.type.js#7ba1f2ff
terminator.js#cbd2dfff
meta.js punctuation.definition.js#cbd2dfff
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5a778fff
variable.other.jsdoc, variable.other.phpdoc#72c1e4ff
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#cbd2dfff
variable.parameter.function.js#727fdbff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#cbd2dfff
variable.js, variable.other.js#cbd2dfff
entity.name.type.js, entity.name.type.module.js#f2c084ff
support.class.js#cbd2dfff
support.type.property-name.json#78d0bfff
support.constant.json#bbd872ff
meta.structure.dictionary.value.json string.quoted.double#bd82cbff
string.quoted.double.json punctuation.definition.string.json#79c0baff
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f2536eff
variable.other.object.js#78d0bfffitalic
variable.other.ruby#cbd2dfff
entity.name.type.class.ruby#e0ba85ff
constant.language.symbol.hashkey.ruby#78d0bfff
constant.language.symbol.ruby#78d0bfff
entity.name.tag.less#78d0bfff
keyword.other.unit.css#f2df8dff
meta.attribute-selector.less entity.other.attribute-name.attribute#ea8566ff
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#7ba8f2ff
markup.italic.markdown#bd8adeffitalic
markup.bold.markdown#bbd872ffbold
markup.quote.markdown#636a90ffitalic
markup.inline.raw.markdown#79c0baff
markup.underline.link.markdown, markup.underline.link.image.markdown#f27f92ff
string.other.link.title.markdown, string.other.link.description.markdown#cbd2dfff
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#7ba8f2ff
punctuation.definition.metadata.markdown#78d0bfff
beginning.punctuation.definition.list.markdown#7ba8f2ff
markup.inline.raw.string.markdown#bbd872ff
variable.other.php, variable.other.property.php#b4bbc9ff
support.class.php#f2c084ff
meta.function-call.php punctuation#cbd2dfff
variable.other.global.php#bbd872ff
variable.other.global.php punctuation.definition.variable#bbd872ff
constant.language.python#f2536eff
variable.parameter.function.python, meta.function-call.arguments.python#7ba1f2ff
meta.function-call.python, meta.function-call.generic.python#a9c1cbff
punctuation.python#cbd2dfff
entity.name.function.decorator.python#bbd872ff
source.python variable.language.special#86a3d7ff
keyword.control#bd8adeffitalic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#bbd872ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#7ba1f2ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#b4bbc9ff
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ea8566ff
entity.name.tag.scss, entity.name.tag.sass#78d0bfff
keyword.other.unit.scss, keyword.other.unit.sass#f2df8dff
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#cbd2dfff
entity.name.type.ts, entity.name.type.tsx#f2c084ff
support.class.node.ts, support.class.node.tsx#7ba1f2ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5a778fff
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#cbd2dfff
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#7ba1f2ff
meta.tag.js meta.jsx.children.tsx#7ba1f2ff
entity.name.tag.yaml#78d0bfff
variable.other.readwrite.js, variable.parameter#ccd0d4ff
support.class.component.js, support.class.component.tsx#ea8566ff
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#cbd2dfff
meta.class entity.name.type.class.tsx#f2c084ff
entity.name.type.tsx, entity.name.type.module.tsx#f2c084ff
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#bd8adeff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#7ba1f2ff
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...