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#121212
- activityBar.foreground#24bfa5
- activityBarBadge.background#24bfa5
- activityBarBadge.foreground#f8fafd
- button.background#528bff
- debugIcon.pauseForeground#007fff
- debugIcon.restartForeground#24bfa5
- debugIcon.stepIntoForeground#ffd700
- debugIcon.stepOutForeground#ffff00
- debugIcon.stopForeground#FF6103
- debugToolBar.background#020202
- diffEditor.insertedTextBackground#00809b33
- dropdown.background#1d1f23
- dropdown.border#181a1f
- editor.background#121212
- editor.findMatchHighlightBackground#000
- editor.selectionBackground#3e4451
- editorCursor.foreground#f8f8f0
- editorError.foreground#704040
- editorGroup.border#181a1f
- editorGroup.emptyBackground#181a1f
- editorGroupHeader.tabsBackground#181a1f
- editorHoverWidget.background#181a1f
- editorHoverWidget.border#181a1f
- editorIndentGuide.background#3b4048
- editorInfo.foreground#707040
- editorLineNumber.foreground#495162
- editorRuler.foreground#484848
- editorSuggestWidget.background#181a1f
- editorSuggestWidget.border#181a1f
- editorSuggestWidget.selectedBackground#2c313a
- editorWarning.foreground#407040
- editorWhitespace.foreground#181a1f
- editorWidget.background#181a1f
- editorWidget.border#00b294
- editorWidget.foreground#24bfa5
- extensionButton.prominentBackground#00C957
- extensionButton.prominentHoverBackground#00FF7F
- focusBorder#181a1f
- input.background#1d1f23
- list.activeSelectionBackground#000
- list.activeSelectionForeground#d7dae0
- list.focusBackground#383e4a
- list.highlightForeground#c5c5c5
- list.hoverBackground#36393f
- list.hoverForeground#c0c0c0
- list.inactiveSelectionBackground#121212
- list.inactiveSelectionForeground#ED9121
- panel.border#008080
- panelTitle.activeBorder#8470FF
- panelTitle.activeForeground#00C78C
- panelTitle.inactiveForeground#8470FF
- peekView.border#202020
- peekViewEditor.background#202020
- scrollbarSlider.activeBackground#747d9180
- scrollbarSlider.background#4e566680
- scrollbarSlider.hoverBackground#5a637580
- sideBar.background#121212
- sideBar.border#1d1f23
- sideBarSectionHeader.background#000
- sideBarSectionHeader.foreground#24bfa5
- statusBar.background#020202
- statusBar.debuggingBackground#483D8B
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#020202
- statusBarItem.hoverBackground#2c313a
- tab.activeBackground#121212
- tab.activeBorderTop#00C78C
- tab.border#181a1f
- tab.inactiveBackground#36393f
- titleBar.activeBackground#020202
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#020202
- titleBar.inactiveForeground#6b717d
- widget.shadow#000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.comment | #5C6370 | italic |
| string | #00C78C | — |
| support.class.dart, keyword.operator.new.ts | #FF9912 | italic |
| storage.modifier.ts | #FF9912 | italic |
| punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts | #24bfa5 | — |
| keyword.operator.type.annotation.ts | #ffd700 | — |
| keyword.operator.comparison.dart, keyword.operator.ternary.dart, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.relational.ts | #0892d0 | — |
| keyword.operator.ternary.dart, keyword.operator.ternary.js, keyword.operator.ternary.ts | #e32636 | — |
| source.dart | #00C78C | — |
| string.interpolated.double.dart | #20b2aa | — |
| keyword.operator.expression.void.js, support.type.primitive.ts | #007fff | — |
| punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc | #ffff00 | — |
| punctuation.separator.comma.js, punctuation.separator.array.json, punctuation.terminator.statement.js, punctuation.separator.dictionary.pair.json, punctuation.comma.dart, punctuation.terminator.dart, punctuation.separator.comma.ts, punctuation.terminator.statement.ts | #ffa500 | — |
| punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.key-value.json | #FF6103 | — |
| punctuation.separator.dictionary.key-value.json, punctuation.dot.dart | #FF8C00 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #0892d0 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #0892d0 | — |
| string.quoted.single.python, string.quoted.multi.python, source.python | #c0c0c0 | italic |
| source.python | #fd5e53 | italic |
| keyword.control.flow.python, keyword | #FF9912 | italic |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.html | #ffff00 | italic |
| text.html.derivative | #c0c0c0 | italic |
| string.quoted.double.html | #00b294 | italic |
| punctuation.separator.key-value.html | #00FF7F | italic |
| punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts | #C678DD | — |
| string.template.js | #E5C07B | — |
| meta.template.expression.js | #ABB2BF | — |
| constant.numeric, constant.numeric.dart | #A5ABAD | — |
| string.embedded.begin, string.embedded.end | #C678DD | — |
| string.embedded | #98C379 | — |
| constant.language | #0892d0 | italic |
| constant.language.boolean.true.js | #00C78C | italic |
| constant.language.boolean.false.js | #4169e1 | italic |
| constant.character, constant.other | #56B6C2 | — |
| variable.language | #4169e1 | — |
| variable.readwrite, variable.readwrite.other.block | #61AFEF | — |
| keyword, keyword.operator.logical, keyword.operator.constructor | #ff4500 | italic |
| keyword.operator | #5C6370 | — |
| storage | #E06C75 | — |
| storage.type | #007fff | italic |
| variable.other.object.js, string constant.other.placeholder | #f2d133 | italic |
| meta.definition.variable.js, meta.function.js | #FF8C00 | italic |
| meta.function.expression.js | #FF6347 | italic |
| entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class | #61AFEF | — |
| entity.name.type | #4169e1 | — |
| variable.other.object | #61AFEF | — |
| variable.other.property, variable.other.block | #daa520 | — |
| entity.other.inherited-class | #98C379 | — |
| entity.name.function, support.function | #8470FF | italic |
| variable.parameter | #FF6347 | italic |
| entity.name.function-call | #ABB2BF | — |
| function.support.builtin, function.support.core | #98C379 | — |
| entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx | #FF9912 | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #0892d0 | italic |
| entity.name.tag.class, entity.name.tag.id | #56B6C2 | — |
| entity.other.attribute-name | #8470FF | — |
| support.constant | #FF6103 | — |
| support.type, support.variable | #56B6C2 | — |
| support.dictionary.json | #56B6C2 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass | #007fff | — |
| support.constant.css, support.constant.scss, support.constant.less, support.constant.sass | #98C379 | — |
| variable.css, variable.scss, variable.less, variable.sass | #56B6C2 | — |
| variable.css.string, variable.scss.string, variable.less.string, variable.sass.string | #E5C07B | — |
| unit.css, unit.scss, unit.less, unit.sass | #C678DD | — |
| function.css, function.scss, function.less, function.sass | #56B6C2 | — |
| support.other.variable | — | |
| invalid | #F8F8F0 | italic |
| invalid.deprecated | #F8F8F0 | italic |
| structure.dictionary.property-name.json | #56B6C2 | — |
| punctuation.support.type.property-name.end.json, punctuation.support.type.property-name.begin.json | #ffd700 | italic |
| support.type.property-name.json | #ffa500 | italic |
| string.detected-link | #61AFEF | — |
| meta.diff, meta.diff.header | #75715E | — |
| markup.deleted | #C678DD | — |
| markup.inserted | #E5C07B | — |
| markup.changed | #E5C07B | — |
| constant.numeric.line-number.find-in-files - match | #56B6C2A0 | — |
| entity.name.filename.find-in-files | #E5C07B | — |
| markup.italic, markup.italic.markdown | — | italic |
| punctuation.definition.italic.markdown | #696969 | italic |
| markup.underline.link.markdown | #0892d0 | — |
| markup.bold.markdown | — | bold |
| punctuation.definition.bold.markdown | #696969 | italic |
| punctuation.definition.list.begin.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, punctuation.definition.bold.markdown | #faa61a | — |
| meta.paragraph.markdown | #c0c0c0 | — |
| string.other.link.title.markdown | #24bfa5 | — |
| markup.heading.markdown | #007fff | bold |
| punctuation.definition.heading.markdown | #faa61a | italic |
| markup.quote.markdown | #007fff | — |
| meta.separator.markdown | #C678DD | bold |
| markup.raw.inline.markdown, markup.raw.block.markdown | #56B6C2 | — |
| punctuation.definition.list_item.markdown | #FFFFFF | bold |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |