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#F0F0F0
  • activityBar.border#F0F0F0
  • activityBar.dropBackground#D0D0D0
  • activityBar.foreground#403f53
  • activityBarBadge.background#403f53
  • activityBarBadge.foreground#F0F0F0
  • badge.background#2AA298
  • badge.foreground#F0F0F0
  • button.background#2AA298
  • button.foreground#F0F0F0
  • debugExceptionWidget.background#F0F0F0
  • debugExceptionWidget.border#d9d9d9
  • debugToolBar.background#F0F0F0
  • descriptionForeground#403f53
  • dropdown.background#F0F0F0
  • dropdown.border#d9d9d9
  • dropdown.foreground#403f53
  • editor.background#FBFBFB
  • editor.findMatchBackground#93A1A16c
  • editor.findMatchHighlightBackground#93a1a16c
  • editor.findRangeHighlightBackground#E0E7EA
  • editor.foreground#403f53
  • editor.hoverHighlightBackground#d3e8f8
  • editor.lineHighlightBackground#F0F0F0
  • editor.rangeHighlightBackground#E0E7EA
  • editor.selectionBackground#E0E0E0
  • editor.selectionHighlightBackground#d3e8f8
  • editor.wordHighlightBackground#d3e8f8
  • editor.wordHighlightStrongBackground#A3CFEE
  • editorBracketMatch.background#d3e8f8
  • editorBracketMatch.border#2AA298
  • editorCodeLens.foreground#403f53
  • editorCursor.foreground#90A7B2
  • editorError.border#FBFBFB
  • editorError.foreground#E64D49
  • editorGroup.border#F0F0F0
  • editorGroup.emptyBackground#F6F6F6
  • editorGroupHeader.noTabsBackground#F0F0F0
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGroupHeader.tabsBorder#F0F0F0
  • editorGutter.addedBackground#49d0c5
  • editorGutter.deletedBackground#f76e6e
  • editorGutter.modifiedBackground#6fbef6
  • editorHoverWidget.background#F0F0F0
  • editorHoverWidget.border#d9d9d9
  • editorIndentGuide.background#d9d9d9
  • editorLineNumber.activeForeground#403f53
  • editorLineNumber.foreground#90A7B2
  • editorMarkerNavigation.background#D0D0D0
  • editorMarkerNavigationError.background#f76e6e
  • editorMarkerNavigationWarning.background#daaa01
  • editorOverviewRuler.errorForeground#E64D49
  • editorOverviewRuler.warningForeground#daaa01
  • editorRuler.foreground#d9d9d9
  • editorSuggestWidget.background#F0F0F0
  • editorSuggestWidget.border#d9d9d9
  • editorSuggestWidget.foreground#403f53
  • editorSuggestWidget.highlightForeground#403f53
  • editorSuggestWidget.selectedBackground#d3e8f8
  • editorWarning.border#daaa01
  • editorWarning.foreground#daaa01
  • editorWhitespace.foreground#d9d9d9
  • editorWidget.background#F0F0F0
  • editorWidget.border#d9d9d9
  • errorForeground#403f53
  • extensionButton.prominentBackground#2AA298
  • extensionButton.prominentForeground#F0F0F0
  • focusBorder#93A1A1
  • foreground#403f53
  • input.background#F0F0F0
  • input.border#d9d9d9
  • input.foreground#403f53
  • input.placeholderForeground#93A1A1
  • inputOption.activeBorder#2AA298
  • inputValidation.errorBackground#f76e6e
  • inputValidation.errorBorder#de3d3b
  • inputValidation.infoBackground#F0F0F0
  • inputValidation.infoBorder#D0D0D0
  • inputValidation.warningBackground#daaa01
  • inputValidation.warningBorder#E0AF02
  • list.activeSelectionBackground#d3e8f8
  • list.activeSelectionForeground#403f53
  • list.errorForeground#E64D49
  • list.focusBackground#d3e8f8
  • list.focusForeground#403f53
  • list.highlightForeground#403f53
  • list.hoverBackground#d3e8f8
  • list.hoverForeground#403f53
  • list.inactiveSelectionBackground#E0E7EA
  • list.inactiveSelectionForeground#403f53
  • list.warningForeground#daaa01
  • notificationCenter.border#CCCCCC
  • notificationCenterHeader.background#F0F0F0
  • notificationCenterHeader.foreground#403f53
  • notificationLink.foreground#994cc3
  • notifications.background#F0F0F0
  • notifications.border#CCCCCC
  • notifications.foreground#403f53
  • notificationToast.border#CCCCCC
  • panel.background#F0F0F0
  • panel.border#d9d9d9
  • peekView.border#d9d9d9
  • peekViewEditor.background#F6F6F6
  • peekViewEditor.matchHighlightBackground#49d0c5
  • peekViewEditorGutter.background#F6F6F6
  • peekViewResult.background#F0F0F0
  • peekViewResult.fileForeground#403f53
  • peekViewResult.lineForeground#403f53
  • peekViewResult.matchHighlightBackground#49d0c5
  • peekViewResult.selectionBackground#E0E7EA
  • peekViewResult.selectionForeground#403f53
  • peekViewTitle.background#F0F0F0
  • peekViewTitleDescription.foreground#403f53
  • peekViewTitleLabel.foreground#403f53
  • pickerGroup.border#d9d9d9
  • pickerGroup.foreground#403f53
  • progressBar.background#2AA298
  • scrollbar.shadow#CCCCCC
  • selection.background#7a8181ad
  • sideBar.background#F0F0F0
  • sideBar.border#F0F0F0
  • sideBar.foreground#403f53
  • sideBarTitle.foreground#403f53
  • statusBar.background#F0F0F0
  • statusBar.border#F0F0F0
  • statusBar.debuggingBackground#F0F0F0
  • statusBar.debuggingForeground#403f53
  • statusBar.foreground#403f53
  • statusBar.noFolderBackground#F0F0F0
  • statusBar.noFolderForeground#403f53
  • tab.activeBackground#F6F6F6
  • tab.activeForeground#403f53
  • tab.activeModifiedBorder#2AA298
  • tab.border#F0F0F0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#403f53
  • tab.inactiveModifiedBorder#93A1A1
  • tab.unfocusedActiveModifiedBorder#93A1A1
  • tab.unfocusedInactiveModifiedBorder#93A1A1
  • terminal.ansiBlack#403f53
  • terminal.ansiBlue#288ed7
  • terminal.ansiBrightBlack#403f53
  • terminal.ansiBrightBlue#288ed7
  • terminal.ansiBrightCyan#2AA298
  • terminal.ansiBrightGreen#08916a
  • terminal.ansiBrightMagenta#d6438a
  • terminal.ansiBrightRed#de3d3b
  • terminal.ansiBrightWhite#9b9a9a
  • terminal.ansiBrightYellow#daaa01
  • terminal.ansiCyan#2AA298
  • terminal.ansiGreen#08916a
  • terminal.ansiMagenta#d6438a
  • terminal.ansiRed#de3d3b
  • terminal.ansiWhite#9b9a9a
  • terminal.ansiYellow#E0AF02
  • terminal.background#F6F6F6
  • terminal.foreground#403f53
  • titleBar.activeBackground#F0F0F0
  • widget.shadow#d9d9d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.enum.cpp
entity.name.scope-resolution.cppitalic bold
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a2bffcitalic
markup.deleted.diff#EF535090italic
markup.inserted.diff#4876d6ffitalic
comment#989fb1italic
string#4876d6
string.quoted, variable.other.readwrite.js#c96765
support.constant.math#4876d6
constant.numeric, constant.character.numeric#aa0982
constant.language, punctuation.definition.constant, variable.other.constant#4876d6
constant.character, constant.other#4876d6
constant.character.escape#aa0982
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#4876d6
punctuation.accessor, keyword#994cc3italic
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#994cc3italic
storage.type#994cc3
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#111111
entity.other.inherited-class#4876d6
entity.name.function#994cc3italic
punctuation.definition.tag, meta.tag#994cc3
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#994cc3
entity.other.attribute-name#4876d6italic
entity.name.tag.custom#4876d6
support.function, support.constant#4876d6
support.constant.meta.property-value#0c969b
support.type, support.class#4876d6
support.variable.dom#4876d6
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#0c969b
keyword.operator.relational#994cc3italic
keyword.operator.assignment#994cc3
keyword.operator.arithmetic#994cc3
keyword.operator.bitwise#994cc3
keyword.operator.increment#994cc3
keyword.operator.ternary#994cc3
comment.line.double-slash#939dbb
object#cdebf7
constant.language.null#bc5454
meta.brace#403f53
meta.delimiter.period#994cc3italic
punctuation.definition.string#111111
punctuation.definition.string.begin.markdown#bc5454
constant.language.boolean#bc5454
object.comma#ffffff
variable.parameter.function#0c969b
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#0c969b
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#aa0982
constant.other.color#aa0982
keyword.other.unit#aa0982
meta.selector#994cc3italic
entity.other.attribute-name.id#aa0982
meta.property-name#0c969b
entity.name.tag.doctype, meta.tag.sgml.doctype#994cc3italic
punctuation.definition.parameters#111111
keyword.control.operator#0c969b
keyword.operator.logical#994cc3
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#0c969b
variable.other.object.property#111111italic
variable.other.object.js
entity.name.function#4876d6italic
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#994cc3italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#994cc3
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#0c969b
support.function#4876d6
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#c96765
variable.language#0c969b
support.variable.property#0c969b
variable.function#4876d6
variable.interpolation#ec5f67
meta.function-call#4876d6
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#403f53
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#111111
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#403f53
italic#994cc3italic
bold#4876d6bold
quote#697098italic
raw#0c969b
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#403f53
variable.assignment.coffee#0c969b
variable.other.readwrite.cs#403f53
entity.name.type.class.cs, storage.type.cs#4876d6
entity.name.type.namespace.cs#0c969b
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#c96765
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#0c969b
keyword.other.unit.css#4876d6
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#aa0982
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#4876d6
source.elixir entity.name.function#4876d6
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#4876d6
source.elixir punctuation.definition.string#4876d6
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#4876d6
source.elixir .punctuation.binary.elixir#994cc3italic
constant.keyword.clojure#0c969b
source.go meta.function-call.go#0c969b
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#994cc3italic
source.go constant.language.go, source.go constant.other.placeholder.go#bc5454
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#0c969bff
meta.namespace-block.cpp#111111
storage.type.language.primitive.cpp#bc5454
meta.preprocessor.macro.cpp#403f53
variable.parameter#111111
variable.other.readwrite.powershell#4876d6
support.function.powershell#0c969bff
entity.other.attribute-name.id.html#4876d6
punctuation.definition.tag.html#994cc3
meta.tag.sgml.doctype.html#994cc3italic
meta.class entity.name.type.class.js#111111
meta.method.declaration storage.type.js#4876d6
terminator.js#403f53
meta.js punctuation.definition.js#403f53
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#403f53
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#403f53
variable.js, variable.other.js#403f53
entity.name.type.js, entity.name.type.module.js#111111
support.class.js#403f53
support.type.property-name.json#0c969b
support.constant.json#4876d6
meta.structure.dictionary.value.json string.quoted.double#c789d6
string.quoted.double.json punctuation.definition.string.json#0c969b
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#bc5454
variable.other.object.js#0c969bitalic
variable.other.ruby#403f53
entity.name.type.class.ruby#c96765
constant.language.symbol.hashkey.ruby#0c969b
constant.language.symbol.ruby#0c969b
entity.name.tag.less#994cc3
keyword.other.unit.css#0c969b
meta.attribute-selector.less entity.other.attribute-name.attribute#aa0982
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#4876d6
markup.italic.markdown#994cc3italic
markup.bold.markdown#4876d6bold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#0c969b
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#403f53
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#4876d6
punctuation.definition.metadata.markdown#0c969b
beginning.punctuation.definition.list.markdown#4876d6
markup.inline.raw.string.markdown#4876d6
variable.other.php, variable.other.property.php#111111
support.class.php#111111
meta.function-call.php punctuation#403f53
variable.other.global.php#4876d6
variable.other.global.php punctuation.definition.variable#4876d6
constant.language.python#bc5454
variable.parameter.function.python, meta.function-call.arguments.python#4876d6
meta.function-call.python, meta.function-call.generic.python#0c969b
punctuation.python#403f53
entity.name.function.decorator.python#4876d6
source.python variable.language.special#aa0982
keyword.control#994cc3italic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#4876d6
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#4876d6
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#111111
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#aa0982
entity.name.tag.scss, entity.name.tag.sass#0c969b
keyword.other.unit.scss, keyword.other.unit.sass#994cc3
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#403f53
entity.name.type.ts, entity.name.type.tsx#111111
support.class.node.ts, support.class.node.tsx#4876d6
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#403f53
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#4876d6
meta.tag.js meta.jsx.children.tsx#4876d6
entity.name.tag.yaml#111111
variable.other.readwrite.js, variable.parameter#403f53
support.class.component.js, support.class.component.tsx#aa0982
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#403f53
meta.class entity.name.type.class.tsx#111111
entity.name.type.tsx, entity.name.type.module.tsx#111111
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#4876d6
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...

Pure Theme - Coding Theme