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#131621
  • activityBar.border#131621
  • activityBar.dropBackground#C3C7C5
  • activityBar.foreground#C3C7C5
  • activityBarBadge.background#1E53E5
  • activityBarBadge.foreground#ffffff
  • badge.background#1E53E5
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#43464D
  • breadcrumbPicker.background#001122
  • button.background#1E53E5
  • button.foreground#ffffffcc
  • button.hoverBackground#163EAC
  • debugExceptionWidget.background#131621
  • debugExceptionWidget.border#1E53E5
  • debugToolBar.background#1D222E
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#c5e47833
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • dropdown.background#131621
  • dropdown.border#43464D
  • dropdown.foreground#ffffffcc
  • editor.background#131621
  • editor.findMatchBackground#1E53E53a
  • editor.findMatchHighlightBackground#1085bb5d
  • editor.foreground#d6deeb
  • editor.hoverHighlightBackground#2f52a35b
  • editor.inactiveSelectionBackground#2f52a34d
  • editor.lineHighlightBackground#191D2C
  • editor.rangeHighlightBackground#2f52a35a
  • editor.selectionBackground#1d3b53c5
  • editor.selectionHighlightBackground#1E53E536
  • editor.wordHighlightBackground#f6bbe533
  • editor.wordHighlightStrongBackground#e2a2f433
  • editorBracketMatch.background#1E53E54d
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#ff0000
  • editorError.foreground#EF5350
  • editorGroup.border#131621
  • editorGroup.dropBackground#2f52a373
  • editorGroup.emptyBackground#131621
  • editorGroupHeader.noTabsBackground#131621
  • editorGroupHeader.tabsBackground#131621
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#9CCC65
  • editorGutter.background#131621
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#1E53E5
  • editorHoverWidget.border#1E53E5
  • editorIndentGuide.activeBackground#7E97AC
  • editorIndentGuide.background#5e81ce52
  • editorLineNumber.activeForeground#C5E4FD
  • editorLineNumber.foreground#365269
  • editorMarkerNavigation.background#0C101E
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#2f52a3
  • editorOverviewRuler.currentContentForeground#2f52a3
  • editorOverviewRuler.incomingContentForeground#2f52a3
  • editorRuler.foreground#24282C
  • editorSuggestWidget.background#24272B
  • editorSuggestWidget.border#161615d8
  • editorSuggestWidget.foreground#C2C2C2
  • editorSuggestWidget.highlightForeground#92C910
  • editorSuggestWidget.selectedBackground#39664E
  • editorSuggestWidget.selectedIconForeground#FFCA28
  • editorWarning.foreground#b39554
  • editorWidget.background#1F232E
  • editorWidget.border#282C36
  • editorWidget.foreground#ffffff
  • editorWidget.resizeBorder#282C36
  • errorForeground#EF5350
  • extensionButton.prominentBackground#1E53E5
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#1E53E5
  • focusBorder#1E53E5
  • foreground#d6deeb
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#a2bffc
  • gitDecoration.untrackedResourceForeground#c5e478ff
  • input.background#1F232E
  • input.border#50535E
  • input.foreground#ffffffcc
  • input.placeholderForeground#ffffffcc
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#AB0300F2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#43464D
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • keybindingLabel.background#525459
  • keybindingLabel.border#525459
  • keybindingLabel.bottomBorder#525459
  • keybindingLabel.foreground#ffffff
  • list.activeSelectionBackground#191D2C
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#090D1F
  • list.focusBackground#010d18
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#181c2b
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0e1e3f9f
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#1E53E5
  • merge.incomingHeaderBackground#2f52a35a
  • meta.objectliteral.js#82AAFF
  • notificationCenter.border#262a39
  • notificationLink.foreground#80CBC4
  • notifications.background#050B1E
  • notifications.border#262a39
  • notifications.foreground#ffffffcc
  • notificationToast.border#262a39
  • panel.background#131621
  • panel.border#0B111B
  • panelTitle.activeBorder#1E53E5
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#1E53E5
  • peekViewEditor.background#131621
  • peekViewEditor.matchHighlightBackground#2f52a35a
  • peekViewResult.background#131621
  • peekViewResult.fileForeground#1E53E5
  • peekViewResult.lineForeground#1E53E5
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#1E53E5
  • peekViewTitle.background#131621
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#1E53E5
  • pickerGroup.border#131621
  • pickerGroup.foreground#4164C5
  • progress.background#1E53E5
  • punctuation.definition.generic.begin.html#ef5350f2
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#191D2C
  • scrollbarSlider.background#191D2C
  • scrollbarSlider.hoverBackground#191D2C
  • selection.background#4373c2
  • sideBar.background#131621
  • sideBar.border#131621
  • sideBar.foreground#C3C7C5
  • sideBarSectionHeader.background#131621
  • sideBarSectionHeader.foreground#C3C7C5
  • sideBarTitle.foreground#C3C7C5
  • source.elm#1E53E5
  • statusBar.background#131621
  • statusBar.border#262A39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#d6deeb80
  • statusBar.noFolderBackground#131621
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • string.quoted.single.js#ffffff
  • symbolIcon.snippetForeground#24272B
  • tab.activeBackground#131621
  • tab.activeBorder#262A39
  • tab.activeForeground#1E53E5
  • tab.border#272B3B
  • tab.hoverBackground#141721
  • tab.inactiveBackground#161925
  • tab.inactiveForeground#525459
  • tab.unfocusedActiveBorder#262A39
  • tab.unfocusedActiveForeground#525459
  • tab.unfocusedInactiveForeground#525459
  • terminal.ansiBlack#131621
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#c5e478
  • terminal.foreground#22da6e
  • terminal.selectionBackground#1b90dd4d
  • terminalCursor.background#234d70
  • textCodeBlock.background#4f4f4f
  • titleBar.activeBackground#131621
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#010e1a
  • walkThrough.embeddedEditorBackground#131621
  • welcomePage.buttonBackground#131621
  • welcomePage.buttonHoverBackground#131621

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#c5e478ff
Global settings#C3C7C5
comment#969996
string#ecc48d
string.unquoted.asciidoc#80A1BD
variable.other#CC6666
constant.numeric#DE935F
punctuation.separator.parameters#C3C7C5
string.quoted#B5BD68
support.constant.elm#cf9f00
punctuation.definition.list.markdown#ecc48d
punctuation.section.embedded.begin#8ABDB7
keyword.operator.ternary#8ABDB7
variable.parameter.function.language.special.self.python#80A1BD
keyword.operator.logical.js#8ABDB7
punctuation.section.embedded.begin#8ABDB7
keyword.operator.arithmetic#7C5E99
token.error-token.ps#C3C7C5
invalid.illegal.non-null-typehinted.php.ps#8ABDB7
support.constant.math#c5e478
constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#c5e478
punctuation.accessor, keyword#c792ea
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#c792ea
storage.type#c792ea
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffcb8b
entity.other.inherited-class#c5e478
entity.name.function#c792ea
punctuation.definition.tag, meta.tag#7fdbca
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#caece6
entity.other.attribute-name#c5e478
entity.name.tag.custom#c5e478
support.function, support.constant#82AAFF
support.constant.meta.property-value#7fdbca
support.type, support.class#c5e478
support.variable.dom#c5e478
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#7fdbca
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
keyword.operator.bitwise#c792ea
keyword.operator.increment#c792ea
comment.line.double-slash#637777
object#cdebf7
constant.language.null#ff5874
meta.brace#C3C7C5
meta.delimiter.period#c792ea
punctuation.definition.string#d9f5dd
token.package#C3C7C5
punctuation.definition.string.begin.markdown#ff5874
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#7fdbca
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#c792ea
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#c792ea
punctuation.definition.parameters#d9f5dd
keyword.control.operator#7fdbca
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca
variable.other.object.property#faf39f
variable.other.object.js
entity.name.function#82AAFF
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#c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#7fdbca
support.function#c5e478
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#C3C7C5
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#C3C7C5
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#C3C7C5
italic#c792eaitalic
bold#c5e478bold
quote#697098
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#C3C7C5
variable.assignment.coffee#7fdbca
variable.other.readwrite.cs#C3C7C5
entity.name.type.class.cs, storage.type.cs#ffcb8b
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#C3C7C5
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffcb8bbold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#c5e478
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#ff6363
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#c5e478
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#c5e478
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#c5e478
source.elixir .punctuation.binary.elixir#c792ea
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#C3C7C5
variable.parameter#ffcb8b
variable.other.readwrite.powershell#82AAFF
support.function.powershell#7fdbcaff
entity.other.attribute-name.id.html#c5e478
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#c792ea
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#82AAFF
terminator.js#C3C7C5
meta.js punctuation.definition.js#C3C7C5
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#C3C7C5
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#C3C7C5
variable.js, variable.other.js#C3C7C5
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#C3C7C5
support.type.property-name.json#e06c75
support.constant.json#c5e478
meta.structure.dictionary.value.json string.quoted.double#77A366
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#C3C7C5
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#c5e478bold
markup.quote.markdown#697098
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#C3C7C5
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#c5e478
variable.other.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#C3C7C5
variable.other.global.php#c5e478
variable.other.global.php punctuation.definition.variable#c5e478
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#C3C7C5
entity.name.function.decorator.python#c5e478
source.python variable.language.special#8EACE3
keyword.control#c792ea
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#c5e478
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#C3C7C5
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#C3C7C5
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#f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#C3C7C5
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.quoted

Shiki preview

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

Loading...

Pine Editor Themes - Coding Theme