SLab Theme
Publisher: Hasibur RahmanThemes in package: 708
All themes in one place
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.background#1e2132
- activityBar.border#21233760
- activityBar.foreground#aab3e5
- activityBarBadge.background#5881ea
- activityBarBadge.foreground#ffffff
- badge.background#00000030
- badge.foreground#7c85b3
- breadcrumb.activeSelectionForeground#74a0f1
- breadcrumb.background#212337
- breadcrumb.focusForeground#aab3e5
- breadcrumb.foreground#777fab
- breadcrumbPicker.background#1e2132
- button.background#4e80ffbb
- contrastBorder#121523aa
- debugToolBar.background#1e2132
- diffEditor.insertedTextBackground#c7f59b15
- diffEditor.removedTextBackground#FF537020
- dropdown.background#212337
- dropdown.border#00000066
- editor.background#212337
- editor.findMatchBackground#74a0f155
- editor.findMatchBorder#74c6f1bb
- editor.findMatchHighlightBackground#74a0f133
- editor.findMatchHighlightBorder#74a0f166
- editor.foreground#aab3e5
- editor.lineHighlightBackground#2a2e48
- editor.selectionBackground#717CB450
- editor.selectionHighlightBackground#3c4361
- editorBracketMatch.background#212337
- editorBracketMatch.border#70b0ff50
- editorCursor.foreground#70b0ff
- editorError.foreground#FF5370cc
- editorGroup.border#161a2a
- editorGroupHeader.tabsBackground#1e2132
- editorGutter.addedBackground#c7f59b60
- editorGutter.deletedBackground#FF537060
- editorGutter.modifiedBackground#70b0ff60
- editorHoverWidget.background#1b1d2c
- editorHoverWidget.border#121523aa
- editorIndentGuide.activeBackground#4E5579
- editorIndentGuide.background#4E557970
- editorLineNumber.activeForeground#9da5d7
- editorLineNumber.foreground#5b6395
- editorLink.activeForeground#aab3e5
- editorMarkerNavigation.background#aab3e505
- editorOverviewRuler.border#212337
- editorRuler.foreground#4E5579
- editorSuggestWidget.background#1a1e30
- editorSuggestWidget.border#e4f3fa10
- editorSuggestWidget.foreground#aab3e5
- editorSuggestWidget.highlightForeground#74a0f1
- editorSuggestWidget.selectedBackground#00000050
- editorWarning.foreground#c7f59bbb
- editorWhitespace.foreground#aab3e540
- editorWidget.background#1e2132
- editorWidget.border
- editorWidget.resizeBorder#74a0f1
- extensionButton.prominentBackground#c7f59b90
- extensionButton.prominentHoverBackground#c7f59b
- focusBorder#70b0ff
- foreground#dcebff
- gitDecoration.conflictingResourceForeground#ffdf9bcc
- gitDecoration.deletedResourceForeground#FF5370CC
- gitDecoration.ignoredResourceForeground#777fabaa
- gitDecoration.modifiedResourceForeground#70b0ffee
- gitDecoration.untrackedResourceForeground#7af8cabb
- input.background#191a2a
- input.border#00000066
- input.focus#34d3fb
- input.foreground#e4f3fa
- input.placeholderForeground#aab3e5aa
- inputValidation.errorBackground#c53b53
- inputValidation.errorBorder#FF537050
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#446bbb
- inputValidation.infoBorder#70b0ff50
- inputValidation.infoForeground#FFFFFF
- inputValidation.warningBackground#ad7c43
- inputValidation.warningBorder#ffdf9b50
- inputValidation.warningForeground#FFFFFF
- list.activeSelectionBackground#383e5c
- list.activeSelectionForeground#ffffff
- list.focusBackground#293056
- list.focusForeground#ffffff
- list.highlightForeground#7fdaff
- list.hoverBackground#1e2132
- list.hoverForeground#e4f3fa
- list.inactiveSelectionBackground#292e46
- list.inactiveSelectionForeground#e4f3fa
- list.warningForeground#deb86e
- menu.background#1e2132
- menu.foreground#aab3e5
- menu.selectionBackground#00000050
- menu.selectionBorder#00000030
- menu.selectionForeground#74a0f1
- menu.separatorBackground#aab3e5
- menubar.selectionBackground#00000030
- menubar.selectionBorder#00000030
- menubar.selectionForeground#74a0f1
- notificationLink.foreground#74a0f1
- notifications.background#1e2132
- notifications.foreground#aab3e5
- panel.background#1e2132
- panel.border#21233760
- panel.dropBackground#aab3e5
- panelTitle.activeBorder#74a0f1
- panelTitle.activeForeground#e4f3fa
- panelTitle.inactiveForeground#aab3e5
- peekView.border#00000030
- peekViewEditor.background#aab3e505
- peekViewEditor.matchHighlightBackground#717CB450
- peekViewEditorGutter.background#aab3e505
- peekViewResult.background#aab3e505
- peekViewResult.matchHighlightBackground#717CB450
- peekViewResult.selectionBackground#7c85b370
- peekViewTitle.background#aab3e505
- peekViewTitleDescription.foreground#aab3e560
- pickerGroup.foreground#74a0f1
- progressBar.background#74a0f1
- scrollbar.shadow#00000022
- scrollbarSlider.activeBackground#74a0f1
- scrollbarSlider.background#aab3e520
- scrollbarSlider.hoverBackground#aab3e510
- selection.background#aab3e5
- settings.checkboxBackground#191a2a
- settings.checkboxBorder#00000066
- settings.checkboxForeground#aab3e5
- settings.dropdownBackground#2c314b
- settings.dropdownBorder#161a2a
- settings.dropdownForeground#aab3e5
- settings.headerForeground#70b0ff
- settings.modifiedItemIndicator#70b0ff
- settings.numberInputBackground#191a2a
- settings.numberInputBorder#00000066
- settings.numberInputForeground#aab3e5
- settings.textInputBackground#191a2a
- settings.textInputBorder#00000066
- settings.textInputForeground#aab3e5
- sideBar.background#1e2132
- sideBar.border#161a2a
- sideBar.foreground#7c85b3
- sideBarSectionHeader.background#1e2132
- sideBarSectionHeader.border#aab3e520
- sideBarTitle.foreground#aab3e5
- statusBar.background#1e2132
- statusBar.border#161a2a
- statusBar.debuggingBackground#baacff
- statusBar.debuggingForeground#e4f3fa
- statusBar.foreground#7c85b3
- statusBar.noFolderBackground#212337
- statusBarItem.hoverBackground#7c85b320
- tab.activeBackground#212337
- tab.activeBorder#74a0f1
- tab.activeForeground#e4f3fa
- tab.activeModifiedBorder#7c85b3
- tab.border#161a2a
- tab.inactiveBackground#1e2132
- tab.inactiveForeground#7c85b3
- tab.unfocusedActiveBorder#7c85b3
- tab.unfocusedActiveForeground#aab3e5
- terminal.ansiBlack#000000
- terminal.ansiBlue#70b0ff
- terminal.ansiBrightBlack#7c85b3
- terminal.ansiBrightBlue#70b0ff
- terminal.ansiBrightCyan#7fdaff
- terminal.ansiBrightGreen#c7f59b
- terminal.ansiBrightMagenta#baacff
- terminal.ansiBrightRed#FF5370
- terminal.ansiBrightWhite#e4f3fa
- terminal.ansiBrightYellow#ffdb8e
- terminal.ansiCyan#7fdaff
- terminal.ansiGreen#c7f59b
- terminal.ansiMagenta#baacff
- terminal.ansiRed#FF5370
- terminal.ansiWhite#e4f3fa
- terminal.ansiYellow#ffdb8e
- terminal.border#aab3e520
- textLink.activeForeground#b2dfff
- textLink.foreground#34d3fb
- titleBar.activeBackground#1e2132
- titleBar.activeForeground#aab3e5
- titleBar.border#161a2a
- titleBar.inactiveBackground#1e2132
- titleBar.inactiveForeground#7c85b3
- widget.shadow#00000033
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #e4f3fa | — |
| comment, punctuation.definition.comment | #7e8eda | — |
| variable, string constant.other.placeholder | #e4f3fa | — |
| constant.other.php | #ffdf9b | — |
| constant.other.color | #e4f3fa | — |
| text, meta.jsx.children | #e4f3fa | — |
| invalid, invalid.illegal | #FF5370 | — |
| invalid.deprecated | #baacff | — |
| keyword, storage.type, storage.modifier | #baacff | — |
| keyword.control.flow | #a6eefb | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, constant.other.color, punctuation, meta.tag, meta.block, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, keyword.other.template, keyword.other.substitution, keyword.operator, meta.brace | #7fdaff | — |
| punctuation.definition.template-expression | #ff757f | — |
| keyword.operator.logical, keyword.operator.comparison | #baacff | — |
| keyword.operator.spread, keyword.operator.rest | #ff757f | bold |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #ff757f | — |
| entity.name.function, meta.function-call, variable.function, keyword.other.special-method | #70b0ff | — |
| support.function, meta.object.member | #34d3fb | — |
| source.cpp meta.block variable.other | #ff757f | — |
| variable.other.object | — | |
| variable.other.object.property | #a6eefb | — |
| support.variable.property, variable.other.property | #a7c6e8 | — |
| meta.object-literal.key, entity.name.label.js, string.unquoted | #c7f59b | — |
| support.variable.dom, support.constant.json, support.constant.math | #ffdb8e | — |
| support.variable.object.node, support.variable.object.process | #ffd88c | — |
| support.other.variable, string.other.link | #ff757f | — |
| constant.language, support.constant, constant.escape, keyword.other.unit | #ff8a8a | — |
| constant.character | #ff757f | — |
| constant.numeric, constant.language.infinity, constant.language.nan | #ff9668 | — |
| constant.language.undefined, constant.language.null | #969bb8 | — |
| variable.parameter.function.language.special, variable.parameter | #f3c1ff | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #7af8ca | normal |
| entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, support.type.object.module | #ffdb8e | — |
| support.class.component | #ff8dd3 | — |
| support.type | #a7c6e8 | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #c7f59b | — |
| keyword.other.unit | #ff8a8a | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #FF5370 | — |
| variable.language | #ff757f | — |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #70b0ff | — |
| entity.other.attribute-name | #ffbd76 | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #ffbd76 | — |
| meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name | #baacff | — |
| source.css | #7fdaff | — |
| entity.other.attribute-name.class | #ffbd76 | — |
| support.type.property-name.css, support.type.property-name | #70b0ff | — |
| meta.property-name.css, meta.property-name.scss, meta.property-name.less, support.type.vendored.property-name | #98b4e6 | — |
| support.constant.property-value.css, meta.property-value, support.constant.font-name.css, support.constant.vendored.property-value.css | #a9eaff | — |
| variable.parameter.keyframe-list, meta.at-rule.keyframes entity.name.function | #f989d3 | — |
| entity.other.keyframe-offset, meta.at-rule.keyframes entity.other.attribute-name | #ceec94 | — |
| meta.attribute-selector | #7af8ca | — |
| source.sass keyword.control | #70b0ff | — |
| markup.inserted | #c7f59b | — |
| markup.deleted | #FF5370 | — |
| markup.changed | #baacff | — |
| string.regexp | #a6eefb | — |
| constant.other.character-class.regexp | #ceec94 | — |
| constant.other.character-class.set.regexp | #ffbd76 | — |
| keyword.operator.quantifier.regexp | #f989d3 | — |
| constant.character.escape | #7fdaff | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #70b0ff | — |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF5370 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #70b0ff | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #34d3fb | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #c7f59b | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #ffdf9b | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #f0c4ff | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #baacff | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #ff757f | — |
| text.html.markdown, meta.embedded.block | #e4f3fa | — |
| text.html.markdown markup.inline.raw.markdown | #baacff | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #4E5579 | — |
| text.html.markdown meta.dummy.line-break | — | |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #7fdaff | — |
| entity.name.section.markdown | #70b0ff | — |
| markup.italic | #ff757f | italic |
| markup.bold, markup.bold string | #ff757f | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | #ff757f | bold |
| markup.underline | #34d3fb | underline |
| markup.strike | strike | |
| markup.quote punctuation.definition.blockquote.markdown | #4E5579 | — |
| markup.quote | italic | |
| string.other.link.title.markdown | #aff1ff | — |
| constant.other.reference.link.markdown | #ffdf9b | — |
| markup.raw.block | #baacff | — |
| markup.fenced_code.block.markdown, markup.inline.raw.string.markdown | #a7c6e8 | — |
| variable.language.fenced.markdown | #4E5579 | — |
| meta.separator | #4E5579 | bold |
| markup.table | #aab3e5 | — |