Len Theme Light and Dark
Publisher: LenThemes in package: 6
A simple theme for Visual Studio Code by Len
Color themes
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.activeBorder#fff
- activityBar.background#044289
- activityBar.border#e1e4e8
- activityBar.foreground#fff
- activityBar.inactiveForeground#678CBB
- activityBarBadge.background#FA5151
- activityBarBadge.foreground#fff
- badge.background#044289
- badge.foreground#fff
- breadcrumb.activeSelectionForeground#586069
- breadcrumb.background#fff
- breadcrumb.focusForeground#2f363d
- breadcrumb.foreground#6a737d
- breadcrumbPicker.background#fafbfc
- button.background#044289
- button.foreground#fff
- button.hoverBackground#044289
- checkbox.background#fafbfc
- checkbox.border#d1d5da
- debugToolBar.background#fff
- descriptionForeground#6a737d
- diffEditor.insertedTextBackground#34d05822
- diffEditor.removedTextBackground#d73a4922
- dropdown.background#fafbfc
- dropdown.border#e1e4e8
- dropdown.foreground#2f363d
- dropdown.listBackground#fff
- editor.background#EEF1F3
- editor.findMatchBackground#ffdf5d
- editor.findMatchHighlightBackground#ffdf5d66
- editor.focusedStackFrameHighlightBackground#fff5b1
- editor.foldBackground#fafbfc
- editor.foreground#24292e
- editor.inactiveSelectionBackground#04428911
- editor.lineHighlightBackground#fffbdd
- editor.selectionBackground#04428925
- editor.selectionHighlightBackground#34d05840
- editor.selectionHighlightBorder#34d05800
- editor.stackFrameHighlightBackground#fffbdd
- editor.wordHighlightBackground#34d05800
- editor.wordHighlightBorder#24943e99
- editor.wordHighlightStrongBackground#34d05800
- editor.wordHighlightStrongBorder#24943e50
- editorBracketMatch.background#34d05840
- editorBracketMatch.border#34d05800
- editorCursor.foreground#044289
- editorGroup.border#e1e4e8
- editorGroupHeader.tabsBackground#EEF1F3
- editorGroupHeader.tabsBorder#e1e4e8
- editorGutter.addedBackground#28a745
- editorGutter.deletedBackground#d73a49
- editorGutter.modifiedBackground#044289
- editorLineNumber.activeForeground#24292e
- editorLineNumber.foreground#286AAE
- editorOverviewRuler.border#fff
- editorWhitespace.foreground#d1d5da
- editorWidget.background#fff
- errorForeground#cb2431
- focusBorder#044289
- foreground#444d56
- gitDecoration.addedResourceForeground#28a745
- gitDecoration.conflictingResourceForeground#e36209
- gitDecoration.deletedResourceForeground#d73a49
- gitDecoration.ignoredResourceForeground#959da5
- gitDecoration.modifiedResourceForeground#044289
- gitDecoration.submoduleResourceForeground#959da5
- gitDecoration.untrackedResourceForeground#28a745
- input.background#fafbfc
- input.border#e1e4e8
- input.foreground#2f363d
- input.placeholderForeground#959da5
- list.activeSelectionBackground#e2e5e9
- list.activeSelectionForeground#2f363d
- list.focusBackground#fff
- list.hoverBackground#ebf0f4
- list.hoverForeground#2f363d
- list.inactiveFocusBackground#fafbfc
- list.inactiveSelectionBackground#e8eaed
- list.inactiveSelectionForeground#2f363d
- notificationCenterHeader.background#044289
- notificationCenterHeader.foreground#fff
- notifications.background#fafbfc
- notifications.border#e1e4e8
- notifications.foreground#2f363d
- notificationsErrorIcon.foreground#d73a49
- notificationsInfoIcon.foreground#2f363d
- notificationsWarningIcon.foreground#e36209
- panel.background#EEF1F3
- panel.border#e1e4e8
- panelInput.border#e1e4e8
- panelTitle.activeBorder#044289
- panelTitle.activeForeground#2f363d
- panelTitle.inactiveForeground#6a737d
- pickerGroup.border#e1e4e8
- pickerGroup.foreground#2f363d
- progressBar.background#044289
- quickInput.background#fafbfc
- quickInput.foreground#2f363d
- scrollbar.shadow#6a737d33
- scrollbarSlider.activeBackground#959da588
- scrollbarSlider.background#959da533
- scrollbarSlider.hoverBackground#959da544
- settings.headerForeground#2f363d
- settings.modifiedItemIndicator#044289
- sideBar.background#EEF1F3
- sideBar.border#e1e4e8
- sideBar.foreground#586069
- sideBarSectionHeader.background#EEF1F3
- sideBarSectionHeader.border#e1e4e8
- sideBarSectionHeader.foreground#2f363d
- sideBarTitle.foreground#2f363d
- statusBar.background#2f363d
- statusBar.debuggingBackground#f9826c
- statusBar.debuggingForeground#fff
- statusBar.foreground#fff
- statusBar.noFolderBackground#2f363d
- tab.activeBackground#fff
- tab.activeBorder#fff
- tab.activeBorderTop#044289
- tab.activeForeground#2f363d
- tab.border#e1e4e8
- tab.hoverBackground#fff
- tab.inactiveBackground#EEF1F3
- tab.inactiveForeground#6a737d
- tab.unfocusedActiveBorder#fff
- tab.unfocusedActiveBorderTop#e1e4e8
- tab.unfocusedHoverBackground#fff
- terminal.foreground#586069
- textBlockQuote.background#fafbfc
- textBlockQuote.border#e1e4e8
- textCodeBlock.background#fff
- textLink.activeForeground#24292e
- textLink.foreground#24292e
- textPreformat.foreground#586069
- textSeparator.foreground#d1d5da
- titleBar.activeBackground#EEF1F3
- titleBar.activeForeground#2f363d
- titleBar.inactiveBackground#EEF1F3
- titleBar.inactiveForeground#2f363d
- tree.indentGuidesStroke#e1e4e8
- welcomePage.buttonBackground#fff
- welcomePage.buttonHoverBackground#e1e4e8
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #000000ff | — |
| entity.name.type.class, entity.name.type.interface | #000000 | bold |
| entity.other.inherited-class | #000000 | — |
| entity.name.function,meta.definition.method.ts entity.name.function.ts | #000000 | bold |
| constant.other | #009900 | italic |
| comment,comment.block.documentation.js,comment.line.double-slash.js,entity.name.type.instance.jsdoc,variable.other.jsdoc | #969696 | — |
| storage.type.class.jsdoc,keyword.other.documentation | #969696 | bold |
| string.regexp.js | #9933CC | — |
| keyword,storage,constant.language,entity.name.tag,punctuation.definition.tagstorage.type.function.js,storage.type.js,variable.language.this,variable.language.java,variable.language.super.ts,keyword.control,keyword.operator.new,keyword.operator.expression.typeof.js,keyword.operator.expression.delete.js,keyword.operator.expression.instanceof.js,keyword.other.import,keyword.other.import.static,keyword.other.package,support.type.primitive.ts | #0000E6 | — |
| support.type.property-name.json,entity.other.attribute-name,meta.object-literal.key,variable.other.property,variable.other.object.property,variable.other.constant.property.js,variable.other.constant.object.property.js,support.variable.property.dom.js,variable.object.property | #009900 | — |
| string,punctuation.definition.string.begin.js,punctuation.definition.string.end.js,string.quoted.single.js,string.quoted.double.js | #CE7B00 | — |
| punctation,punctuation.terminator.statement.js,punctuation.separator.key-value.js,punctuation.separator.comma.js,punctuation.definition.block.js,punctuation.accessor.js,punctuation.definition.parameters.begin.js,punctuation.definition.parameters.end.js | #000000 | — |
| support.variable.dom.ts | #9F0D79 | — |
| keyword.operator,storage.type.function.arrow | #000000 | — |
| variable,meta.function-call.ts entity.name.function.ts,meta.function-call.js entity.name.function.js,support.function,support.variable.property.js,storage.modifier.import,storage.modifier.package,storage.type.annotation,storage.type.generic,storage.type.object.array,storage.type.java | #000000 | plain |
| support.class.js | #000000 | — |
| meta.tag.sgml.doctype.html,meta.tag.sgml.doctype.xml,keyword.other.doctype.xml,variable.language.documentroot.xml | #628FB5 | — |
| entity.name.tag, punctuation.definition.tag.xml, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #0000E6 | — |
| support.type.property-name.css | #0000E6 | — |
| keyword.other | #000000 | — |
| keyword.control.at-rule.keyframes.css | #000000 | bold |
| token.info-token | #316bcd | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #cd3131 | — |
| token.debug-token | #800080 | — |