Skip to main content
Coding Theme

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#161B27
  • activityBar.border#161B27
  • activityBar.foreground#bec6da
  • activityBarBadge.background#BEC6DA
  • activityBarBadge.foreground#161B27
  • badge.background#BEC6DA
  • badge.foreground#161B27
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#A599E9
  • breadcrumbPicker.background#001122
  • button.background#7e57c2cc
  • button.foreground#ffffffcc
  • button.hoverBackground#7e57c2
  • contrastBorder#122d42
  • debugExceptionWidget.background#161B27
  • debugExceptionWidget.border#5f7e97
  • debugToolBar.background#161B27
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#f6eb9d33
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • dropdown.background#161B27
  • dropdown.border#5f7e97
  • dropdown.foreground#ffffffcc
  • editor.background#161B27
  • editor.findMatchBackground#5f7e9779
  • editor.findMatchHighlightBackground#1085bb5d
  • editor.foreground#c2c2d1
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#1d3b53
  • editor.selectionHighlightBackground#5f7e9779
  • editor.wordHighlightBackground#f6bbe533
  • editor.wordHighlightStrongBackground#e2a2f433
  • editorBracketMatch.background#5f7e974d
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#80a4c2
  • editorError.foreground#EF5350
  • editorGroup.border#161B27
  • editorGroup.dropBackground#7e57c273
  • editorGroup.emptyBackground#161B27
  • editorGroupHeader.border#161B27
  • editorGroupHeader.noTabsBackground#161B27
  • editorGroupHeader.tabsBackground#161B27
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#9CCC65
  • editorGutter.background#161B27
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#161B27
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#bec6daa1
  • editorIndentGuide.background#bec6da26
  • editorLineNumber.activeForeground#C5E4FD
  • editorLineNumber.foreground#4b6479
  • editorMarkerNavigation.background#0b2942
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#5e81ce52
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#c2c2d1
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#b39554
  • editorWidget.background#021320
  • editorWidget.border#5f7e97
  • errorForeground#EF5350
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#122d42
  • foreground#c2c2d1
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#a2bffc
  • gitDecoration.untrackedResourceForeground#f6eb9dff
  • input.background#161B27
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#AB0300F2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#252d41
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#161B27
  • list.focusBackground#010d18
  • list.focusForeground#f5f5f5
  • list.highlightForeground#ffffff
  • list.hoverBackground#161B27
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#252d41
  • list.inactiveSelectionForeground#93a7b8
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#5f7e97
  • merge.incomingHeaderBackground#7e57c25a
  • meta.objectliteral.js#f385fc
  • notificationCenter.border#262a39
  • notificationLink.foreground#80CBC4
  • notifications.background#01111d
  • notifications.border#262a39
  • notifications.foreground#ffffffcc
  • notificationToast.border#262a39
  • panel.background#0F121A
  • panel.border#5f7e97
  • panelTitle.activeBorder#BEC6DA
  • panelTitle.activeForeground#BEC6DA
  • panelTitle.inactiveForeground#c2c2d167
  • peekView.border#5f7e97
  • peekViewEditor.background#161B27
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#161B27
  • peekViewResult.fileForeground#5f7e97
  • peekViewResult.lineForeground#5f7e97
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#5f7e97
  • peekViewTitle.background#161B27
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#5f7e97
  • pickerGroup.border#161B27
  • pickerGroup.foreground#d1aaff
  • progressBar.background#7e57c2
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#252C41
  • scrollbarSlider.background#252C41
  • scrollbarSlider.hoverBackground#252C41
  • selection.background#4373c2
  • sideBar.background#0F121A
  • sideBar.border#161B27
  • sideBar.foreground#89a4bb
  • sideBarSectionHeader.background#161B27
  • sideBarSectionHeader.foreground#a2a9bb
  • sideBarTitle.foreground#5f7e97
  • source.elm#5f7e97
  • statusBar.background#161B27
  • statusBar.border#262A39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#d6d6d6
  • statusBar.noFolderBackground#161B27
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • statusBarItem.remoteBackground#BEC6DA
  • statusBarItem.remoteForeground#161B27
  • string.quoted.single.js#ffffff
  • tab.activeBackground#2D354E
  • tab.activeBorder#161B27
  • tab.activeForeground#F2F4F8
  • tab.border#272B3B
  • tab.inactiveBackground#161B27
  • tab.inactiveForeground#f2f4f8b7
  • tab.unfocusedActiveBorder#161B27
  • tab.unfocusedActiveForeground#5f7e97
  • tab.unfocusedInactiveForeground#5f7e97
  • terminal.ansiBlack#161B27
  • terminal.ansiBlue#f385fc
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#f385fc
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#00d1ff
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#00d1ff
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#f6eb9d
  • terminal.selectionBackground#1b90dd4d
  • terminalCursor.background#234d70
  • textCodeBlock.background#4f4f4f
  • titleBar.activeBackground#161B27
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#161B27
  • walkThrough.embeddedEditorBackground#161B27
  • welcomePage.buttonBackground#161B27
  • welcomePage.buttonHoverBackground#161B27
  • widget.shadow#161B27

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#f6eb9dff
Global settings#c2c2d1
comment#a65959
string#96f7d2
string.quoted, variable.other.readwrite.js#96f7d2
support.constant.math#f6eb9d
constant.numeric, constant.character.numeric#fec892
constant.language, punctuation.definition.constant, variable.other.constant#f385fc
constant.character, constant.other#f385fc
constant.character.escape#fec892
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#f6eb9d
punctuation.accessor, keyword#00d1ff
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#00d1ff
storage.type#00d1ff
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffcb8b
entity.other.inherited-class#f6eb9d
entity.name.function#00d1ff
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#f6eb9d
entity.name.tag.custom#f6eb9d
support.function, support.constant#f385fc
support.constant.meta.property-value#7fdbca
support.type, support.class#f6eb9d
support.variable.dom#f6eb9d
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#7fdbca
keyword.operator.relational#00d1ff
keyword.operator.assignment#00d1ff
keyword.operator.arithmetic#00d1ff
keyword.operator.bitwise#00d1ff
keyword.operator.increment#00d1ff
keyword.operator.ternary#00d1ff
comment.line.double-slash#637777
object#cdebf7
constant.language.null#ffb3b3
meta.brace#c2c2d1
meta.delimiter.period#00d1ff
punctuation.definition.string#d9f5dd
punctuation.definition.string.begin.markdown#ffb3b3
constant.language.boolean#ffb3b3
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#fec892
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#00d1ff
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#00d1ff
punctuation.definition.parameters#d9f5dd
keyword.control.operator#7fdbca
keyword.operator.logical#00d1ff
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#f385fc
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#00d1ff
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#7fdbca
support.function#f6eb9d
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#7fdbca
support.variable.property#7fdbca
variable.function#f385fc
variable.interpolation#ec5f67
meta.function-call#f385fc
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#c2c2d1
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#c2c2d1
italic#00d1ffitalic
bold#f6eb9dbold
quote#697098
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#c2c2d1
variable.assignment.coffee#7fdbca
variable.other.readwrite.cs#c2c2d1
entity.name.type.class.cs, storage.type.cs#ffcb8b
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#c2c2d1
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffcb8bbold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#f6eb9d
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#fec892
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#f385fc
source.elixir entity.name.function#f6eb9d
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#f385fc
source.elixir punctuation.definition.string#f6eb9d
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#f6eb9d
source.elixir .punctuation.binary.elixir#00d1ff
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#00d1ff
source.go constant.language.go, source.go constant.other.placeholder.go#ffb3b3
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7fdbcaff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ffb3b3
meta.preprocessor.macro.cpp#c2c2d1
variable.parameter#ffcb8b
variable.other.readwrite.powershell#f385fc
support.function.powershell#7fdbcaff
entity.other.attribute-name.id.html#f6eb9d
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#00d1ff
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#f385fc
terminator.js#c2c2d1
meta.js punctuation.definition.js#c2c2d1
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#c2c2d1
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#c2c2d1
variable.js, variable.other.js#c2c2d1
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#c2c2d1
support.type.property-name.json#7fdbca
support.constant.json#f6eb9d
meta.structure.dictionary.value.json string.quoted.double#c789d6
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ffb3b3
variable.other.object.js#7fdbca
variable.other.ruby#c2c2d1
entity.name.type.class.ruby#96f7d2
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#fec892
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#00d1ffitalic
markup.bold.markdown#f6eb9dbold
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#c2c2d1
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#f6eb9d
variable.other.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#c2c2d1
variable.other.global.php#f6eb9d
variable.other.global.php punctuation.definition.variable#f6eb9d
constant.language.python#ffb3b3
variable.parameter.function.python, meta.function-call.arguments.python#f385fc
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#c2c2d1
entity.name.function.decorator.python#f6eb9d
source.python variable.language.special#8EACE3
keyword.control#00d1ff
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#f6eb9d
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#f385fc
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#fec892
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#c2c2d1
entity.name.type.ts, entity.name.type.tsx#ffcb8b
support.class.node.ts, support.class.node.tsx#f385fc
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#c2c2d1
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#f385fc
meta.tag.js meta.jsx.children.tsx#f385fc
entity.name.tag.yaml#7fdbca
variable.other.readwrite.js, variable.parameter#d7dbe0
support.class.component.js, support.class.component.tsx#fec892
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#c2c2d1
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#00d1ff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#f385fc
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...

Eternals - Coding Theme