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.activeBackground#b141f133
- activityBar.activeBorder#b141f1
- activityBar.background#1f1529
- activityBar.border#2a2139
- activityBar.dropBackground#49549565
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#ffffff77
- activityBarBadge.background#b141f1
- activityBarBadge.foreground#2a2139
- badge.background#b141f1
- badge.foreground#2a2139
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.background#1f1529
- breadcrumb.focusForeground#b141f1
- breadcrumb.foreground#ffffff99
- breadcrumbPicker.background#1f1529
- button.background#b141f121
- button.foreground#ffffff
- button.hoverBackground#495495
- debugExceptionWidget.background#1f1529
- debugExceptionWidget.border#ffffff
- debugToolBar.background#1f1529
- descriptionForeground#495495
- diffEditor.insertedTextBackground#54e48425
- diffEditor.removedTextBackground#b141f116
- dropdown.background#1f1529
- dropdown.border#1f1529
- dropdown.foreground#495495
- editor.background#1f1529
- editor.findMatchBackground#34294f
- editor.findMatchHighlightBackground#34294f88
- editor.findRangeHighlightBackground#34294f1a
- editor.foreground#d4cdde
- editor.hoverHighlightBackground#34294f4d
- editor.inactiveSelectionBackground#ffffff33
- editor.lineHighlightBackground#34294f66
- editor.lineHighlightBorder#34294f66
- editor.rangeHighlightBackground#49549539
- editor.selectionBackground#46346588
- editor.selectionHighlightBackground#b141f133
- editor.snippetFinalTabstopHighlightBackground#130e11
- editor.snippetFinalTabstopHighlightBorder#130e11
- editor.snippetTabstopHighlightBackground#130e11
- editor.snippetTabstopHighlightBorder#130e11
- editor.wordHighlightBackground#34294f88
- editor.wordHighlightStrongBackground#34294f88
- editorBracketMatch.background#34294f66
- editorBracketMatch.border#495495
- editorCodeLens.foreground#ffffffcc
- editorCursor.foreground#b141f1
- editorError.border#1f1529
- editorError.foreground#b141f1
- editorGroup.border#2a2139
- editorGroup.dropBackground#49549533
- editorGroup.emptyBackground#49549533
- editorGroupHeader.noTabsBackground#1f1529
- editorGroupHeader.tabsBackground#1f1529
- editorGroupHeader.tabsBorder#130e11
- editorGutter.addedBackground#58c7e0
- editorGutter.background#1f1529
- editorGutter.deletedBackground#b141f1
- editorGutter.modifiedBackground#54e484
- editorHint.border#54e48400
- editorHint.foreground#54e484
- editorHoverWidget.background#130e11
- editorHoverWidget.border#2a2139
- editorIndentGuide.activeBackground#2a2139
- editorIndentGuide.background#49549539
- editorInfo.border#1f1529
- editorInfo.foreground#b141f1
- editorLineNumber.activeForeground#495495
- editorLineNumber.foreground#495495
- editorLink.activeForeground#649fc4
- editorMarkerNavigation.background#43435629
- editorMarkerNavigationError.background#b141f1
- editorMarkerNavigationWarning.background#e0b401
- editorOverviewRuler.addedForeground#58c7e0
- editorOverviewRuler.border#1f1529
- editorOverviewRuler.commonContentForeground#e0b40144
- editorOverviewRuler.currentContentForeground#2a213944
- editorOverviewRuler.deletedForeground#b141f1
- editorOverviewRuler.errorForeground#b141f1dd
- editorOverviewRuler.findMatchForeground#34294f
- editorOverviewRuler.incomingContentForeground#cac4f544
- editorOverviewRuler.modifiedForeground#54e484
- editorOverviewRuler.warningForeground#b141f1cc
- editorRuler.foreground#34294f33
- editorSuggestWidget.background#130e11
- editorSuggestWidget.border#2a2139
- editorSuggestWidget.foreground#ffffff99
- editorSuggestWidget.highlightForeground#b141f1
- editorSuggestWidget.selectedBackground#1f1529
- editorWarning.border#1f1529
- editorWarning.foreground#e0b401
- editorWhitespace.foreground#ffffff21
- editorWidget.background#1f1529
- editorWidget.border#2a2139
- errorForeground#b141f1
- extensionButton.prominentBackground#b141f1
- extensionButton.prominentForeground#e5f5f5
- extensionButton.prominentHoverBackground#58c7e0
- focusBorder#1f1529
- foreground#495495
- gitDecoration.addedResourceForeground#b141f1cc
- gitDecoration.conflictingResourceForeground#e0b401
- gitDecoration.deletedResourceForeground#b141f1
- gitDecoration.ignoredResourceForeground#ffffff59
- gitDecoration.modifiedResourceForeground#b893ceee
- gitDecoration.untrackedResourceForeground#b141f1
- input.background#130e11
- input.border#130e11
- input.foreground#d4cdde
- input.placeholderForeground#d4cdde
- inputOption.activeBorder#d4cdde
- inputValidation.errorBackground#b141f180
- inputValidation.errorBorder#b141f100
- inputValidation.errorForeground#b141f1
- inputValidation.infoBackground#1f1529
- inputValidation.infoBorder#58c7e0
- inputValidation.infoForeground#b141f1
- inputValidation.warningBackground#1f1529
- inputValidation.warningBorder#e0b401
- inputValidation.warningForeground#e0b401
- list.activeSelectionBackground#2a213980
- list.activeSelectionForeground#ffffff
- list.dropBackground#34294f66
- list.errorForeground#b141f1E6
- list.focusBackground#1f1529
- list.focusForeground#ffffff
- list.highlightForeground#b141f1
- list.hoverBackground#1f1529
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#1f1529
- list.inactiveSelectionBackground#34294f66
- list.inactiveSelectionForeground#ffffff
- list.warningForeground#e0b401
- listFilterWidget.background#130e11
- listFilterWidget.noMatchesOutline#b141f1
- listFilterWidget.outline#54e484
- menu.background#1f1529
- menu.foreground#ffffff99
- menu.selectionBackground#1f1529
- menu.selectionBorder#1f1529
- menu.selectionForeground#b141f1
- menu.separatorBackground#b141f1
- menubar.selectionBackground#1f1529
- menubar.selectionBorder#1f1529
- menubar.selectionForeground#b141f1
- merge.border#1f152900
- merge.commonContentBackground#e0b40122
- merge.commonHeaderBackground#e0b40144
- merge.currentContentBackground#2a213922
- merge.currentHeaderBackground#2a213944
- merge.incomingContentBackground#aea8dc22
- merge.incomingHeaderBackground#aea8dc44
- minimap.errorHighlight#b141f1ee
- minimap.findMatchHighlight#b141f1ee
- minimap.warningHighlight#e0b401ee
- minimapGutter.addedBackground#58c7e0
- minimapGutter.deletedBackground#b141f1
- minimapGutter.modifiedBackground#54e484
- notificationCenter.border#1f1529
- notificationCenterHeader.background#1f1529
- notificationCenterHeader.foreground#d4cdde
- notificationLink.foreground#ffffff
- notifications.background#1f1529
- notifications.border#1f1529
- notifications.foreground#d4cdde
- notificationToast.border#1f1529
- panel.background#130e11
- panel.border#2a2139
- panelTitle.activeBorder#495495
- panelTitle.activeForeground#b141f1
- panelTitle.inactiveForeground#ffffff
- peekView.border#495495
- peekViewEditor.background#1f1529
- peekViewEditor.matchHighlightBackground#34294f
- peekViewEditor.matchHighlightBorder#1f1529
- peekViewEditorGutter.background#1f1529
- peekViewResult.background#1f1529
- peekViewResult.fileForeground#e0b401
- peekViewResult.lineForeground#ffffff
- peekViewResult.matchHighlightBackground#1f1529
- peekViewResult.selectionBackground#1f1529
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#1f1529
- peekViewTitleDescription.foreground#ffffff
- peekViewTitleLabel.foreground#b141f1
- pickerGroup.border#58c7e0
- pickerGroup.foreground#d4cdde
- progressBar.background#b141f1
- scrollbar.shadow#2a2139
- scrollbarSlider.activeBackground#b141f177
- scrollbarSlider.background#b141f133
- scrollbarSlider.hoverBackground#b141f155
- selection.background#34294f
- settings.checkboxBackground#1f1529
- settings.checkboxBorder#1f1529
- settings.checkboxForeground#495495
- settings.dropdownBackground#1f1529
- settings.dropdownBorder#1f1529
- settings.dropdownForeground#495495
- settings.dropdownListBorder#34294f
- settings.headerForeground#b141f1
- settings.modifiedItemIndicator#58c7e0
- settings.numberInputBackground#130e11
- settings.numberInputBorder#130e11
- settings.numberInputForeground#7068b1
- settings.textInputBackground#1f1529
- settings.textInputBorder#1f1529
- settings.textInputForeground#495495
- sideBar.background#130e11
- sideBar.border#2a2139
- sideBar.dropBackground#130e11
- sideBar.foreground#ffffff99
- sideBarSectionHeader.background#1f1529
- sideBarSectionHeader.border#2a2139
- sideBarSectionHeader.foreground#ffffff99
- sideBarTitle.foreground#ffffff99
- statusBar.background#130e11
- statusBar.border#2a2139
- statusBar.debuggingBackground#1f1529
- statusBar.debuggingBorder#08080faf
- statusBar.debuggingForeground#b141f1
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#1f1529
- statusBar.noFolderBorder#1f1529
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#1f152966
- statusBarItem.hoverBackground#2a2139
- statusBarItem.prominentBackground#2a2139
- statusBarItem.prominentHoverBackground#34294f
- tab.activeBackground#1f1529
- tab.activeBorder#f92aad
- tab.activeBorderTop#1f1529
- tab.activeForeground#d4cdde
- tab.activeModifiedBorder#54e484
- tab.border#2a2139
- tab.inactiveBackground#1f1529
- tab.inactiveForeground#ffffff99
- tab.unfocusedActiveBackground#180627
- tab.unfocusedActiveBorder#1f1529
- tab.unfocusedActiveForeground#ffffff99
- tab.unfocusedHoverBackground#b141f121
- tab.unfocusedInactiveForeground#ffffff99
- terminal.ansiBlack#34294f
- terminal.ansiBlue#58c7e0
- terminal.ansiBrightBlack#34294f
- terminal.ansiBrightBlue#53c8e2
- terminal.ansiBrightCyan#53c8e2
- terminal.ansiBrightGreen#54e484
- terminal.ansiBrightMagenta#b141f1
- terminal.ansiBrightRed#f92aad
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#e0b401
- terminal.ansiCyan#53c8e2
- terminal.ansiGreen#54e484
- terminal.ansiMagenta#b141f1
- terminal.ansiRed#f92aad
- terminal.ansiWhite#495495
- terminal.ansiYellow#e0b401
- terminal.background#130e11
- terminal.foreground#d4cdde
- terminalCursor.background#130e11
- terminalCursor.foreground#b141f1
- textBlockQuote.background#1f1529
- textBlockQuote.border#d4cdde
- textCodeBlock.background#1f1529
- textLink.activeForeground#b141f1
- textLink.foreground#b141f1
- textPreformat.foreground#e0b401
- textSeparator.foreground#1f1529
- titleBar.activeBackground#1f1529
- titleBar.activeForeground#b141f1
- titleBar.inactiveBackground#1f1529
- titleBar.inactiveForeground#ffffff99
- tree.indentGuidesStroke#495495
- walkThrough.embeddedEditorBackground#1f1529
- welcomePage.buttonBackground#130e11
- welcomePage.buttonHoverBackground#1f1529
- widget.shadow#2a2139
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, punctuation.definition.tag, comment.block.documentation punctuation.definition.bracket, source.ocaml comment constant.regexp meta.separator | #6071cc | — |
| constant.character, constant.escape, text.html.markdown, punctuation.definition.list_item, keyword.begin.tag.ejs, constant.name.attribute.tag.pug, source.clojure meta.symbol, constant.other.description.jsdoc, keyword.other.array.phpdoc.php, keyword.operator.other.powershell, meta.link.inline punctuation.definition.string, source.sql, source meta.brace, source punctuation, text.html punctuation, markup meta punctuation.definition, meta.bracket.julia, meta.array.julia, punctuation.separator.key-value, entity.name.footnote, source.ocaml punctuation.definition.tag, source.ocaml entity.name.filename, source.reason entity.name.filename, entity.other.attribute-name strong, binding.fsharp keyword.symbol.fsharp, entity.name.record.field.elm, entity.name.record.field.accessor.elm, storage.modifier.array.bracket, source.css entity.other, meta.attribute-selector punctuation.definition.entity | #d4cdde | — |
| keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.modifier, meta.tag.sgml, punctuation.accessor, constant.other.color, entity.name.section, markup.heading, markup.heading punctuation.definition, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.type.function.pug, text.pug storage.type, text.pug meta.tag.other, source.clojure storage.control, meta.expression.clojure, punctuation.separator.slice.python, punctuation.separator.question-mark.cs, punctuation.definition.parameters.varargs, source.go keyword.operator, punctuation.separator.pointer-access, punctuation.separator.other.ruby, keyword.package, keyword.import, punctuation.definition.keyword, punctuation.separator.hash.cs, variable.parameter.rest.lua, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.kotlin storage.type.import, source.kotlin storage.type.package, constant.string.documentation.powershell, punctuation.section.directive, storage.type.rust, punctuation.definition.attribute, punctuation.definition.preprocessor, punctuation.separator.namespace, punctuation.separator.method, keyword.control punctuation.definition.function, source.ocaml variable.interpolation string, source.reason variable.interpolation, punctuation.definition.directive, storage.type.modifier, keyword.other.class.fileds, source.toml entity.other.attribute-name, sharing.modifier, keyword.control.class.ruby, keyword.control.def.ruby | #f92aad | — |
| variable, variable.object, variable.other, variable.parameter, support, entity.name.module, variable.import.parameter, variable.other.class, meta.toc-list.id.html, source.json meta.structure.dictionary.json support.type.property-name.json, markup.list, meta.var.clojure, entity.name.variable, source.java meta.class.body.java, entity.name.package.go, source.c, source.cpp, source.go, source.python, meta.function-call.arguments.python, source.ruby, source.coffee.embedded.source, source.coffee, storage.modifier.import, storage.modifier.package, storage.type.annotation, punctuation.definition.annotation, source.groovy.embedded.source, punctuation.definition.variable, source.powershell, string.quoted.interpolated.vala constant.character.escape.vala, source.apacheconf, source.objc, source.crystal, string.quoted.double.kotlin entity.string.template.element.kotlin, entity.name.package.kotlin, meta.template.expression.kotlin, parameter.variable.function, variable.other.constant.elixir, source.elixir.embedded.source, source.sql.embedded, punctuation.definition.placeholder, source.swift, source.julia, source.shell, variable.other.normal punctuation.definition.variable.shell, source.reason variable.language, source.reason variable.language string.other.link, source.elm meta.value, source.elm meta.declaration.module, meta.embedded.block variable punctuation.definition.variable.php, string.quoted.double.class.other, source.toml keyword, support.type.nim, source.tf meta.template.expression, source.scala entity.name.import, source.css entity.name.tag.custom | #58c7e0 | — |
| support.variable.property, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, entity.name.type.annotation.kotlin, support.type.primitive, meta.type.parameters entity.name.type, meta.type.annotation entity.name.type, punctuation.definition.typeparameters, source.python support.type.python, comment.block.documentation.phpdoc.php keyword.other.type.php, storage.type.php, keyword.type, storage.type.cs, storage.type.c, storage.type.objc, punctuation.definition.storage.type.objc, markup punctuation.definition, storage.type.powershell, comment.block.documentation entity.name.type, source.java storage.type, storage.type.primitive, source.groovy storage.type, storage.type.r, source.haskell storage.type, punctuation.separator.clause-head-body, source.go storage.type, storage.type.core.rust, storage.class.std.rust, storage.modifier.lifetime.rust, entity.name.lifetime.rust, support.type.vb, entity.name.type.kotlin, support.type.julia, constant.other.reference, source.graphql support.type, source.reason support.type string, entity.name.type.fsharp, source.elm storage.type, storage.type.user-defined, storage.type.built-in, support.type.builtin, source.swift support.type, support.class.crystal, storage.type.integral, source.cpp storage.type.cpp, source.vala storage.type, source.hlsl storage.type.basic, source.hlsl support.type.other, source.apex storage.type, source.nim storage.type, source.cpp entity.name.type, support.class.builtin, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class | #58c7e0 | — |
| constant, variable.other.constant, support.constant, punctuation.definition.entity, constant.character.entity, support.variable.magic, markup.quote, entity.name.type.type-parameter.cs, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.type.scala, entity.helper.apacheconf, variable.language.crystal, punctuation.definition.constant, support.constant punctuation.definition.variable, constant.character.math, support.class.math, source.graphql constant.character, source.reason constant.language.list, source.cpp variable.other.enummember, meta.table.lua variable.other, support.variable.class.hideshow, entity.other.attribute-name.class, meta.attribute.id entity.other.attribute-name, text.html entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name, text.xml entity.other.attribute-name, source.cs entity.other.attribute-name, constant.character.format.placeholder, constant.other.placeholder | #b141f1 | — |
| variable.language, variable.parameter.function.language.special, markup.bold, markup.italic, punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, variable.language punctuation.definition.variable, keyword.control.clojure, support.type.exception.python, keyword.other.this.cs, keyword.other.base.cs, keyword.other.var.cs, storage.modifier.super, source.go keyword, keyword.function.go, meta.separator, keyword.other.fn.rust, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, source.scala keyword.declaration, storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.tag.apacheconf, keyword.other.julia, source.julia storage.modifier, constant.language.empty-list.haskell, meta.function.powershell storage.type.powershell, keyword.control.fun, punctuation.terminator.function, keyword.other.rust, keyword.other.declaration-specifier.swift, keyword.control.function-end.lua, keyword.control.class, keyword.control.def, source.ocaml keyword markup.underline, source.ocaml storage.type markup.underline, binding.fsharp keyword, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, meta.embedded.block variable.language punctuation.definition.variable.php, keyword.declaration.dart, source.wsd keyword.other.class, source.wsd keyword.other.linebegin, keyword.other.skinparam.keyword, keyword.other.nim, markup.deleted.diff, source.tf support.class.variable | #54e484 | — |
| string, punctuation.definition.string, source.css support.constant, entity.name.import.go, markup.raw.texttt, markup.inserted.diff, source.scala punctuation.definition.character, constant.character.literal.scala, source.tf entity.name | #b141f1 | — |
| string.template, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc, string.quoted.interpolated.vala, string.quoted.interpolated.vala punctuation.definition.string, string.regexp.apacheconf, markup.inline.raw.string, markup.inline.raw punctuation.definition.raw, string.quoted.double.interpolated.crystal, string.quoted.double.interpolated.crystal punctuation.definition.string, text.tex markup.raw | #b141f1 | — |
| constant.numeric, constant.language, punctuation.separator.decimal.period.php, keyword.operator.null-conditional.cs, punctuation.separator.question-mark.cs, constant.integer.apacheconf, keyword.operator.nullable-type, constant.language punctuation.definition.variable, constant.others.fsharp, keyword.other.unit, string.quoted.double.skinparam.value, source.toml constant | #b141f1 | — |
| variable.function, support.type.property-name, entity.name.function, markup.underline.link, markup.underline.link.image, string.other.link, markup.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy, punctuation.definition.decorator, support.function.any-method, text.tex support.function, text.tex punctuation.definition.function, entity.name.section.fsharp entity.name.section.fsharp, support.variable.class.function, keyword.control.cucumber.table, punctuation.decorator, source.tf support.class | #e0b401 | — |
| entity.name, entity.other, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type, support.class, punctuation.definition.parameters, support.function, support.function.construct, markup.changed.git_gutter, markup.underline, meta.symbol.namespace.clojure, entity.mime-type.apacheconf, keyword.operator.function.infix, entity.name.function.infix, entity.name.function.call.kotlin, text.tex support.function.verb, text.tex support.function.texttt, source.reason constant.language.unit, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, constant.language.unit.fsharp, source.wsd support.class.preprocessings, keyword.language.gherkin.feature.scenario, source.nim keyword.other.common.function, entity.name.type.namespace, entity.name.scope-resolution.function.call | #58c7e0 | — |
| source.js constant.other.object.key.js string.unquoted.label.js, source.js punctuation.section.embedded, punctuation.definition.template-expression, support.class, entity.name.type, storage.type.string.python, string.interpolated.pug, support.constant.handlebars, source.clojure punctuation.section.set, source.clojure punctuation.section.metadata, entity.global.clojure, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python, punctuation.definition.interpolation, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby source.ruby, support.constant.math, entity.namespace.r, meta.method-call.groovy storage.type.groovy, entity.name.function-table.lua, source.scala entity.name.class.declaration, constant.character.escape, support.function.macro.julia, string.replacement.apacheconf, storage.modifier.using.vala, constant.other.haskell, source.objc entity.name.tag, string.quoted.other.literal.upper.crystal punctuation.definition.string, meta.embedded.line.crystal punctuation.section.embedded, meta.embedded.line.crystal punctuation.section.embedded source.crystal, punctuation.section.embedded, punctuation.section.tag, punctuation.section.embedded source.swift, variable.other.bracket punctuation.definition.variable, string.interpolated.dollar punctuation.definition.string, constant.character.escape punctuation.definition.keyword, source.ocaml entity.name.class constant.numeric, source.reason entity.name.class, keyword.format.specifier.fsharp, support.module.elm, meta.embedded.block.php punctuation.definition.variable.php, support.variable.lua, source.vala storage.type, support.variable.class.group, entity.name.type.class, source.tf meta.keyword.list, source.tf meta.keyword.map | #58c7e0 | — |
| invalid, invalid.illegal | #b16a4e | — |
| comment, storage.modifier, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, variable.other.table.property.lua, storage.type.scala, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, variable.other.field, keyword.function.go, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, storage.type.built-in, storage.type.primitive, source.python support.type.python, storage.type.core.rust, source.swift support.type, source.go storage.type, storage.type.php, storage.type.function.kotlin, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, support.class.builtin, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, keyword.control.export | — | italic |
| keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, storage.type.function.pug, storage.type.function.python, storage.type.annotation, punctuation.bracket.angle, keyword.other.new, punctuation.separator.question-mark.cs, storage.type.generic.wildcard, source.go keyword.operator, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, variable.parameter, support.function.builtin.rust, storage.type.function.coffee, entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, meta.function.parameters variable.other, entity.name.type.annotation.kotlin, storage.type.objc, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, source.ruby punctuation.definition.variable, punctuation.separator.method, support.function.textbf, source.graphql support.type.builtin, source.ocaml variable.interpolation string, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, keyword.control.class.ruby, keyword.control.def.ruby | — | 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, text.html punctuation.section.embedded, variable.other.c, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, keyword.other.fn.rust, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name | — | bold italic |
| keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.lua storage.type.function, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, storage.modifier.using.vala, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.function-end.lua, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, storage.type, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, storage.modifier.array.bracket, keyword.control.default, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration | — |
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#222223
- activityBar.border#222223
- activityBar.foreground#E6E6E6
- activityBarBadge.background#19f9d8
- activityBarBadge.foreground#242526
- badge.background#6FC1FF
- badge.foreground#676B79
- button.background#45A9F9
- button.foreground#FFFFFF
- button.hoverBackground#676B79
- diffEditor.insertedTextBackground#19f9d866
- diffEditor.removedTextBackground#FF4B8266
- editor.background#292A2B
- editor.findMatchBackground#B084EB90
- editor.findMatchHighlightBackground#FFB86C40
- editor.foreground#E6E6E6
- editor.inactiveSelectionBackground#FFB86C40
- editor.lineHighlightBackground#31353a
- editor.selectionBackground#FFB86C40
- editor.selectionHighlightBackground#FFB86C40
- editor.wordHighlightBackground#FFCC9560
- editor.wordHighlightStrongBackground#FF9AC170
- editorBracketMatch.border#19f9d8
- editorCodeLens.foreground#FFB86C40
- editorCursor.foreground#FF4B82
- editorError.border#FF4B82
- editorError.foreground#FF4B82
- editorGutter.addedBackground#19f9d8
- editorGutter.deletedBackground#FF4B82
- editorGutter.modifiedBackground#FFCC95
- editorHoverWidget.background#31353a
- editorOverviewRuler.addedForeground#19f9d8
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#FF4B82
- editorOverviewRuler.errorForeground#FF4B82
- editorOverviewRuler.infoForeground#6FC1FF
- editorOverviewRuler.modifiedForeground#FFCC95
- editorOverviewRuler.warningForeground#FFCC95
- editorRuler.foreground#B084EB60
- editorSuggestWidget.selectedBackground#19f9d899
- editorWarning.border#FFCC95
- editorWarning.foreground#FFCC95
- editorWhitespace.foreground#4E5260
- editorWidget.background#2a2c2d
- editorWidget.border#373B41
- errorForeground#FF4B82
- extensionButton.prominentBackground#45A9F9
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#676B79
- foreground#E6E6E6
- list.activeSelectionBackground#292A2B
- list.activeSelectionForeground#19f9d8
- list.focusBackground#292A2B
- list.focusForeground#19f9d8
- list.highlightForeground#6FC1FF
- list.hoverBackground#292A2B
- list.hoverForeground#CDCDCD
- list.inactiveSelectionBackground#292A2B
- list.inactiveSelectionForeground#19f9d8
- merge.currentContentBackground#B084EB40
- merge.currentHeaderBackground#B084EB90
- merge.incomingContentBackground#FFB86C40
- merge.incomingHeaderBackground#45A9F990
- progressBar.background#B084EB
- scrollbar.shadow#222223
- scrollbarSlider.activeBackground#757575
- scrollbarSlider.background#373B4199
- scrollbarSlider.hoverBackground#757575
- sideBar.background#242526
- sideBar.border#222223
- sideBar.foreground#BBBBBB
- statusBar.background#222223
- statusBar.debuggingBackground#B084EB
- statusBar.debuggingForeground#E6E6E6
- statusBar.foreground#E6E6E6
- statusBar.noFolderBackground#242526
- statusBar.noFolderForeground#E6E6E6
- tab.activeBackground#292A2B
- tab.activeBorder#19f9d8
- tab.activeForeground#19f9d8
- tab.inactiveBackground#242526
- tab.inactiveForeground#E6E6E6
- terminal.ansiBlue#45A9F9
- terminal.ansiBrightBlack#757575
- terminal.ansiBrightBlue#6FC1FF
- terminal.ansiBrightCyan#BCAAFE
- terminal.ansiBrightGreen#19f9d8
- terminal.ansiBrightMagenta#FF9AC1
- terminal.ansiBrightRed#FF2C6D
- terminal.ansiBrightWhite#E6E6E6
- terminal.ansiBrightYellow#FFCC95
- terminal.ansiCyan#B084EB
- terminal.ansiGreen#19f9d8
- terminal.ansiMagenta#FF75B5
- terminal.ansiRed#FF2C6D
- terminal.ansiWhite#CDCDCD
- terminal.ansiYellow#FFB86C
- terminalCursor.background#E6E6E6
- terminalCursor.foreground#FF4B82
- titleBar.activeBackground#242526
- titleBar.activeForeground#E6E6E6
- titleBar.inactiveBackground#242526
- titleBar.inactiveForeground#E6E6E6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #676B79 | italic |
| keyword | #FF75B5 | — |
| keyword.control, keyword.operator.new | #FF75B5 | — |
| keyword.operator | #E6E6E6 | — |
| keyword.operator.logical, keyword.operator.comparison | #FFCC95 | — |
| storage | #FFB86C | — |
| constant | #FFB86C | — |
| constant.character.escape | #45A9F9 | — |
| variable | #E6E6E6 | — |
| variable.parameter | #BBBBBB | — |
| meta.object-binding-pattern-variable.js variable | #FFCC95 | — |
| variable.other.constant, variable.language.this, variable.interpolation | #FF9AC1 | — |
| variable.other.object | #FF9AC1 | — |
| variable.other.property | #E6E6E6 | — |
| invalid.illegal | — | — |
| invalid.deprecated | — | — |
| string | #19f9d8 | — |
| punctuation.definition.template-expression | #FFCC95 | — |
| support | #FFCC95 | — |
| support.class | #FFCC95 | — |
| support.type.object.module.js | #B084EB | — |
| support.function | #6FC1FF | — |
| entity.name.function | #6FC1FF | — |
| entity.other.inherited-class | #FF9AC1 | — |
| entity.name.tag.yaml | #FFCC95 | — |
| meta.decorator punctuation.decorator | #FFB86C | — |
| meta.decorator variable | #6FC1FF | — |
| keyword.other.special-method | #45A9F9 | — |
| keyword.control.at-rule | #B084EB | — |
| keyword.other.important | #FF4B82 | — |
| variable.interpolation | #FF75B5 | — |
| meta.source.handlebars entity.name.tag | #6FC1FF | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #FFCC95 | italic |
| entity.name.function.expression | #FF75B5 | — |
| entity.unescaped.expression | #B084EB | — |
| constant.other.symbol | #19f9d8 | — |
| entity.expression variable.parameter.name | #FFB86C | — |
| entity.expression variable.parameter.value | #6FC1FF | — |
| entity.expression support.function.builtin | #FF9AC1 | — |
| entity.name.tag.html | #FFCC95 | — |
| entity.other.attribute-name.handlebars | #FFCC95 | — |
| support.class.component | #FF75B5 | italic |
| meta.tag.js entity.name.tag | #FFCC95 | — |
| entity.other.attribute-name | #FFB86C | — |
| markup.bold | #FFB86C | — |
| punctuation.definition.bold.markdown | #FFCC95 | — |
| markup.changed | #FF75B5 | — |
| markup.deleted | #FF2C6D | — |
| markup.italic | #FF9AC1 | italic |
| punctuation.definition.italic.markdown | #FF75B5 | italic |
| markup.inserted | #19f9d8 | — |
| punctuation.definition.heading | #19f9d8 | — |
| entity.name.section.markdown | #BBBBBB | — |
| markup.quote | #FFB86C | — |
| markup.inline.raw | #19f9d8 | italic |
| beginning.punctuation.definition.list | #FF75B5 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #757575 | — |
| fenced_code.block.language | #BBBBBB | italic |
| string.other.link | #BBBBBB | normal |
| meta.link.inline.markdown | #45A9F9 | italic |
| text.html.markdown punctuation.definition.string | #FFCC95 | — |
| entity.name.type.class.js | #6FC1FF | — |
| keyword.control.as.js | #FF9AC1 | — |
| keyword.control.from.js.jsx | #FF9AC1 | — |
| keyword.control.export.js | #B084EB | — |
| entity.name.tag.js.jsx, support.class.component.js.jsx | #FF2C6D | — |
| variable.language.super.js.jsx | #45A9F9 | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #FF2C6D | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html | #FF2C6D | — |
| entity.name.tag.css | #FF2C6D | — |
| support.type.property-name.css | #E6E6E6 | — |
| variable.scss | #FF9AC1 | — |
| entity.name.tag.reference.scss | #FF2C6D | — |
| keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css | #FFB86C | — |
| string.regexp | #6FC1FF | — |
| string.regexp keyword, string.regexp keyword.control | #FF75B5 | normal |
| string.regexp keyword.operator | #FF9AC1 | — |
| comment.block.documentation | — | normal |
| entity.name.type.instance.jsdoc punctuation.definition | #FFCC95 | italic |
| entity.name.type.instance.jsdoc | #CDCDCD | italic |
| comment.block storage | #FFCC95 | — |
| comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string | #FF9AC1 | — |
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#0892d0
- activityBar.background#292421
- activityBar.border#36393f
- activityBar.foreground#00C78C
- activityBar.inactiveForeground#696f5e
- activityBarBadge.background#8470FF
- badge.background#0892d0
- button.background#2B3C5D
- debugIcon.pauseForeground#007fff
- debugIcon.restartForeground#24bfa5
- debugIcon.stepIntoForeground#ffd700
- debugIcon.stepOutForeground#ffff00
- debugIcon.stopForeground#FF6103
- debugToolBar.background#020202
- dropdown.background#36393f
- editor.background#292421
- editor.findMatchHighlightBackground#020202
- editor.findMatchHighlightBorder#36393f
- editor.foreground#e5e4e2
- editor.selectionBackground#36393f
- editorCursor.foreground#24bfa5
- editorGroup.border#8470FF
- editorGroupHeader.tabsBorder#596F99
- editorHoverWidget.background#36393f
- editorHoverWidget.border#3D59AB
- editorWhitespace.foreground#36393f
- editorWidget.background#000
- editorWidget.border#00b294
- extensionButton.prominentBackground#00C957
- extensionButton.prominentHoverBackground#00FF7F
- focusBorder#596F99
- input.background#36393f
- inputOption.activeBorder#1D4A87
- inputValidation.errorBackground#A22D44
- inputValidation.errorBorder#AB395B
- inputValidation.infoBackground#051336
- inputValidation.infoBorder#384078
- inputValidation.warningBackground#5B7E7A
- inputValidation.warningBorder#5B7E7A
- list.activeSelectionBackground#483D8B
- list.dropBackground#041D52
- list.focusBackground#483D8B
- list.highlightForeground#0063a5
- list.hoverBackground#36393f
- list.inactiveSelectionBackground#36393f
- list.warningForeground#ff9c1b
- menu.background#292421
- menu.border#000
- menu.foreground#c0c0c0
- menu.separatorBackground#EEE9E9
- menubar.selectionBackground#292421
- panel.border#008080
- panelTitle.activeBorder#8470FF
- panelTitle.activeForeground#00C78C
- panelTitle.inactiveForeground#8470FF
- pickerGroup.border#3D59AB
- pickerGroup.foreground#596F99
- progressBar.background#8470FF
- scrollbar.shadow#36393f
- scrollbarSlider.activeBackground#3B3F5188
- scrollbarSlider.background#696f5e
- scrollbarSlider.hoverBackground#3B3F5188
- settings.headerForeground#8470FF
- settings.modifiedItemIndicator#00C957
- sideBar.background#292421
- sideBarSectionHeader.background#3D59AB
- sideBarTitle.foreground#00C78C
- statusBar.background#00C957
- statusBar.debuggingBackground#483D8B
- statusBar.noFolderBackground#3D59AB
- statusBarItem.activeBackground#292421
- statusBarItem.hoverBackground#292421
- statusBarItem.prominentBackground#292421
- tab.activeBorderTop#24bfa5
- tab.border#000
- tab.hoverBackground#292421
- tab.hoverBorder#8470FF
- tab.inactiveBackground#36393f
- titleBar.activeBackground#36393f
- widget.shadow#000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #696f5e | italic |
| variable, string constant.other.placeholder | #8470FF | italic |
| constant.other.color | #ffffff | — |
| invalid, invalid.illegal | #FF5370 | — |
| keyword, storage.type, storage.modifier | #faa61a | — |
| keyword.other.important.css | #007fff | — |
| variable.parameter.url.css | #4d4dff | — |
| storage.type | #FF8C00 | italic |
| support.class.dart, source.dart, support.class | #FF9912 | italic |
| keyword.operator.comparison.dart, source.dart, keyword | #007fff | — |
| punctuation.comma.dart, source.dart, punctuation | #8470FF | italic |
| punctuation.comma.dart | #ffff00 | italic |
| constant.numeric.dart, source.dart | #c0c0c0 | italic |
| constant.numeric.dart | #8470FF | italic |
| meta.member.access.python, meta.function-call.arguments.python, meta.function-call.python, source.python, meta.function-call | #FF9912 | italic |
| meta.function-call.generic.python | #00C78C | italic |
| keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #ff4500 | italic |
| constant.other.color | #0892d0 | italic |
| punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #e5e4e2 | italic |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #0892d0 | italic |
| punctuation | #ffd700 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #FF9912 | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #D8BFD8 | — |
| support.function | #8470FF | — |
| entity.name.function | #007fff | italic |
| meta.block variable.other | #FF6347 | — |
| support.other.variable, string.other.link | #f07178 | — |
| constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other | #c0c0c0 | — |
| constant.language | #00C957 | italic |
| variable.parameter | #ffd700 | — |
| support.constant.property-value.css, meta.property-value.css, meta.property-list.css, source.css, support.constant | #696f5e | — |
| source.css | #daa520 | — |
| text.html.derivative | #c0c0c0 | italic |
| 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 | #00C78C | italic |
| entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #FFCB6B | — |
| support.type | #FF7D40 | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #8470FF | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #008080 | — |
| variable.language | #33DBFF | italic |
| entity.name.method.js | #82AAFF | italic |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #82AAFF | — |
| entity.other.attribute-name | #8470FF | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #FFCB6B | italic |
| entity.other.attribute-name.class | #FF9912 | — |
| source.sass keyword.control | #82AAFF | — |
| markup.inserted | #C3E88D | — |
| markup.deleted | #FF5370 | — |
| markup.changed | #C792EA | — |
| string.regexp | #89DDFF | — |
| constant.character.escape | #89DDFF | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82AAFF | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF5370 | italic |
| 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 | #FF8C00 | — |
| 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 | #ff8040 | — |
| 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 | #f88379 | — |
| 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 | #C17E70 | — |
| 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 | #82AAFF | — |
| 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 | #f07178 | — |
| 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #C792EA | — |
| 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #C3E88D | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #c0c0c0 | — |
| text.html.markdown markup.inline.raw.markdown | #C792EA | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #65737E | — |
| punctuation.definition.quote.begin.markdown | #0892d0 | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #4169e1 | — |
| markup.heading.markdown punctuation.definition.heading.markdown | #ffa500 | — |
| markup.italic | #f07178 | italic |
| markup.bold, markup.bold string | #f07178 | 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 | #f07178 | bold |
| markup.underline | #4169e1 | underline |
| markup.quote punctuation.definition.blockquote.markdown | #65737E | — |
| markup.quote | — | italic |
| string.other.link.title.markdown | #82AAFF | — |
| string.other.link.description.title.markdown | #C792EA | — |
| constant.other.reference.link.markdown, entity.name | #4169e1 | — |
| markup.raw.block | #C792EA | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #EEFFFF | — |
| variable.language.fenced.markdown | #65737E | — |
| meta.separator | #65737E | bold |
| markup.table | #EEFFFF | — |
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#23262E
- activityBar.foreground#fff
- activityBarBadge.background#FFCC66
- activityBarBadge.foreground#000
- badge.background#FFCC66
- badge.foreground#000
- button.background#0679dd
- button.foreground#fff
- button.hoverBackground#ff008c
- debugExceptionWidget.background#FF9F2E60
- debugExceptionWidget.border#FF9F2E60
- debugToolBar.background#20232A
- diffEditor.insertedTextBackground#29BF1220
- diffEditor.removedTextBackground#F21B3F20
- dropdown.background#2b303b
- dropdown.border#363c49
- editor.background#23262E
- editor.findMatchBackground#f39d12d7
- editor.findMatchHighlightBackground#59b8b377
- editor.foreground#e4dfe7
- editor.hoverHighlightBackground#373941
- editor.lineHighlightBackground#2e323d
- editor.lineHighlightBorder#2e323d
- editor.rangeHighlightBackground#372F3C
- editor.selectionBackground#303541
- editor.selectionHighlightBackground#4F435580
- editor.wordHighlightBackground#4F4355
- editor.wordHighlightStrongBackground#db45a280
- editorCodeLens.foreground#746f77
- editorCursor.foreground#FFCC00
- editorError.foreground#d4503f
- editorGroup.dropBackground#495061d7
- editorGroup.emptyBackground#23262E
- editorGroupHeader.tabsBackground#23262E
- editorGutter.addedBackground#9BC53DBB
- editorGutter.deletedBackground#FC644DBB
- editorGutter.modifiedBackground#5BC0EBBB
- editorHoverWidget.background#373941
- editorHoverWidget.border#00e8c5cc
- editorIndentGuide.activeBackground#585C66
- editorIndentGuide.background#333844
- editorLineNumber.foreground#746f77
- editorLink.activeForeground#3B79C7
- editorOverviewRuler.border#1B1D23
- editorRuler.foreground#4F4355
- editorSuggestWidget.background#20232A
- editorSuggestWidget.border#372F3C
- editorSuggestWidget.selectedBackground#373941
- editorWarning.foreground#FF9F2E
- editorWhitespace.foreground#333844
- editorWidget.background#20232A
- errorForeground#d4503f
- focusBorder#746f77
- foreground#D5CED9
- input.background#2b303b
- input.placeholderForeground#746f77
- inputOption.activeBorder#C668BA
- inputValidation.errorBackground#d4503f
- inputValidation.errorBorder#d4503f
- inputValidation.infoBackground#3b6599
- inputValidation.infoBorder#3b6599
- inputValidation.warningBackground#ee9e3d
- inputValidation.warningBorder#ee9e3d
- list.activeSelectionBackground#333742
- list.activeSelectionForeground#fff
- list.dropBackground#3a404e
- list.focusBackground#333742
- list.focusForeground#eee
- list.hoverBackground#333742
- list.hoverForeground#eee
- list.inactiveSelectionBackground#2a2c33
- list.inactiveSelectionForeground#02f7d2
- merge.currentContentBackground#F9267240
- merge.currentHeaderBackground#F92672
- merge.incomingContentBackground#3B79C740
- merge.incomingHeaderBackground#3B79C7BB
- notification.background#2d313b
- notification.buttonBackground#00e8c5cc
- notification.buttonHoverBackground#07d4b5b0
- notification.errorBackground#FC644D
- notification.infoBackground#00b0ff
- notification.warningBackground#FF9F2E
- peekView.border#262931
- peekViewEditor.background#2A2C32
- peekViewEditor.matchHighlightBackground#FF9F2E60
- peekViewResult.background#2A2C32
- peekViewResult.matchHighlightBackground#FF9F2E60
- peekViewResult.selectionBackground#23262E
- peekViewTitle.background#2A2C32
- peekViewTitleDescription.foreground#78747a
- progressBar.background#C668BA
- scrollbar.shadow#25282F
- scrollbarSlider.activeBackground#3A3F4CCC
- scrollbarSlider.background#4A5F4B77
- scrollbarSlider.hoverBackground#3A3F4CAA
- selection.background#746f77
- sideBar.background#23262E
- sideBar.foreground#ddd
- sideBarSectionHeader.background#23262E
- sideBarTitle.foreground#02f7d2
- statusBar.background#23262E
- statusBar.debuggingBackground#fc634c
- statusBar.noFolderBackground#23262E
- statusBarItem.activeBackground#07ebc8cc
- statusBarItem.hoverBackground#0bc9acb0
- statusBarItem.prominentBackground#0bc9acb0
- statusBarItem.prominentHoverBackground#07ebc8cc
- tab.activeBackground#23262e
- tab.activeBorder#ff008c
- tab.activeForeground#02f7d2
- tab.border#15232D
- tab.inactiveBackground#23262E
- tab.inactiveForeground#a29fa5
- terminal.ansiBlue#7cb7ff
- terminal.ansiBrightBlue#7cb7ff
- terminal.ansiBrightCyan#00e8c6
- terminal.ansiBrightGreen#96E072
- terminal.ansiBrightMagenta#ff00aa
- terminal.ansiBrightRed#ee5d43
- terminal.ansiBrightYellow#FFE66D
- terminal.ansiCyan#00e8c6
- terminal.ansiGreen#96E072
- terminal.ansiMagenta#ff00aa
- terminal.ansiRed#ee5d43
- terminal.ansiYellow#FFE66D
- terminalCursor.background#23262E
- terminalCursor.foreground#FFE66D
- titleBar.activeBackground#1e2027
- walkThrough.embeddedEditorBackground#23262E
- widget.shadow#14151A
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| emphasis | #FF0000 | bold |
| strong | — | bold |
| header | #BD93F9 | — |
| source | #F8F8A2 | — |
| meta.diff, meta.diff.header | #6272A4 | — |
| markup.inserted | #50FA7B | — |
| markup.deleted | #FF5555 | — |
| markup.changed | #FFB86C | — |
| invalid.deprecated | #F8F8F2 | underline italic |
| entity.name.filename | #F1FA8C | — |
| markup.error | #FF5555 | — |
| comment, punctuation.definition.comment | #546E7A | italic |
| variable, string constant.other.placeholder | #F96C75 | — |
| constant.other.color | #ffffff | — |
| invalid, invalid.illegal, invalid.broken | #FF5370 | — |
| invalid.unimplemented | #ffffff | — |
| invalid.deprecated | #ffffff | — |
| keyword, storage.type, storage.modifier | #ac44cc | — |
| storage.type, keyword.control | — | italic |
| keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #89DDFF | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #f07178 | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level | #61AFEF | — |
| support.other.variable, string.other.link | #f07178 | — |
| constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit | #D19A66 | — |
| 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 | #C3E88D | — |
| entity.name.directive.restructuredtext, markup.quote | #F1FA8C | italic |
| entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #FFCB6B | — |
| source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type | #B2CCD6 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #FF5370 | — |
| variable.language | #FF5370 | italic |
| entity.name.method.js | #82AAFF | — |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #82AAFF | — |
| entity.other.attribute-name | #C792EA | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #FFCB6B | italic |
| entity.other.attribute-name.class | #FFCB6B | — |
| source.sass keyword.control | #82AAFF | — |
| markup.inserted | #C3E88D | — |
| markup.deleted | #FF5370 | — |
| markup.changed | #C792EA | — |
| string.regexp | #89DDFF | — |
| constant.character.escape | #89DDFF | — |
| *url*, *link*, *uri* | — | underline |
| constant.numeric.line-number.find-in-files - match | #C17E70 | — |
| entity.name.filename.find-in-files | #C3E88D | — |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82AAFF | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF5370 | italic |
| source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #C3E88D | — |
| source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #C792EA | — |
| source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #f07178 | — |
| source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #82AAFF | — |
| source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #C17E70 | — |
| source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #FF5370 | — |
| source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #F78C6C | — |
| source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #FFCB6B | — |
| source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string | #C792EA | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #eeffff | — |
| text.html.markdown markup.raw.inline | #C792EA | — |
| text.html.markdown punctuation.definition.raw.markdown | #65737e | — |
| text.html.markdown meta.dummy.line-break | — | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #C3E88D | — |
| markup.italic | #f07178 | italic |
| markup.bold, markup.bold string | #f07178 | 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 | — | bold italic |
| markup.underline | #F78C6C | underline |
| markup.strike | — | — |
| markup.quote punctuation.definition.blockquote.markdown | #65737e | — |
| markup.quote | — | italic |
| string.other.link.title.markdown | #82AAFF | — |
| string.other.link.description.title.markdown | #C792EA | — |
| constant.other.reference.link.markdown | #FFCB6B | — |
| markup.raw.block | #C792EA | — |
| markup.raw.block.fenced.markdown | — | — |
| punctuation.definition.fenced.markdown | — | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #eeffff | — |
| variable.language.fenced.markdown | #65737e | |
| text.html.markdown punctuation.definition | #546E7A | — |
| text.html.markdown meta.disable-markdown punctuation.definition | #89DDFF | — |
| meta.separator | #65737e | bold |
| markup.table | #eeffff | — |
| acejump.label.blue | #ffffff | — |
| acejump.label.green | #ffffff | — |
| acejump.label.orange | #ffffff | — |
| acejump.label.purple | #ffffff | — |
| sublimelinter.mark.warning | #FFCB6B | — |
| sublimelinter.gutter-mark | #ffffff | — |
| sublimelinter.mark.error | #FF5370 | — |
| sublimelinter.annotations | — | — |
| markup.ignored.git_gutter | #65737e | — |
| markup.untracked.git_gutter | #65737e | — |
| markup.inserted.git_gutter | #C3E88D | — |
| markup.changed.git_gutter | #FFCB6B | — |
| markup.deleted.git_gutter | #FF5370 | — |
| brackethighlighter.default | #B2CCD6 | — |
| brackethighlighter.quote | #C3E88D | — |
| brackethighlighter.unmatched | #FF5370 | — |
| entity.name.type.class, entity.name.class | #8BE9FD | — |
| keyword.expressions-and-types.swift , keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, symbol in $this, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special | #BD93F9 | italic |
| entity.other.inherited, class | #8BE9FD | italic |
| entity.name.function-meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method - call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix | #50FA7B | — |
| entity.name.variable.parameter, meta.at - rule.function variable, function params, meta.at - rule.mixin variable# Sass mixin params, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter | #FFB86C | italic |
| meta.decorator variable.other.readwrite, meta.decorator variable.other.property | #50FA7B | italic |
| meta.decorator variable.other.object | #50FA7B | — |
| keyword, punctuation.definition.keyword | #FF79C6 | — |
| keyword.control.new, keyword.operator.new | — | bold |
| meta.selector | #FF79C6 | — |