Skip to main content
CodingTheme

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#151720
  • activityBar.border#282C3D
  • activityBar.dropBackground#7e57c2e3
  • activityBar.foreground#eeffff
  • activityBarBadge.background#7e57c2
  • activityBarBadge.foreground#ffffff
  • badge.background#7e57c2
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#eeffff
  • breadcrumb.focusForeground#bfc7d5
  • breadcrumb.foreground#E6EDF3
  • breadcrumbPicker.background#212432
  • button.background#151720
  • button.foreground#ffffcc
  • button.hoverBackground#7e57c2
  • contrastBorder#282B3C
  • debugExceptionWidget.background#212432
  • debugExceptionWidget.border#7e57c2
  • debugToolBar.background#212432
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.removedTextBackground#ef535033
  • dropdown.background#212432
  • dropdown.border#7e57c2
  • dropdown.foreground#ffffffcc
  • editor.background#151720
  • editor.findMatchBackground#2e3248fc
  • editor.findMatchHighlightBackground#7e57c233
  • editor.foreground#E6EDF3
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#7580B850
  • editor.selectionHighlightBackground#383D51
  • editor.wordHighlightBackground#32374D
  • editor.wordHighlightStrongBackground#2E3250
  • editorActiveLineNumber.foreground#eeffff
  • editorCodeLens.foreground#FFCA28
  • editorCursor.foreground#7e57c2
  • editorError.foreground#ffffcc
  • editorGroup.background#151720
  • editorGroup.border#2E3245
  • editorGroup.dropBackground#7e57c273
  • editorGroupHeader.noTabsBackground#32374C
  • editorGroupHeader.tabsBackground#212432
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#9CCC65
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#212432
  • editorHoverWidget.border#7e57c2
  • editorIndentGuide.background#4E557980
  • editorLineNumber.activeForeground#eeffff
  • editorLineNumber.foreground#4c5374
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#4E557980
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#bfc7d5
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#7e57c2
  • editorWarning.foreground#FFCA28
  • editorWidget.background#31364a
  • errorForeground#EF5350
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#282B3C
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#FFEB95CC
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#e2c08de6
  • gitDecoration.untrackedResourceForeground#a9c77dff
  • input.background#1e2029
  • input.border#1e2029
  • input.foreground#ffffffcc
  • input.placeholderForeground#ffffffcc
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#ef5350f2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#64b5f6f2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#ffca28f2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#7e57c2
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2E3245
  • list.focusBackground#0000002e
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#0000001a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#929ac90d
  • list.inactiveSelectionForeground#929ac9
  • merge.currentHeaderBackground#7e57c25a
  • merge.incomingHeaderBackground#7e57c25a
  • notificationLink.foreground#80CBC4
  • notifications.background#212432
  • notifications.foreground#ffffffcc
  • panel.background#151720
  • panel.border#282B3C
  • panelTitle.activeBorder#7e57c2
  • panelTitle.activeForeground#eeffff
  • panelTitle.inactiveForeground#bfc7d580
  • peekView.border#7e57c2
  • peekViewEditor.background#232635
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#2E3245
  • peekViewResult.fileForeground#eeffff
  • peekViewResult.lineForeground#eeffff
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#eeffff
  • peekViewTitle.background#212432
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#eeffff
  • pickerGroup.border#2E3245
  • pickerGroup.foreground#d1aaff
  • progress.background#7e57c2
  • scrollbar.shadow#292D3E00
  • scrollbarSlider.activeBackground#694CA4cc
  • scrollbarSlider.background#694CA466
  • scrollbarSlider.hoverBackground#694CA4cc
  • selection.background#7580B850
  • sideBar.background#212432
  • sideBar.border#282B3C
  • sideBar.foreground#E6EDF3
  • sideBarSectionHeader.background#212432
  • sideBarSectionHeader.foreground#eeffff
  • sideBarTitle.foreground#eeffff
  • statusBar.background#151720
  • statusBar.border#262A39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#E6EDF3
  • statusBar.noFolderBackground#212432
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#212432
  • tab.activeBorder#262A39
  • tab.activeForeground#eeffff
  • tab.border#272B3B
  • tab.inactiveBackground#31364A
  • tab.inactiveForeground#929ac9
  • tab.unfocusedActiveBorder#262A39
  • terminal.ansiBlack#676E95
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#676E95
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#23d18c
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#ff718a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#a9c77d
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#ff718a
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminal.background#151720
  • terminal.foreground#d6deeb
  • titleBar.activeBackground#151720
  • titleBar.activeForeground#eeefff
  • titleBar.border#34373c
  • titleBar.inactiveBackground#30364c
  • walkThrough.embeddedEditorBackground#232635
  • widget.shadow#232635

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#bfc7d5
comment#a4a7b3italic
string#C3E88D
string.quoted#C3E88D
string.unquoted#bfc7d5
text.html string#C3E88D
support.constant.math#ffcb6b
constant.numeric, constant.character.numeric, support.constant#cbcebc
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
keyword.type#bfc7d5
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#80CBC4
meta.function punctuation.separator.comma#eeffff
variable#FF718A
punctuation.accessor, keyword#c792ea
support.class.component, variable.function.constructor#00cecb
variable.other.readwrite.alias#DCE3EE
storage, storage.type, storage.type.primitive, meta.method.declaration storage.type.js, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea
entity.name.class, meta.class entity.name.type.class#ffcb6b
entity.other.inherited-class#f49e4c
entity.name.function#23d18c
variable.parameter#DCE3EE
punctuation.definition.tag, meta.tag#89DDFF
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#FF718A
entity.other.attribute-name#ffcb6b
entity.name.tag.custom#ffcb6b
support.function, support.constant#82AAFF
support.constant.meta.property-value#89DDFF
support.class#ffcb6b
support.type, support.class#00cecb
support.variable.dom#ffcb6b
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#FF718A
keyword.operator.relational#c792ea
keyword.operator.new#FF718A
keyword.operator.assignment#c792ea
comment.line.double-slash#a4a7b3
object#cdebf7
constant.language.null#FF718A
meta.brace#bfc7d5
meta.delimiter.period#c792ea
punctuation.definition.string#d9f5dd
constant.language.boolean#FF718A
object.comma#ffffff
variable.parameter.function#89DDFF
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#ff718a
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#DCE3EE
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#c792eaitalic
punctuation.definition.parameters#d9f5dd
keyword.control.operator#89DDFF
keyword.control.loop#f49e4c
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#FF718A
variable.other.property#00cecb
variable.other.object.property#faf39f
keyword.operator.comparison#c792ea
support.constant, keyword.other.special-method, keyword.other.new#89DDFF
support.function#89DDFF
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#00cecb
variable.language#FF718A
support.variable.property#89DDFF
variable.function#23d18c
variable.interpolation#ec5f67
meta.function-call#23d18c
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#bfc7d5
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template punctuation.definition.string#bfc7d5
italic#c792eaitalic
bold#ffcb6bbold
quote#697098italic
raw#80CBC4
variable.assignment.coffee#89DDFF
variable.parameter.function.coffee#bfc7d5
variable.assignment.coffee#89DDFF
variable.other.readwrite.cs#bfc7d5
entity.name.type.class.cs, storage.type.cs#82AAFF
variable.other.object.cs#B2CCD6
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ff718a
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ff718a
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma#bfc7d5
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#ffcb6b
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#a9c77d
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#ffcb6b
source.elixir .punctuation.binary.elixir#c792ea
source.go meta.function-call.go#DDDDDD
variable.qraphql#bfc7d5
entity.other.attribute-name.id.html#ffcb6b
punctuation.definition.tag.html#89DDFF
meta.tag.sgml.doctype.html#c792eaitalic
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#82AAFFnormal
terminator.js#bfc7d5
meta.js punctuation.definition.js#bfc7d5
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#eeffff
variable.other.jsdoc, variable.other.phpdoc#78ccf0
variable.other.meta.import.js, meta.import.js variable.other#DCE3EE
variable.other.meta.export.js, meta.export.js variable.other#DCE3EE
keyword.control.as, keyword.control.at-rule, keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.export, keyword.control.import#c792ea
variable.graphql#DCE3EE
variable.parameter.function.js#7986E7
variable.other.readwrite.js#ffcb8b
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#bfc7d5
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx#bfc7d5
variable.js, variable.other.js#bfc7d5
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#bfc7d5
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#c792ea
support.type.property-name.json#C3E88Dnormal
support.constant.json#ffcb6b
meta.structure.dictionary.value.json string.quoted.double#80CBC4normal
string.quoted.double.json punctuation.definition.string.json#80CBC4normal
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#FF718A
variable.other.ruby#bfc7d5
constant.language.symbol.hashkey.ruby#89DDFF
entity.name.tag.less#ff718a
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading#ffe066
markup.italic#c792eaitalic
markup.bold#ffcb6bbold
markup.quote#697098italic
markup.inline.raw#80CBC4
markup.underline.link, markup.underline.link.image#8be9fd
markup.meta.attribute-list#a9c77d
markup.admonitionbold
markup.list.bullet#D9F5DD
markup.superscript, markup.subscriptitalic
string.other.link.description.markdown#bfc7d5
string.other.link.title.markdown, string.other.link#00cecb
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#ff718a
beginning.punctuation.definition.list.markdown#82b1ff
entity.name.function.asciidoc#F78C6C
variable.other.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#bfc7d5
variable.other.global.php#ffcb6b
variable.other.global.php punctuation.definition.variable#ffcb6b
constant.language.python#FF718A
variable.parameter.function.python, meta.function-call.arguments.python#7986E7
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#bfc7d5
entity.name.function.decorator.python#ffcb6b
source.python variable.language.special#8EACE3
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#DDDDDD
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#ff718a
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#DCE3EE
entity.name.type.ts, entity.name.type.tsx#78ccf0
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#eeffff
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#bfc7d5
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
entity.name.tag.yaml#89DDFF
variable.parameter.handlebars#bec5d4
entity.other.attribute-name.handlebars variable.parameter.handlebars#ffcb6b
entity.other.attribute-name.handlebars#89DDFF
entity.other.attribute-value.handlebars variable.parameter.handlebars#7986E7
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuationnormal

Shiki preview

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

Loading...

Luminescence Theme by andreluis-oliveira - VS Code Theme