Tang Dark Pro
Publisher: shi tangThemes in package: 5
tang dark pro theme for VS Code
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBorder#c678dd
- activityBar.background#2a2c2f
- activityBar.border#000000
- activityBar.foreground#dfdfdf
- breadcrumb.background#1c1f21
- breadcrumb.focusForeground#dcdddd
- breadcrumb.foreground#dcdddd
- debugIcon.breakpointCurrentStackframeForeground#264f78
- debugIcon.breakpointForeground#007aff
- diffEditor.insertedTextBackground#3cff5518
- diffEditor.removedTextBackground#ff504418
- editor.background#1F1F24
- editor.findMatchBackground#fffb00
- editor.findMatchHighlightBackground#545558
- editor.foreground#d4d4d4
- editor.hoverHighlightBackground#2c5392
- editor.lineHighlightBackground#070707
- editor.selectionBackground#646f8366
- editor.snippetTabstopHighlightBackground#264f78
- editor.stackFrameHighlightBackground#007aff22
- editorCodeLens.foreground#dfdfdf77
- editorCursor.foreground#ffffff
- editorError.foreground#e21514
- editorGroupHeader.noTabsBackground#383a3d
- editorGroupHeader.tabsBackground#26282b
- editorGutter.addedBackground#4f82ce
- editorGutter.deletedBackground#4f82ce
- editorGutter.modifiedBackground#4f82ce
- editorIndentGuide.activeBackground1#707070
- editorIndentGuide.background1#404040
- editorInlayHint.background#3E3E3E
- editorInlayHint.foreground#A9A8A7
- editorLineNumber.activeForeground#25beec
- editorLineNumber.foreground#2b91af
- editorLink.activeForeground#6699ff
- editorOverviewRuler.addedForeground#4f82ce
- editorOverviewRuler.deletedForeground#4f82ce
- editorOverviewRuler.errorForeground#e21514
- editorOverviewRuler.findMatchForeground#fffb00
- editorOverviewRuler.modifiedForeground#4f82ce
- editorOverviewRuler.warningForeground#f5c443
- editorWarning.foreground#f5c443
- editorWhitespace.foreground#53606e
- editorWidget.background#303030
- errorForeground#e21514
- focusBorder#35628b
- foreground#dfdfdf
- gitDecoration.conflictingResourceForeground#e21514
- gitDecoration.ignoredResourceForeground#dfdfdf55
- list.activeSelectionBackground#04395e
- list.activeSelectionForeground#dfdfdf
- list.focusBackground#3071db
- list.focusForeground#dfdfdf
- list.highlightForeground#f5c443
- list.hoverBackground#00000000
- list.inactiveSelectionBackground#4f5153
- minimap.errorHighlight#e21514
- minimap.findMatchHighlight#fffb00
- minimap.selectionHighlight#646f83
- minimap.warningHighlight#f5c443
- minimapGutter.addedBackground#4f82ce
- minimapGutter.deletedBackground#4f82ce
- minimapGutter.modifiedBackground#4f82ce
- panel.border#000000
- peekView.border#3071db
- peekViewEditor.background#292a30
- peekViewEditor.matchHighlightBackground#545558
- peekViewResult.background#2a2c2f
- peekViewResult.fileForeground#dfdfdf
- peekViewResult.lineForeground#dfdfdf99
- peekViewResult.matchHighlightBackground#545558
- peekViewResult.selectionBackground#3071db
- peekViewResult.selectionForeground#dfdfdf
- peekViewTitle.background#2a2c2f
- peekViewTitleDescription.foreground#6699ff
- peekViewTitleLabel.foreground#dfdfdf
- searchEditor.findMatchBackground#fffb00
- sideBar.background#2a2c2f
- sideBar.border#000000
- sideBarSectionHeader.background#00000000
- statusBar.background#181818
- statusBar.border#2B2B2B
- statusBar.debuggingBackground#0078D4
- statusBar.debuggingForeground#FFFFFF
- statusBar.focusBorder#0078D4
- statusBar.foreground#CCCCCC
- statusBar.noFolderBackground#1F1F1F
- statusBarItem.focusBorder#0078D4
- statusBarItem.prominentBackground#6E768166
- statusBarItem.remoteBackground#0078D4
- statusBarItem.remoteForeground#FFFFFF
- tab.activeBackground#1F1F24
- tab.activeBorder#c678dd
- tab.activeForeground#ffffff
- tab.border#26282b
- tab.inactiveBackground#26282b
- tab.inactiveForeground#9a9c9d
- terminal.inactiveSelectionBackground#3A3D41
- textLink.activeForeground#6699ff
- textLink.foreground#6699ff
- titleBar.activeBackground#383a3d
- titleBar.activeForeground#b7b8bb
- titleBar.border#26282b
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded | #abb2bf | — |
| punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison | #e06c75 | — |
| variable.other.generic-type.haskell | #c678dd | — |
| storage.type.haskell | #d19a66 | — |
| support.variable.magic.python | #e06c75 | — |
| punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python | #abb2bf | — |
| variable.parameter.function.language.special.self.python | #e5c07b | — |
| variable.parameter.function.language.special.cls.python | #e5c07b | — |
| storage.modifier.lifetime.rust | #abb2bf | — |
| support.function.std.rust | #61afef | — |
| entity.name.lifetime.rust | #e5c07b | — |
| variable.language.rust | #e06c75 | — |
| support.constant.edge | #c678dd | — |
| constant.other.character-class.regexp | #e06c75 | — |
| keyword.operator.word | #c678dd | — |
| keyword.operator.quantifier.regexp | #d19a66 | — |
| variable.parameter.function | #abb2bf | — |
| comment markup.link | #5c6370 | — |
| markup.changed.diff | #e5c07b | — |
| meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff | #61afef | — |
| markup.inserted.diff | #98c379 | — |
| markup.deleted.diff | #e06c75 | — |
| meta.function.c,meta.function.cpp | #e06c75 | — |
| punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c | #abb2bf | — |
| punctuation.separator.key-value | #abb2bf | — |
| keyword.operator.expression.import | #61afef | — |
| support.constant.math | #e5c07b | — |
| support.constant.property.math | #d19a66 | — |
| variable.other.constant | #e5c07b | — |
| storage.type.annotation.java, storage.type.object.array.java | #e5c07b | — |
| source.java | #e06c75 | — |
| punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java | #abb2bf | — |
| meta.method.java | #61afef | — |
| storage.modifier.import.java,storage.type.java,storage.type.generic.java | #e5c07b | — |
| keyword.operator.instanceof.java | #c678dd | — |
| meta.definition.variable.name.java | #e06c75 | — |
| keyword.operator.logical | #56b6c2 | — |
| keyword.operator.bitwise | #56b6c2 | — |
| keyword.operator.channel | #56b6c2 | — |
| support.constant.property-value.scss,support.constant.property-value.css | #d19a66 | — |
| keyword.operator.css,keyword.operator.scss,keyword.operator.less | #56b6c2 | — |
| support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss | #d19a66 | — |
| punctuation.separator.list.comma.css | #abb2bf | — |
| support.constant.color.w3c-standard-color-name.css | #d19a66 | — |
| support.type.vendored.property-name.css | #56b6c2 | — |
| support.module.node,support.type.object.module,support.module.node | #e5c07b | — |
| entity.name.type.module | #e5c07b | — |
| variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node | #e06c75 | — |
| support.constant.json | #d19a66 | — |
| keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof | #c678dd | — |
| support.type.object.console | #e06c75 | — |
| support.variable.property.process | #d19a66 | — |
| entity.name.function,support.function.console | #61afef | — |
| keyword.operator.misc.rust | #abb2bf | — |
| keyword.operator.sigil.rust | #c678dd | — |
| keyword.operator.delete | #c678dd | — |
| support.type.object.dom | #56b6c2 | — |
| support.variable.dom,support.variable.property.dom | #e06c75 | — |
| keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational | #56b6c2 | — |
| keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp | #c678dd | — |
| punctuation.separator.delimiter | #abb2bf | — |
| punctuation.separator.c,punctuation.separator.cpp | #c678dd | — |
| support.type.posix-reserved.c,support.type.posix-reserved.cpp | #56b6c2 | — |
| keyword.operator.sizeof.c,keyword.operator.sizeof.cpp | #c678dd | — |
| variable.parameter.function.language.python | #d19a66 | — |
| support.type.python | #56b6c2 | — |
| keyword.operator.logical.python | #c678dd | — |
| variable.parameter.function.python | #d19a66 | — |
| punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python | #abb2bf | — |
| meta.function-call.generic.python | #61afef | — |
| constant.character.format.placeholder.other.python | #d19a66 | — |
| keyword.operator | #abb2bf | — |
| keyword.operator.assignment.compound | #c678dd | — |
| keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts | #56b6c2 | — |
| support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss, support.type.property-name.css | #6da7ec | — |
| keyword | #c678dd | — |
| entity.name.namespace | #e5c07b | — |
| variable | #e06c75 | — |
| variable.c | #abb2bf | — |
| variable.language | #e5c07b | — |
| token.variable.parameter.java | #abb2bf | — |
| import.storage.java | #e5c07b | — |
| token.package.keyword | #c678dd | — |
| token.package | #abb2bf | — |
| entity.name.function, meta.require, support.function.any-method, variable.function | #61afef | — |
| entity.name.type.namespace | #e5c07b | — |
| support.class, entity.name.type.class | #e5c07b | — |
| entity.name.class.identifier.namespace.type | #e5c07b | — |
| entity.name.class, variable.other.class.js, variable.other.class.ts | #e5c07b | — |
| variable.other.class.php | #e06c75 | — |
| entity.name.type | #e5c07b | — |
| keyword.control | #c678dd | — |
| control.elements, keyword.operator.less | #d19a66 | — |
| keyword.other.special-method | #61afef | — |
| storage | #c678dd | — |
| token.storage | #c678dd | — |
| keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void | #c678dd | — |
| token.storage.type.java | #e5c07b | — |
| support.function | #56b6c2 | — |
| support.type.property-name | #abb2bf | — |
| support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml | #e06c75 | — |
| support.constant.property-value | #abb2bf | — |
| support.constant.font-name | #d19a66 | — |
| meta.tag | #abb2bf | — |
| string | #98c379 | — |
| constant.other.symbol | #56b6c2 | — |
| constant.numeric | #d19a66 | — |
| constant | #d19a66 | — |
| punctuation.definition.constant | #d19a66 | — |
| entity.name.tag | #e06c75 | — |
| entity.other.attribute-name | #d19a66 | — |
| entity.other.attribute-name.id | #61afef | — |
| entity.other.attribute-name.class.css | #d19a66 | — |
| meta.selector | #c678dd | — |
| markup.heading | #e06c75 | — |
| markup.heading punctuation.definition.heading, entity.name.section | #61afef | — |
| keyword.other.unit | #e06c75 | — |
| markup.bold,todo.bold | #d19a66 | — |
| punctuation.definition.bold | #e5c07b | — |
| markup.italic, punctuation.definition.italic,todo.emphasis | #c678dd | — |
| emphasis md | #c678dd | — |
| entity.name.section.markdown | #e06c75 | — |
| punctuation.definition.heading.markdown | #e06c75 | — |
| punctuation.definition.list.begin.markdown | #e5c07b | — |
| markup.heading.setext | #abb2bf | — |
| punctuation.definition.bold.markdown | #d19a66 | — |
| markup.inline.raw.markdown | #98c379 | — |
| markup.inline.raw.string.markdown | #98c379 | — |
| punctuation.definition.raw.markdown | #e5c07b | — |
| punctuation.definition.list.markdown | #e5c07b | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #e06c75 | — |
| beginning.punctuation.definition.list.markdown | #e06c75 | — |
| punctuation.definition.metadata.markdown | #e06c75 | — |
| markup.underline.link.markdown,markup.underline.link.image.markdown | #c678dd | — |
| string.other.link.title.markdown,string.other.link.description.markdown | #61afef | — |
| markup.raw.monospace.asciidoc | #98c379 | — |
| punctuation.definition.asciidoc | #e5c07b | — |
| markup.list.asciidoc | #e5c07b | — |
| markup.link.asciidoc,markup.other.url.asciidoc | #c678dd | — |
| string.unquoted.asciidoc,markup.other.url.asciidoc | #61afef | — |
| string.regexp | #56b6c2 | — |
| punctuation.section.embedded, variable.interpolation | #e06c75 | — |
| punctuation.section.embedded.begin,punctuation.section.embedded.end | #c678dd | — |
| invalid.illegal | #ffffff | — |
| invalid.illegal.bad-ampersand.html | #abb2bf | — |
| invalid.illegal.unrecognized-tag.html | #e06c75 | — |
| invalid.broken | #ffffff | — |
| invalid.deprecated | #ffffff | — |
| invalid.deprecated.entity.other.attribute-name.html | #d19a66 | — |
| invalid.unimplemented | #ffffff | — |
| source.json meta.structure.dictionary.json > string.quoted.json | #e06c75 | — |
| source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string | #e06c75 | — |
| source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation | #98c379 | — |
| source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json | #56b6c2 | — |
| support.type.property-name.json | #e06c75 | — |
| support.type.property-name.json punctuation | #e06c75 | — |
| text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade | #c678dd | — |
| text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade | #c678dd | — |
| support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php | #e5c07b | — |
| keyword.operator.error-control.php | #c678dd | — |
| keyword.operator.type.php | #c678dd | — |
| punctuation.section.array.begin.php | #abb2bf | — |
| punctuation.section.array.end.php | #abb2bf | — |
| invalid.illegal.non-null-typehinted.php | #f44747 | — |
| storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php | #e5c07b | — |
| meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php | #61afef | — |
| punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php | #abb2bf | — |
| support.constant.core.rust | #d19a66 | — |
| support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php | #d19a66 | — |
| entity.name.goto-label.php,support.other.php | #61afef | — |
| keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php | #56b6c2 | — |
| keyword.operator.regexp.php | #c678dd | — |
| keyword.operator.comparison.php | #56b6c2 | — |
| keyword.operator.heredoc.php,keyword.operator.nowdoc.php | #c678dd | — |
| meta.function.decorator.python | #61afef | — |
| support.token.decorator.python,meta.function.decorator.identifier.python | #56b6c2 | — |
| function.parameter | #abb2bf | — |
| function.brace | #abb2bf | — |
| function.parameter.ruby, function.parameter.cs | #abb2bf | — |
| constant.language.symbol.ruby | #56b6c2 | — |
| constant.language.symbol.hashkey.ruby | #56b6c2 | — |
| rgb-value | #56b6c2 | — |
| inline-color-decoration rgb-value | #d19a66 | — |
| less rgb-value | #d19a66 | — |
| selector.sass | #e06c75 | — |
| support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx | #e5c07b | — |
| block.scope.end,block.scope.begin | #abb2bf | — |
| storage.type.cs | #e5c07b | — |
| entity.name.variable.local.cs | #e06c75 | — |
| token.info-token | #61afef | — |
| token.warn-token | #d19a66 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #c678dd | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #c678dd | — |
| meta.template.expression | #abb2bf | — |
| keyword.operator.module | #c678dd | — |
| support.type.type.flowtype | #61afef | — |
| support.type.primitive | #e5c07b | — |
| meta.property.object | #e06c75 | — |
| variable.parameter.function.js | #e06c75 | — |
| keyword.other.template.begin | #98c379 | — |
| keyword.other.template.end | #98c379 | — |
| keyword.other.substitution.begin | #98c379 | — |
| keyword.other.substitution.end | #98c379 | — |
| keyword.operator.assignment | #56b6c2 | — |
| keyword.operator.assignment.go | #e5c07b | — |
| keyword.operator.arithmetic.go, keyword.operator.address.go | #c678dd | — |
| entity.name.package.go | #e5c07b | — |
| support.type.prelude.elm | #56b6c2 | — |
| support.constant.elm | #d19a66 | — |
| punctuation.quasi.element | #c678dd | — |
| constant.character.entity | #e06c75 | — |
| entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class | #56b6c2 | — |
| entity.global.clojure | #e5c07b | — |
| meta.symbol.clojure | #e06c75 | — |
| constant.keyword.clojure | #56b6c2 | — |
| meta.arguments.coffee, variable.parameter.function.coffee | #e06c75 | — |
| source.ini | #98c379 | — |
| meta.scope.prerequisites.makefile | #e06c75 | — |
| source.makefile | #e5c07b | — |
| storage.modifier.import.groovy | #e5c07b | — |
| meta.method.groovy | #61afef | — |
| meta.definition.variable.name.groovy | #e06c75 | — |
| meta.definition.class.inherited.classes.groovy | #98c379 | — |
| support.variable.semantic.hlsl | #e5c07b | — |
| support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl | #c678dd | — |
| text.variable, text.bracketed | #e06c75 | — |
| support.type.swift, support.type.vb.asp | #e5c07b | — |
| entity.name.function.xi | #e5c07b | — |
| entity.name.class.xi | #56b6c2 | — |
| constant.character.character-class.regexp.xi | #e06c75 | — |
| constant.regexp.xi | #c678dd | — |
| keyword.control.xi | #56b6c2 | — |
| invalid.xi | #abb2bf | — |
| beginning.punctuation.definition.quote.markdown.xi | #98c379 | — |
| beginning.punctuation.definition.list.markdown.xi | #4CAE4C | — |
| constant.character.xi | #61afef | — |
| accent.xi | #61afef | — |
| wikiword.xi | #d19a66 | — |
| constant.other.color.rgb-value.xi | #ffffff | — |
| punctuation.definition.tag.xi | #5c6370 | — |
| entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition | #e5c07b | — |
| entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #e06c75 | — |
| meta.brace.square | #abb2bf | — |
| comment, punctuation.definition.comment | #4CAE4C | — |
| markup.quote.markdown | #5c6370 | — |
| punctuation.definition.block.sequence.item.yaml | #abb2bf | — |
| constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir | #56b6c2 | — |
| entity.name.variable.parameter.cs | #e5c07b | — |
| entity.name.variable.field.cs | #e06c75 | — |
| markup.deleted | #e06c75 | — |
| markup.inserted | #98c379 | — |
| markup.underline | — | underline |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #BE5046 | — |
| support.other.namespace.php | #abb2bf | — |
| variable.other.object | #e5c07b | — |
| variable.other.constant.property | #e06c75 | — |
| entity.other.inherited-class | #e5c07b | — |
| variable.other.readwrite.c | #e06c75 | — |
| entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php | #abb2bf | — |
| constant.numeric.decimal.asm.x86_64 | #c678dd | — |
| support.other.parenthesis.regexp | #d19a66 | — |
| constant.character.escape | #56b6c2 | — |
| string.regexp | #e06c75 | — |
| entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super | — | italic |
| comment.line.double-slash,comment.block.documentation | — | bold |
| keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python | — | italic |
| markup.italic.markdown | — | italic |
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#2F333D
- activityBar.foreground#D7DAE0
- activityBarBadge.background#528bff
- activityBarBadge.foreground#F8FAFD
- button.background#528bff
- debugToolBar.background#2F333D
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#1d1f23
- dropdown.border#181A1F
- editor.background#282c34
- editor.findMatchBackground#42557B
- editor.findMatchHighlightBackground#314365
- editor.lineHighlightBackground#070707
- editor.selectionBackground#3E4451
- editorCursor.foreground#f8f8f0
- editorError.foreground#c24038
- editorGroup.border#181A1F
- editorGroup.emptyBackground#181A1F
- editorGroupHeader.tabsBackground#21252B
- editorHoverWidget.background#21252B
- editorHoverWidget.border#181A1F
- editorIndentGuide.background#3B4048
- editorLineNumber.foreground#495162
- editorRuler.foreground#484848
- editorSuggestWidget.background#21252B
- editorSuggestWidget.border#181A1F
- editorSuggestWidget.selectedBackground#2c313a
- editorUnnecessaryCode.opacity#000000c0
- editorWhitespace.foreground#484a50
- editorWidget.background#21252B
- input.background#1d1f23
- list.activeSelectionBackground#2c313a
- list.activeSelectionForeground#d7dae0
- list.focusBackground#383E4A
- list.highlightForeground#C5C5C5
- list.hoverBackground#292d35
- list.inactiveSelectionBackground#2c313a
- list.inactiveSelectionForeground#d7dae0
- notifications.background#21252b
- scrollbarSlider.activeBackground#747D9180
- scrollbarSlider.background#4E566680
- scrollbarSlider.hoverBackground#5A637580
- sideBar.background#21252b
- sideBarSectionHeader.background#282c34
- statusBar.background#21252B
- statusBar.debuggingBackground#21252B
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#21252B
- statusBarItem.hoverBackground#2c313a
- tab.activeBackground#383E4A
- tab.border#181A1F
- tab.inactiveBackground#21252B
- terminal.ansiBlack#2d3139
- terminal.ansiBlue#528bff
- terminal.ansiBrightBlack#7f848e
- terminal.ansiBrightBlue#528bff
- terminal.ansiBrightCyan#56b6c2
- terminal.ansiBrightGreen#98c379
- terminal.ansiBrightMagenta#7e0097
- terminal.ansiBrightRed#f44747
- terminal.ansiBrightWhite#d7dae0
- terminal.ansiBrightYellow#e5c07b
- terminal.ansiCyan#56b6c2
- terminal.ansiGreen#98c379
- terminal.ansiMagenta#c678dd
- terminal.ansiRed#e06c75
- terminal.ansiWhite#d7dae0
- terminal.ansiYellow#e5c07b
- terminal.foreground#abb2bf
- titleBar.activeBackground#282c34
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#282C34
- titleBar.inactiveForeground#6B717D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.comment | #4CAE4C | — |
| string, string.template | #e5c07b | — |
| constant.numeric | #c678dd | — |
| string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded | #c678dd | — |
| punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace | #abb2bf | — |
| constant.language | #56b6c2 | — |
| constant.character, constant.other | #56b6c2 | — |
| variable.language | #e06c75 | — |
| keyword, keyword.operator.logical, keyword.operator.constructor | #e06c75 | — |
| keyword.operator | #e06c75 | — |
| storage | #e06c75 | — |
| storage.type | #56b6c2 | — |
| entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class | #61afef | — |
| variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block | #61afef | — |
| variable.other, variable.other.property, variable.other.block | #abb2bf | — |
| entity.other.inherited-class | #98c379 | — |
| storage.modifier.import, storage.modifier.package | #61afef | — |
| entity.name.function, support.function | #98c379 | — |
| variable.parameter, entity.name.variable.parameter, parameter.variable | #d19a66 | italic |
| entity.name.function-call | #abb2bf | — |
| function.support.builtin, function.support.core | #98c379 | — |
| entity.name.tag, entity.name.tag.class.js | #e06c75 | — |
| entity.name.tag.class, entity.name.tag.id | #56b6c2 | — |
| entity.other.attribute-name | #98c379 | — |
| support.constant | #56b6c2 | — |
| support.type, support.variable | #56b6c2 | — |
| support.dictionary.json | #56b6c2 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass | #abb2bf | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass | #56b6c2 | — |
| support.constant.css, support.constant.scss, support.constant.less, support.constant.sass | #98c379 | — |
| variable.css, variable.scss, variable.less, variable.sass | #56b6c2 | — |
| variable.css.string, variable.scss.string, variable.less.string, variable.sass.string | #e5c07b | — |
| unit.css, unit.scss, unit.less, unit.sass | #c678dd | — |
| function.css, function.scss, function.less, function.sass | #56b6c2 | — |
| support.other.variable | — | |
| invalid | #F8F8F0 | — |
| invalid.deprecated | #F8F8F0 | — |
| support.type.property-name.json | #56b6c2 | — |
| string.detected-link | #61afef | — |
| meta.diff, meta.diff.header | #75715E | — |
| markup.deleted | #e06c75 | — |
| markup.inserted | #98c379 | — |
| markup.changed | #e5c07b | — |
| constant.numeric.line-number.find-in-files - match | #56b6c2A0 | — |
| entity.name.filename.find-in-files | #e5c07b | — |
| markup.italic, markup.italic.markdown | — | italic |
| punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown | #676f7d | — |
| punctuation.definition.italic.markdown | — | italic |
| markup.underline.link.markdown | #61afef | — |
| markup.bold.markdown | — | bold |
| markup.heading.markdown | #e06c75 | bold |
| markup.quote.markdown | #98c379 | — |
| meta.separator.markdown | #c678dd | bold |
| markup.inline.raw, markup.raw.block.markdown | #56b6c2 | — |
| punctuation.definition.list_item.markdown | #ffffff | bold |
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#4B4B4B
- activityBar.dropBackground#5A5A5A
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#B4B4B4
- activityBarBadge.background#00A0FF
- activityBarBadge.foreground#F0F0F0
- badge.background#505050
- badge.foreground#F0F0F0
- button.background#505050
- button.foreground#DCDCDC
- button.hoverBackground#646464
- debugToolBar.background#323232
- diffEditor.insertedTextBackground#a3be8c4d
- diffEditor.insertedTextBorder#a3be8c4d
- diffEditor.removedTextBackground#bf616a4d
- diffEditor.removedTextBorder#bf616a4d
- dropdown.background#2D2D2D
- dropdown.border#414141
- dropdown.foreground#D2D2D2
- dropdown.listBackground#323232
- editor.background#2D2D2D
- editor.findMatchBackground#32505A
- editor.findMatchBorder#A0A0A07e
- editor.findMatchHighlightBackground#1E4655
- editor.foreground#DCDCDC
- editor.hoverHighlightBackground#646464
- editor.lineHighlightBackground#373737a1
- editor.selectionBackground#5A5A5A
- editor.selectionHighlightBackground#5A5A5A7e
- editorBracketMatch.background#5A5A5A
- editorCodeLens.foreground#D2D2D2
- editorCursor.foreground#D2D2D2
- editorError.foreground#E6503C
- editorGroup.border#505050
- editorGroup.dropBackground#64646475
- editorGroupHeader.tabsBackground#373737
- editorHint.foreground#788CA0
- editorIndentGuide.activeBackground#464646
- editorIndentGuide.background#3C3C3C
- editorInfo.foreground#A078C8
- editorLineNumber.activeForeground#F0F0F0
- editorLineNumber.foreground#8C8C8C
- editorLink.activeForeground#F0F0F0
- editorWarning.foreground#96B48C
- editorWhitespace.foreground#3C3C3C
- editorWidget.background#282828
- editorWidget.border#4B4B4B
- focusBorder#3264C8
- foreground#E6E6E6
- gitDecoration.addedResourceForeground#FFDC64
- gitDecoration.conflictingResourceForeground#FF5064
- gitDecoration.deletedResourceForeground#8C8C8C
- gitDecoration.ignoredResourceForeground#8C8C8C
- gitDecoration.modifiedResourceForeground#8CC8FA
- gitDecoration.submoduleResourceForeground#C88CF0
- gitDecoration.untrackedResourceForeground#8CFAC8
- input.background#2D2D2D
- input.border#414141
- input.foreground#D2D2D2
- input.placeholderForeground#D2D2D2
- inputValidation.errorBackground#505050
- inputValidation.errorBorder#505050
- inputValidation.errorForeground#FF5064
- list.activeSelectionBackground#464646
- list.activeSelectionForeground#F0F0F0
- list.errorForeground#FF5064
- list.hoverBackground#2D2D2D
- list.hoverForeground#F0F0F0
- list.inactiveFocusBackground#414141
- list.inactiveSelectionBackground#414141
- list.inactiveSelectionForeground#F0F0F0
- list.invalidItemForeground#DCDCDC
- list.warningForeground#96B48C
- merge.border#3b425200
- merge.currentContentBackground#81a1c14d
- merge.currentHeaderBackground#81a1c166
- merge.incomingContentBackground#8fbcbb4d
- merge.incomingHeaderBackground#8fbcbb66
- panel.background#373737
- panel.border#373737
- panelTitle.activeBorder#373737
- panelTitle.activeForeground#F0F0F0
- panelTitle.inactiveForeground#D2D2D2
- scrollbar.shadow#000000ab
- scrollbarSlider.activeBackground#DCDCDCab
- scrollbarSlider.background#646464ab
- scrollbarSlider.hoverBackground#969696ab
- selection.background#64A0C8
- sideBar.background#373737
- sideBar.foreground#D2D2D2
- sideBarSectionHeader.background#4B4B4B
- sideBarSectionHeader.foreground#FFFFFF
- sideBarTitle.foreground#F0F0F0
- statusBar.background#4B4B4B
- statusBar.debuggingBackground#555555
- statusBar.debuggingForeground#d8dee9
- statusBar.foreground#F0F0F0
- statusBar.noFolderBackground#4B4B4B
- statusBar.noFolderForeground#d8dee9
- statusBarItem.activeBackground#282828
- statusBarItem.hoverBackground#646464
- tab.activeBackground#2D2D2D
- tab.activeBorder#88c0d000
- tab.activeForeground#FFFFFF
- tab.border#373737
- tab.hoverBackground#505050
- tab.inactiveBackground#373737
- tab.inactiveForeground#D2D2D2
- tab.unfocusedActiveBorder#88c0d000
- tab.unfocusedActiveForeground#d8dee999
- tab.unfocusedInactiveForeground#d8dee966
- terminal.ansiBlack#323C50
- terminal.ansiBlue#0078DC
- terminal.ansiBrightBlack#646464
- terminal.ansiBrightBlue#00B4FF
- terminal.ansiBrightCyan#8CE1E1
- terminal.ansiBrightGreen#C8FF46
- terminal.ansiBrightMagenta#C88CF0
- terminal.ansiBrightRed#FF7878
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFDC64
- terminal.ansiCyan#28B4B4
- terminal.ansiGreen#5AFF46
- terminal.ansiMagenta#AF8CF0
- terminal.ansiRed#FF5064
- terminal.ansiWhite#F0F0F0
- terminal.ansiYellow#FFC81E
- terminal.background#313131
- terminal.foreground#D2D2D2
- titleBar.activeBackground#4B4B4B
- titleBar.activeForeground#F0F0F0
- titleBar.inactiveBackground#4B4B4B
- titleBar.inactiveForeground#B4B4B4
- walkThrough.embeddedEditorBackground#323232
- welcomePage.buttonBackground#232323
- welcomePage.buttonHoverBackground#3C3C3C
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #ffc3bab7 | — |
| keyword, keyword.control, storage.modifier, keyword.operator.new, keyword.operator.word, keyword.operator.module, keyword.operator.optional, keyword.operator.ternary, keyword.operator.assignment, keyword.operator.expression.keyof, keyword.operator.expression.instanceof, keyword.operator.expression.delete, keyword.operator.expression.typeof, keyword.operator.expression.void, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.instanceof.java | #c678dd | italic |
| keyword.operator.logical, keyword.operator.logical.tsx, keyword.operator.bitwise, keyword.operator.channel, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.decrement, keyword.operator.increment, keyword.operator.assignment.compound, keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts, keyword.operator.logical.python, keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php, keyword.operator.assignment.go, keyword.operator.arithmetic.go, keyword.operator.address.go, keyword.operator.misc.rust, keyword.operator.sigil.rust, keyword.operator.key-value.rust, keyword.operator.namespace.rust | #56b6c2 | |
| variable.language, variable.language.this, variable.language.self, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.rust | #e5c07b | — |
| variable, variable.other.readwrite, variable.other.local, variable.other.field, variable.other.object, variable.other.object.property, variable.other.property, meta.object-literal.key, variable.other.readwrite.c, variable.other.readwrite.cpp, variable.other.readwrite.java, variable.other.readwrite.cs, meta.method.body.java, entity.name.variable.local.cs, entity.name.variable.field.cs, entity.name.variable.parameter.cs, variable.parameter, variable.parameter.function, variable.parameter.function.js, variable.parameter.function.language.python, variable.parameter.function.c, variable.parameter.function.ruby, variable.parameter.function.kotlin, variable.parameter.function.swift, variable.parameter.function.latex, function.parameter, function.parameter.ruby, function.parameter.cs, meta.definition.variable.name.java, meta.definition.variable.name.groovy, text.variable, text.bracketed | #e06c75 | — |
| text.html.derivative meta.embedded.block.html variable.other.readwrite, meta.embedded.block.html variable.other.readwrite.js, source.js meta.embedded.block.html variable.other.readwrite | #c2c2c2 | — |
| variable.other.field, variable.other.property, variable.other.object.property, meta.object-literal.key, variable.object.property.tsx, entity.name.field, entity.name.field.rust, entity.name.field.go | #d19a66 | — |
| punctuation.terminator.java | #d19a66 | — |
| variable.other.constant, variable.other.readonly | #e5c07b | — |
| entity.name.function, meta.function, meta.function.c, meta.function.cpp, meta.function.rust, meta.function.go, meta.function.php, meta.function.cs, meta.function.kotlin, meta.function.swift, meta.require, support.function.any-method, variable.function, support.function.console, meta.function-call.generic.python, support.function.std.rust, support.function, keyword.other.special-method, support.function.console, support.function.builtin.go, support.function.builtin.rust | #61afef | — |
| support.type, support.type.sys-types, entity.name.type, entity.name.type.class, entity.name.class, entity.other.inherited-class, support.class, support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx, support.type.swift, support.type.kotlin, support.type.vb.asp, entity.name.type.parameter, support.type.prelude.elm, support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, storage.type.cs, storage.type.java, storage.type.generic.java, storage.type.primitive.java, storage.type.annotation.java, storage.type.object.array.java, keyword.type, keyword.type.cs, keyword.type.java, keyword.predefined.type, keyword.predefined.type.cs, keyword.predefined.type.java | #4ec9b0 | |
| storage.type, storage.type.swift, storage.type.kotlin, storage.type.rust, storage.type.go, storage.type.dart, storage.type.struct.rust, storage.type.enum.rust, storage.type.union.rust, storage.type.class.python, storage.type.class.cs, storage.type.namespace.cs, storage.type.namespace.ts, storage.type.namespace.js | #c678dd | italic |
| storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.error.go, storage.type.rune.go, support.type.builtin.go, support.type.go | #4ec9b0 | |
| constant.other.enum, entity.name.enum, constant.other.enummember, support.constant.core.rust, support.constant.ext.php, support.constant.std.php, support.constant.core.php, support.constant.parser-token.php, support.constant.property-value.scss, support.constant.elm, constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby, constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir | #d19a66 | — |
| support.other.namespace.use.php, support.other.namespace.use-as.php, entity.other.alias.php, meta.interface.php, support.type.object.module, support.module.node, entity.name.type.module, entity.name.package.go, token.package.keyword, token.package | #e5c07b | — |
| entity.name.namespace, entity.name.type.namespace, entity.name.type.namespace.cs, support.other.namespace, support.other.namespace.cs | #e5c07b | italic |
| constant, constant.numeric, punctuation.definition.constant, constant.numeric.decimal.asm.x86_64 | #d19a66 | — |
| constant.language, constant.language.json, source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json | #d19a66 | italic |
| string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.triple, string.interpolated, markup.inline.raw.markdown, markup.inline.raw.string.markdown, markup.raw.monospace.asciidoc, constant.character.escape | #98c379 | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, support.other.parenthesis.regexp, support.other.parenthesis.regexp, support.constant.edge, keyword.operator.regexp.php | #56b6c2 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, meta.template.expression, keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.interpolation | #c678dd | — |
| support.type.property-name.json, support.type.property-name.json punctuation, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation, source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation, support.constant.json | #e06c75 | — |
| support.type.property-name.css, support.type.vendored.property-name.css, support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, support.constant.property-value.scss, support.constant.property-value, support.constant.font-name, rgb-value, inline-color-decoration rgb-value, less rgb-value, selector.sass, keyword.operator.css, keyword.operator.scss, keyword.operator.less, support.constant.color.w3c-standard-color-name.scss, punctuation.separator.list.comma.css | #c2c2c2 | — |
| entity.name.tag, meta.tag, invalid.illegal-unrecognized-tag.html, constant.character.entity | #7d99db | — |
| meta.tag.tsx, source.tsx meta.tag | #c2c2c2 | — |
| entity.other.attribute-name, entity.other.attribute-name.id, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class | #d19a66 | — |
| punctuation.definition.tag | #c2c2c2 | — |
| markup.heading, markup.heading punctuation.definition.heading, entity.name.section, entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading.setext, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, punctuation.definition.block.sequence.item.yaml | #e06c75 | — |
| punctuation.definition.list.begin.markdown, punctuation.definition.list.markdown, beginning.punctuation.definition.list.markdown, markup.list.asciidoc | #6f9bff | — |
| markup.quote.markdown | #696969 | — |
| markup.bold, todo.bold, punctuation.definition.bold, punctuation.definition.bold.markdown | #d19a66 | bold |
| markup.italic, punctuation.definition.italic, todo.emphasis | #6f9bff | italic |
| markup.inline.raw.markdown, markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.raw.monospace.asciidoc, punctuation.definition.asciidoc | #98c379 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.title.markdown, string.other.link.description.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, markup.link.asciidoc, markup.other.url.asciidoc | #61afef | — |
| markup.inserted.diff, markup.deleted.diff, markup.changed.diff, meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff | #98c379 | — |
| token.info-token, token.warn-token, token.error-token, token.debug-token, log.info, log.warning, log.error | #c678dd | — |
| invalid.illegal, invalid.broken, invalid.deprecated, invalid.unimplemented, invalid.deprecated.entity.other.attribute-name.html, invalid.illegal.bad-ampersand.html, invalid.illegal.non-null-typehinted.php, invalid.illegal.unrecognized-tag.html | #ffffff | — |
| punctuation.separator.delimiter, punctuation.separator.key-value, punctuation.separator.comma, punctuation.section.block, punctuation.section.scope, punctuation.section.embedded.begin, punctuation.section.embedded.end, meta.brace.square, punctuation.separator.c, punctuation.separator.cpp, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php | #c2c2c2 | — |
| keyword.operator.type, keyword.operator.type.ts, keyword.operator.type.tsx | #56b6c2 | |
| keyword.operator.optional, keyword.operator.optional.ts, keyword.operator.optional.tsx | #56b6c2 | |
| keyword | — | italic |
| keyword.operator.ternary, keyword.operator.ternary.ts, keyword.operator.ternary.tsx | #c678dd |
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#21252B
- activityBar.border#181A1F
- activityBar.dropBorder#D6D9DF
- activityBar.foreground#D6D9DF
- activityBarBadge.background#4D78CC
- activityBarBadge.foreground#FFFFFF
- badge.background#4D78CC
- badge.foreground#FFFFFF
- button.background#4D78CC
- button.foreground#FFFFFF
- button.hoverBackground#6187D2
- debugExceptionWidget.background#252830
- debugExceptionWidget.border#181A1F
- diffEditor.insertedTextBackground#43D08A22
- diffEditor.removedTextBackground#FF634722
- dropdown.background#1E2127
- dropdown.border#181A1F
- dropdown.foreground#D7DAE0
- dropdown.listBackground#1E2127
- editor.background#282C34
- editor.findMatchBackground#314166
- editor.findMatchBorder#518FFF
- editor.findMatchHighlightBackground#518FFF36
- editor.findMatchHighlightBorder#FFFFFF00
- editor.findRangeHighlightBackground#518FFF36
- editor.findRangeHighlightBorder#FFFFFF00
- editor.foreground#ABB2BF
- editor.hoverHighlightBackground#3A3F4BA6
- editor.inactiveSelectionBackground#3E4452
- editor.lineHighlightBackground#99BBFF0A
- editor.lineHighlightBorder#FFFFFF00
- editor.rangeHighlightBackground#FFFFFF00
- editor.selectionBackground#4B5365A6
- editor.selectionHighlightBackground#4B5365A6
- editor.wordHighlightBackground#3E4452
- editor.wordHighlightStrongBackground#518FFF36
- editorBracketHighlight.foreground1#ABB2BF
- editorBracketHighlight.foreground2#B556BD
- editorBracketHighlight.foreground3#4082DD
- editorBracketHighlight.foreground4#739E61
- editorBracketHighlight.foreground5#BE5046
- editorBracketHighlight.foreground6#C6A753
- editorBracketHighlight.unexpectedBracket.foreground#FF6347
- editorBracketMatch.background#282C34
- editorBracketMatch.border#518FFF
- editorCodeLens.foreground#9DA5B4
- editorCursor.foreground#528BFF
- editorError.foreground#FF6347
- editorGroup.border#181A1F
- editorGroup.dropBackground#4B4B4B4D
- editorGroup.emptyBackground#282C34
- editorGroupHeader.noTabsBackground#21252B
- editorGroupHeader.tabsBackground#21252B
- editorGroupHeader.tabsBorder#181A1F
- editorGutter.addedBackground#43D08A
- editorGutter.deletedBackground#FF6347
- editorGutter.modifiedBackground#E0C285
- editorHoverWidget.background#252830
- editorHoverWidget.border#181A1F
- editorIndentGuide.activeBackground#333840
- editorIndentGuide.background#333840
- editorLineNumber.activeForeground#777D88
- editorLineNumber.foreground#4B5365
- editorMarkerNavigation.background#21252B
- editorMarkerNavigationError.background#FF6347
- editorOverviewRuler.addedForeground#43D08A88
- editorOverviewRuler.border#FFFFFF00
- editorOverviewRuler.bracketMatchForeground#FFFFFF00
- editorOverviewRuler.deletedForeground#FF634788
- editorOverviewRuler.errorForeground#FF6347
- editorOverviewRuler.findMatchForeground#6B727E
- editorOverviewRuler.infoForeground#FFFFFF00
- editorOverviewRuler.modifiedForeground#E0C28588
- editorOverviewRuler.rangeHighlightForeground#FFFFFF00
- editorOverviewRuler.selectionHighlightForeground#6B727E
- editorOverviewRuler.warningForeground#E0C285
- editorOverviewRuler.wordHighlightForeground#FFFFFF00
- editorOverviewRuler.wordHighlightStrongForeground#FFFFFF00
- editorRuler.foreground#383D45
- editorSuggestWidget.background#252830
- editorSuggestWidget.border#181A1F
- editorSuggestWidget.foreground#9DA5B4
- editorSuggestWidget.highlightForeground#D8D9DB
- editorSuggestWidget.selectedBackground#3A3F4B
- editorWarning.foreground#E0C285
- editorWhitespace.foreground#3C4047
- editorWidget.background#21252B
- editorWidget.border#373D48
- errorForeground#FF6347
- extensionButton.prominentBackground#4D78CC
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#6187D2
- focusBorder#5387F5
- foreground#ABB2BF
- gitDecoration.addedResourceForeground#43D08A
- gitDecoration.deletedResourceForeground#FF6347
- gitDecoration.ignoredResourceForeground#9DA5B499
- gitDecoration.modifiedResourceForeground#E0C285
- gitlens.trailingLineForegroundColor#5C6370
- input.background#1B1D23BF
- input.border#181A1F
- input.foreground#D7DAE0
- input.placeholderForeground#6B727E
- inputOption.activeBorder#5387F5
- inputValidation.errorBackground#312426
- inputValidation.errorBorder#FF6347
- inputValidation.errorForeground#D7DAE0
- inputValidation.infoBackground#21252B
- inputValidation.infoBorder#5387F5
- inputValidation.infoForeground#D7DAE0
- inputValidation.warningBackground#21252B
- inputValidation.warningBorder#E0C285
- inputValidation.warningForeground#D7DAE0
- list.activeSelectionBackground#4D78CC
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#2F333D
- list.errorForeground#FF6347
- list.focusBackground#3A3F4B
- list.focusForeground#D7DAE0
- list.highlightForeground#739CF5
- list.hoverBackground#2F333D
- list.hoverForeground#9DA5B4
- list.inactiveSelectionBackground#3A3F4B
- list.inactiveSelectionForeground#D7DAE0
- listFilterWidget.background#282C34
- listFilterWidget.noMatchesOutline#FF6347
- listFilterWidget.outline#181A1F
- notificationCenter.border#181A1F
- notificationCenterHeader.background#21252B
- notificationCenterHeader.foreground#D7DAE0
- notifications.background#21252B
- notifications.border#181A1F
- notificationToast.border#181A1F
- panel.background#21252B
- panel.border#181A1F
- panel.dropBorder#4B4B4B4D
- panelTitle.activeBorder#5387F5
- panelTitle.activeForeground#D7DAE0
- panelTitle.inactiveForeground#6B727E
- peekView.border#181A1F
- peekViewEditor.background#282C34
- peekViewEditor.matchHighlightBackground#518FFF36
- peekViewEditorGutter.background#282C34
- peekViewResult.background#21252B
- peekViewResult.fileForeground#BDC0C7
- peekViewResult.lineForeground#BDC0C7
- peekViewResult.matchHighlightBackground#41537C
- peekViewResult.selectionBackground#4D78CC
- peekViewResult.selectionForeground#FFFFFF
- peekViewTitle.background#21252B
- peekViewTitleDescription.foreground#A0A8B9
- peekViewTitleLabel.foreground#D7DAE0
- pickerGroup.border#3B4048
- pickerGroup.foreground#9DA5B4
- progressBar.background#4D78CC
- quickInputList.focusBackground#3A3F4B
- scrollbar.shadow#FFFFFF00
- scrollbarSlider.activeBackground#4C5366
- scrollbarSlider.background#4C536688
- scrollbarSlider.hoverBackground#4C536688
- selection.background#9DA5B4
- settings.checkboxBackground#1E2127
- settings.checkboxBorder#181A1F
- settings.dropdownBackground#1E2127
- settings.dropdownBorder#181A1F
- settings.dropdownForeground#D7DAE0
- settings.headerForeground#D7DAE0
- settings.modifiedItemIndicator#E0C285
- settings.numberInputBackground#1E2127
- settings.numberInputBorder#181A1F
- settings.numberInputForeground#D7DAE0
- settings.textInputBackground#1E2127
- settings.textInputBorder#181A1F
- settings.textInputForeground#D7DAE0
- sideBar.background#21252B
- sideBar.border#181A1F
- sideBar.foreground#9DA5B4
- sideBarSectionHeader.background#333842
- sideBarSectionHeader.foreground#D7DAE0
- sideBarTitle.foreground#D7DAE0
- statusBar.background#21252B
- statusBar.border#181A1F
- statusBar.debuggingBackground#FF634788
- statusBar.debuggingBorder#181A1F
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#9DA5B4
- statusBar.noFolderBackground#21252B
- statusBar.noFolderBorder#181A1F
- statusBar.noFolderForeground#9DA5B4
- statusBarItem.activeBackground#2F333D
- statusBarItem.hoverBackground#2F333D
- statusBarItem.prominentBackground#21252B
- statusBarItem.prominentHoverBackground#2F333D
- statusBarItem.remoteBackground#21252B
- statusBarItem.remoteForeground#9DA5B4
- tab.activeBackground#282C34
- tab.activeBorder#282C34
- tab.activeForeground#D7DAE0
- tab.border#181A1F
- tab.inactiveBackground#21252B
- tab.inactiveForeground#6B727E
- tab.unfocusedActiveBorder#282C34
- tab.unfocusedActiveForeground#D7DAE0
- tab.unfocusedInactiveForeground#6B727E
- textBlockQuote.background#3A3F4BA6
- textBlockQuote.border#6B727E
- textCodeBlock.background#32373F
- textLink.activeForeground#769FEF
- textLink.foreground#6494ED
- textPreformat.foreground#D7DAE0
- titleBar.activeBackground#21252B
- titleBar.activeForeground#D7DAE0
- titleBar.border#181A1F
- titleBar.inactiveBackground#21252B
- titleBar.inactiveForeground#696F7A
- widget.shadow#181A1FFF
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #5C6370 | normal |
| keyword, storage, variable.language.super, variable.language.this, variable.language.special | #C678DD | — |
| string, punctuation.definition.string | #98C379 | — |
| constant, keyword.other.unit, variable.other.constant, variable.other.enummember | #D19A66 | — |
| entity.name.function, support.function, punctuation.definition.decorator, punctuation.decorator, meta.function-call.generic | #61AFEF | — |
| entity.name.type, entity.other.inherited-class, support.class | #E5C07B | — |
| meta.type.annotation, meta.type.parameters, support.type.primitive, support.type.builtin, support.type.exception | #E5C07B | — |
| punctuation.accessor, keyword.operator.logical, keyword.operator.comparison, keyword.operator.increment, keyword.operator.decrement, keyword.operator.assignment, keyword.operator.relational, keyword.operator.ternary, keyword.operator.arithmetic, keyword.operator.rest, keyword.operator.spread, keyword.operator.type, keyword.operator.optional, keyword.operator.combinator, keyword.operator.pattern, keyword.operator.or, keyword.operator.quantifier, keyword.operator.bitwise | #56B6C2 | — |
| punctuation, keyword.operator.type.annotation, meta.brace | #ABB2BF | — |
| variable, entity.name, support.variable | #E06C75 | — |
| meta.object-literal.key | #98C379 | — |
| punctuation.definition.directive.cpp, keyword.other.using.directive.cpp | #C678DD | — |
| entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.function.call.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.function.definition.cpp | #E5C07B | — |
| punctuation.definition.keyword.css, punctuation.definition.keyword.scss, keyword.operator.logical.and.media.css, keyword.operator.logical.and.media.scss, keyword.operator.logical.scss | #C678DD | — |
| support.constant.property-value.css, support.constant.vendored.property-value.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, punctuation.definition.constant.css, entity.other.attribute-name.css, entity.other.attribute-name.attribute.scss | #D19A66 | — |
| keyword.operator.css, keyword.operator.scss | #56B6C2 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #E06C75 | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css | #E5C07B | — |
| meta.property-value.css | #E06C75 | — |
| support.type.map.key.scss, entity.other.keyframe-offset.css, meta.property-name.css, entity.other.attribute-name.scss, support.type.property-name.media.css | #98C379 | — |
| meta.attribute-selector.scss | #98C379 | — |
| variable.parameter.url.css, variable.parameter.url.scss | #ABB2BF | — |
| punctuation.whitespace.comment | #5C6370 | normal |
| support.type.graphql, support.type.location.graphql, support.type.enum.graphql, entity.scalar.graphql | #E5C07B | — |
| punctuation.or.graphql, keyword.operator.nulltype.graphql, punctuation.assignment.graphql | #56B6C2 | — |
| entity.other.attribute-name.html, entity.other.attribute-name.localname.xml, entity.other.attribute-name.namespace.xml | #D19A66 | italic |
| entity.other.attribute-name.js, entity.other.attribute-name.tsx | #D19A66 | italic |
| support.constant.json.js, support.constant.json.jsx, support.constant.json.ts, support.constant.json.tsx, support.constant.math.js, support.constant.math.jsx, support.constant.math.ts, support.constant.math.tsx | #E5C07B | — |
| support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx | #51B4C3 | — |
| punctuation.section.embedded.begin.js, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.js, punctuation.section.embedded.end.tsx | #BE5046 | — |
| variable.other.constant.js, variable.other.constant.jsx, variable.other.constant.ts, variable.other.constant.tsx | #E06C75 | — |
| string.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json | #E06C75 | — |
| punctuation.definition.heading.markdown | #E06C75 | — |
| markup.italic.markdown, punctuation.definition.italic.markdown | #C678DD | italic |
| markup.bold.markdown, punctuation.definition.bold.markdown | #D19A66 | bold |
| punctuation.definition.raw.markdown, markup.inline.raw.string.markdown, punctuation.definition.markdown, fenced_code.block.language.markdown | #98C379 | — |
| punctuation.definition.list.begin.markdown | #E06C75 | — |
| markup.quote.markdown, punctuation.definition.quote.begin.markdown | — | italic |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #56B6C2 | — |
| fenced_code.block.language.markdown | — | italic |
| keyword.operator.python, keyword.operator.unpacking.arguments.python, punctuation.separator.period.python | #56B6C2 | — |
| keyword.operator.logical.python | #C678DD | — |
| support.type.python | #E5C07B | — |
| source.python | #E06C75 | — |
| constant.other.table-name.sql, constant.other.database-name.sql | #ABB2BF | — |
| keyword.operator.math.sql, keyword.operator.star.sql | #56B6C2 | — |
| keyword.key.toml, entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml | #E06C75 | — |
| keyword.control.flow.block-scalar.folded.yaml, keyword.control.flow.block-scalar.literal.yaml, storage.modifier.chomping-indicator.yaml | #56B6C2 | — |