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.activeBackground#141820
  • activityBar.activeBorder#457dff
  • activityBar.background#141820
  • activityBar.border#141820
  • activityBar.dropBackground#82aaff53
  • activityBar.foreground#a8b5d1
  • activityBar.inactiveForeground#a8b5d166
  • activityBarBadge.background#457dff
  • activityBarBadge.foreground#c5cee0
  • badge.background#457dff
  • badge.foreground#c5cee0
  • button.background#82aaffcc
  • button.foreground#f8fafdcc
  • button.hoverBackground#457dff
  • debugExceptionWidget.background#141820
  • debugExceptionWidget.border#a8b5d1
  • debugToolBar.background#141820
  • diffEditor.insertedTextBackground#6af69911
  • diffEditor.insertedTextBorder#ffffff00
  • diffEditor.removedTextBackground#ff597422
  • diffEditor.removedTextBorder#ffffff00
  • dropdown.background#181d27
  • dropdown.border#181d27
  • dropdown.foreground#f8fafdcc
  • editor.background#1d232f
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#82aaff22
  • editor.findRangeHighlightBackground#82aaff22
  • editor.foreground#a8b5d1
  • editor.hoverHighlightBackground#82aaff22
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#ffffff09
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#82aaff22
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#82aaff22
  • editor.selectionHighlightBorder#ffffff09
  • editor.snippetTabstopHighlightBackground#82aaff22
  • editor.snippetTabstopHighlightBorder#82aaff22
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightBorder#506686
  • editor.wordHighlightStrongBackground#a8b5d126
  • editor.wordHighlightStrongBorder#506686
  • editorBracketMatch.background#515a6b66
  • editorBracketMatch.border#ffffff00
  • editorCodeLens.foreground#528bffb4
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.border#ffffff00
  • editorError.foreground#f7768e
  • editorGroup.border#181a1f
  • editorGroup.dropBackground#82aaff53
  • editorGroup.emptyBackground#1d232f
  • editorGroupHeader.noTabsBackground#181a1f
  • editorGroupHeader.tabsBackground#171c26
  • editorGroupHeader.tabsBorder#141820
  • editorGutter.addedBackground#43d08acc
  • editorGutter.background#1d232f
  • editorGutter.deletedBackground#f7768e
  • editorGutter.modifiedBackground#ffbf7acc
  • editorHoverWidget.background#171c26
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#ffffff10
  • editorIndentGuide.background#ffffff06
  • editorLineNumber.activeForeground#757f92
  • editorLineNumber.foreground#465066
  • editorLink.activeForeground#57f9ff
  • editorMarkerNavigation.background#171c26
  • editorMarkerNavigationError.background#f7768e
  • editorMarkerNavigationWarning.background#ffd9af
  • editorOverviewRuler.commonContentForeground#82aaff
  • editorOverviewRuler.currentContentForeground#82aaff
  • editorOverviewRuler.incomingContentForeground#82aaff
  • editorRuler.foreground#a8b5d126
  • editorSuggestWidget.background#171c26
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.foreground#7c8eac
  • editorSuggestWidget.highlightForeground#c5cee0
  • editorSuggestWidget.selectedBackground#212836
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffd9af
  • editorWhitespace.foreground#ffffff00
  • editorWidget.background#171c26
  • editorWidget.border#141820
  • editorWidget.foreground#a8b5d1
  • errorForeground#f7768e
  • extensionButton.prominentBackground#82aaffcc
  • extensionButton.prominentForeground#f8fafdcc
  • extensionButton.prominentHoverBackground#82aaff
  • focusBorder#82aaff
  • foreground#7c8eac
  • gitDecoration.conflictingResourceForeground#fffa9ecc
  • gitDecoration.deletedResourceForeground#ff587490
  • gitDecoration.ignoredResourceForeground#99a3b866
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.untrackedResourceForeground#73c990
  • input.background#181d27
  • input.border#181d27
  • input.foreground#f8fafdcc
  • input.placeholderForeground#99a3b877
  • inputOption.activeBorder#82aaffcc
  • inputValidation.errorBackground#ff5874f2
  • inputValidation.errorBorder#f7768e
  • inputValidation.infoBackground#82aafff2
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBackground#fff878f2
  • inputValidation.warningBorder#fff878
  • list.activeSelectionBackground#1f2633
  • list.activeSelectionForeground#c0c6d3
  • list.deemphasizedForeground#7c8eac
  • list.dropBackground#1f2633
  • list.focusBackground#1f2633
  • list.focusForeground#c0c6d3
  • list.highlightForeground#c0c6d3
  • list.hoverBackground#1f2633
  • list.hoverForeground#c0c6d3
  • list.inactiveSelectionBackground#1f2633
  • list.inactiveSelectionForeground#7c8eac
  • list.invalidItemForeground#ca5569
  • list.warningForeground#ffd9af
  • merge.border#ffffff00
  • merge.currentContentBackground#ffffff00
  • merge.currentHeaderBackground#7c8eac
  • merge.incomingContentBackground#ffffff00
  • merge.incomingHeaderBackground#82aaff44
  • notificationLink.foreground#57f9ff
  • notifications.background#141820
  • notifications.foreground#f8fafdcc
  • panel.background#171c26
  • panel.border#181a1f
  • panelTitle.activeBorder#c0c6d3cc
  • panelTitle.activeForeground#c0c6d3
  • panelTitle.inactiveForeground#7c8eac
  • peekView.border#171c26
  • peekViewEditor.background#141820
  • peekViewEditor.matchHighlightBackground#82aaff33
  • peekViewResult.background#141820
  • peekViewResult.fileForeground#7c8eac
  • peekViewResult.lineForeground#7c8eac
  • peekViewResult.matchHighlightBackground#f8fafdcc
  • peekViewResult.selectionBackground#ffffff20
  • peekViewResult.selectionForeground#c0c6d3
  • peekViewTitle.background#141820
  • peekViewTitleDescription.foreground#7c8eac
  • peekViewTitleLabel.foreground#7c8eac
  • pickerGroup.border#141820
  • pickerGroup.foreground#82aaff
  • progressBar.background#82aaff
  • scrollbar.shadow#141820
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • selection.background#4373c2
  • settings.modifiedItemIndicator#e2c08d
  • sideBar.background#171c26
  • sideBar.border#141820
  • sideBar.foreground#7c8eac
  • sideBarSectionHeader.background#171c26
  • sideBarSectionHeader.border#141820
  • sideBarSectionHeader.foreground#7c8eac
  • sideBarTitle.foreground#7c8eac
  • statusBar.background#171c26
  • statusBar.border#141820
  • statusBar.debuggingBackground#f7768e
  • statusBar.debuggingBorder#f7768e
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#7c8eac
  • statusBar.noFolderBackground#171c26
  • statusBar.noFolderBorder#141820
  • statusBar.noFolderForeground#7c8eac
  • statusBarItem.activeBackground#212836
  • statusBarItem.hoverBackground#212836
  • statusBarItem.prominentBackground#212836
  • statusBarItem.prominentHoverBackground#212836
  • tab.activeBackground#1d232f
  • tab.activeBorder#1d232f
  • tab.activeBorderTop#82aaff
  • tab.activeForeground#d5d9e2
  • tab.border#181a1f
  • tab.inactiveBackground#171c26
  • tab.inactiveForeground#d5d9e299
  • tab.unfocusedActiveBorder#181a1f
  • tab.unfocusedActiveForeground#d5d9e2
  • tab.unfocusedInactiveForeground#7c8eac
  • terminal.ansiBlack#1d232f
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#7992b4
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#57f9ff
  • terminal.ansiBrightGreen#58ffc7
  • terminal.ansiBrightMagenta#d2a6ef
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#7c8eac
  • terminal.ansiBrightYellow#fcf9c3
  • terminal.ansiCyan#57f9ff
  • terminal.ansiGreen#58ffc7
  • terminal.ansiMagenta#d2a6ef
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#7c8eac
  • terminal.ansiYellow#fcf9c3
  • terminal.background#1d232f
  • terminal.border#141820
  • terminal.foreground#7c8eac
  • terminal.selectionBackground#82aaff33
  • terminalCursor.foreground#58ffc7
  • titleBar.activeBackground#1d232f
  • titleBar.activeForeground#9da5b4
  • titleBar.border#141820
  • titleBar.inactiveBackground#1d232f
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#141820
  • welcomePage.buttonBackground#141820
  • welcomePage.buttonHoverBackground#141820
  • widget.shadow#141820

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#a2bffcitalic
markup.deleted.diff#ff587490italic
markup.inserted.diff#58ffc7italic
comment#506686italic
string#58ffc7
string.quoted#58ffc7
support.constant.math#ffd9af
constant.numeric, constant.character.numeric#ffd9af
constant.language, punctuation.definition.constant, variable.other.constant#82aaff
constant.character, constant.other#82aaff
constant.character.escape#ffd9af
string.regexp, string.regexp keyword.other#82aaff
meta.function punctuation.separator.comma, punctuation.separator.comma.js, punctuation.separator.parameter.js#a8b5d1
variable#a8b5d1
punctuation.accessor, keyword#d2a6ef
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js#d2a6ef
storage.type#d2a6ef
storage.type.function.arrow.js
storage.modifier#d2a6ef
entity.name.class, meta.class entity.name.type.class#fcf9c3
entity.other.inherited-class#58ffc7
entity.name.function#82aaff
punctuation.definition.tag, meta.tag#a8b5d1
entity.name.tag, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag.js.jsx, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#f7768e
entity.other.attribute-name#ffd9af
entity.name.tag.custom#58ffc7
support.function, support.constant#82aaff
support.constant.meta.property-value#57f9ff
support.type#f7768e
support.variable.dom#f7768e
invalid#ff2c83
invalid.deprecated#d6465e
keyword.operator#57f9ff
keyword.operator.relational#57f9ffitalic
keyword.operator.assignment#57f9ff
keyword.operator.arithmetic#57f9ff
keyword.operator.bitwise#57f9ff
keyword.operator.increment#57f9ff
keyword.operator.ternary#57f9ff
keyword.operator.expression#d2a6ef
comment.line.double-slash#506686
object#a8b5d1
constant.language.null#ffd9af
meta.brace#a8b5d1
meta.object-binding-pattern-variable.js, meta.array-binding-pattern-variable.js, punctuation.definition.binding-pattern.object.js#a8b5d1
meta.delimiter.period#a8b5d1italic
meta.object-literal.key#a8b5d1
punctuation.definition.string#58ffc7
punctuation.definition.block#a8b5d1
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f7768e
constant.language.boolean#f7768e
constant.language.undefined#ffd9af
object.comma#a8b5d1
variable.parameter.function#57f9ff
support.type.property-name, support.type.vendor.property-name, support.type.vendored.property-name, support.constant.vendor.property-value, support.constant.vendored.property-value, meta.property-list entity.name.tag#57f9ff
meta.property-list entity.name.tag.reference#57f9ff
constant.other.color.rgb-value punctuation.definition.constant#ffd9af
constant.other.color, constant.other.rgb-value, constant.other.color.rgb-value#fcf9c3
keyword.other.unit#fcf9c3
meta.selector#d2a6efitalic
entity.other.attribute-name.id#82aaff
meta.property-name#57f9ff
entity.name.tag.doctype, meta.tag.sgml.doctype#d2a6efitalic
punctuation.definition.parameters#a8b5d1
keyword.control.operator#57f9ff
keyword.operator.logical#d2a6ef
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance#57f9ff
variable.other.object.property, variable.other.property#a8b5d1
variable.other.object.js
entity.name.function#82aaff
keyword.operator.comparison, keyword.control.flow.js, 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.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx#d2a6ef
keyword.control.conditional.js#d2a6ef
support.constant, keyword.other.special-method, keyword.other.new, keyword.operator.new, keyword.other.debugger, keyword.control#d2a6ef
invalid.broken#ffd9af
invalid.unimplemented#ffd9af
invalid.illegal#f7768e
variable.language#a8b5d1
variable.language.this#f7768e
support.variable.property#57f9ff
variable.function#82aaff
variable.interpolation#f7768e
meta.function-call#82aaff
punctuation.section.embedded#f7768e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#a8b5d1
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#58ffc7
string.template meta.template.expression#d6465e
string.template punctuation.definition.string#58ffc7
italic#d2a6efitalic
bold#58ffc7bold
quote#a8b5d1italic
raw#57f9ff
variable.assignment.coffee#57f9ff
variable.parameter.function.coffee#a8b5d1
variable.assignment.coffee#57f9ff
variable.other.readwrite.cs#a8b5d1
entity.name.type.class.cs, storage.type.cs#d2a6ef
entity.name.type.namespace.cs#a8b5d1
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#f7768e
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#57f9ff
keyword.other.unit.css#fcf9c3
meta.attribute-selector.css entity.other.attribute-name.attribute, entity.other.attribute-name.class.css, variable.other.readwrite.js#ffd9af
entity.other.attribute-name.id.css#82aaff
support.constant.font-name, support.constant.color#ffd9af
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82aaff
source.elixir entity.name.function#58ffc7
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82aaff
source.elixir punctuation.definition.string#58ffc7
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#58ffc7
source.elixir .punctuation.binary.elixir#d2a6efitalic
source.go meta.function-call.go#bcc9e4
entity.other.attribute-name.id.html#ffd9af
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#a8b5d1
meta.tag.sgml.doctype.html#d2a6efitalic
meta.class entity.name.type.class.js, support.class.builtin.js#fcf9c3
meta.method.declaration storage.type.js#82aaff
meta.method.declaration meta.var.expr.js storage.type.js#d2a6ef
storage.type.class.js#d2a6ef
terminator.js#a8b5d1
meta.js punctuation.definition.js#a8b5d1
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#a8b5d1
variable.other.jsdoc, variable.other.phpdoc#82aaff
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#a8b5d1
constant.language.import-export-all.js#57f9ff
variable.parameter.function.js#82aaff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#a8b5d1
variable.js, variable.other.js, variable.other.constant.js#a8b5d1
entity.name.type.js, entity.name.type.module.js#fcf9c3
support.class#fcf9c3
support.function.console.js#57f9ff
support.type.property-name.json#82aaff
support.constant.json#82aaff
meta.structure.dictionary.value.json string.quoted.double#58ffc7
string.quoted.double.json punctuation.definition.string.json, punctuation.definition.string.json#58ffc7
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f7768e
variable.other.ruby#a8b5d1
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby#f7768e
entity.name.type.class.ruby#ffd9af
entity.name.type.module.ruby#fcf9c3
constant.language.symbol.hashkey.ruby#57f9ff
entity.name.tag.less#57f9ff
keyword.other.unit.css#fcf9c3
meta.attribute-selector.less entity.other.attribute-name.attribute#ffd9af
markup.heading.markdown#f7768e
markup.italic.markdown#d2a6efitalic
markup.bold.markdown, punctuation.definition.bold.markdown#ffd9afbold
beginning.punctuation.definition.quote.markdown, markup.quote.markdown#506686italic
markup.inline.raw.markdown, markup.inline.raw#58ffc7
markup.underline.link.markdown, markup.underline.link.image.markdown#57f9ff
string.other.link.title.markdown, string.other.link.description.markdown#82aaff
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string, punctuation.definition.metadata.markdown#a8b5d1
beginning.punctuation.definition.list.markdown#f7768e
variable.other.php, variable.other.property.php#a8b5d1
meta.function-call.php punctuation#a8b5d1
variable.other.global.php#58ffc7
variable.other.global.php punctuation.definition.variable#58ffc7
constant.language.python#f7768e
variable.parameter.function.python, meta.function-call.arguments.python#82aaff
meta.function-call.python, meta.function-call.generic.python#a8b5d1
punctuation.python#a8b5d1
entity.name.function.decorator.python#58ffc7
source.python variable.language.special#82aaff
variable.css, variable.argument.css#f7768e
variable.less, variable.other.less#f7768e
variable.scss, variable.sass, source.sass variable, variable.parameter.url.scss, variable.parameter.url.sass#f7768e
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#a8b5d1
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ffd9af
entity.name.tag.scss, entity.name.tag.sass#57f9ff
keyword.other.unit.scss, keyword.other.unit.sass#fcf9c3
variable.stylus, variable.other.stylus#f7768e
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#a8b5d1
entity.name.type.ts, entity.name.type.tsx#fcf9c3
support.class.node.ts, support.class.node.tsx#82aaff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#a8b5d1
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#a8b5d1
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82aaff
meta.tag.js meta.jsx.children.tsx#82aaff
entity.name.tag.yaml#82aaff
variable.other.readwrite.js, variable.parameter#a8b5d1
support.class.component.js, support.class.component.js.jsx, support.class.component.tsx#d2a6ef
support.class.component.html#f7768e
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#a8b5d1
meta.directive.vue punctuation#a8b5d1
meta.class entity.name.type.class.tsx#fcf9c3
entity.name.type.tsx, entity.name.type.module.tsx#fcf9c3
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...

Electron Highlighter Syntax - Coding Theme