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.activeBorder#eeecf5
- activityBar.activeFocusBorder#eeecf5
- activityBar.background#060609
- activityBar.foreground#eeecf5
- activityBarBadge.background#ACDBFF
- activityBarBadge.foreground#0e0e14
- badge.background#1a1a26
- badge.foreground#eeecf5
- button.background#17171f
- button.foreground#eeecf5
- button.hoverBackground#00aeff
- diffEditor.insertedTextBackground#00919b15
- diffEditor.removedTextBackground#c3115520
- dropdown.background#060609
- dropdown.border#060609
- dropdown.foreground#eeecf599
- editor.background#17171f
- editor.findMatchBackground#408cff40
- editor.findMatchHighlightBackground#1900ff22
- editor.foreground#cdd7dc
- editor.hoverHighlightBackground#06060922
- editor.inactiveSelectionBackground#ffffff20
- editor.lineHighlightBackground#ffffff10
- editor.lineHighlightBorder#ffffff05
- editor.selectionBackground#3019ff73
- editor.selectionHighlightBackground#19abff45
- editor.selectionHighlightBorder#06060930
- editor.wordHighlightBackground#ff000000
- editor.wordHighlightStrongBackground#0e0e14
- editor.wordHighlightStrongBorder#ffffff60
- editorCodeLens.foreground#ffffff66
- editorCursor.foreground#fff
- editorError.foreground#FF5252
- editorGroup.border#181A1F
- editorGroup.emptyBackground#0e0e14
- editorGroupHeader.tabsBackground#030708
- editorGutter.addedBackground#47ffa0
- editorGutter.deletedBackground#FF5252
- editorGutter.modifiedBackground#40C4FF
- editorHoverWidget.background#060609
- editorHoverWidget.border#1E1E1E
- editorIndentGuide.background#ffffff22
- editorLineNumber.foreground#ffffff33
- editorLink.activeForeground#40C4FF
- editorOverviewRuler.addedForeground#47ffa000
- editorOverviewRuler.border#ff000000
- editorOverviewRuler.bracketMatchForeground#40C4FF00
- editorOverviewRuler.deletedForeground#E040FB00
- editorOverviewRuler.errorForeground#FF5252
- editorOverviewRuler.infoForeground#FFFF0000
- editorOverviewRuler.modifiedForeground#40C4FF00
- editorOverviewRuler.warningForeground#FFAB40
- editorRuler.foreground#ffffff66
- editorSuggestWidget.background#1E1E1E
- editorSuggestWidget.border#1E1E1E
- editorSuggestWidget.foreground#f8f8f0
- editorSuggestWidget.highlightForeground#4CC9F0
- editorSuggestWidget.selectedBackground#2c313a
- editorWarning.foreground#FFAB40
- editorWhitespace.foreground#ffffff66
- editorWidget.background#0e0e14
- editorWidget.border#17171f
- errorForeground#FF5252
- extensionButton.prominentBackground#47ffa0
- extensionButton.prominentForeground#0A0A0A
- extensionButton.prominentHoverBackground#40C4FF
- focusBorder#17171f
- gitDecoration.addedResourceForeground#72f1b8cc
- gitDecoration.deletedResourceForeground#ff413b
- gitDecoration.ignoredResourceForeground#ffffff59
- gitDecoration.modifiedResourceForeground#ffb77cee
- gitDecoration.untrackedResourceForeground#72f1b8
- input.background#0e0e14
- input.border#2f2f40
- input.foreground#f8f8f0
- input.placeholderForeground#ffffff66
- inputOption.activeBackground#00000000
- inputOption.activeBorder#4CC9F0
- inputValidation.errorBackground#0A0A0A
- inputValidation.errorBorder#FF5252
- inputValidation.infoBackground#0A0A0A
- inputValidation.infoBorder#4CC9F0
- inputValidation.warningBackground#0A0A0A
- inputValidation.warningBorder#FFAB40
- list.activeSelectionBackground#ffffff20
- list.activeSelectionForeground#fff
- list.errorForeground#FF5252
- list.focusBackground#ffffff22
- list.focusForeground#f8f8f0
- list.highlightForeground#fff
- list.hoverBackground#ffffff10
- list.inactiveSelectionBackground#ffffff22
- list.inactiveSelectionForeground#f8f8f0
- list.warningForeground#FFAB40
- notificationCenter.border#262633
- notificationCenterHeader.background#20202b
- notifications.background#262633
- notifications.border#262633
- notificationToast.border#262633
- panel.background#17171f
- panel.border#262633
- panelTitle.activeBorder#ff8f3b
- pickerGroup.border#40c3ff00
- pickerGroup.foreground#40C4FF
- progressBar.background#47ffa0
- scrollbar.shadow#ff000000
- scrollbarSlider.activeBackground#ffffff99
- scrollbarSlider.background#ffffff33
- scrollbarSlider.hoverBackground#ffffff66
- sideBar.background#0e0e14
- sideBar.border#0e0e14
- sideBar.foreground#ffffff99
- sideBarSectionHeader.background#0e0e14
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#f8f8f0
- statusBar.background#0e0e14
- statusBar.debuggingBackground#f99b72
- statusBar.debuggingForeground#060609
- statusBar.foreground#fff
- statusBar.noFolderBackground#0e0e14
- statusBarItem.hoverBackground#ffffff33
- tab.activeBackground#17171f
- tab.activeBorder#4CC9F0
- tab.activeForeground#fff
- tab.border#ffffff00
- tab.hoverBackground#000
- tab.inactiveBackground#17171f
- tab.inactiveForeground#ffffff80
- terminal.background#17171f
- textLink.activeForeground#ff8f3c
- textLink.foreground#ACDBFF
- titleBar.activeBackground#060609
- titleBar.activeForeground#ffffff99
- titleBar.inactiveBackground#060609
- titleBar.inactiveForeground#ffffff99
- tree.indentGuidesStroke#ffffff20
- welcomePage.tileBackground#0e0e14
- welcomePage.tileHoverBackground#13131b
- widget.shadow#00000090
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #A1A1BA | italic |
| source.js constant | #d6498b | — |
| meta, meta.import | #e6f4ff | — |
| string.quoted | #94FFCD | — |
| string | #ffc19a | — |
| constant.numeric | #ACDBFF | — |
| constant.language | #8EA1F5 | — |
| keyword.operator | #ffc19a | — |
| punctuation.definition.binding-pattern, punctuation.definition.block | #ff8f3b | — |
| keyword.control | #ff3d7f | — |
| keyword.control.conditional | #fff9b8 | — |
| keyword.control.import | #fff9b8 | — |
| storage.type | #ffc19a | — |
| storage.modifier | #69f0ae | — |
| variable.language | #ff9431 | — |
| constant.character, constant.other | #896ef4 | |
| storage.other | #896ef4 | |
| entity.name.class, entity.name.type | #ff8f3b | |
| punctuation.separator.variable | #6089B4 | |
| support.function | #ffc107 | — |
| meta.tag punctuation.definition.string | #FF8F3B | |
| punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html | #FF8F3B | |
| meta.tag string -source -punctuation, text source text meta.tag string -punctuation | #6089B4 | |
| meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html | #cecece | |
| meta.tag.inline source, text.html.php.source | #9AA83A | |
| meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype | #9AA83A | |
| meta.tag.other | #D0B344 | |
| variable.other.property | #4CC9F0 | |
| meta.function-call.object | #9872A2 | |
| variable.other.normal | #6089B4 | |
| meta.brace.erb.html | #D08442 | |
| meta.object-literal.key | #eeeeee | — |
| meta.toc-list.id | #d1e260 | — |
| punctuation.section.embedded.coffee | #D08442 | — |
| meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css | #896ef4 | |
| variable.language.ruby | #D0B344 | |
| markup.deleted | #dc322f | |
| markup.changed | #cb4b16 | |
| markup.inserted | #219186 | — |
| markup.quote | #9872A2 | — |
| markup.list | #d1e260 | — |
| markup.bold, markup.italic | #6089B4 | — |
| markup.inline.raw | #FF0080 | |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
| markup.heading | #D0B344 | — |
| markup.heading.setext | #D0B344 | |
| meta.diff, meta.diff.header | #E0EDDD | — |
| variable.language.js | #CC555A | — |
| support.type.property-name.css | #FFF9B9 | |
| meta.selector.css entity.other.attribute-name.id | #cca789 | |
| punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end | #fff9b8 | — |
| invalid | #FF0B00 | |
| string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #ACDBFF | |
| punctuation.terminator.statement.js.jsx, punctuation.separator.comma.js.jsx | #D90046 | — |
| punctuation.separator | #D0D0D0 | — |
| string.regexp, string.regexp keyword.control, string.regexp keyword.operator | #69f0ae | — |
| string.regexp punctuation.definition.string | #A9B9B0 | — |
| string.regexp keyword.other | #ff8f3b | — |
| entity.name.function | #88dcf6 | — |
| punctuation.definition.parameters, punctuation.definition.arguments | #C9E9E0 | — |
| meta.parameters, variable.other.readwrite.js.jsx | #ff8f3b | — |
| variable.parameter | #ff8f3b | — |
| variable.function, meta.function-call entity.name.function, meta.method-call entity.name.function | #88dcf6 | — |
| entity.name.type.class, entity.other.inherited-class, support.class | #c2f8cb | — |
| meta.tag.sgml, meta.tag.sgml variable.language, meta.tag.sgml punctuation.definition.tag | #ffb732 | — |
| meta.tag.preprocessor, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor punctuation.definition.tag | #FFCC32 | — |
| entity.name.tag | #FF3D7E | — |
| punctuation.definition.tag | #D0D0D0 | — |
| entity.other.attribute-name | #ffc19a | — |
| meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag | #3be3b1 | — |
| support.type.property-name | #FFC19A | — |
| support.type.property-name.json | #FFC19B | — |
| meta.property-value | #69f0ae | — |
| punctuation.section | #D0D0D0 | — |
| variable.css, variable.scss | #69F0AE | — |
| punctuation.definition.entity, punctuation.definition.attribute-selector | #8CDAFF | — |
| Attribute Selector String Value | #69f0ae | — |
| keyword.control.at-rule, keyword.control.at-rule punctuation | #69f0ae | — |
| meta.at-rule support.function | #8CDAFF | — |
| meta.at-rule.mixin variable.scss, meta.at-rule.function variable.scss | #D0D0D0 | — |
| meta.at-rule.mixin support.constant, meta.at-rule.mixin variable.parameter, meta.at-rule.function support.constant, meta.at-rule.function variable.parameter | #69f0ae | — |
| meta.at-rule.mixin constant.numeric, meta.at-rule.function constant.numeric | — | — |
| keyword.control.at-rule.include, keyword.control.at-rule.include punctuation | #ff8f3b | — |
| meta.at-rule.function punctuation.section | #C9E9E0 | — |
| meta.at-rule.return | #D0D0D0 | — |
| meta.at-rule.return punctuation.definition.begin.bracket, meta.at-rule.return punctuation.definition.end.bracket | #D0D0D0 | — |
| meta.at-rule.include entity.name.function, meta.at-rule.include punctuation, meta.property-value punctuation.section.function | #C9E9E0 | — |
| punctuation.definition.interpolation | #FF3D7E | — |
| punctuation.definition.map | #FF3D7E | — |
| comment storage.type, comment punctuation.definition.block | #747DC3 | normal |
| punctuation.definition.block, punctuation.definition.dictionary | #A9B9B0 | — |
| meta.brace.square, punctuation.definition.array | #ff9c75 | — |
| meta.brace.round | #ebfff2 | — |
| meta.embedded, source.groovy.embedded | #ebfff2 | — |
| string source | #D08442 | |
| punctuation.accessor | #ff8e38 | — |
| support.variable.dom, support.class.console, support.type.object | #ff3b7c | — |
| support.variable.property.js | #0ebb9f | — |
| support.class.js, support.class.builtin.js | #8CDAFF | — |
| meta.function-call support.class.builtin.js, new.expr entity.name.type.js | #C9E9E0 | — |
| support.class.js | #F8F8F2 | — |
| string.template.js, punctuation.definition.string.template | #69f0ae | — |
| meta.template.expression | #F8F8F2 | — |
| punctuation.definition.template-expression | #FF3D7E | — |
| punctuation.support.type.property-name | #ff8f3b | — |
| punctuation.section.embedded | #A9B9B0 | — |
| punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round | #C9E9E0 | — |
| variable.other.php | #F8F8F2 | — |
| meta.function.parameter | #D0D0D0 | — |
| punctuation.section.array | #D77676 | — |
| keyword.other.new | #ff8f3b | — |
| keyword.other.sql, keyword.other.DML.sql, keyword.other.alias.sql | #ff8f3b | — |
| keyword.other.DDL.create.II.sql | #D77676 | — |
| entity.name.section, punctuation.definition.heading | #FFE082 | — |
| markup beginning.punctuation | #ff8f3b | — |
| markup punctuation | #B2B2B1 | — |
| string.other.link | #C9E9E0 | — |
| markup.underline.link | #606c75 | — |
| string.other.link.description.title | #D0D0D0 | — |
| meta.link punctuation | #B2B2B1 | — |
| meta.image punctuation | #B2B2B1 | — |
| markup.fenced_code punctuation | #bef8c7 | — |