Soho Theme
Publisher: smlombardiThemes in package: 1
A light theme for front-end work
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#c9c9c9
- activityBar.foreground#888888
- activityBarBadge.background#567097
- badge.background#567d97aa
- button.background#568097
- dropdown.background#F5F5F5
- editor.background#f0f0f0
- editor.findMatchBackground#9cb4bfc2
- editor.findMatchHighlightBackground#b2bfc586
- editor.foreground#363636
- editor.lineHighlightBackground#4d7a921a
- editor.selectionBackground#587ca336
- editor.selectionHighlightBackground#c1cace
- editor.wordHighlightBackground#4d7c9236
- editor.wordHighlightStrongBackground#4d829236
- editorCursor.foreground#202020
- editorError.foreground#d67380
- editorGroup.dropBackground#c9d2d9
- editorGroupHeader.tabsBackground#d6d6d6
- editorGroupHeader.tabsBorder#c2c6c1
- editorGutter.background#e9e9e9
- editorGutter.modifiedBackground#568097cc
- editorIndentGuide.background#dcdcdc
- editorLineNumber.foreground#a3a3a3
- editorLink.activeForeground#50709b
- editorOverviewRuler.border#c2c6c1
- editorSuggestWidget.border#919191
- editorSuggestWidget.foreground#767575
- editorSuggestWidget.selectedBackground#789aac
- editorWhitespace.foreground#AAAAAA
- editorWidget.background#d6d6d6
- editorWidget.border#c2c6c1
- errorForeground#da739a
- extensionButton.prominentBackground#4f719a
- focusBorder#9ba9b3
- gitDecoration.modifiedResourceForeground#967391
- gitDecoration.untrackedResourceForeground#246385
- inputOption.activeBorder#adb1b7
- inputValidation.errorBackground#ffeaea
- inputValidation.errorBorder#f1897f
- inputValidation.infoBackground#f2f8ff
- inputValidation.infoBorder#4ec1e5
- inputValidation.warningBackground#fffee2
- inputValidation.warningBorder#ffe055
- list.activeSelectionBackground#b3b3b3
- list.activeSelectionForeground#ffffff
- list.focusBackground#789aac
- list.focusForeground#ffffff
- list.highlightForeground#557e94
- list.hoverBackground#cdcdcd
- list.inactiveFocusBackground#c9d0d3
- list.inactiveSelectionBackground#cccccc
- notification.background#567097
- notification.buttonBackground#3a4e6d
- notification.errorBackground#cd6564
- notification.infoBackground#4e8026
- notification.warningBackground#dab202
- panel.background#e9e9e9
- panel.border#c2c6c1
- panelTitle.activeBorder#50709b
- panelTitle.inactiveForeground#898989
- peekView.border#567297
- peekViewEditor.background#dadada
- peekViewEditor.matchHighlightBackground#c2cfe3
- peekViewResult.background#dadada
- peekViewResult.matchHighlightBackground#93bdd6
- peekViewResult.selectionBackground#809aa96e
- peekViewTitle.background#efefef
- pickerGroup.border#c5c5c5
- pickerGroup.foreground#454644cd
- progressBar.background#568097
- scrollbar.shadow#36363642
- scrollbarSlider.activeBackground#36363666
- scrollbarSlider.background#36363633
- scrollbarSlider.hoverBackground#3636364d
- selection.background#80b6c76b
- sideBar.background#dcdcdc
- sideBar.border#c2c6c1
- sideBar.foreground#5f5f5f
- sideBarSectionHeader.background#c9c9c990
- statusBar.background#d6d6d6
- statusBar.border#c2c6c1
- statusBar.debuggingBackground#e7d3d3
- statusBar.debuggingForeground#cd6564
- statusBar.foreground#5f5f5f
- statusBar.noFolderBackground#d6d6d6
- tab.border#c2c6c1cc
- tab.inactiveBackground#e9e9e970
- terminal.ansiBlack#666666
- terminal.ansiBlue#6D9CBE
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#6D9CBE
- terminal.ansiBrightCyan#80B5B3
- terminal.ansiBrightGreen#AEC199
- terminal.ansiBrightMagenta#B081B9
- terminal.ansiBrightRed#cd6564
- terminal.ansiBrightWhite#efefef
- terminal.ansiBrightYellow#dac340
- terminal.ansiCyan#80B5B3
- terminal.ansiGreen#AEC199
- terminal.ansiMagenta#B081B9
- terminal.ansiRed#cd6564
- terminal.ansiWhite#efefef
- terminal.ansiYellow#dac340
- terminal.background#e9e9e9
- terminal.foreground#363636
- terminalCursor.background#202020
- titleBar.activeBackground#d6d6d6
- titleBar.activeForeground#363636
- titleBar.border#c2c6c1
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #363636 | — |
| variable.parameter.function, text.html.basic, text, source | #363636 | — |
| constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.null.js,constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.null.ts,constant.language.undefined.ts,constant.language.undefined.js | #a34747 | — |
| support.class, entity.name.class, entity.name.type.class, meta.class | #b88205 | — |
| comment, comment.block.html | #9aa2a0 | — |
| punctuation.definition.comment | #9aa2a0 | — |
| constant | #CD6839 | — |
| constant.character, constant.other, punctuation.definition.entity.html | #6D9CBE | — |
| none | #dedede | — |
| entity.name.function, meta.require, support.function.any-method, support.function | #94475b | — |
| meta.function-call | #B03060 | — |
| meta.decorator.ts meta.function-call.ts entity.name.function.ts, punctuation.decorator.ts | #B03060 | — |
| constant.numeric | #591b8b | — |
| keyword | #4e86ae | — |
| keyword.other.special-method | #2d547a | — |
| keyword.operator | #777a87 | — |
| keyword.control | #d68f31 | — |
| keyword.control.export, keyword.control.import, keyword.control.from | #b8521b | — |
| storage | #9FB3C2 | — |
| storage.type | #855e2c | — |
| storage.modifier | #618a71 | — |
| storage.type.function.arrow | #b53c04 | — |
| string, string.quoted.double, string.quoted.single, string.quoted.double.json, string.quoted.single.css, string.quoted.single.js, string.quoted.single.scss, constant.character.escape, constant.character.escape.css, constant.character.escape.scss, constant.other.symbol, invalid.illegal.bad-ampersand.html | #8d7e6e | — |
| support.constant, support.type, support.class | #104E8B | — |
| support.class.console.js | #b5361f | — |
| support.function.console.js | #269aa7 | — |
| meta.jsx.children.js | #363636 | — |
| variable, variable.other.readwrite.js, punctuation.definition.variable.php, variable.other, support.variable | #28697c | — |
| variable.other.property.js | #5da4ba | — |
| variable.language.this.js | #643964 | — |
| variable.parameter.js | #91355a | — |
| meta.object-literal.key, meta.object.member.object-literal.key, meta.object-literal.key.js entity.name.function.js, meta.object-literal.key.ts string.quoted.double.ts | #478e9e | — |
| function.storage.type.block.js, storage.type.function | #a95b31 | — |
| support.variable.object.process.js | #3c9477 | — |
| entity.name.type | #4c2882 | — |
| meta.type.parameters.ts entity.name.type.ts | #b3742c | — |
| support.type.class.declaration.method.return.primitive.ts, type.annotation.support.class.declaration.method.parameters.primitive.ts | #1c7180 | — |
| support.type.primitive.ts, entity.name.type.ts | #a38610 | — |
| storage.type.class.ts | #a38610 | — |
| block.variable.other.object.class.declaration.property.method.ts, block.variable.other.object.class.declaration.method.ts, block.variable.other.object.array.literal.class.declaration.method.var.expr.ts, block.variable.class.declaration.method.parameter.arrow | #3b6ba2 | — |
| block.variable.other.object.class.declaration.method.ts, block.variable.other.object.array.literal.class.declaration.method.var.expr.ts block.variable.class.declaration.method.parameter.arrow.ts, block.variable.other.class.declaration.property.method.ts | #79304c | — |
| storage.type.class.ts | #368a3a | — |
| source.css | #393939 | — |
| meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.scss | #a53a3f | — |
| entity.scss.meta.property-list.punctuation.other.attribute-name.class.css.definition, entity.punctuation.other.attribute-name.class.css.definition, punctuation.definition.entity.css, meta.selector.css | #a53a3f | — |
| entity.name.tag.scss, entity.name.tag.css, entity.name.tag.custom.scss, entity.name.tag.custom.css | #8b5125 | — |
| entity.other.attribute-name.id.css | #9143a0 | — |
| entity.other.attribute-name.id.css punctuation.definition.entity.css | #9143a0 | — |
| meta.property-list.css meta.property-name.css, meta.property-list.scss meta.property-name.sass, meta.property-list.scss meta.property-name.scss, support.type.property-name.css, support.type.property-name.sass, support.type.property-name.scss | #005273 | — |
| support.type.vendored.property-name.css | #005273 | — |
| meta.property-group support.constant.property-value.css, meta.property-list.css meta.property-value.css, meta.property-value support.constant.property-value.css, meta.property-group support.constant.property-value.scss, meta.property-group support.constant.property-value.sass, meta.property-value support.constant.property-value.scss, meta.property-value support.constant.property-value.sass, variable.parameter.misc.css, parameter.less.data-uri comment markup.raw, source.less meta.property-value.css, meta.property-value.scss, support.constant.property-value.css, string.quoted.double.attribute-value.scss | #47523a | — |
| support.constant.vendored.property-value.css | #47523a | — |
| constant.numeric.color.hex-value.css punctuation.definition.constant.css,constant.numeric.color.hex-value.css, constant.other.color, constant.other.color.rgb-value, constant.other.rgb-value.css, support.constant.named-color, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css | #47523a | — |
| support.constant.font-name.scss, support.constant.font-name.css | #47523a | — |
| meta.constructor.argument.css, meta.constructor.argument.sass | #6f882a | — |
| meta.preprocessor.at-rule keyword.control.at-rule, keyword.control.at-rule | #e78484 | — |
| meta.preprocessor.at-rule keyword.control.at-rule punctuation.definition, keyword.control.at-rule punctuation.definition | #AA6161 | — |
| keyword.other.important, token.literal.sass | #cf3131 | |
| meta.at-rule.constant.numeric.media, meta.property-list.property-value.constant.numeric, property-list.scss.constant.numeric.variable.set, constant.numeric.scss, constant.numeric.css | #7c5cbd | — |
| meta.at-rule.keyword.other.unit.media, keyword.other.unit | #a15cbd | — |
| entity.other.attribute-name.pseudo-class.css, entity.property-list.other.attribute-name.pseudo-class.css | #b17f50 | — |
| entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css,entity.property-list.other.attribute-name.pseudo-class.css punctuation.definition.entity.css | #b17f50 | — |
| entity.other.attribute-name.pseudo-element.css, entity.property-list.other.attribute-name.pseudo-element.css | #49918a | — |
| entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css,entity.property-list.other.attribute-name.pseudo-element.css punctuation.definition.entity.css | #49918a | — |
| entity.other.attribute-name.attribute.scss, entity.other.attribute-name.css | #46874b | — |
| keyword.control.at-rule.import | #b88d60 | — |
| keyword.control.at-rule.import punctuation.definition | #b88d60b3 | — |
| scss.meta.at-rule.import.string.quoted.single | #82A66D | — |
| support.function.misc.scss, keyword.control.at-rule.function.scss, entity.name.function.scss, keyword.control.at-rule.function.scss | #207da8 | — |
| keyword.control.at-rule.function.scss | #005aae | — |
| keyword.control.at-rule.function.scss punctuation.definition | #005aaeb3 | — |
| keyword.control.else.scss, keyword.control.return.scss, keyword.control.if.scss, meta.at-rule.each.scss keyword.control.each.scss, keyword.control.warn.scss, meta.at-rule.each.scss keyword.control.operator | #a96941 | — |
| keyword.control.else.scss punctuation.definition, keyword.control.return.scss punctuation.definition, keyword.control.if.scss punctuation.definition, keyword.control.each.scss punctuation.definition, keyword.control.warn.scss punctuation.definition | #a96941 | — |
| keyword.control.at-rule.media | #436081 | — |
| keyword.control.at-rule.media punctuation.definition | #436081 | — |
| support.type.property-name.media,meta.at-rule.include.scss,meta.at-rule.include.scss support.constant.mathematical-symbols.scss | #4d857d | — |
| keyword.control.at-rule.mixin.scss, meta.at-rule.include.scss entity.name.function.scss,keyword.control.at-rule.include | #ba6464 | — |
| keyword.control.at-rule.mixin.scss punctuation.definition, keyword.control.at-rule.include punctuation.definition | #ba6464 | — |
| meta.at-rule.mixin.scss entity.name.function.scss, meta.at-rule.include.scss entity.name.function.scss | #997a2c | — |
| meta.property-list.scss meta.at-rule.include.scss keyword.control.at-rule.include.scss, meta.property-list.scss meta.at-rule.include.scss keyword.control.at-rule.include.scss punctuation.definition | #b378ae | — |
| entity.other.attribute-name.placeholder.scss, entity.other.attribute-name.placeholder.css | #6040a5 | — |
| entity.other.attribute-name.placeholder.scss punctuation.definition.entity.sass, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css | #6040a5 | — |
| meta.at-rule.fontface.scss keyword.control.at-rule.fontface.scss | #AA6161 | — |
| keyword.control.at-rule.fontface.scss punctuation.definition.keyword.scss | #AA6161 | — |
| keyword.control.at-rule.supports | #ac3e3e | — |
| keyword.control.at-rule.supports.scss punctuation.definition.keyword | #ac3e3e | — |
| keyword.control.at-rule.keyframes | #8f61aa | — |
| keyword.control.at-rule.keyframes punctuation.definition | #8f61aa | — |
| meta.at-rule.keyframes.scss entity.other.attribute-name.scss,meta.at-rule.keyframes.body entity.other.keyframe-offset.percentage, entity.other.keyframe-offset.css | #6a99bd | — |
| meta.at-rule.keyframes.scss entity.name.function.scss | #a35b34 | — |
| keyword.control.content.scss | #64752a | — |
| keyword.control.content.scss punctuation.definition | #64752a | — |
| variable.interpolation.scss,punctuation.definition.interpolation.begin.bracket.curly.scss,punctuation.definition.interpolation.end.bracket.curly.scss | #60792c | — |
| entity.name.tag.reference.scss | #dd8642 | — |
| meta.property-list.scss meta.at-rule.include.scss | #567a6b | — |
| meta.definition.variable.map.scss support.type.map.key.scss | #aa4e73 | — |
| meta.definition.variable.map.scss variable.scss | #977785 | — |
| variable.scss | #aa5098 | — |
| entity.other.attribute-name.placeholder.scss,entity.other.attribute-name.placeholder.scss punctuation.definition.entity.scss, keyword.control.at-rule.extend.scss | #768DA2 | — |
| keyword.control.at-rule.extend punctuation.definition | #768DA2b3 | — |
| string.regexp, string.regexp.js keyword.other.js | #376968 | — |
| keyword.operator.quantifier.regexp | #b39613 | — |
| punctuation.definition.character-class.regexp | #8f311c | — |
| punctuation.definition.group.regexp | #7c2020 | — |
| punctuation.definition.group.no-capture.regexp | #753097 | — |
| keyword.control.anchor.regexp | #589228 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, text.html.php meta.embedded.line.php punctuation.section.embedded.end.metatag.php source.php, text.html.php meta.embedded.block.php punctuation.section.embedded.end.metatag.php source.php, text.html.php meta.embedded.block.php punctuation.section.embedded.end.php source.php, text.html.php meta.embedded.line.php punctuation.section.embedded.end.php source.php | #c98302 | — |
| meta.block.embedded.php.source.comment.documentation.phpdoc, comment.block.html meta.embedded.line.php punctuation.section.embedded.begin.php, comment.block.html meta.embedded.line.php punctuation.section.embedded.end.php, comment.block.html meta.embedded.line.php punctuation.section.embedded.end.php source.php, comment.block.documentation.phpdoc.php keyword.other.phpdoc.php | #9aa2a0 | — |
| meta.function-call.php | #824477 | — |
| constant.character.escape | #599492 | — |
| meta.tag.any.html.string.quoted.double.embedded.line.php.source.constant.language.inline, meta.embedded.line.php.source.constant.language | #996c6c | — |
| support.function.construct.output.php | #bb8d01 | — |
| invalid.illegal | #d66767 | — |
| invalid.deprecated | #d66767 | — |
| meta.separator | #c0c5ce | — |
| punctuation, punctuation.definition, punctuation.section.function, punctuation.separator, punctuation.support.type.property-name, punctuation.accessor.ts, meta.brace.round, meta.brace.square, meta.type.annotation.ts, support.constant.mathematical-symbols, block.brace.array.literal.square, block.brace.round, block.punctuation, brace.array.literal.square, brace.type.square, punctuation.decorator.objectliteral.object.member.accessor, punctuation.section, meta.at-rule.media.scss, keyword.operator.css, punctuation.accessor.js, punctuation.terminator, text.html.php meta.tag.block.any.html, text.html.php meta.embedded.block.php source.php, text.html.php meta.embedded.line.php source.php, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts | #697679 | — |
| keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary | #bd5f21 | — |
| entity.name.section.markdown | #A16893 | |
| punctuation.definition.heading.markdown | #A16893b3 | |
| markup.bold | #82341d | — |
| punctuation.definition.bold.markdown | #82341db3 | |
| meta.paragraph.markdown | #393939 | |
| markup.italic | #ae1c91 | italic |
| punctuation.definition.italic.markdown | #ae1c91b3 | |
| markup.inline.raw.markdown, text.html.markdown markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, markup.inline.raw.string.markdown punctuation.definition.raw.markdown | #79a501 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown, text.html.markdown markup.fenced_code.block.markdown | #79a501 | — |
| string.other.link | #bf616a | — |
| meta.link, meta.paragraph.inline.link.underline.detected-link, markup.underline.link.image.markdown | #B2885F | — |
| markup.list meta.paragraph.markdown | #7195ae | — |
| beginning.punctuation.definition.list.markdown | #7195aeb3 | — |
| markup.quote | #d08770 | — |
| meta.structure.dictionary.value.json, string.quoted.double.json, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.array.json meta.structure.dictionary.json support.type.property-name.json,meta.structure.dictionary.value.json string.quoted.double.json punctuation.definition.string.begin.json,meta.structure.dictionary.value.json string.quoted.double.json punctuation.definition.string.end.json | #96897b | — |
| support.type.property-name.json,meta.structure.dictionary.json support.type.property-name.json punctuation.support.type.property-name.begin.json,meta.structure.dictionary.json support.type.property-name.json punctuation.support.type.property-name.end.json,meta.structure.array.json meta.structure.dictionary.json support.type.property-name.json,meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.array.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.array.json meta.structure.dictionary.json support.type.property-name.json | #305a87 | — |
| constant.language.json | #a28926 | — |
| meta.structure.dictionary.json support.type.property-name.json punctuation.support.type.property-name.begin.json, meta.structure.dictionary.json support.type.property-name.json punctuation.support.type.property-name.end.json, meta.structure.dictionary.value.json string.quoted.double.json punctuation.definition.string.begin.json, meta.structure.dictionary.value.json string.quoted.double.json punctuation.definition.string.end.json | #8c8c8c | bold |
| text.html meta.tag.inline.any.html,text.html meta.tag.block.any.html,text.html source.js.embedded.html,text.html meta.tag.any.html,text.html meta.tag.structure.any.html,text.html meta.tag.other.html, entity.name.tag, keyword.control.html.elements, entity.name.tag.inline.any.html, entity.name.tag.block.any.html | #005273 | — |
| punctuation.definition.tag, punctuation.definition.tag.begin.html source.js | #869497 | — |
| meta.tag.any.html entity.other.attribute-name.html, meta.tag.block.any.html entity.other.attribute-name.html, meta.tag.inline.any.html entity.other.attribute-name.html, meta.tag.structure.any.html entity.other.attribute-name.html, meta.tag.other.html entity.other.attribute-name.html, source.js.embedded.html entity.other.attribute-name.html, entity.other.attribute-name.html, source.ts entity.other.attribute-name, entity.other.attribute-name.id.html, entity.other.attribute-name.js | #448583 | — |
| string.quoted.double.html, meta.template string.quoted.double,string.quoted.double.html invalid.illegal.bad-ampersand.html | #96897b | — |
| string.quoted.double.html punctuation.definition.string.begin.html,string.quoted.double.html punctuation.definition.string.end.html | #869497 | — |
| meta.tag.sgml.doctype.html | #c77e3e | — |
| meta.template.expression.js punctuation.definition.template-expression, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts | #dc9936 | — |
| punctuation.definition.string.template.begin, punctuation.definition.string.template.end | #a33d3d | bold |
| comment.block.documentation.js, comment.block.documentation.js storage.type.class.jsdoc, comment.block.documentation.js storage.type.class.jsdoc punctuation.definition.block.tag.jsdoc, comment.block.documentation.js punctuation.definition.comment.js, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, variable.other.jsdoc, variable.other.jsdoc source.embedded.js, variable.other.jsdoc keyword.operator.assignment.jsdoc, punctuation.definition.optional-value.begin.bracket.square.jsdoc, punctuation.definition.optional-value.end.bracket.square.jsdoc, entity.name.type.instance.jsdoc | #777777 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...