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#3e3e3e
- activityBar.foreground#e3e2e0
- activityBarBadge.background#4ea1df
- activityBarBadge.foreground#ffffff
- badge.background#4ea1df
- badge.foreground#ffffff
- button.background#f66153
- button.foreground#ffffff
- dropdown.background#343434
- dropdown.border#343434
- dropdown.foreground#e3e2e0
- editor.background#393939
- editor.foreground#e3e2e0
- editor.hoverHighlightBackground#4ea1df22
- editor.lineHighlightBackground#414141
- editor.selectionBackground#f6615355
- editor.wordHighlightBackground#808dd322
- editor.wordHighlightStrongBackground#f6615322
- editorBracketMatch.background#4ea1df44
- editorBracketMatch.border#f66153
- editorCursor.foreground#f8f8f0
- editorGroup.background#414141
- editorGroupHeader.tabsBackground#414141
- editorGutter.addedBackground#a7da1e
- editorGutter.background#343434
- editorGutter.deletedBackground#e61f44
- editorGutter.modifiedBackground#f7b83d
- editorIndentGuide.background#525252
- editorLineNumber.foreground#6c6c6c
- editorLink.activeForeground#4ea1df
- editorOverviewRuler.addedForeground#a7da1e
- editorOverviewRuler.deletedForeground#e61f44
- editorOverviewRuler.errorForeground#e61f44
- editorOverviewRuler.findMatchForeground#f6615355
- editorOverviewRuler.infoForeground#9d37fc
- editorOverviewRuler.modifiedForeground#f7b83d
- editorOverviewRuler.warningForeground#f7b83d
- editorRuler.foreground#525252
- editorSuggestWidget.foreground#e3e2e0
- editorSuggestWidget.highlightForeground#4ea1df
- editorSuggestWidget.selectedBackground#6c6c6c
- editorWhitespace.foreground#525252
- editorWidget.background#525252
- editorWidget.border#6c6c6c
- extensionButton.prominentBackground#4ea1df
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#79b8e7
- focusBorder#4ea1df
- foreground#e3e2e0
- gitDecoration.conflictingResourceForeground#9d37fc
- gitDecoration.deletedResourceForeground#e61f44
- gitDecoration.ignoredResourceForeground#858585
- gitDecoration.modifiedResourceForeground#f7b83d
- gitDecoration.untrackedResourceForeground#a7da1e
- input.activeBorder#4ea1df
- input.background#2c2c2c
- input.border#5f5f5f
- input.foreground#e3e2e0
- input.placeholderForeground#676767
- inputOption.activeBorder#f66153
- list.activeSelectionBackground#f66153
- list.activeSelectionForeground#393939
- list.focusBackground#5f5f5f
- list.hoverBackground#414141
- list.inactiveSelectionBackground#393939
- notification.background#464646
- notification.buttonBackground#4ea1df
- notification.buttonForeground#ffffff
- notification.errorBackground#e61f44
- notification.errorForeground#ffffff
- notification.foreground#e3e2e0
- notification.infoBackground#9d37fc
- notification.infoForeground#ffffff
- notification.warningBackground#f7b83d
- notification.warningForeground#ffffff
- panel.background#525252
- panel.border#6c6c6c
- panelTitle.activeBorder#4ea1df
- panelTitle.inactiveForeground#929292
- peekView.border#4ea1df
- peekViewEditor.background#2f2f2f
- peekViewEditor.matchHighlightBackground#f6615355
- peekViewEditorGutter.background#343434
- peekViewResult.background#464646
- peekViewResult.fileForeground#d9d8d5
- peekViewResult.lineForeground#cbc9c5
- peekViewResult.matchHighlightBackground#f6615355
- peekViewResult.selectionBackground#3e3e3e
- peekViewResult.selectionForeground#e3e2e0
- peekViewTitle.background#343434
- peekViewTitleDescription.foreground#dcdad8
- peekViewTitleLabel.foreground#e3e2e0
- progressBar.background#808dd3
- scrollbar.shadow#1f1f1f
- scrollbarSlider.activeBackground#4ea1dfaa
- scrollbarSlider.background#6c6c6caa
- scrollbarSlider.hoverBackground#4ea1df55
- sideBar.background#464646
- sideBar.foreground#e3e2e0
- sideBarSectionHeader.background#4d4d4d
- sideBarSectionHeader.foreground#e3e2e0
- statusBar.background#4ea1df
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#f66153
- tab.inactiveBackground#434343
- tab.inactiveForeground#9f9f9f
- terminal.ansiBlack#464646
- terminal.ansiBlue#808dd3
- terminal.ansiBrightBlack#6c6c6c
- terminal.ansiBrightBlue#ccd1ed
- terminal.ansiBrightCyan#ccd1ed
- terminal.ansiBrightGreen#a4cfef
- terminal.ansiBrightMagenta#fbbab4
- terminal.ansiBrightRed#f03e5f
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fbbab4
- terminal.ansiCyan#808dd3
- terminal.ansiGreen#4ea1df
- terminal.ansiMagenta#f66153
- terminal.ansiRed#ba0e2e
- terminal.ansiWhite#efefed
- terminal.ansiYellow#f66153
- terminal.background#2c2c2c
- terminal.foreground#e3e2e0
- titleBar.activeBackground#2f2f2f
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #e3e2e0 | — |
| comment | #696969 | — |
| string | #4ea1df | — |
| constant.numeric | #4ea1df | — |
| constant.language | #f66153 | — |
| constant.character, constant.other | #f66153 | — |
| variable | — | |
| keyword | #f66153 | — |
| storage | #f66153 | |
| storage.type | #4ea1df | |
| entity.name.class | #f66153 | underline |
| entity.other.inherited-class | #f66153 | |
| entity.name.function | #808dd3 | |
| variable.parameter | #e3e2e0 | |
| entity.name.tag | #4ea1df | |
| entity.other.attribute-name | #f66153 | |
| support.function | #808dd3 | |
| support.constant | #f66153 | |
| support.type, support.class | #f66153 | |
| support.other.variable | — | |
| invalid | #cf433e | |
| invalid.deprecated | #cf433e | — |
| meta.structure.dictionary.json string.quoted.double.json | #4ea1df | — |
| meta.diff, meta.diff.header | #696969 | — |
| markup.deleted | #e61f44 | — |
| markup.inserted | #A6E22E | — |
| markup.changed | #f7b83d | — |
| constant.numeric.line-number.find-in-files - match | #8FBE00A0 | — |
| entity.name.filename.find-in-files | #E6DB74 | — |
| keyword.other | #8f8f8f | — |
| meta.property-value, support.constant.property-value, constant.other.color | #4ea1df | — |
| meta.structure.dictionary.json string.quoted.double.json | #f66153 | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #4ea1df | — |
| meta.property-name support.type.property-name | — | normal |
| meta.property-value punctuation.separator.key-value | #e3e2e0 | — |
| keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as | #4ea1df | — |
| meta.use support.class.builtin, meta.other.inherited-class support.class.builtin | #4ea1df | normal |
| variable.other | #e3e2e0 | normal |
| variable.parameter.function.coffee | #4ea1df | |
| entity.name.section.markdown | #f66153 | — |
| punctuation.definition.heading.markdown | #f66153 | — |
| markup.raw.inline.markdown | #4ea1df | — |
| punctuation.definition.bold.markdown, punctuation.definition.italic.markdown | #f66153 | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown | #f66153 | — |
| punctuation.definition.metadata.markdown | #f66153 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown | #4ea1df | |
| markup.bold.markdown, markup.italic.markdown | #4ea1df | — |
| markup.italic.markdown | — | italic |
| markup.bold.markdown | — | bold |
| markup.raw.block.markdown | #664e4d | — |
| markup.deleted.git_gutter | #e61f44 | — |
| markup.inserted.git_gutter | #a7da1e | — |
| markup.changed.git_gutter | #f7b83d | — |
| meta.template.expression | #e3e2e0 | — |
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#19191F
- activityBar.border#1e1e25
- activityBar.dropBackground#20222c
- activityBar.foreground#696c7e
- activityBarBadge.background#48658a
- activityBarBadge.foreground#fff
- badge.background#48658a
- badge.foreground#fff
- breadcrumb.activeSelectionForeground#acb0d0
- breadcrumb.focusForeground#acb0d0
- breadcrumb.foreground#787c99
- breadcrumbPicker.background#16161b
- button.background#455682DD
- button.foreground#fff
- button.hoverBackground#455682AA
- debugExceptionWidget.background#1a1a20
- debugExceptionWidget.border#1e1e25
- debugToolBar.background#1a1a20
- diffEditor.insertedTextBackground#1ABC9C11
- diffEditor.removedTextBackground#C33C4A11
- dropdown.background#16161b
- dropdown.foreground#9b9fbc
- editor.background#19191F
- editor.findMatchBackground#ffca2811
- editor.findMatchBorder#ffca28
- editor.findMatchHighlightBackground#3d3d6955
- editor.findRangeHighlightBackground#1c1c2366
- editor.foreground#9699a8
- editor.inactiveSelectionBackground#515c7e44
- editor.lineHighlightBackground#1e1e25
- editor.rangeHighlightBackground#1c1c23
- editor.selectionBackground#515c7e44
- editor.wordHighlightBackground#48658a33
- editor.wordHighlightStrongBackground#48658a44
- editorActiveLineNumber.foreground#696c7e
- editorBracketMatch.border#ffca28
- editorCodeLens.foreground#9b9fbc
- editorCursor.foreground#d26b3e
- editorError.foreground#ff3333
- editorGroup.background#16161b
- editorGroup.border#1e1e25
- editorGroup.dropBackground#20222c
- editorGroupHeader.noTabsBackground#16161b
- editorGroupHeader.tabsBackground#16161b
- editorGroupHeader.tabsBorder#1e1e25
- editorGutter.addedBackground#0f8976
- editorGutter.deletedBackground#cc0000
- editorGutter.modifiedBackground#479ac4
- editorHoverWidget.background#16161b
- editorHoverWidget.border#1e1e25
- editorIndentGuide.activeBackground#ce9c3d
- editorIndentGuide.background#23232a
- editorLineNumber.foreground#3d3f50
- editorLink.activeForeground#7ed6f9
- editorLink.foreground#6D3B66
- editorMarkerNavigation.background#16161b
- editorOverviewRuler.border#1e1e25
- editorOverviewRuler.errorForeground#ff3333
- editorOverviewRuler.warningForeground#ffca28
- editorRuler.foreground#1e1e25
- editorSuggestWidget.background#16161b
- editorSuggestWidget.border#1e1e25
- editorSuggestWidget.highlightForeground#e73e54
- editorSuggestWidget.selectedBackground#20222c
- editorUnnecessary.foreground#ffffff
- editorWarning.foreground#ffca28
- editorWhitespace.foreground#2c2c34
- editorWidget.background#16161b
- errorForeground#c97018
- extensionButton.prominentBackground#455682DD
- extensionButton.prominentForeground#fff
- extensionButton.prominentHoverBackground#455682AA
- focusBorder#696c7e8A
- foreground#9b9fbc
- gitDecoration.conflictingResourceForeground#C33C4A
- gitDecoration.ignoredResourceForeground#52576e
- gitDecoration.modifiedResourceForeground#6189bb
- gitDecoration.untrackedResourceForeground#1ABC9C
- gitlens.gutterForegroundColor#4c4f63
- gitlens.gutterUncommittedForegroundColor#4c4f63
- gitlens.trailingLineForegroundColor#4c4f63
- input.background#191a22
- input.border#20222c
- input.foreground#9b9fbc
- input.placeholderForeground#696c7e8A
- inputOption.activeBorder#20222cff
- inputValidation.errorBackground#19191F
- inputValidation.errorBorder#ff3333
- inputValidation.infoBackground#19191F
- inputValidation.infoBorder#50b4e6
- inputValidation.warningBackground#19191F
- inputValidation.warningBorder#ffca28
- list.activeSelectionBackground#20222c
- list.activeSelectionForeground#9b9fbc
- list.focusAndSelectionBackground#20222c
- list.focusAndSelectionForeground#9b9fbc
- list.focusBackground#20222c
- list.focusForeground#afbad4
- list.highlightForeground#6189bb
- list.hoverBackground#1f212a
- list.hoverForeground#9699a8
- list.inactiveFocusForeground#AFBDC4
- list.inactiveSelectionBackground#20222c
- list.inactiveSelectionForeground#acb0d0
- list.invalidItemForeground#c97018
- notification.background#1e1e25
- panel.background#16161b
- panel.border#1e1e25
- panelTitle.activeBorder#6189bb
- panelTitle.activeForeground#9699a8
- panelTitle.inactiveForeground#696c7e
- peekView.border#101013
- peekViewEditor.background#16161b
- peekViewEditor.matchHighlightBackground#48658a33
- peekViewResult.background#16161b
- peekViewResult.fileForeground#595d78
- peekViewResult.lineForeground#9b9fbc
- peekViewResult.matchHighlightBackground#48658a33
- peekViewResult.selectionForeground#acb0d0
- peekViewTitle.background#16161b
- peekViewTitleDescription.foreground#595d78
- peekViewTitleLabel.foreground#595d78
- pickerGroup.border#1e1e25
- pickerGroup.foreground#9b9fbc
- progressBar.background#6D3B66
- scrollbar.shadow#16161bff
- scrollbarSlider.activeBackground#20222c
- scrollbarSlider.background#20222c
- scrollbarSlider.hoverBackground#20222c
- selection.background#515c7e44
- sideBar.background#16161b
- sideBar.border#1e1e25
- sideBar.foreground#787c99
- sideBarSectionHeader.background#19191f
- sideBarSectionHeader.foreground#acb0d0
- sideBarTitle.foreground#696c7e
- statusBar.background#16161b
- statusBar.border#1e1e25
- statusBar.debuggingBackground#16161b
- statusBar.debuggingForeground#696c7e
- statusBar.foreground#696c7e
- statusBar.noFolderBackground#16161b
- statusBarItem.activeBackground#1e1e25
- statusBarItem.hoverBackground#20222c
- statusBarItem.prominentBackground#1e1e25
- statusBarItem.prominentHoverBackground#20222c
- tab.activeBackground#16161b
- tab.activeBorder#acb0d0
- tab.activeForeground#acb0d0
- tab.border#1e1e25
- tab.inactiveBackground#16161b
- tab.inactiveForeground#787c99
- tab.unfocusedActiveBorder#595d78
- tab.unfocusedActiveForeground#9699a8AA
- tab.unfocusedHoverBorder#acb0d0
- tab.unfocusedInactiveForeground#696c7e
- terminal.ansiBlack#595d78
- terminal.ansiBlue#50b4e6
- terminal.ansiBrightBlack#595d78
- terminal.ansiBrightBlue#6582af
- terminal.ansiBrightCyan#7ed6f9
- terminal.ansiBrightGreen#0f8976
- terminal.ansiBrightMagenta#9D599D
- terminal.ansiBrightRed#C33C4A
- terminal.ansiBrightWhite#707386
- terminal.ansiBrightYellow#ca9b55
- terminal.ansiCyan#7ed6f9
- terminal.ansiGreen#0f8976
- terminal.ansiMagenta#6D3B66
- terminal.ansiRed#C33C4A
- terminal.ansiWhite#707386
- terminal.ansiYellow#ca9b55
- terminal.background#16161b
- terminal.foreground#9699a8
- textBlockQuote.background#16161b
- textLink.activeForeground#7ed6f9
- textLink.foreground#6189bb
- textPreformat.foreground#9699a8
- titleBar.activeBackground#1a1a20
- titleBar.activeForeground#696c7e
- titleBar.border#1e1e25
- titleBar.inactiveBackground#19191F
- titleBar.inactiveForeground#696c7e
- walkThrough.embeddedEditorBackground#16161b
- welcomeOverlay.foreground#9699a8
- welcomePage.quickLinkBackground#20222c
- welcomePage.quickLinkHoverBackground#1e1e25
- widget.shadow#101013b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, comment.block.documentation, comment.block.documentation variable.other, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block, keyword.other.phpdoc.php | #51546a | italic |
| entity.name.class, entity.name.type.class, variable.other.global punctuation.definition.variable | #EB606B | — |
| variable, variable.other.readwrite, variable.other.object, meta.property.object.js variable.other.object.js, variable.less, variable.other.normal, punctuation.definition.variable, variable.other.bracket.shell, embedding.php, variable.other.php, meta.property.object, source.python, source.ruby, keyword.other.name.sublime-settings, constant.other.php, meta.object-literal.key, variable.other.dollar, support.variable.property, variable.other.property | #B376B3 | regular |
| entity.name.class, meta.array.literal variable.other.readwrite, entity.name.type.class, support.type, support.class, entity.name.type.namespace, variable.other.global, variable.other.global punctuation.definition.variable, variable.other.class.js, variable.other.constant.object | #9D599D | — |
| entity.name.tag support.class.component | #C33C4A | — |
| variable.other.object.property, entity.name.type.module | #B376B3 | — |
| variable.scss, variable.less, variable.other.less, variable.other.scss | #B376B3 | regular |
| support.other.variable, string.other.link | #F2777A | — |
| support.type.object.dom.js | #EB606B | italic |
| string.unquoted.label.js | #B376B3 | regular |
| constant.other.object.key.js | #EB606B | regular |
| keyword, storage.modifier | #ca9b55 | — |
| keyword.other.new | — | italic |
| keyword.control.import.include | — | italic |
| keyword.control.if, keyword.control.endif, keyword.control.else, keyword.control.foreach, keyword.control.endforeach, keyword.control.while, keyword.control.endwhile, keyword.control.switch, keyword.control.endswitch, keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch, entity.name.label, keyword.control.at-rule | #ca9b55 | normal |
| storage.type | #F99157 | — |
| storage.type.function | #F99157 | normal |
| variable.language, variable.language punctuation.definition.variable | #EB606B | italic |
| keyword.operator | #50B4DC | — |
| keyword.operator.logical, keyword.control.flow.return | #ca9b55 | — |
| punctuation.terminator.statement, punctuation.terminator.rule | #767D8E | — |
| punctuation.separator.key-value, meta.tag.preprocessor | #AFBAD4 | — |
| punctuation.definition.group, punctuation.definition.group.begin, punctuation.definition.group.end, punctuation.section.function, punctuation.definition.parameters, meta.brace.round.begin, meta.brace.round.end, meta.brace.round, punctuation.section.group, punctuation.section.arguments.begin, punctuation.section.arguments.end, meta.group.braces.round.function, punctuation.section.array.begin.php, punctuation.section.array.end.php | #AFBAD4 | — |
| punctuation.definition.parameters.begin, punctuation.definition.parameters.end | #F99157 | — |
| punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.dictionary, punctuation.definition.class.body.begin, punctuation.definition.class.body.end, punctuation.definition.class.body, meta.brace.curly.begin, meta.brace.curly.end, meta.brace.curly, punctuation.definition.block, punctuation.section.scope, source.json | #AFBAD4 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #6189bb | — |
| punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.array, meta.group.braces.square, meta.brace.square.begin, meta.brace.square.end, meta.brace.square, punctuation.section.array.begin, punctuation.section.array.end, punctuation.section.array, punctuation.definition.brackets, punctuation.section.brackets.begin, punctuation.section.brackets.end | #AFBAD4 | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json | #AFBAD4 | — |
| meta.function-call, meta.function-call entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level, meta.group.braces.round.function.arguments | #c28ec2 | normal |
| meta.method-call entity.name.function, meta.method-call.php, meta.method-call.php entity.name.function.php | #EB606B | normal |
| support.variable.dom.js | #eb606b | italic |
| support.variable.property.dom | #6189bb | normal |
| meta.class-method, variable.function.constructor, punctuation.definition.arguments.shell, entity.name.function.shell | #EB606B | — |
| entity.name.function, support.function.magic | #FF435B | — |
| punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php | #FF435B | — |
| meta.function.parameters variable.other.php, meta.function.parameters punctuation.definition.variable | #EB606B | — |
| constant.numeric, constant.language, support.constant, constant.character, variable.parameter, variable.parameter.php punctuation.definition.variable.php | #F99157 | — |
| variable.parameter, variable.parameter.php punctuation.definition.variable.php | #ca9b55 | — |
| constant.character | #F99157 | — |
| constant.numeric.json | #83AADA | — |
| variable.parameter.function | #faa16f | italic |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly | #6189bb | normal |
| string.quoted.double.json | #6189bb | — |
| support.other.namespace.use.php, meta.use.php, support.other.namespace.php | #6189bb | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #EB606B | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.inline.any.html | #EB606B | — |
| entity.other.attribute-name.html, meta.tag.attributes entity.other.attribute-name | #9D599D | — |
| entity.other.attribute-name.id.html | #F99157 | — |
| entity.other.attribute-name.class.html | #B376B3 | bold |
| meta.tag.sgml.html, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #D24D57 | — |
| entity.name.tag.inline.form, entity.name.tag.block.form | #EB8060 | — |
| text.html, text.plain, source.env, meta.tag meta.jsx.children | #AFBAD4 | — |
| text.html.markdown meta.dummy.line-break | #202127 | — |
| markup.heading | #EB606B | bold |
| markup.italic | #89B3E7 | italic |
| markup.bold | #89B3E7 | bold |
| string.other.link.title, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #B376B3 | — |
| markup.underline.link | #6D3B66 | underline |
| markup.quote | #89B3E7 | italic |
| markup.raw.inline, punctuation.definition.raw | #EB8060 | italic |
| markup.list | #879FD1 | — |
| markup.raw.block.markdown | #EB8060 | — |
| meta.separator | #2c2d35 | bold |
| support.function.misc.scss, support.function.misc.css, support.function.misc.less, support.function.less, support.function.url.css, source.css meta.property-list.css, support.function.shape.css, support.function.shape.scss, support.function.shape.less, support.function.color.css, support.function.transform.css | #F99157 | — |
| meta.at-rule.include entity.name.function | #ca9b55 | — |
| meta.set.variable, meta.set.variable support.constant.property-value.scss | #6189bb | — |
| meta.attribute-selector keyword.operator.scss, keyword.operator.css, meta.selector meta.attribute-selector keyword.operator.pattern, meta.attribute-selector keyword.operator.pattern, meta.attribute-selector keyword.operator.less | #C33C4A | — |
| meta.property-value keyword.operator.scss, meta.property-value keyword.operator.css, meta.property-value meta.attribute-selector keyword.operator.less | #F99157 | — |
| meta.at-rule.include punctuation.definition.parameters.begin.bracket.round, meta.at-rule.include punctuation.definition.parameters.end.bracket.round | #ca9b55 | — |
| meta.at-rule.include entity.name.function | #ce9c3d | — |
| keyword.operator.logic.media.css | #F99157 | italic |
| constant.numeric.css, constant.numeric.scss, constant.numeric.less, support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less | #F99157 | — |
| meta.at-rule.include.scss support.function.misc.scss, support.constant.media.css, support.type.property-name.media.css | #FAC863 | — |
| meta.at-rule.media | #ca9b55 | — |
| entity.other.attribute-name | #FF435B | — |
| entity.name.tag.reference, punctuation.definition.entity, punctuationctuation.definition.entity, meta.attribute-selector, keyword.operator.less, keyword.operator.attribute-selector | #ea5560 | — |
| meta.property-list.scss, meta.at-rule.mixin.scss, punctuation.section.property-list, punctuation.separator.parameters.scss | #AFBAD4 | — |
| variable.parameter.url | #F99157 | normal |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.pseudo-class, entity.other.pseudo-element, meta.selector.css meta.function-call.css meta.group.css punctuation.definition.group.begin.css, meta.selector.css meta.function-call.css meta.group.css punctuation.definition.group.end.css, entity.other.pseudo-element.css support.type.vendor-prefix.css, meta.property-list meta.attribute-selector string.quoted, meta.property-list punctuation.definition.pseudo-class.begin.bracket.round, meta.property-list punctuation.definition.pseudo-class.end.bracket.round | #C33C4A | — |
| punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, punctuation.definition.string.begin.less, punctuation.definition.string.end.less, meta.function-call.css meta.group.css | #E16325 | — |
| meta.property-list meta.property-value string.quoted.single.scss, meta.property-list meta.property-value string.quoted.double.scss, meta.property-list meta.property-value string.quoted.single.less, meta.property-list meta.property-value string.quoted.double.less, meta.property-list.css meta.property-value.css meta.function.url.css string.quoted.single.css | #F99157 | — |
| punctuation.definition.entity, punctuationctuation.definition.entity, meta.attribute-selector, keyword.operator.less, keyword.operator.attribute-selector, meta.attribute-selector.scss entity.other.attribute-name.attribute.scss, meta.attribute-selector.less entity.other.attribute-name.attribute.less, meta.selector.css meta.attribute-selector.css string.quoted.single.css | #c33c4a | — |
| meta.property-list.scss meta.property-value.scss, meta.property-list.scss meta.property-list.scss meta.property-value.scss, source.scss meta.property-list.scss meta.property-list.scss meta.property-value.scss support.function.misc.scss | #F99157 | — |
| constant.other.color.rgb-value | #767D8E | — |
| entity.name.tag.css, entity.name.tag.scss, keyword.control.html.elements | #EB606B | — |
| punctuation.separator.key-value | #50B4DC | — |
| keyword.other.unit, constant.other.unit | #E16325 | — |
| keyword.other.important.scss, keyword.other.important.css | #50B4DC | — |
| support.type.property-name, meta.property-name, support.type.vendor-prefix | #6189bb | — |
| meta.property-list.scss meta.property-list.scss meta.property-value.scss variable.parameter.url.scss | #8d4d85 | — |
| meta.property-list.scss meta.property-list.scss meta.at-rule.return.scss variable.parameter.url.scss, source.scss meta.property-list.scss meta.property-value.scss variable.parameter.url.scss | #B376B3 | — |
| entity.name.method.js | #6699cc | — |
| support.constant.handlebars | #FAC863 | — |
| variable.parameter.handlebars | #ca9b55 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #FAC863 | — |
| punctuation.definition.variable.smarty, punctuation.section.embedded.begin.smarty, punctuation.section.embedded.end.smarty, meta.tag.template.value.twig, punctuation.section.tag.twig, meta.tag.expression.twig, punctuation.definition.tag.expression.twig, punctuation.definition.tag.output.twig | #FAC863 | — |
| source.smarty, variable.other.twig, variable.other.smarty, meta.tag.expression.twig, entity.name.tag.twig, meta.tag.output.twig | #ca9b55 | — |
| variable.other.property.twig, support.function.twig, meta.function-call.twig, keyword.control.twig, keyword.operator.other.twig, keyword.operator.comparison.twig, support.function.functions.twig, support.function.functions.twig, keyword.operator.assignment.twig, support.function.filters.twig, support.function.built-in.smarty, keyword.operator.smarty | #ca9b55 | — |
| string.quoted.single.twig, string.quoted.double.twig, string.quoted.single.smarty, string.quoted.double.smarty | #DBC08A | — |
| punctuation.definition.array.begin.php, punctuation.definition.array.end.php | #AFBAD4 | — |
| sublimelinter.mark.warning | #DDB700 | — |
| sublimelinter.mark.error | #D93232 | — |
| sublimelinter.gutter-mark | #FFFFFF | — |
| brackethighlighter.default | #6189bb | — |
| brackethighlighter.unmatched | #D93232 | — |
| brackethighlighter.curly, brackethighlighter.square, brackethighlighter.round, brackethighlighter.quote, brackethighlighter.tag, brackethighlighter.c_define, brackethighlighter.angle | #ffa300 | — |
| markup.changed, markup.changed.git_gutter | #6189bb | — |
| markup.deleted, markup.deleted.git_gutter | #D93232 | — |
| markup.inserted, markup.inserted.git_gutter | #1ABC9C | — |
| markup.ignored, markup.ignored.git_gutter | #3F414D | — |
| markup.untracked, markup.untracked.git_gutter | #666666 | — |
| source.apacheconf, string.path.apacheconf | #6189bb | — |
| string.value.apacheconf | #F99157 | — |
| keyword.access.apacheconf | #1ABC9C | — |
| source.apacheconf string.replacement.apacheconf | #83AADA | — |
| entity.tag.apacheconf | #EB606B | — |
| storage.type.context.nginx | #FF435B | — |
| punctuation.definition.variable.nginx, entity.name.context.location.nginx | #83AADA | — |
| storage.type.context.location.nginx | #EB606B | — |
| string.ipaddress.nginx | #F99157 | — |
| variable.other.nginx | #B376B3 | — |
| variable.other.bracket.shell, variable.other.normal.shell, punctuation.definition.variable.shell | #B376B3 | regular |
| support.function.builtin, support.function.external.shell | #ca9b55 | — |
| meta.structure.array.shell, punctuation.definition.array.begin.shell, punctuation.definition.array.end.shell, meta.scope.subshell.shell, punctuation.definition.subshell.shell | #6189bb | — |
| string.regexp | #1ABC9C | — |
| constant.character.escape | #6189bb | italic |
| *url*, *link*, *uri* | #83AADA | underline |
| constant.numeric.line-number.find-in-files - match | #9A5490 | — |
| entity.name.filename.find-in-files | #6189bb | — |
| source.yaml string.unquoted.plain.out.yaml | #AFBAD4 | — |
| invalid, invalid.illegal, invalid.broken | #ffffff | — |
| invalid.deprecated | #ffffff | — |
| string.quoted.double.html invalid.illegal.bad-ampersand.html, string.quoted.single.html invalid.illegal.bad-ampersand.html | #6189bb | — |
| invalid.unimplemented | #ffffff | — |
| meta.structure.dictionary.json support.type.property-name.json | #FF435B | — |
| meta meta.structure.dictionary.value.json support.type.property-name.json | #B376B3 | — |
| meta meta meta meta meta meta meta support.type.property-name.json | #F99157 | — |
| meta meta meta meta meta meta meta meta meta support.type.property-name.json | #9D599D | — |
| meta meta meta meta meta meta meta meta meta meta meta meta support.type.property-name.json | #50B4DC | — |
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#19191F
- activityBar.border#1e1e25
- activityBar.dropBackground#20222c
- activityBar.foreground#696c7e
- activityBarBadge.background#48658a
- activityBarBadge.foreground#fff
- badge.background#48658a
- badge.foreground#fff
- breadcrumb.activeSelectionForeground#acb0d0
- breadcrumb.focusForeground#acb0d0
- breadcrumb.foreground#787c99
- breadcrumbPicker.background#16161b
- button.background#455682DD
- button.foreground#fff
- button.hoverBackground#455682AA
- debugExceptionWidget.background#1a1a20
- debugExceptionWidget.border#1e1e25
- debugToolBar.background#1a1a20
- diffEditor.insertedTextBackground#1ABC9C11
- diffEditor.removedTextBackground#C33C4A11
- dropdown.background#16161b
- dropdown.foreground#9b9fbc
- editor.background#19191F
- editor.findMatchBackground#ffca2811
- editor.findMatchBorder#ffca28
- editor.findMatchHighlightBackground#3d3d6955
- editor.findRangeHighlightBackground#1c1c2366
- editor.foreground#9699a8
- editor.inactiveSelectionBackground#515c7e44
- editor.lineHighlightBackground#1e1e25
- editor.rangeHighlightBackground#1c1c23
- editor.selectionBackground#515c7e44
- editor.wordHighlightBackground#48658a33
- editor.wordHighlightStrongBackground#48658a44
- editorActiveLineNumber.foreground#696c7e
- editorBracketMatch.border#ffca28
- editorCodeLens.foreground#9b9fbc
- editorCursor.foreground#d26b3e
- editorError.foreground#ff3333
- editorGroup.background#16161b
- editorGroup.border#1e1e25
- editorGroup.dropBackground#20222c
- editorGroupHeader.noTabsBackground#16161b
- editorGroupHeader.tabsBackground#16161b
- editorGroupHeader.tabsBorder#1e1e25
- editorGutter.addedBackground#0f8976
- editorGutter.deletedBackground#cc0000
- editorGutter.modifiedBackground#479ac4
- editorHoverWidget.background#16161b
- editorHoverWidget.border#1e1e25
- editorIndentGuide.activeBackground#ce9c3d
- editorIndentGuide.background#23232a
- editorLineNumber.foreground#3d3f50
- editorLink.activeForeground#7ed6f9
- editorLink.foreground#6D3B66
- editorMarkerNavigation.background#16161b
- editorOverviewRuler.border#1e1e25
- editorOverviewRuler.errorForeground#ff3333
- editorOverviewRuler.warningForeground#ffca28
- editorRuler.foreground#1e1e25
- editorSuggestWidget.background#16161b
- editorSuggestWidget.border#1e1e25
- editorSuggestWidget.highlightForeground#e73e54
- editorSuggestWidget.selectedBackground#20222c
- editorUnnecessary.foreground#ffffff
- editorWarning.foreground#ffca28
- editorWhitespace.foreground#2c2c34
- editorWidget.background#16161b
- errorForeground#c97018
- extensionButton.prominentBackground#455682DD
- extensionButton.prominentForeground#fff
- extensionButton.prominentHoverBackground#455682AA
- focusBorder#696c7e8A
- foreground#9b9fbc
- gitDecoration.conflictingResourceForeground#C33C4A
- gitDecoration.ignoredResourceForeground#52576e
- gitDecoration.modifiedResourceForeground#6189bb
- gitDecoration.untrackedResourceForeground#1ABC9C
- gitlens.gutterForegroundColor#4c4f63
- gitlens.gutterUncommittedForegroundColor#4c4f63
- gitlens.trailingLineForegroundColor#4c4f63
- input.background#191a22
- input.border#20222c
- input.foreground#9b9fbc
- input.placeholderForeground#696c7e8A
- inputOption.activeBorder#20222cff
- inputValidation.errorBackground#19191F
- inputValidation.errorBorder#ff3333
- inputValidation.infoBackground#19191F
- inputValidation.infoBorder#50b4e6
- inputValidation.warningBackground#19191F
- inputValidation.warningBorder#ffca28
- list.activeSelectionBackground#20222c
- list.activeSelectionForeground#9b9fbc
- list.focusAndSelectionBackground#20222c
- list.focusAndSelectionForeground#9b9fbc
- list.focusBackground#20222c
- list.focusForeground#afbad4
- list.highlightForeground#6189bb
- list.hoverBackground#1f212a
- list.hoverForeground#9699a8
- list.inactiveFocusForeground#AFBDC4
- list.inactiveSelectionBackground#20222c
- list.inactiveSelectionForeground#acb0d0
- list.invalidItemForeground#c97018
- notification.background#1e1e25
- panel.background#16161b
- panel.border#1e1e25
- panelTitle.activeBorder#6189bb
- panelTitle.activeForeground#9699a8
- panelTitle.inactiveForeground#696c7e
- peekView.border#101013
- peekViewEditor.background#16161b
- peekViewEditor.matchHighlightBackground#48658a33
- peekViewResult.background#16161b
- peekViewResult.fileForeground#595d78
- peekViewResult.lineForeground#9b9fbc
- peekViewResult.matchHighlightBackground#48658a33
- peekViewResult.selectionForeground#acb0d0
- peekViewTitle.background#16161b
- peekViewTitleDescription.foreground#595d78
- peekViewTitleLabel.foreground#595d78
- pickerGroup.border#1e1e25
- pickerGroup.foreground#9b9fbc
- progressBar.background#6D3B66
- scrollbar.shadow#16161bff
- scrollbarSlider.activeBackground#20222c
- scrollbarSlider.background#20222c
- scrollbarSlider.hoverBackground#20222c
- selection.background#515c7e44
- sideBar.background#16161b
- sideBar.border#1e1e25
- sideBar.foreground#787c99
- sideBarSectionHeader.background#19191f
- sideBarSectionHeader.foreground#acb0d0
- sideBarTitle.foreground#696c7e
- statusBar.background#16161b
- statusBar.border#1e1e25
- statusBar.debuggingBackground#16161b
- statusBar.debuggingForeground#696c7e
- statusBar.foreground#696c7e
- statusBar.noFolderBackground#16161b
- statusBarItem.activeBackground#1e1e25
- statusBarItem.hoverBackground#20222c
- statusBarItem.prominentBackground#1e1e25
- statusBarItem.prominentHoverBackground#20222c
- tab.activeBackground#16161b
- tab.activeBorder#acb0d0
- tab.activeForeground#acb0d0
- tab.border#1e1e25
- tab.inactiveBackground#16161b
- tab.inactiveForeground#787c99
- tab.unfocusedActiveBorder#595d78
- tab.unfocusedActiveForeground#9699a8AA
- tab.unfocusedHoverBorder#acb0d0
- tab.unfocusedInactiveForeground#696c7e
- terminal.ansiBlack#595d78
- terminal.ansiBlue#50b4e6
- terminal.ansiBrightBlack#595d78
- terminal.ansiBrightBlue#6582af
- terminal.ansiBrightCyan#7ed6f9
- terminal.ansiBrightGreen#0f8976
- terminal.ansiBrightMagenta#9D599D
- terminal.ansiBrightRed#C33C4A
- terminal.ansiBrightWhite#707386
- terminal.ansiBrightYellow#ca9b55
- terminal.ansiCyan#7ed6f9
- terminal.ansiGreen#0f8976
- terminal.ansiMagenta#6D3B66
- terminal.ansiRed#C33C4A
- terminal.ansiWhite#707386
- terminal.ansiYellow#ca9b55
- terminal.background#16161b
- terminal.foreground#9699a8
- textBlockQuote.background#16161b
- textLink.activeForeground#7ed6f9
- textLink.foreground#6189bb
- textPreformat.foreground#9699a8
- titleBar.activeBackground#1a1a20
- titleBar.activeForeground#696c7e
- titleBar.border#1e1e25
- titleBar.inactiveBackground#19191F
- titleBar.inactiveForeground#696c7e
- walkThrough.embeddedEditorBackground#16161b
- welcomeOverlay.foreground#9699a8
- welcomePage.quickLinkBackground#20222c
- welcomePage.quickLinkHoverBackground#1e1e25
- widget.shadow#101013b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #AFBAD4ff | — |
| comment, punctuation.definition.comment, comment.block.documentation, comment.block.documentation variable.other, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block, keyword.other.phpdoc.php | #51546a | italic |
| entity.name.class, entity.name.type.class, variable.other.global punctuation.definition.variable | #EB606B | — |
| variable, variable.other.readwrite, variable.other.object, meta.property.object.js variable.other.object.js, variable.less, variable.other.normal, punctuation.definition.variable, variable.other.bracket.shell, embedding.php, variable.other.php, meta.property.object, source.python, source.ruby, keyword.other.name.sublime-settings, constant.other.php, meta.object-literal.key, variable.other.dollar, support.variable.property.js | #1ABC9C | regular |
| entity.name.class, meta.array.literal variable.other.readwrite, entity.name.type.class, support.type, support.class, entity.name.type.namespace, variable.other.global, variable.other.global punctuation.definition.variable, variable.other.class.js, variable.other.constant.object | #078c7c | — |
| entity.name.tag support.class.component | #C33C4A | — |
| variable.other.object.property, entity.name.type.module | #1ABC9C | — |
| variable.scss, variable.less, variable.other.less, variable.other.scss | #65dbbd | regular |
| support.other.variable, string.other.link | #6189bb | — |
| support.type.object.dom.js | #EB606B | italic |
| string.unquoted.label.js | #1ABC9C | regular |
| constant.other.object.key.js | #EB606B | regular |
| keyword, storage.modifier | #ca9b55 | — |
| keyword.other.new | — | italic |
| keyword.control.import.include | — | italic |
| keyword.control.if, keyword.control.endif, keyword.control.else, keyword.control.foreach, keyword.control.endforeach, keyword.control.while, keyword.control.endwhile, keyword.control.switch, keyword.control.endswitch, keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch, entity.name.label, keyword.control.at-rule | #ca9b55 | normal |
| storage.type | #F99157 | — |
| storage.type.function | #F99157 | normal |
| variable.language, variable.language punctuation.definition.variable | #EB606B | italic |
| keyword.operator | #50B4DC | — |
| keyword.operator.logical, keyword.control.flow.return | #FAC863 | — |
| punctuation.terminator.statement, punctuation.terminator.rule | #767D8E | — |
| punctuation.separator.key-value, meta.tag.preprocessor | #AFBAD4 | — |
| punctuation.definition.group, punctuation.definition.group.begin, punctuation.definition.group.end, punctuation.section.function, punctuation.definition.parameters, meta.brace.round.begin, meta.brace.round.end, meta.brace.round, punctuation.section.group, punctuation.section.arguments.begin, punctuation.section.arguments.end, meta.group.braces.round.function, punctuation.section.array.begin.php, punctuation.section.array.end.php | #AFBAD4 | — |
| punctuation.definition.parameters.begin, punctuation.definition.parameters.end | #F99157 | — |
| punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.dictionary, punctuation.definition.class.body.begin, punctuation.definition.class.body.end, punctuation.definition.class.body, meta.brace.curly.begin, meta.brace.curly.end, meta.brace.curly, punctuation.definition.block, punctuation.section.scope, source.json | #AFBAD4 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #6189bb | — |
| punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.array, meta.group.braces.square, meta.brace.square.begin, meta.brace.square.end, meta.brace.square, punctuation.section.array.begin, punctuation.section.array.end, punctuation.section.array, punctuation.definition.brackets, punctuation.section.brackets.begin, punctuation.section.brackets.end | #AFBAD4 | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json | #AFBAD4 | — |
| meta.function-call, meta.function-call entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level, meta.group.braces.round.function.arguments | #65dbbd | normal |
| meta.method-call entity.name.function, meta.method-call.php, meta.method-call.php entity.name.function.php | #EB606B | normal |
| support.variable.dom.js | #EB606B | italic |
| support.variable.property.dom | #6189bb | normal |
| meta.class-method, variable.function.constructor, punctuation.definition.arguments.shell, entity.name.function.shell | #EB606B | — |
| entity.name.function, support.function.magic | #FF435B | — |
| punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php | #FF435B | — |
| meta.function.parameters variable.other.php, meta.function.parameters punctuation.definition.variable | #EB606B | — |
| constant.numeric, constant.language, support.constant, constant.character, variable.parameter, variable.parameter.php punctuation.definition.variable.php | #ca9b55 | — |
| constant.numeric.json | #83AADA | — |
| variable.parameter.function | #faa16f | italic |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly | #6189bb | normal |
| string.quoted.double.json | #6189bb | — |
| support.other.namespace.use.php, meta.use.php, support.other.namespace.php | #6189bb | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #EB606B | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.inline.any.html | #EB606B | — |
| entity.other.attribute-name.html, meta.tag.attributes entity.other.attribute-name | #078c7c | — |
| entity.other.attribute-name.id.html | #F99157 | — |
| entity.other.attribute-name.class.html | #1ABC9C | — |
| meta.tag.sgml.html, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #D24D57 | — |
| entity.name.tag.inline.form, entity.name.tag.block.form | #EB8060 | — |
| text.html, text.plain, source.env, meta.tag meta.jsx.children | #AFBAD4 | — |
| text.html.markdown meta.dummy.line-break | #202127 | — |
| markup.heading | #F99157 | bold |
| markup.italic | #89B3E7 | italic |
| markup.bold | #89B3E7 | bold |
| string.other.link.title, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #1ABC9C | — |
| markup.underline.link | #0f8976 | underline |
| markup.quote | #89B3E7 | italic |
| markup.raw.inline, punctuation.definition.raw | #EB8060 | italic |
| markup.list | #879FD1 | — |
| markup.raw.block.markdown | #EB8060 | — |
| meta.separator | #2c2d35 | bold |
| support.function.misc.scss, support.function.misc.css, support.function.misc.less, support.function.less, support.function.url.css, source.css meta.property-list.css, support.function.shape.css, support.function.shape.scss, support.function.shape.less, support.function.color.css, support.function.transform.css | #F99157 | — |
| meta.at-rule.include entity.name.function | #ca9b55 | — |
| meta.set.variable, meta.set.variable support.constant.property-value.scss | #6189bb | — |
| meta.attribute-selector keyword.operator.scss, keyword.operator.css, meta.selector meta.attribute-selector keyword.operator.pattern, meta.attribute-selector keyword.operator.pattern, meta.attribute-selector keyword.operator.less | #C33C4A | — |
| meta.property-value keyword.operator.scss, meta.property-value keyword.operator.css, meta.property-value meta.attribute-selector keyword.operator.less | #F99157 | — |
| meta.at-rule.include punctuation.definition.parameters.begin.bracket.round, meta.at-rule.include punctuation.definition.parameters.end.bracket.round | #ca9b55 | — |
| keyword.operator.logic.media.css | #F99157 | italic |
| constant.numeric.css, constant.numeric.scss, constant.numeric.less, support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less | #F99157 | — |
| meta.at-rule.include.scss support.function.misc.scss, support.constant.media.css, support.type.property-name.media.css | #FAC863 | — |
| meta.at-rule.media | #ca9b55 | — |
| entity.other.attribute-name | #FF435B | — |
| entity.name.tag.reference, punctuation.definition.entity, punctuationctuation.definition.entity, meta.attribute-selector, keyword.operator.less, keyword.operator.attribute-selector | #ea5560 | — |
| meta.property-list.scss, meta.at-rule.mixin.scss, punctuation.section.property-list, punctuation.separator.parameters.scss | #AFBAD4 | — |
| variable.parameter.url | #F99157 | normal |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.pseudo-class, entity.other.pseudo-element, meta.selector.css meta.function-call.css meta.group.css punctuation.definition.group.begin.css, meta.selector.css meta.function-call.css meta.group.css punctuation.definition.group.end.css, entity.other.pseudo-element.css support.type.vendor-prefix.css, meta.property-list meta.attribute-selector string.quoted, meta.property-list punctuation.definition.pseudo-class.begin.bracket.round, meta.property-list punctuation.definition.pseudo-class.end.bracket.round | #C33C4A | — |
| punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, punctuation.definition.string.begin.less, punctuation.definition.string.end.less, meta.function-call.css meta.group.css | #E16325 | — |
| meta.property-list meta.property-value string.quoted.single.scss, meta.property-list meta.property-value string.quoted.double.scss, meta.property-list meta.property-value string.quoted.single.less, meta.property-list meta.property-value string.quoted.double.less, meta.property-list.css meta.property-value.css meta.function.url.css string.quoted.single.css | #F99157 | — |
| punctuation.definition.entity, punctuationctuation.definition.entity, meta.attribute-selector, keyword.operator.less, keyword.operator.attribute-selector, meta.attribute-selector.scss entity.other.attribute-name.attribute.scss, meta.attribute-selector.less entity.other.attribute-name.attribute.less, meta.selector.css meta.attribute-selector.css string.quoted.single.css | #c33c4a | — |
| meta.property-list.scss meta.property-value.scss, meta.property-list.scss meta.property-list.scss meta.property-value.scss, source.scss meta.property-list.scss meta.property-list.scss meta.property-value.scss support.function.misc.scss | #F99157 | — |
| constant.other.color.rgb-value | #767D8E | — |
| entity.name.tag.css, entity.name.tag.scss, keyword.control.html.elements | #EB606B | — |
| punctuation.separator.key-value | #50B4DC | — |
| keyword.other.unit, constant.other.unit | #E16325 | — |
| keyword.other.important.scss, keyword.other.important.css | #50B4DC | — |
| support.type.property-name, meta.property-name, support.type.vendor-prefix | #6189bb | — |
| meta.property-list.scss meta.property-list.scss meta.property-value.scss variable.parameter.url.scss | #159b81 | — |
| meta.property-list.scss meta.property-list.scss meta.at-rule.return.scss variable.parameter.url.scss, source.scss meta.property-list.scss meta.property-value.scss variable.parameter.url.scss | #1ABC9C | — |
| entity.name.method.js | #6699cc | — |
| support.constant.handlebars | #FAC863 | — |
| variable.parameter.handlebars | #F99157 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #FAC863 | — |
| punctuation.definition.variable.smarty, punctuation.section.embedded.begin.smarty, punctuation.section.embedded.end.smarty, meta.tag.template.value.twig, punctuation.section.tag.twig, meta.tag.expression.twig, punctuation.definition.tag.expression.twig, punctuation.definition.tag.output.twig | #FAC863 | — |
| source.smarty, variable.other.twig, variable.other.smarty, meta.tag.expression.twig, entity.name.tag.twig, meta.tag.output.twig | #ca9b55 | — |
| variable.other.property.twig, support.function.twig, meta.function-call.twig, keyword.control.twig, keyword.operator.other.twig, keyword.operator.comparison.twig, support.function.functions.twig, support.function.functions.twig, keyword.operator.assignment.twig, support.function.filters.twig, support.function.built-in.smarty, keyword.operator.smarty | #ca9b55 | — |
| string.quoted.single.twig, string.quoted.double.twig, string.quoted.single.smarty, string.quoted.double.smarty | #DBC08A | — |
| punctuation.definition.array.begin.php, punctuation.definition.array.end.php | #AFBAD4 | — |
| sublimelinter.mark.warning | #DDB700 | — |
| sublimelinter.mark.error | #D93232 | — |
| sublimelinter.gutter-mark | #FFFFFF | — |
| brackethighlighter.default | #6189bb | — |
| brackethighlighter.unmatched | #D93232 | — |
| brackethighlighter.curly, brackethighlighter.square, brackethighlighter.round, brackethighlighter.quote, brackethighlighter.tag, brackethighlighter.c_define, brackethighlighter.angle | #ffa300 | — |
| markup.changed, markup.changed.git_gutter | #6189bb | — |
| markup.deleted, markup.deleted.git_gutter | #D93232 | — |
| markup.inserted, markup.inserted.git_gutter | #1ABC9C | — |
| markup.ignored, markup.ignored.git_gutter | #3F414D | — |
| markup.untracked, markup.untracked.git_gutter | #666666 | — |
| source.apacheconf, string.path.apacheconf | #6189bb | — |
| string.value.apacheconf | #F99157 | — |
| keyword.access.apacheconf | #1ABC9C | — |
| source.apacheconf string.replacement.apacheconf | #83AADA | — |
| entity.tag.apacheconf | #EB606B | — |
| storage.type.context.nginx | #FF435B | — |
| source.nginx punctuation.definition.variable, entity.name.context.location.nginx | #83AADA | — |
| storage.type.context.location.nginx | #EB606B | — |
| string.ipaddress.nginx | #F99157 | — |
| variable.other.nginx | #1ABC9C | — |
| source.apacheconf, string.path.apacheconf | #6189bb | — |
| string.value.apacheconf | #F99157 | — |
| keyword.access.apacheconf | #1ABC9C | — |
| source.apacheconf string.replacement.apacheconf | #83AADA | — |
| entity.tag.apacheconf | #EB606B | — |
| storage.type.context.nginx | #FF435B | — |
| punctuation.definition.variable.nginx, entity.name.context.location.nginx | #83AADA | — |
| storage.type.context.location.nginx | #EB606B | — |
| string.ipaddress.nginx | #F99157 | — |
| variable.other.nginx | #1ABC9C | — |
| variable.other.bracket.shell, variable.other.normal.shell, punctuation.definition.variable.shell | #1ABC9C | regular |
| support.function.builtin, support.function.external.shell | #ca9b55 | — |
| meta.structure.array.shell, punctuation.definition.array.begin.shell, punctuation.definition.array.end.shell, meta.scope.subshell.shell, punctuation.definition.subshell.shell | #6189bb | — |
| string.regexp | #1ABC9C | — |
| constant.character.escape | #6189bb | italic |
| *url*, *link*, *uri* | #83AADA | underline |
| constant.numeric.line-number.find-in-files - match | #455682 | — |
| entity.name.filename.find-in-files | #6189bb | — |
| source.yaml string.unquoted.plain.out.yaml | #AFBAD4 | — |
| invalid, invalid.illegal, invalid.broken | #ffffff | — |
| invalid.deprecated | #ffffff | — |
| string.quoted.double.html invalid.illegal.bad-ampersand.html, string.quoted.single.html invalid.illegal.bad-ampersand.html | #6189bb | — |
| invalid.unimplemented | #ffffff | — |
| meta.structure.dictionary.json support.type.property-name.json | #FF435B | — |
| meta meta.structure.dictionary.value.json support.type.property-name.json | #1ABC9C | — |
| meta meta meta meta meta meta meta support.type.property-name.json | #F99157 | — |
| meta meta meta meta meta meta meta meta meta support.type.property-name.json | #078c7c | — |
| meta meta meta meta meta meta meta meta meta meta meta meta support.type.property-name.json | #50B4DC | — |
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#282a36
- activityBar.foreground#eff0eb
- activityBar.inactiveForeground#404353
- activityBarBadge.background#ff6ac1
- activityBarBadge.foreground#eff0eb
- badge.background#54555e
- badge.foreground#eff0eb
- breadcrumb.activeSelectionForeground#eff0eb
- breadcrumb.background#282a36
- breadcrumb.focusForeground#eff0eb
- breadcrumb.foreground#6C6E75
- breadcrumbPicker.background#282a36
- button.background#ff6ac1
- button.foreground#eff0eb
- debugToolBar.background#2C2F3D
- diffEditor.insertedTextBackground#5af78e20
- diffEditor.removedTextBackground#ff5c5750
- dropdown.background#2C2F3D
- dropdown.border#404353
- dropdown.foreground#eff0eb
- editor.background#282a36
- editor.findMatchBackground#ffbc5880
- editor.findMatchHighlightBackground#54555e
- editor.findRangeHighlightBackground#54555e
- editor.foreground#eff0eb
- editor.hoverHighlightBackground#54555e
- editor.lineHighlightBackground#2C2F3D
- editor.rangeHighlightBackground#54555e
- editor.selectionBackground#54555e
- editor.selectionHighlightBackground#54555e
- editor.snippetFinalTabstopHighlightBackground#282A36
- editor.snippetFinalTabstopHighlightBorder#5af78e
- editor.snippetTabstopHighlightBackground#282A36
- editor.snippetTabstopHighlightBorder#57c7ff
- editor.wordHighlightBackground#54555e
- editor.wordHighlightStrongBackground#54555e
- editorCodeLens.foreground#57c7ff
- editorCursor.foreground#97979b
- editorError.foreground#ff5c57
- editorGroup.border#6C6E75
- editorGroup.dropBackground#282a369b
- editorGroupHeader.tabsBackground#282a36
- editorGutter.addedBackground#5af78e80
- editorGutter.deletedBackground#ff5c5780
- editorGutter.modifiedBackground#9aedfe80
- editorHoverWidget.background#282A36
- editorIndentGuide.activeBackground#FFFFFF45
- editorIndentGuide.background#616263
- editorLineNumber.foreground#616263
- editorLink.activeForeground#ff5c57
- editorMarkerNavigation.background#232631
- editorOverviewRuler.addedForeground#5af78e80
- editorOverviewRuler.border#404353
- editorOverviewRuler.currentContentForeground#5af78e
- editorOverviewRuler.deletedForeground#ff5c5780
- editorOverviewRuler.errorForeground#ff5c5780
- editorOverviewRuler.incomingContentForeground#6C6E75
- editorOverviewRuler.infoForeground#9aedfe80
- editorOverviewRuler.modifiedForeground#9aedfe80
- editorOverviewRuler.selectionHighlightForeground#ffbc58
- editorOverviewRuler.warningForeground#ffbc5880
- editorOverviewRuler.wordHighlightForeground#9aedfe
- editorOverviewRuler.wordHighlightStrongForeground#5af78e
- editorRuler.foreground#616263
- editorSuggestWidget.background#232631
- editorSuggestWidget.foreground#eff0eb
- editorSuggestWidget.selectedBackground#54555e
- editorWarning.foreground#9aedfe
- editorWhitespace.foreground#616263
- editorWidget.background#2C2F3D
- errorForeground#ff5c57
- extensionButton.prominentBackground#5af78e90
- extensionButton.prominentForeground#eff0eb
- extensionButton.prominentHoverBackground#5af78e60
- focusBorder#6C6E75
- foreground#eff0eb
- gitDecoration.conflictingResourceForeground#ffbc58
- gitDecoration.deletedResourceForeground#ff5c57
- gitDecoration.ignoredResourceForeground#616263
- gitDecoration.modifiedResourceForeground#9aedfe
- gitDecoration.untrackedResourceForeground#5af78e
- input.background#282A36
- input.border#404353
- input.foreground#eff0eb
- input.placeholderForeground#616263
- inputOption.activeBorder#6C6E75
- inputValidation.errorBorder#ff5c57
- inputValidation.infoBorder#ff6ac1
- inputValidation.warningBorder#ffbc58
- list.activeSelectionBackground#54555e
- list.activeSelectionForeground#eff0eb
- list.dropBackground#54555e
- list.errorForeground#ff5c57
- list.focusBackground#54555e
- list.highlightForeground#9aedfe
- list.hoverBackground#54555e
- list.inactiveSelectionBackground#54555e
- list.warningForeground#ffbc58
- listFilterWidget.background#2C2F3D
- listFilterWidget.noMatchesOutline#ff5c57
- listFilterWidget.outline#616263
- merge.currentHeaderBackground#5af78e90
- merge.incomingHeaderBackground#6C6E7590
- panel.background#282A36
- panel.border#404353
- panelTitle.activeBorder#ff6ac1
- panelTitle.activeForeground#eff0eb
- panelTitle.inactiveForeground#eff0eb
- peekView.border#5af78e
- peekViewEditor.background#282a36
- peekViewEditor.matchHighlightBackground#ffbc5880
- peekViewResult.background#232631
- peekViewResult.fileForeground#eff0eb
- peekViewResult.lineForeground#eff0eb
- peekViewResult.matchHighlightBackground#ffbc5880
- peekViewResult.selectionBackground#54555e
- peekViewResult.selectionForeground#eff0eb
- peekViewTitle.background#404353
- peekViewTitleDescription.foreground#57c7ff
- peekViewTitleLabel.foreground#eff0eb
- pickerGroup.border#6C6E75
- pickerGroup.foreground#9aedfe
- progressBar.background#ff6ac1
- selection.background#6C6E75
- settings.checkboxBackground#232631
- settings.checkboxBorder#404353
- settings.checkboxForeground#eff0eb
- settings.dropdownBackground#232631
- settings.dropdownBorder#404353
- settings.dropdownForeground#eff0eb
- settings.headerForeground#eff0eb
- settings.modifiedItemIndicator#ff6ac1
- settings.numberInputBackground#232631
- settings.numberInputBorder#404353
- settings.numberInputForeground#eff0eb
- settings.textInputBackground#232631
- settings.textInputBorder#404353
- settings.textInputForeground#eff0eb
- sideBar.background#2C2F3D
- sideBar.border#404353
- sideBarSectionHeader.background#282A36
- sideBarSectionHeader.border#404353
- sideBarTitle.foreground#eff0eb
- statusBar.background#2C2F3D
- statusBar.debuggingBackground#ff5c57
- statusBar.debuggingForeground#eff0eb
- statusBar.foreground#6C6E75
- statusBar.noFolderBackground#282A36
- statusBar.noFolderForeground#eff0eb
- statusBarItem.prominentBackground#ff5c57
- statusBarItem.prominentHoverBackground#ffbc58
- tab.activeBackground#2C2F3D
- tab.activeBorder#ff6ac1
- tab.border#404353
- tab.inactiveBackground#282A36
- tab.inactiveForeground#6C6E75
- terminal.ansiBlack#282a36
- terminal.ansiBlue#57c7ff
- terminal.ansiBrightBlack#6C6E75
- terminal.ansiBrightBlue#57c7ff
- terminal.ansiBrightCyan#9aedfe
- terminal.ansiBrightGreen#5af78e
- terminal.ansiBrightMagenta#ff6ac1
- terminal.ansiBrightRed#ff5c57
- terminal.ansiBrightWhite#eff0eb
- terminal.ansiBrightYellow#ffbc58
- terminal.ansiCyan#9aedfe
- terminal.ansiGreen#5af78e
- terminal.ansiMagenta#ff6ac1
- terminal.ansiRed#ff5c57
- terminal.ansiWhite#eff0eb
- terminal.ansiYellow#ffbc58
- titleBar.activeBackground#2C2F3D
- titleBar.activeForeground#eff0eb
- titleBar.inactiveBackground#404353
- titleBar.inactiveForeground#6C6E75
- walkThrough.embeddedEditorBackground#232631
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Global settings | #eff0eb | — |
| strong, markup.bold | — | bold |
| emphasis, markup.italic | — | italic |
| markup.underline | — | underline |
| comment, punctuation.definition.comment, string.quoted.docstring | #616263 | italic |
| storage.type | #ffbc58 | — |
| storage.type.primitive, support.type, entity.name.type, keyword.type, keyword.other.unit | #9aedfe | — |
| string, meta.structure.dictionary.json string.quoted.double.json | #5af78e | — |
| constant.language.boolean | #b76aff | — |
| constant.numeric, support.constant | #ffbc58 | — |
| constant.language.null | #ff5c57 | — |
| constant.language.undefined | #ff6ac1 | — |
| meta.function entity.name.function | #57c7ff | — |
| entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.require, variable.language.super, keyword.other.get, keyword.other.set | #57c7ff | — |
| variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function | #eff0eb | — |
| variable.other.constant.property | #ffbc58 | — |
| entity.name.type.class | #ff5c57 | — |
| entity.other.inherited-class entity.name.type.module | #ff5c57 | — |
| variable.object.property | #ffbc58 | — |
| meta.definition.method entity.name.function | #ffbc58 | — |
| keyword, modifier, storage.modifier, support.type.object, constant.language, variable.language.this, variable.language.special.self | #ff6ac1 | — |
| support.module, support.node | #ff5c57 | — |
| template.expression.begin, template.expression.end | #ff6ac1 | — |
| support.type.exception | #ffbc58 | — |
| markup.inserted.diff, meta.diff.header.to-file | #5af78e | — |
| markup.deleted.diff, meta.diff.header.from-file | #ff5c57 | — |
| source.cs meta.class.identifier storage.type | #ff5c57 | — |
| source.cs meta.method.identifier entity.name.function | #ffbc58 | — |
| source.cs meta.method-call meta.method, source.cs entity.name.function | #57c7ff | — |
| source.cs storage.type | #ffbc58 | — |
| source.cs meta.method.return-type | #9aedfe | — |
| source.cs meta.preprocessor | #616263 | — |
| source.cs entity.name.type.namespace | #eff0eb | — |
| entity.other.attribute-name.class | #9aedfe | — |
| entity.other.attribute-name.id | #9aedfe | — |
| source.css entity.name.tag | #ffbc58 | — |
| source.css support.type.property-name | #ff5c57 | — |
| meta.tag, punctuation.definition.tag | #eff0eb | — |
| entity.name.tag | #ff5c57 | — |
| entity.other.attribute-name | #ffbc58 | — |
| punctuation.section.embedded | #ff5c57 | — |
| keyword.other.definition.ini | #ff5c57 | — |
| entity.name.section.group-title.ini | #57c7ff | — |
| source.java storage.modifier.package, source.java storage.modifier.import | #eff0eb | — |
| source.java storage.type.annotation | #ff5c57 | italic |
| source.java meta.method-call meta.method | #57c7ff | — |
| source.java meta.method-call meta.inner-class meta.method | #eff0eb | — |
| source.java meta.method-call meta.inner-class meta.method meta.method-call meta.method | #57c7ff | — |
| source.java meta.definition.variable entity.name.function | #57c7ff | — |
| source.java constant.language | #5af78e | — |
| source.js storage.modifier.async | #ff6ac1 | — |
| meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json | #ff5c57 | — |
| constant.language.json | #ff6ac1 | — |
| markup.heading | #57c7ff | — |
| text.html.markdown meta.link.inline, meta.link.reference, markup.underline.link.image | #ff5c57 | — |
| text.html.markdown markup.quote | #9aedfe | — |
| text.html.markdown beginning.punctuation.definition.list | #ffbc58 | — |
| text.html.markdown markup.inline.raw | #ff6ac1 | — |
| markup.italic | #ff5c57 | italic |
| markup.bold | #ff5c57 | bold |
| markup.bold markup.italic, markup.italic markup.bold | #ff5c57 | italic bold |
| source.python keyword.operator.arithmetic | #eff0eb | — |
| source.python meta.function storage.type.function | #ff6ac1 | — |
| source.python meta.function-call.arguments | #eff0eb | — |
| source.python meta.function entity.name.function.decorator | #ff5c57 | — |
| source.python constant.language | #5af78e | — |
| entity.name.tag.yaml | #ff5c57 | — |
| meta.selectionset.graphql variable | #ffbc58 | — |
| meta.selectionset.graphql meta.arguments variable | #eff0eb | — |
| entity.name.fragment.graphql, variable.fragment.graphql | #9aedfe | — |