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#e7ebef
  • activityBar.activeBorder#2563eb
  • activityBar.background#e7ebef
  • activityBar.border#d3dbe4
  • activityBar.foreground#2563eb
  • activityBar.inactiveForeground#8b99a7
  • activityBarBadge.background#2563eb
  • activityBarBadge.foreground#ffffff
  • badge.background#2563eb
  • badge.foreground#ffffff
  • button.background#2563eb
  • button.foreground#ffffff
  • button.hoverBackground#2563eb
  • debugExceptionWidget.background#e7ebef
  • debugExceptionWidget.border#8b99a7
  • debugToolBar.background#e7ebef
  • diffEditor.insertedTextBackground#13b13011
  • diffEditor.insertedTextBorder#ffffff00
  • diffEditor.removedTextBackground#e20a0022
  • diffEditor.removedTextBorder#ffffff00
  • dropdown.background#eff2f5
  • dropdown.border#eff2f5
  • dropdown.foreground#333333cc
  • editor.background#f7fafc
  • editor.findMatchBackground#2563eb22
  • editor.findMatchBorder#2563eb66
  • editor.findMatchHighlightBackground#2563eb22
  • editor.findRangeHighlightBackground#2563eb22
  • editor.foreground#6e7f91
  • editor.hoverHighlightBackground#2563eb22
  • editor.inactiveSelectionBackground#2563eb22
  • editor.lineHighlightBackground#ffffff09
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#2563eb22
  • editor.selectionBackground#2563eb22
  • editor.selectionHighlightBackground#2563eb22
  • editor.selectionHighlightBorder#2563eb22
  • editor.snippetTabstopHighlightBackground#2563eb22
  • editor.snippetTabstopHighlightBorder#2563eb22
  • editor.wordHighlightBackground#dbeafe
  • editor.wordHighlightBorder#dbeafe
  • editor.wordHighlightStrongBackground#dbeafe
  • editor.wordHighlightStrongBorder#dbeafe
  • editorBracketMatch.background#dbeafe
  • editorBracketMatch.border#ffffff00
  • editorCodeLens.foreground#2563ebb4
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#2563eb
  • editorError.border#ffffff00
  • editorError.foreground#ef4444
  • editorGroup.border#d3dbe4
  • editorGroup.dropBackground#2563eb53
  • editorGroup.emptyBackground#f7fafc
  • editorGroupHeader.noTabsBackground#e7ebef
  • editorGroupHeader.tabsBackground#e7ebef
  • editorGroupHeader.tabsBorder#d3dbe4
  • editorGutter.addedBackground#43d08acc
  • editorGutter.background#f7fafc
  • editorGutter.deletedBackground#ef4444
  • editorGutter.modifiedBackground#ec790ecc
  • editorHoverWidget.background#eff3f7
  • editorHoverWidget.border#d3dbe4
  • editorIndentGuide.activeBackground#ffffff10
  • editorIndentGuide.background#ffffff06
  • editorLineNumber.activeForeground#757f92
  • editorLineNumber.foreground#424c57
  • editorLink.activeForeground#06b6d4
  • editorMarkerNavigation.background#d4dbe3
  • editorMarkerNavigationError.background#ef4444
  • editorMarkerNavigationWarning.background#ea580c
  • editorOverviewRuler.commonContentForeground#2563eb
  • editorOverviewRuler.currentContentForeground#2563eb
  • editorOverviewRuler.incomingContentForeground#2563eb
  • editorRuler.foreground#6e7f9126
  • editorSuggestWidget.background#eff2f5
  • editorSuggestWidget.border#d3dbe4
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.foreground#6e7f91
  • editorSuggestWidget.highlightForeground#424c57
  • editorSuggestWidget.selectedBackground#2563eb
  • editorSuggestWidget.selectedForeground#ffffff
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ea580c
  • editorWhitespace.foreground#ffffff00
  • editorWidget.background#e7ebef
  • editorWidget.border#d3dbe4
  • editorWidget.foreground#424c57
  • errorForeground#ef4444
  • extensionBadge.remoteBackground#2563eb
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#2563eb
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2563eb
  • focusBorder#2563eb
  • foreground#6e7f91
  • gitDecoration.conflictingResourceForeground#ffa90acc
  • gitDecoration.deletedResourceForeground#ef444490
  • gitDecoration.ignoredResourceForeground#8b99a7
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.untrackedResourceForeground#10b981
  • icon.foreground#8b99a7
  • input.background#eff2f5
  • input.border#eff2f5
  • input.foreground#424c57
  • input.placeholderForeground#8b99a7
  • inputOption.activeBorder#2563eb
  • inputValidation.errorBackground#e20a00f2
  • inputValidation.errorBorder#ef4444
  • inputValidation.infoBackground#2563ebf2
  • inputValidation.infoBorder#2563eb
  • inputValidation.warningBackground#fff878f2
  • inputValidation.warningBorder#fff878
  • list.activeSelectionBackground#2563eb
  • list.activeSelectionForeground#ffffff
  • list.deemphasizedForeground#8b99a7
  • list.dropBackground#d4dbe3
  • list.focusBackground#d4dbe3
  • list.focusForeground#424c57
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#424c57
  • list.hoverBackground#e3e9eb
  • list.hoverForeground#424c57
  • list.inactiveSelectionBackground#2563eb22
  • list.inactiveSelectionForeground#424c57
  • list.invalidItemForeground#ca5569
  • list.warningForeground#ea580c
  • merge.border#ffffff00
  • merge.currentContentBackground#ffffff00
  • merge.currentHeaderBackground#8b99a7
  • merge.incomingContentBackground#ffffff00
  • merge.incomingHeaderBackground#2563eb44
  • notificationLink.foreground#06b6d4
  • notifications.background#e7ebef
  • notifications.foreground#333333cc
  • panel.background#e7ebef
  • panel.border#d3dbe4
  • panelTitle.activeBorder#2563eb
  • panelTitle.activeForeground#2563eb
  • panelTitle.inactiveForeground#6e7f91
  • peekView.border#d4dbe3
  • peekViewEditor.background#e7ebef
  • peekViewEditor.matchHighlightBackground#2563eb44
  • peekViewResult.background#e7ebef
  • peekViewResult.fileForeground#424c57
  • peekViewResult.lineForeground#424c57
  • peekViewResult.matchHighlightBackground#333333cc
  • peekViewResult.selectionBackground#ffffff20
  • peekViewResult.selectionForeground#c0c6d3
  • peekViewTitle.background#e7ebef
  • peekViewTitleDescription.foreground#424c57
  • peekViewTitleLabel.foreground#424c57
  • pickerGroup.border#d3dbe4
  • pickerGroup.foreground#2563eb
  • progressBar.background#2563eb
  • scrollbar.shadow#e7ebef
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • selection.background#2563eb44
  • settings.modifiedItemIndicator#e2c08d
  • sideBar.background#f1f5f9
  • sideBar.border#d3dbe4
  • sideBar.foreground#424c57
  • sideBarSectionHeader.background#e7ebef
  • sideBarSectionHeader.border#d3dbe4
  • sideBarSectionHeader.foreground#6e7f91
  • sideBarTitle.foreground#6e7f91
  • statusBar.background#e7ebef
  • statusBar.border#d3dbe4
  • statusBar.debuggingBackground#ef4444
  • statusBar.debuggingBorder#ef4444
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#424c57
  • statusBar.noFolderBackground#e7ebef
  • statusBar.noFolderBorder#d3dbe4
  • statusBar.noFolderForeground#424c57
  • statusBarItem.activeBackground#f7fafc
  • statusBarItem.hoverBackground#f7fafc
  • statusBarItem.prominentBackground#f7fafc
  • statusBarItem.prominentHoverBackground#f7fafc
  • tab.activeBackground#f7fafc
  • tab.activeBorder#2563eb
  • tab.activeForeground#424c57
  • tab.border#d3dbe4
  • tab.inactiveBackground#e7ebef
  • tab.inactiveForeground#6e7f91
  • tab.unfocusedActiveBorder#e7ebef
  • tab.unfocusedActiveForeground#6e7f91
  • tab.unfocusedInactiveForeground#6e7f91
  • terminal.ansiBlack#424c57
  • terminal.ansiBlue#2563eb
  • terminal.ansiBrightBlack#8b99a7
  • terminal.ansiBrightBlue#2563eb
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#10b981
  • terminal.ansiBrightMagenta#7c3aed
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#f7fafc
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#7c3aed
  • terminal.ansiRed#ef4444
  • terminal.ansiWhite#f7fafc
  • terminal.ansiYellow#f59e0b
  • terminal.background#f7fafc
  • terminal.border#d3dbe4
  • terminal.foreground#424c57
  • terminal.selectionBackground#2563eb
  • terminalCursor.foreground#10b981
  • titleBar.activeBackground#f7fafc
  • titleBar.activeForeground#424c57
  • titleBar.border#d3dbe4
  • titleBar.inactiveBackground#f7fafc
  • titleBar.inactiveForeground#6e7f91
  • walkThrough.embeddedEditorBackground#e7ebef
  • welcomePage.buttonBackground#e7ebef
  • welcomePage.buttonHoverBackground#e7ebef
  • widget.shadow#e7ebef

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#ef444490italic
markup.inserted.diff#10b981italic
#424c57
comment#a8b3bditalic
string#10b981
string.quoted#10b981
support.constant.math#ea580c
constant.numeric, constant.character.numeric#ea580c
constant.language, punctuation.definition.constant, variable.other.constant#2563eb
constant.character, constant.other#2563eb
constant.character.escape#ea580c
string.regexp, string.regexp keyword.other#2563eb
meta.function punctuation.separator.comma, punctuation.separator.comma.js, punctuation.separator.parameter.js#6e7f91
variable#10b981
punctuation.accessor, keyword#7c3aed
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js#7c3aed
storage.type#7c3aed
storage.type.function.arrow.js
storage.modifier#7c3aed
entity.name.class, meta.class entity.name.type.class#f59e0b
entity.other.inherited-class#10b981
entity.name.function#2563eb
punctuation.definition.tag, meta.tag#6e7f91
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#2563eb
entity.other.attribute-name#ea580c
entity.name.tag.custom#10b981
support.function, support.constant#2563eb
support.constant.meta.property-value#06b6d4
support.type#ef4444
support.variable.dom#ef4444
invalid#ef4444
invalid.deprecated#ef4444
keyword.operator#06b6d4
keyword.operator.relational#06b6d4italic
keyword.operator.assignment#06b6d4
keyword.operator.arithmetic#06b6d4
keyword.operator.bitwise#06b6d4
keyword.operator.increment#06b6d4
keyword.operator.ternary#06b6d4
keyword.operator.expression#7c3aed
comment.line.double-slash#a8b3bd
object#6e7f91
constant.language.null#ea580c
meta.brace#6e7f91
meta.object-binding-pattern-variable.js, meta.array-binding-pattern-variable.js, punctuation.definition.binding-pattern.object.js#6e7f91
meta.delimiter.period#6e7f91italic
meta.object-literal.key#6e7f91
punctuation.definition.string#10b981
punctuation.definition.block#6e7f91
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ef4444
constant.language.boolean#ef4444
constant.language.undefined#ea580c
object.comma#6e7f91
variable.parameter.function#06b6d4
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#06b6d4
meta.property-list entity.name.tag.reference#06b6d4
constant.other.color.rgb-value punctuation.definition.constant#ea580c
constant.other.color, constant.other.rgb-value, constant.other.color.rgb-value#f59e0b
keyword.other.unit#f59e0b
meta.selector#7c3aeditalic
entity.other.attribute-name.id#2563eb
meta.property-name#06b6d4
entity.name.tag.doctype, meta.tag.sgml.doctype#7c3aeditalic
punctuation.definition.parameters#6e7f91
keyword.control.operator#06b6d4
keyword.operator.logical#7c3aed
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance#06b6d4
variable.other.object.property, variable.other.property#6e7f91
variable.other.object.js
entity.name.function#2563eb
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#7c3aed
keyword.control.conditional.js#7c3aed
support.constant, keyword.other.special-method, keyword.other.new, keyword.operator.new, keyword.other.debugger, keyword.control#7c3aed
invalid.broken#ea580c
invalid.unimplemented#ea580c
invalid.illegal#ef4444
variable.language#6e7f91
variable.language.this#ef4444
support.variable.property#06b6d4
variable.function#2563eb
variable.interpolation#ef4444
meta.function-call#2563eb
punctuation.section.embedded#ef4444
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#6e7f91
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#10b981
string.template meta.template.expression#e11d48
string.template punctuation.definition.string#10b981
italic#7c3aeditalic
bold#10b981bold
quote#6e7f91italic
raw#06b6d4
variable.assignment.coffee#06b6d4
variable.parameter.function.coffee#6e7f91
variable.assignment.coffee#06b6d4
variable.other.readwrite.cs#6e7f91
entity.name.type.class.cs, storage.type.cs#7c3aed
entity.name.type.namespace.cs#6e7f91
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ef4444
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#06b6d4
keyword.other.unit.css#f59e0b
meta.attribute-selector.css entity.other.attribute-name.attribute, entity.other.attribute-name.class.css, variable.other.readwrite.js#ea580c
entity.other.attribute-name.id.css#2563eb
support.constant.font-name, support.constant.color#ea580c
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#2563eb
source.elixir entity.name.function#10b981
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#2563eb
source.elixir punctuation.definition.string#10b981
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#10b981
source.elixir .punctuation.binary.elixir#7c3aeditalic
source.go meta.function-call.go#dbeafe
entity.other.attribute-name.id.html#ea580c
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#6e7f91
meta.tag.sgml.doctype.html#7c3aeditalic
meta.class entity.name.type.class.js, support.class.builtin.js#f59e0b
meta.method.declaration storage.type.js#2563eb
meta.method.declaration meta.var.expr.js storage.type.js#7c3aed
storage.type.class.js#7c3aed
terminator.js#6e7f91
meta.js punctuation.definition.js#6e7f91
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#6e7f91
variable.other.jsdoc, variable.other.phpdoc#2563eb
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#6e7f91
constant.language.import-export-all.js#06b6d4
variable.parameter.function.js#2563eb
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#6e7f91
variable.js, variable.other.js, variable.other.constant.js#6e7f91
entity.name.type.js, entity.name.type.module.js#f59e0b
support.class#f59e0b
support.function.console.js#06b6d4
support.type.property-name.json#2563eb
support.constant.json#2563eb
meta.structure.dictionary.value.json string.quoted.double#10b981
string.quoted.double.json punctuation.definition.string.json, punctuation.definition.string.json#10b981
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ef4444
variable.other.ruby#6e7f91
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby#ef4444
entity.name.type.class.ruby#ea580c
entity.name.type.module.ruby#f59e0b
constant.language.symbol.hashkey.ruby#06b6d4
entity.name.tag.less#06b6d4
keyword.other.unit.css#f59e0b
meta.attribute-selector.less entity.other.attribute-name.attribute#ea580c
markup.heading.markdown#ef4444
markup.italic.markdown#7c3aeditalic
markup.bold.markdown, punctuation.definition.bold.markdown#ea580cbold
beginning.punctuation.definition.quote.markdown, markup.quote.markdown#a8b3bditalic
markup.inline.raw.markdown, markup.inline.raw#10b981
markup.underline.link.markdown, markup.underline.link.image.markdown#06b6d4
string.other.link.title.markdown, string.other.link.description.markdown#2563eb
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#6e7f91
beginning.punctuation.definition.list.markdown#ef4444
variable.other.php, variable.other.property.php#6e7f91
meta.function-call.php punctuation#6e7f91
variable.other.global.php#10b981
variable.other.global.php punctuation.definition.variable#10b981
constant.language.python#ef4444
variable.parameter.function.python, meta.function-call.arguments.python#2563eb
meta.function-call.python, meta.function-call.generic.python#6e7f91
punctuation.python#6e7f91
entity.name.function.decorator.python#10b981
source.python variable.language.special#2563eb
variable.css, variable.argument.css#ef4444
variable.less, variable.other.less#ef4444
variable.scss, variable.sass, source.sass variable, variable.parameter.url.scss, variable.parameter.url.sass#ef4444
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#2563eb
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#6e7f91
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ea580c
entity.name.tag.scss, entity.name.tag.sass#06b6d4
keyword.other.unit.scss, keyword.other.unit.sass#f59e0b
variable.stylus, variable.other.stylus#ef4444
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#6e7f91
entity.name.type.ts, entity.name.type.tsx#f59e0b
support.class.node.ts, support.class.node.tsx#2563eb
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#6e7f91
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#6e7f91
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#2563eb
meta.tag.js meta.jsx.children.tsx#2563eb
entity.name.tag.yaml#2563eb
variable.other.readwrite.js, variable.parameter#6e7f91
support.class.component.js, support.class.component.js.jsx, support.class.component.tsx#7c3aed
support.class.component.html#2563eb
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#6e7f91
meta.directive.vue punctuation#6e7f91
meta.class entity.name.type.class.tsx#f59e0b
entity.name.type.tsx, entity.name.type.module.tsx#f59e0b
meta.method.declaration storage.type.tsx#2563eb
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...

Early Riser Syntax - Coding Theme