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#F0F0F0
  • activityBar.border#F0F0F0
  • activityBar.dropBackground#D0D0D0
  • activityBar.foreground#403f53
  • activityBarBadge.background#1E53E5
  • activityBarBadge.foreground#F0F0F0
  • badge.background#2962FF
  • badge.foreground#F0F0F0
  • breadcrumb.foreground
  • button.background#2962FF
  • button.foreground#F0F0F0
  • checkbox.foreground#403f53
  • debugExceptionWidget.background#F0F0F0
  • debugExceptionWidget.border#909090
  • debugToolBar.background#F0F0F0
  • descriptionForeground#403f53
  • dropdown.background#F0F0F0
  • dropdown.border#909090
  • dropdown.foreground#403f53
  • editor.background#FBFBFB
  • editor.findMatchBackground#93A1A16c
  • editor.findMatchHighlightBackground#93a1a16c
  • editor.findRangeHighlightBackground#7497a633
  • editor.foreground#403f53
  • editor.hoverHighlightBackground#339cec33
  • editor.lineHighlightBackground#F0F0F0
  • editor.rangeHighlightBackground#7497a633
  • editor.selectionBackground#E0E0E0
  • editor.selectionHighlightBackground#339cec33
  • editor.wordHighlightBackground#339cec33
  • editor.wordHighlightStrongBackground#007dd659
  • editorBracketMatch.background#d3e8f8
  • editorBracketMatch.border#2962FF
  • editorCodeLens.foreground#403f53
  • editorCursor.foreground#90A7B2
  • editorError.border#FBFBFB
  • editorError.foreground#E64D49
  • editorGroup.background#F6F6F6
  • editorGroup.border#F0F0F0
  • editorGroupHeader.noTabsBackground#F0F0F0
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGroupHeader.tabsBorder#F0F0F0
  • editorGutter.addedBackground#49d0c5
  • editorGutter.background#bbd9fb
  • editorGutter.deletedBackground#f76e6e
  • editorGutter.modifiedBackground#6fbef6
  • editorHoverWidget.background#d3e8f8
  • editorHoverWidget.border#909090
  • editorIndentGuide.background#909090
  • editorLineNumber.activeForeground#403f53
  • editorLineNumber.foreground#403f53
  • editorMarkerNavigation.background#D0D0D0
  • editorMarkerNavigationError.background#f76e6e
  • editorMarkerNavigationWarning.background#daaa01
  • editorOverviewRuler.errorForeground#E64D49
  • editorOverviewRuler.warningForeground#daaa01
  • editorRuler.foreground#909090
  • editorSuggestWidget.background#F0F0F0
  • editorSuggestWidget.border#909090
  • editorSuggestWidget.foreground#121212
  • editorSuggestWidget.highlightForeground#2E68C7
  • editorSuggestWidget.selectedBackground#CAD5FA
  • editorWarning.border#daaa01
  • editorWarning.foreground#daaa01
  • editorWhitespace.foreground#909090
  • editorWidget.background#F0F0F0
  • editorWidget.border#909090
  • editorWidget.foreground#403f53
  • errorForeground#403f53
  • extensionButton.prominentBackground#2962FF
  • extensionButton.prominentForeground#F0F0F0
  • focusBorder#2962FF
  • foreground#403f53
  • gitDecoration.addedResourceForeground#49d0c5
  • gitDecoration.conflictingResourceForeground#daaa01
  • gitDecoration.deletedResourceForeground
  • gitDecoration.modifiedResourceForeground#d6438a
  • gitDecoration.untrackedResourceForeground#08916a
  • input.background#F0F0F0
  • input.border#909090
  • input.foreground#403f53
  • input.placeholderForeground#93A1A1
  • inputOption.activeBorder#2962FF
  • inputValidation.errorBackground#f76e6e
  • inputValidation.errorBorder#de3d3b
  • inputValidation.infoBackground#F0F0F0
  • inputValidation.infoBorder#D0D0D0
  • inputValidation.warningBackground#daaa01
  • inputValidation.warningBorder#E0AF02
  • keybindingLabel.background#525459
  • keybindingLabel.border#525459
  • keybindingLabel.bottomBorder#525459
  • keybindingLabel.foreground#ffffff
  • list.activeSelectionBackground#d3e8f8
  • list.activeSelectionForeground#403f53
  • list.errorForeground#E64D49
  • list.focusBackground#d3e8f8
  • list.focusForeground#403f53
  • list.highlightForeground#403f53
  • list.hoverBackground#d3e8f8
  • list.hoverForeground#403f53
  • list.inactiveSelectionBackground#E0E7EA
  • list.inactiveSelectionForeground#403f53
  • list.warningForeground#daaa01
  • notificationCenter.border#CCCCCC
  • notificationCenterHeader.background#F0F0F0
  • notificationCenterHeader.foreground#403f53
  • notificationLink.foreground#994cc3
  • notifications.background#F0F0F0
  • notifications.border#CCCCCC
  • notifications.foreground#403f53
  • notificationToast.border#CCCCCC
  • panel.background#F0F0F0
  • panel.border#909090
  • panelTitle.activeBorder#1E53E5
  • panelTitle.activeForeground#403f53
  • panelTitle.inactiveForeground#909090
  • peekView.border#909090
  • peekViewEditor.background#F6F6F6
  • peekViewEditor.matchHighlightBackground#49d0c5
  • peekViewEditorGutter.background#F6F6F6
  • peekViewResult.background#F0F0F0
  • peekViewResult.fileForeground#403f53
  • peekViewResult.lineForeground#403f53
  • peekViewResult.matchHighlightBackground#49d0c5
  • peekViewResult.selectionBackground#E0E7EA
  • peekViewResult.selectionForeground#403f53
  • peekViewTitle.background#F0F0F0
  • peekViewTitleDescription.foreground#403f53
  • peekViewTitleLabel.foreground#403f53
  • pickerGroup.border#909090
  • pickerGroup.foreground#403f53
  • progressBar.background#2962FF
  • scrollbar.shadow#CCCCCC
  • selection.background#7a8181ad
  • sideBar.background#F0F0F0
  • sideBar.border#F0F0F0
  • sideBar.foreground#403f53
  • sideBarTitle.foreground#403f53
  • statusBar.background#F0F0F0
  • statusBar.border#F0F0F0
  • statusBar.debuggingBackground#F0F0F0
  • statusBar.debuggingForeground#403f53
  • statusBar.foreground#403f53
  • statusBar.noFolderBackground#F0F0F0
  • statusBar.noFolderForeground#403f53
  • symbolIcon.snippetForeground#F0F0F0
  • tab.activeBackground#F6F6F6
  • tab.activeForeground#2962FF
  • tab.activeModifiedBorder#2962FF
  • tab.border#F0F0F0
  • tab.hoverBackground#E2E2E2
  • tab.hoverForeground#2962FF
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#8785A7
  • tab.inactiveModifiedBorder#93A1A1
  • tab.unfocusedActiveModifiedBorder#93A1A1
  • tab.unfocusedInactiveModifiedBorder#93A1A1
  • terminal.ansiBlack#403f53
  • terminal.ansiBlue#288ed7
  • terminal.ansiBrightBlack#403f53
  • terminal.ansiBrightBlue#288ed7
  • terminal.ansiBrightCyan#2962FF
  • terminal.ansiBrightGreen#08916a
  • terminal.ansiBrightMagenta#d6438a
  • terminal.ansiBrightRed#de3d3b
  • terminal.ansiBrightWhite#F0F0F0
  • terminal.ansiBrightYellow#daaa01
  • terminal.ansiCyan#2962FF
  • terminal.ansiGreen#08916a
  • terminal.ansiMagenta#d6438a
  • terminal.ansiRed#de3d3b
  • terminal.ansiWhite#F0F0F0
  • terminal.ansiYellow#E0AF02
  • terminal.background#F6F6F6
  • terminal.foreground#403f53
  • titleBar.activeBackground#F0F0F0
  • titleBar.activeForeground#403f53
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#403f53

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#a2bffc
markup.deleted.diff#EF535090
markup.inserted.diff#798D31
Global settings#161A22
comment#969996bold
string#ecc48dbold
string.unquoted.asciidoc#476FA5bold
variable.other#C53532bold
constant.numeric#EB8A3Cbold
punctuation.separator.parameters.ps#161A22bold
token.package.ps#161A22bold
string.quoted#798D31bold
support.constant.elm#cf9f00bold
punctuation.definition.list.markdown#ecc48dbold
punctuation.section.embedded.begin#476FA5bold
keyword.operator.ternary#476FA5bold
variable.parameter.function.language.special.self.python#476FA5bold
keyword.operator.logical.js#3A99A0bold
punctuation.section.embedded.begin#3A99A0bold
keyword.operator.arithmetic#B193BAbold
token.error-token.ps#161A22bold
invalid.illegal.non-null-typehinted.php.ps#8ABDB7bold
support.constant.math#798D31bold
constant.character.numeric#F78C6Cbold
constant.language, punctuation.definition.constant, variable.other.constant#82AAFFbold
constant.character, constant.other#82AAFFbold
constant.character.escape#F78C6Cbold
string.regexp, string.regexp keyword.other#5ca7e4bold
meta.function punctuation.separator.comma#5f7e97bold
variable#798D31bold
punctuation.accessor, keyword#c792eabold
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#c792eabold
storage.type#c792eabold
storage.type.function.arrow.jsbold
entity.name.class, meta.class entity.name.type.class#ffcb8bbold
entity.other.inherited-class#798D31bold
entity.name.function#c792eabold
punctuation.definition.tag, meta.tag#7fdbcabold
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#7fdbcabold
entity.other.attribute-name#798D31bold
entity.name.tag.custom#798D31bold
support.function, support.constant#82AAFFbold
support.constant.meta.property-value#7fdbcabold
support.type, support.class#798D31bold
support.variable.dom#798D31bold
invalid#000000bold
invalid.deprecated#000000bold
keyword.operator#7fdbcabold
keyword.operator.relational#c792eabold
keyword.operator.assignment#c792eabold
keyword.operator.bitwise#c792eabold
keyword.operator.increment#c792eabold
comment.line.double-slash#8C908Cbold
object#7fdbcabold
constant.language.null#ff5874bold
meta.brace#161A22bold
meta.delimiter.period#c792eabold
punctuation.definition.string#798D31bold
punctuation.definition.string.begin.markdown#ff5874bold
constant.language.boolean#ff5874bold
object.comma#000000bold
variable.parameter.function#7fdbcabold
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4bold
meta.property-list entity.name.tag.reference#57eaf1bold
constant.other.color.rgb-value punctuation.definition.constant#F78C6Cbold
constant.other.color#FFEB95bold
keyword.other.unit#FFEB95bold
meta.selector#c792eabold
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#c792eabold
punctuation.definition.parameters#798D31
keyword.control.operator#7fdbca
keyword.operator.logical#c792eabold
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca
variable.other.object.property#faf39fbold
variable.other.object.js
entity.name.function#82AAFFbold
keyword.control.conditional.js, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.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.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#c792eabold
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#7fdbca
support.function#798D31
invalid.broken#020e14
invalid.unimplemented#020e14
invalid.illegal#161A22
variable.language#7fdbca
support.variable.property#7fdbca
variable.function#82AAFF
variable.interpolation#ec5f67
meta.function-call#82AAFF
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#161A22
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#798D31
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#161A22
italic#c792eaitalic
bold#798D31bold
quote#697098bold
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#161A22
variable.assignment.coffee#7fdbca
variable.other.readwrite.cs#161A22
entity.name.type.class.cs, storage.type.cs#161A22
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#161A22
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffcb8bbold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#798D31
string.interpolated.single.dart, string.interpolated.double.dart#FFCB8B
support.class.dart#FFCB8B
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff6363bold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#7fdbca
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#798D31
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#798D31
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#798D31
source.elixir .punctuation.binary.elixir#c792eabold
constant.keyword.clojure#7fdbca
source.go meta.function-call.go#DDDDDD
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#c792ea
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7fdbcaff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#161A22
variable.parameter#ffcb8b
variable.other.readwrite.powershell#82AAFF
support.function.powershell#7fdbcaff
entity.other.attribute-name.id.html#798D31
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#c792eabold
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#82AAFF
terminator.js#161A22
meta.js punctuation.definition.js#161A22
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5f7e97
variable.other.jsdoc, variable.other.phpdoc#78ccf0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#161A22
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#161A22
variable.js, variable.other.js#161A22
entity.name.type.js, entity.name.type.module.js#ffcb8bbold
support.class.js#161A22
support.type.property-name.json#e06c75bold
support.constant.json#77A366
meta.structure.dictionary.value.json string.quoted.double#77A366bold
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.object.js#7fdbca
variable.other.ruby#161A22
entity.name.type.class.ruby#ecc48d
constant.language.symbol.hashkey.ruby#7fdbca
entity.name.tag.less#7fdbca
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#c792eaitalic
markup.bold.markdown#798D31bold
markup.quote.markdown#697098bold
markup.inline.raw.markdown#80CBC4
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#161A22
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff
punctuation.definition.metadata.markdown#7fdbca
beginning.punctuation.definition.list.markdown#82b1ff
markup.inline.raw.string.markdown#798D31
variable.other.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#161A22
variable.other.global.php#798D31
variable.other.global.php punctuation.definition.variable#798D31
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#161A22
entity.name.function.decorator.python#798D31
source.python variable.language.special#8EACE3
keyword.control#c792ea
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#798D31
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#7fdbca
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
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#161A22
entity.name.type.ts, entity.name.type.tsx#ffcb8b
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5f7e97
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#161A22
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
entity.name.tag.yaml#7fdbca
variable.other.readwrite.js, variable.parameter#d7dbe0
support.class.component.js, support.class.component.tsx#f78c6cbold
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#161A22
meta.class entity.name.type.class.tsx#ffcb8b
entity.name.type.tsx, entity.name.type.module.tsx#ffcb8b
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#C792EA
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82AAFF
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.quotedbold

Shiki preview

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

Loading...

Pine Editor Themes - Coding Theme