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#212733
  • activityBar.foreground#738699
  • activityBarBadge.background#67b979
  • activityBarBadge.foreground#1d232e
  • badge.background#67b979
  • badge.foreground#1d232e
  • button.background#67b979
  • button.foreground#1d232e
  • button.hoverBackground#67b979b6
  • debugExceptionWidget.background#272D38
  • debugExceptionWidget.border#343D4A
  • debugToolBar.background#272D38
  • diffEditor.insertedTextBackground#8db9e215
  • diffEditor.removedTextBackground#ad494944
  • dropdown.background#29303f
  • dropdown.listBackground#1d232e
  • editor.background#212733
  • editor.findMatchBackground#67b9795e
  • editor.findMatchBorder#47E18A
  • editor.findMatchHighlightBackground#ff99ee69
  • editor.findMatchHighlightBorder#ff99ee
  • editor.foreground#D9D7CE
  • editor.lineHighlightBackground#242B38
  • editor.rangeHighlightBackground#242B38
  • editor.selectionBackground#3b4766e1
  • editor.selectionHighlightBackground#47E18A
  • editor.wordHighlightBackground#67b9794d
  • editor.wordHighlightStrongBackground#67b9794d
  • editorBracketMatch.border#3D4752
  • editorCursor.foreground#67b979
  • editorError.foreground#da889f
  • editorGroup.border#4a3534
  • editorGroup.emptyBackground#1d232e
  • editorGroupHeader.noTabsBackground#1d232e
  • editorGroupHeader.tabsBackground#1d232e
  • editorGroupHeader.tabsBorder#212733
  • editorGutter.addedBackground#6da87e
  • editorGutter.deletedBackground#e95353
  • editorGutter.modifiedBackground#7ac7d6
  • editorHoverWidget.background#272D38
  • editorHoverWidget.border#343D4A
  • editorIndentGuide.background#2B333B
  • editorLineNumber.foreground#3D4752
  • editorLink.activeForeground#FFCC66
  • editorMarkerNavigation.background#272D38
  • editorOverviewRuler.border#343D4A
  • editorOverviewRuler.errorForeground#da889f
  • editorOverviewRuler.warningForeground#c5a38f
  • editorRuler.foreground#343D4A
  • editorSuggestWidget.background#272D38
  • editorSuggestWidget.border#343D4A
  • editorSuggestWidget.highlightForeground#67b979
  • editorSuggestWidget.selectedBackground#303540
  • editorWarning.foreground#c5a38f
  • editorWhitespace.foreground#272e3b
  • editorWidget.background#1d232e
  • extensionButton.prominentBackground#67b979
  • extensionButton.prominentForeground#1d232e
  • extensionButton.prominentHoverBackground#67b979b6
  • focusBorder#7386998A
  • foreground#738699
  • gitDecoration.addedResourceForeground#6da87e
  • gitDecoration.conflictingResourceForeground#d64d3b
  • gitDecoration.deletedResourceForeground#ad4949
  • gitDecoration.ignoredResourceForeground#6d757e
  • gitDecoration.modifiedResourceForeground#8db9e2bd
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#837a66
  • input.background#272D38
  • input.border#7386994C
  • input.foreground#D9D7CE
  • input.placeholderForeground#7386998A
  • inputOption.activeBorder#7386998A
  • inputValidation.errorBackground#1d232e
  • inputValidation.errorBorder#FF3333
  • inputValidation.infoBackground#212733
  • inputValidation.infoBorder#5CCFE6
  • inputValidation.warningBackground#212733
  • inputValidation.warningBorder#FFD580
  • list.activeSelectionBackground#212733
  • list.activeSelectionForeground#D9D7CE
  • list.dropBackground#212733
  • list.errorForeground#da889f
  • list.focusBackground#212733
  • list.focusForeground#D9D7CE
  • list.highlightForeground#FFCC66
  • list.hoverBackground#212733
  • list.hoverForeground#D9D7CE
  • list.inactiveFocusBackground#212733
  • list.inactiveSelectionBackground#212733
  • list.inactiveSelectionForeground#D9D7CE
  • list.warningForeground#c5a38f
  • notificationCenter.border#1A1F28
  • notificationCenterHeader.background#1d232e
  • notificationCenterHeader.foreground#67b979
  • notificationLink.foreground#FFAE57
  • notifications.background#343D4A
  • notifications.foreground#FFFFFF
  • notificationToast.border#1A1F28
  • panel.background#1d232e
  • panel.border#1d232e
  • panelTitle.activeBorder#1A1F28
  • panelTitle.activeForeground#D9D7CE
  • panelTitle.inactiveForeground#66737F
  • peekView.border#1A1F28
  • peekViewEditor.background#272D38
  • peekViewEditor.matchHighlightBackground#FFCC6633
  • peekViewResult.background#272D38
  • peekViewResult.fileForeground#738699
  • peekViewResult.matchHighlightBackground#FFCC6633
  • peekViewTitle.background#272D38
  • peekViewTitleDescription.foreground#738699
  • peekViewTitleLabel.foreground#738699
  • pickerGroup.border#343D4A
  • pickerGroup.foreground#67b979
  • progressBar.background#67b979
  • scrollbar.shadow#11141A11
  • scrollbarSlider.activeBackground#FFFFFF22
  • scrollbarSlider.background#FFFFFF11
  • scrollbarSlider.hoverBackground#FFFFFF22
  • selection.background#343F4CFD
  • sideBar.background#1d232e
  • sideBar.foreground#738699DD
  • sideBarSectionHeader.background#1d232e
  • sideBarSectionHeader.foreground#67b979
  • sideBarTitle.foreground#67b979b2
  • statusBar.background#1d232e
  • statusBar.debuggingBackground#272D38
  • statusBar.debuggingForeground#738699
  • statusBar.foreground#738699
  • statusBar.noFolderBackground#272D38
  • statusBarItem.activeBackground#343D4A
  • statusBarItem.hoverBackground#303540
  • statusBarItem.prominentBackground#343D4A
  • statusBarItem.prominentHoverBackground#303540
  • tab.activeBackground#212733
  • tab.activeForeground#D9D7CE
  • tab.border#1A1F28
  • tab.inactiveBackground#1d232e
  • tab.inactiveForeground#516170
  • tab.unfocusedActiveForeground#D9D7CEAA
  • tab.unfocusedInactiveForeground#738699
  • terminal.ansiBlack#1b1b1c
  • terminal.ansiBlue#77a0bc
  • terminal.ansiBrightBlack#676767
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#5ffdff
  • terminal.ansiBrightGreen#5ff967
  • terminal.ansiBrightMagenta#ff76ff
  • terminal.ansiBrightRed#ff6d67
  • terminal.ansiBrightWhite#feffff
  • terminal.ansiBrightYellow#e8c575
  • terminal.ansiCyan#1d9383
  • terminal.ansiGreen#50cb54
  • terminal.ansiMagenta#908eb9
  • terminal.ansiRed#ad6371
  • terminal.ansiWhite#c5c8c5
  • terminal.ansiYellow#c78630
  • terminal.background#1d232e
  • terminal.border#343D4A
  • terminal.foreground#D9D7CE
  • terminal.selectionBackground#3b47668c
  • terminalCursor.foreground#67b979
  • textBlockQuote.background#272D38
  • textLink.activeForeground#67b979
  • textLink.foreground#67b979
  • textPreformat.foreground#D9D7CE
  • titleBar.activeBackground#1d232e
  • titleBar.activeForeground#738699
  • titleBar.inactiveBackground#1d232e
  • titleBar.inactiveForeground#516170
  • walkThrough.embeddedEditorBackground#272D38
  • widget.shadow#11141AB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6773
variable, meta.objectliteral#D9D7CE
constant.other.color, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution#80D4FF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#5CCFE6
entity.name.function, keyword.other.special-method, variable.function, meta.block-level, support.function#bbba74
support.other.variable, string.other.link#F07178
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#D4BFFF
markup.heading#e9bfecnormal
entity.name.class, entity.name.type.class, entity.name.instance, entity.name.type.instance, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#5CCFE6
variable.language#5CCFE6italic
invalid#FF3333
invalid.deprecated#FFFFFF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5CCFE690
entity.other.attribute-name#FFAE57
markup.inserted#BAE67E
markup.deleted#5CCFE6
markup.changed#FFAE57
string.regexp#a462a7
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#5C6773
entity.name.filename.find-in-files#BAE67E
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFC44Citalic
source.js constant.other.object.key.js string.unquoted.label.js#5CCFE6italic
markup.italic#bbba74italic
markup.bold#bbba74bold
markup.underline#87a2d1underline
markup.strike#bbba74strike
markup.quote, markup.inline.raw.string.markdown#bbba74italic
markup.fenced_code.block.markdown#bbba74
markup.table#5CCFE6
text.html.markdown, punctuation.definition.list_item.markdown#D9D7CE
text.html.markdown meta.dummy.line-break#5C6773
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#b477d1
markup.quote, punctuation.definition.blockquote.markdown#bbba74italic
string.other.link.title.markdown#53C88Cunderline
markup.raw.block.fenced.markdown#D9D7CE
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#5C6773
variable.language.fenced.markdown#5C6773
meta.separator#5C6773bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
markup.ignored.git_gutter#5C6773
markup.untracked.git_gutter#5C6773
gutter_color#FFFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
meta.type.paren.cover meta.brace, meta.object.type keyword.operator.optional, meta.type.declaration keyword.operator.optional, meta.type.tuple meta.brace.square, meta.type.tuple punctuation.definition.typeparameters.begin, meta.type.tuple punctuation.definition.typeparameters.end, meta.type.function punctuation.definition.parameters.begin, meta.type.function punctuation.definition.parameters.end, meta.type.function keyword.operator, meta.type.function.return, meta.type.function.return storage.type.function.arrow, meta.object.type meta.brace, meta.object.type keyword.operator, meta.object.type punctuation.definition.block, meta.interface punctuation.definition.block, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, meta.interface variable.parameter, meta.interface punctuation.definition.parameters.begin, meta.interface punctuation.definition.parameters.end, punctuation.definition.quote.begin.markdown, punctuation.definition.quote.end.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.block.sequence.item.yaml#b96767
support.type.primitive, support.type.builtin, entity.name.type, entity.name.type.enum, meta.type.parameters, meta.type.parameters entity.name.type, new.expr meta.type.annotation entity.name.type#d19393
meta.type.function variable.parameter, meta.object.type variable.parameter#b85e5e
entity.name.type.module#dbadad
meta.object.type variable, meta.object.type entity.name.function, meta.interface variable.object.property, meta.interface entity.name.function, meta.type.declaration variable.parameter, meta.block meta.object.type punctuation.definition.block#bd7878
entity.name.type.alias, meta.object.type entity.name.type.module, entity.name.tag.css#ffb3b3
entity.name.type.enum, variable.other.constant.object, variable.other.enummember, constant.numeric, variable.other.enummember#ddd685
string, meta.embedded.expression string.quoted.double, string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.template string.quoted.doubles, string.template.js.jsx meta.template.expression.js.jsx string.quoted.double.js.jsx, string.template.ts.tsx meta.template.expression.ts.tsx string.quoted.double.ts.tsx, meta.tag.jsx meta.tag.attributes.jsx meta.embedded.expression.jsx string.quoted.double.jsx, meta.tag.tsx meta.tag.attributes.tsx meta.embedded.expression.tsx string.quoted.double.tsx, source.css.scss meta.attribute-selector.scss, string.other.link, meta.tag meta.embedded.expression string#53C88C
constant.character.escape, punctuation.definition.string.begin, punctuation.definition.string.end, meta.embedded.expression punctuation.definition.string.begin, meta.embedded.expression punctuation.definition.string.end#53c88b9d
meta.arrow, meta.brace, storage.type, storage.type.function.arrow, keyword.operator, punctuation.separator.comma, meta.method.declaration, punctuation.definition.block, punctuation.accessor, punctuation.terminator.statement, source.css.scss, source.css.scss meta.function.color.css, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.type.declaration, meta.type.function, meta.class.body.groovy, punctuation.section.class.end.groovy, punctuation.separator.parameter, meta.block meta.block punctuation.definition.block, punctuation.separator.key-value, punctuation.separator.array.json.comments, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.mapping.yaml, source.css.scss punctuation.separator.key-value, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.section.function.begin, punctuation.section.function.end, punctuation.section.keyframes.begin, punctuation.section.keyframes.end, punctuation.separator.period, punctuation.separator.colon, punctuation.definition.dict.end, punctuation.definition.dict.begin, punctuation.definition.section.case-statement, meta.decorator meta.objectliteral meta.brace.round, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.end.bracket.curly.css, punctuation.terminator.rule.css, meta.selector.css, meta.tag.start.svelte#7B94A5
keyword, keyword.operator.new.ts, keyword.operator.expression.import, storage.modifier, storage.type.function, variable.language, constant.language, storage.type, constant.other.color, keyword.other.unit, punctuation.definition.entity.css, support.constant.language-range.css, keyword.operator.new.js, meta.function.color.css support.function#f8c2a7
variable.parameteritalic
variable.parameter, entity.name.type.class, entity.other.inherited-class, variable, support.function, entity.name.function, support.variable.property, entity.name.class, variable.other.class.js, variable.other.class.ts, constant.other.object.key string, support.type, new.expr, meta.method.groovy, meta.method.body.java, meta.decorator meta.objectliteral entity.name.function#D9D7CE
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#abc9d185
variable.scss, punctuation.section.embedded, meta.type.parameters.ts#b477d1
meta.tag, meta.tag.without-attributes, text.svelte#cfb5a6
entity.name.tag.reference.scss, source.css.scss entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-element.css, punctuation.definition.entity.css#9fc097
punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag, meta.tag.inline.any.html, punctuation.separator.key-value.html, entity.other.attribute-name#87a2d1de
meta.property-value.scss, meta.attribute-selector.scss, support.function, support.variable.object.node#b388c7
new.expr entity.name.type, variable.other.env, keyword.other.definition.ini, meta.decorator, meta.decorator entity.name.function, meta.decorator meta.brace.round#bbba74
comment, comment.block.documentation, comment.block.documentation constant.character.escape, comment.block.documentation markup.italic, storage.type.class.jsdoc, variable.other.jsdoc, entity.name.type.instance.jsdoc, comment.block.documentation.js, comment.block.documentation.js.jsx, comment.block.documentation.ts, comment.block.documentation.ts.tsx#655E7Fitalic
support.class.component, support.type, entity.name.tag.yaml#abc9d1
meta.tag string, meta.tag meta.tag.attributes.js.jsx string.quoted.double, meta.tag punctuation.definition.string.begin, meta.tag punctuation.definition.string.end, meta.embedded.expression meta.tag string#6b9aa7
keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#e9bfec
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, support.function.svelte#c4936c
meta.import punctuation.definition.block, punctuation.definition.binding-pattern.array, punctuation.definition.binding-pattern.object, constant.language.import-export-all#a375a7
support.constant#83DDF0
variable.other.constant.property, keyword.control.svelte, punctuation.definition.keyword.svelte, keyword.control.conditional.svelte, keyword.other.svelte, punctuation.definition.block.begin.svelte, punctuation.definition.block.end.svelte#cec897
entity.name.label, punctuation.separator.label, punctuation.separator.svelte#d17199
string.regexp, support.function.misc.scss, support.constant.color.w3c-standard-color-name.css, source.css.scss meta.property-value.scss, support.class.builtin.js, support.class.builtin.ts, support.constant.math.ts, support.variable.dom.js.jsx, support.variable.dom.ts.tsx, support.constant.property-value.css, support.class#c5a7da

Shiki preview

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

Loading...

Nada Theme by Adan Perez - VS Code Theme