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#131214
  • activityBar.border#2B2433
  • activityBar.dropBackground#131214
  • activityBar.foreground#E0E2E0
  • activityBarBadge.background#2B2433
  • activityBarBadge.foreground#F5F0E1
  • badge.background#2B2433
  • badge.foreground#E0E2E0
  • breadcrumb.activeSelectionForeground#F4F3F3
  • breadcrumb.focusForeground#F4F3F3
  • breadcrumb.foreground#F5F0E1
  • breadcrumbPicker.background#131214
  • button.background#2B2433
  • button.foreground#F5F0E1
  • button.hoverBackground#303137
  • contrastBorder#303137
  • debugExceptionWidget.background#131214
  • debugExceptionWidget.border#E0E2E0
  • debugToolBar.background#131214
  • diffEditor.insertedTextBackground#4E415F23
  • diffEditor.insertedTextBorder#00C9A833
  • diffEditor.removedTextBackground#49314033
  • diffEditor.removedTextBorder#C44F694d
  • dropdown.background#2B2433
  • dropdown.border#303137
  • dropdown.foreground#E0E2E0
  • editor.background#131214
  • editor.findMatchBackground#686667
  • editor.findMatchHighlightBackground#303137
  • editor.foreground#F4F3F3
  • editor.hoverHighlightBackground#303137
  • editor.inactiveSelectionBackground#303137
  • editor.lineHighlightBackground#2B2433
  • editor.lineHighlightBorder#2B2433
  • editor.rangeHighlightBackground#F5F0E1
  • editor.selectionBackground#303137
  • editor.selectionHighlightBackground#303137
  • editor.wordHighlightBackground#222222
  • editor.wordHighlightStrongBackground#303137
  • editorBracketMatch.background#303137
  • editorBracketMatch.border#303137
  • editorCodeLens.foreground#2B2433
  • editorCursor.foreground#E0E2E0
  • editorError.foreground#C44F69
  • editorGroup.border#2B2433
  • editorGroup.dropBackground#131214
  • editorGroup.emptyBackground#131214
  • editorGroupHeader.noTabsBackground#131214
  • editorGroupHeader.tabsBackground#131214
  • editorGroupHeader.tabsBorder#2B2433
  • editorGutter.addedBackground#00C9A8
  • editorGutter.background#131214
  • editorGutter.deletedBackground#C44F69
  • editorGutter.modifiedBackground#F4B360
  • editorHoverWidget.background#131214
  • editorHoverWidget.border#E0E2E0
  • editorIndentGuide.activeBackground#686667
  • editorIndentGuide.background#303137
  • editorLineNumber.activeForeground#686667
  • editorLineNumber.foreground#686667
  • editorMarkerNavigation.background#2B2433
  • editorMarkerNavigationError.background#C44F69
  • editorMarkerNavigationWarning.background#F4B360
  • editorOverviewRuler.commonContentForeground#F5F0E1
  • editorOverviewRuler.currentContentForeground#F5F0E1
  • editorOverviewRuler.incomingContentForeground#F5F0E1
  • editorRuler.foreground#2B2433
  • editorSuggestWidget.background#131214
  • editorSuggestWidget.border#2B2433
  • editorSuggestWidget.foreground#E0E2E0
  • editorSuggestWidget.highlightForeground#F4F3F3
  • editorSuggestWidget.selectedBackground#2B2433
  • editorWarning.foreground#B39554
  • editorWidget.background#131214
  • editorWidget.border#E0E2E0
  • errorForeground#C44F69
  • extensionButton.prominentBackground#2B2433
  • extensionButton.prominentForeground#F4F3F3
  • extensionButton.prominentHoverBackground#4E415F
  • focusBorder#303137
  • foreground#E0E2E0
  • gitDecoration.conflictingResourceForeground#F9F871CC
  • gitDecoration.deletedResourceForeground#C44F6966
  • gitDecoration.ignoredResourceForeground#686667
  • gitDecoration.modifiedResourceForeground#B5A5C7CC
  • gitDecoration.untrackedResourceForeground#00C9A8CC
  • input.background#2B2433
  • input.border#303137
  • input.foreground#F4F3F3
  • input.placeholderForeground#F5F0E1
  • inputOption.activeBorder#303137
  • inputValidation.errorBackground#A93753F2
  • inputValidation.errorBorder#C44F69
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#00C0FF
  • inputValidation.warningBackground#F4B360
  • inputValidation.warningBorder#F9F871
  • list.activeSelectionBackground#4E415F
  • list.activeSelectionForeground#F4F3F3
  • list.dropBackground#131214
  • list.focusBackground#2B2433
  • list.focusForeground#F4F3F3
  • list.highlightForeground#F4F3F3
  • list.hoverBackground#303137
  • list.hoverForeground#F4F3F3
  • list.inactiveSelectionBackground#2B2433
  • list.inactiveSelectionForeground#E0E2E0
  • list.invalidItemForeground#686667
  • merge.currentHeaderBackground#E0E2E0
  • merge.incomingHeaderBackground#F5F0E1
  • minimap.findMatchHighlight#686667
  • minimap.selectionHighlight#2B2433
  • notificationCenter.border#2B2433
  • notificationLink.foreground#80CBC4
  • notifications.background#131214
  • notifications.border#2B2433
  • notifications.foreground#F4F3F3cc
  • notificationToast.border#2B2433
  • panel.background#131214
  • panel.border#2B2433
  • panelTitle.activeBorder#E0E2E0
  • panelTitle.activeForeground#F4F3F3cc
  • panelTitle.inactiveForeground#686667
  • peekView.border#E0E2E0
  • peekViewEditor.background#131214
  • peekViewEditor.matchHighlightBackground#F5F0E1
  • peekViewResult.background#131214
  • peekViewResult.fileForeground#E0E2E0
  • peekViewResult.lineForeground#E0E2E0
  • peekViewResult.matchHighlightBackground#F4F3F3cc
  • peekViewResult.selectionBackground#2B2433
  • peekViewResult.selectionForeground#E0E2E0
  • peekViewTitle.background#131214
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#E0E2E0
  • pickerGroup.border#131214
  • pickerGroup.foreground#B5A5C7
  • scrollbar.shadow#2B2433
  • scrollbarSlider.activeBackground#2B2433
  • scrollbarSlider.background#303137
  • scrollbarSlider.hoverBackground#2B2433
  • selection.background#B5A5C7
  • sideBar.background#131214
  • sideBar.border#2B2433
  • sideBar.foreground#E0E2E0
  • sideBarSectionHeader.background#131214
  • sideBarSectionHeader.foreground#E0E2E0
  • sideBarTitle.foreground#E0E2E0
  • statusBar.background#131214
  • statusBar.border#2B2433
  • statusBar.debuggingBackground#131214
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#E0E2E0
  • statusBar.noFolderBackground#131214
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#131214
  • statusBarItem.hoverBackground#131214
  • statusBarItem.prominentBackground#131214
  • statusBarItem.prominentHoverBackground#131214
  • tab.activeBackground#303137
  • tab.activeBorder#2B2433
  • tab.activeForeground#E0E2E0
  • tab.border#2B2433
  • tab.inactiveBackground#131214
  • tab.inactiveForeground#E0E2E0
  • tab.unfocusedActiveBorder#2B2433
  • tab.unfocusedActiveForeground#E0E2E0
  • tab.unfocusedInactiveForeground#E0E2E0
  • terminal.ansiBlack#131214
  • terminal.ansiBlue#388DAB
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#00C0FF
  • terminal.ansiBrightCyan#8BECD9
  • terminal.ansiBrightGreen#00C9A8
  • terminal.ansiBrightMagenta#B5A5C7
  • terminal.ansiBrightRed#C44F69
  • terminal.ansiBrightWhite#F4F3F3
  • terminal.ansiBrightYellow#F9F871
  • terminal.ansiCyan#A3CFC6
  • terminal.ansiGreen#00C9A8
  • terminal.ansiMagenta#B5A5C7
  • terminal.ansiRed#C44F69
  • terminal.ansiWhite#F4F3F3
  • terminal.ansiYellow#dbdb60
  • terminal.selectionBackground#3333334d
  • terminalCursor.foreground#686667
  • titleBar.activeBackground#131214
  • titleBar.activeForeground#F4F3F3
  • titleBar.inactiveBackground#010E1A
  • walkThrough.embeddedEditorBackground#131214
  • welcomePage.buttonBackground#131214
  • welcomePage.buttonHoverBackground#131214
  • widget.shadow#2B2433

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#B5A5C7
markup.deleted.diff#C44F6990italic
markup.inserted.diff#00C9A8italic
comment, comment.line.double-slash#686667italic
string#F4F3F3
string.quoted, variable.other.readwrite.js#D5D3D4
support.constant.math#00C9A8
constant.numeric, constant.character.numeric#FF859C
constant.language, punctuation.definition.constant, variable.other.constant#BDC2D7
constant.character, constant.other#FF859C
constant.character.escape#A77CE4
string.regexp, string.regexp keyword.other#A77CE4
meta.function punctuation.separator.comma#686667
variable#BDC2D7
punctuation.accessor, keyword#B5A5C7
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#B5A5C7
storage.type, storage.type.function.arrow.js#B5A5C7
entity.name.class, meta.class entity.name.type.class#BDC2D7
entity.other.inherited-class#D5D3D4
entity.name.function#B5A5C7
punctuation.definition.tag, meta.tag#B5A5C7
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#B5A5C7
entity.other.attribute-name#ADABAC
entity.name.tag.custom#A3CFC6
support.function, support.constant#388DAB
support.constant.meta.property-value#B5A5C7
support.type, support.class#B5A5C7
support.variable.dom#B5A5C7
invalid#F4F3F3
invalid.deprecated#F4F3F3
keyword.operator, keyword.operator.relational, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary#B5A5C7
object#CAC9CB
constant.language.null#686667
meta.brace#D5D3D4
meta.delimiter.period#B5A5C7
punctuation.definition.string#D5D3D4
punctuation.definition.string.begin.markdown#FF859C
constant.language.boolean#FF859C
object.comma#F4F3F3
variable.parameter.function#E0E2E0
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#BDC2D7
meta.property-list entity.name.tag.reference#BDC2D7
constant.other.color.rgb-value punctuation.definition.constant#E0E2E0
constant.other.color#F4F3F2
keyword.other.unit#F4F3F2
meta.selector#B5A5C7
entity.other.attribute-name.id#B5A5C7
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#B5A5C7
punctuation.definition.parameters#BDC2D7
keyword.control.operator#B5A5C7
keyword.operator.logical#B5A5C7
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#E0E2E0
variable.other.object.property#BDC2D7
variable.other.object.js
entity.name.function#D4DEED
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#B5A5C7
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#B5A5C7
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#BDC2D7
support.function#B5A5C7
invalid.broken#020e14
invalid.unimplemented#F4F3F3
invalid.illegal#F4F3F3
variable.language#B5A5C7
support.variable.property#B5A5C7
variable.function#388DAB
variable.interpolation#FF859C
meta.function-call#388DAB
punctuation.section.embedded#B5A5C7
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list, meta.array#E0E2E0
string.template meta.template.expression#B5A5C7
string.template punctuation.definition.string#BDC2D7
italic#B5A5C7italic
bold#B5A5C7bold
quote#989697italic
raw#989697
variable.assignment.coffee#A3CFC6
variable.parameter.function.coffee#D5D3D4
variable.assignment.coffee#FF859C
variable.other.readwrite.cs#D5D3D4
entity.name.type.class.cs, storage.type.cs#388DAB
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#B5A5C7
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#B5A5C7
keyword.other.unit.css#B5A5C7
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#BDC2D7
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#388DAB
source.elixir entity.name.function#A3CFC6
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#388DAB
source.elixir punctuation.definition.string#A3CFC6
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#A3CFC6
source.elixir .punctuation.binary.elixir#B5A5C7
constant.keyword.clojure#f04
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#B5A5C7
source.go constant.language.go, source.go constant.other.placeholder.go#FF859C
variable.other.readwrite.powershell#388DAB
support.function.powershell#B5A5C7
entity.other.attribute-name.id.html#A3CFC6
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#B5A5C7
meta.class entity.name.type.class.js#BDC2D7
meta.method.declaration storage.type.js#BDC2D7
terminator.js#D5D3D4
meta.js punctuation.definition.js#D5D3D4
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#B5A5C7
variable.other.jsdoc, variable.other.phpdoc#BDC2D7
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#D5D3D4
variable.parameter.function.js#B5A5C7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#D5D3D4
variable.js, variable.other.js#D5D3D4
entity.name.type.js, entity.name.type.module.js#BDC2D7
support.class.js#D5D3D4
support.type.property-name.json#B5A5C7
support.constant.json#D5D3D4
meta.structure.dictionary.value.json string.quoted.double#E0E2E0
string.quoted.double.json punctuation.definition.string.json#E0E2E0
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#FF859C
variable.other.object.js#B5A5C7
variable.other.ruby#D5D3D4
entity.name.type.class.ruby#F4B360
constant.language.symbol.hashkey.ruby#FF859C
constant.language.symbol.ruby#B5A5C7
entity.name.tag.less#B5A5C7
keyword.other.unit.css#B5A5C7
meta.attribute-selector.less entity.other.attribute-name.attribute#F4F3F2
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#B5A5C7
markup.italic.markdown#B5A5C7italic
markup.bold.markdown#ADABACbold
markup.quote.markdown#989697italic
markup.inline.raw.markdown#ADABAC
markup.underline.link.markdown, markup.underline.link.image.markdown#FF859C
string.other.link.title.markdown, string.other.link.description.markdown#D5D3D4
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#B5A5C7
punctuation.definition.metadata.markdown#FF859C
beginning.punctuation.definition.list.markdown#B5A5C7
markup.inline.raw.string.markdown#ADABAC
variable.other.php, variable.other.property.php#CAC9CB
support.class.php#F4B360
meta.function-call.php punctuation#D5D3D4
variable.other.global.php#A3CFC6
variable.other.global.php punctuation.definition.variable#ADABAC
constant.language.python#FF859C
variable.parameter.function.python, meta.function-call.arguments.python#388DAB
meta.function-call.python, meta.function-call.generic.python#CAC9CB
punctuation.python#D5D3D4
entity.name.function.decorator.python#ADABAC
source.python variable.language.special#A3CFC6
keyword.control#B5A5C7
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#E0E2E0
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#B5A5C7
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#BDC2D7
entity.name.tag.scss, entity.name.tag.sass#B5A5C7
keyword.other.unit.scss, keyword.other.unit.sass#BDC2D7
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#D5D3D4
entity.name.type.ts, entity.name.type.tsx#BDC2D7
support.class.node.ts, support.class.node.tsx#BDC2D7
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#BDC2D7
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#D5D3D4
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#388DAB
meta.tag.js meta.jsx.children.tsx#388DAB
entity.name.tag.yaml#BDC2D7
variable.other.readwrite.js, variable.parameter#d7dbe0
support.class.component.js, support.class.component.tsx#BDC2D7
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#D5D3D4
meta.class entity.name.type.class.tsx#BDC2D7
entity.name.type.tsx, entity.name.type.module.tsx#BDC2D7
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#BDC2D7
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.definition.string, punctuation, variable.other.readwrite.js, storage.type, string.quoted

Shiki preview

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

Loading...

Nevermore Theme - Coding Theme