x dark theme
Publisher: xiong35Themes in package: 1
a colorful dark theme
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#202122
- activityBar.foreground#d7dae0
- activityBarBadge.background#4d78cc
- activityBarBadge.foreground#f8fafd
- badge.background#202122
- button.background#404754
- button.secondaryBackground#30333d
- button.secondaryForeground#c0bdbd
- checkbox.border#404754
- debugToolBar.background#21252b
- descriptionForeground#abb2bf
- diffEditor.insertedTextBackground#00809b33
- dropdown.background#21252b
- dropdown.border#21252b
- editor.background#202122
- editor.findMatchBackground#42557b
- editor.findMatchBorder#457dff
- editor.findMatchHighlightBackground#6199ff2f
- editor.foreground#abb2bf
- editor.lineHighlightBackground#2c313c
- editor.selectionBackground#67769660
- editor.selectionHighlightBackground#ffffff10
- editor.selectionHighlightBorder#dddddd
- editor.wordHighlightBackground#d2e0ff2f
- editor.wordHighlightBorder#7f848e
- editor.wordHighlightStrongBackground#abb2bf26
- editor.wordHighlightStrongBorder#7f848e
- editorActiveLineNumber.foreground#737984
- editorBracketHighlight.foreground1#fd9947
- editorBracketHighlight.foreground2#c678dd
- editorBracketHighlight.foreground3#56b6c2
- editorBracketMatch.background#515a6b
- editorBracketMatch.border#515a6b
- editorCursor.background#ffffffc9
- editorCursor.foreground#528bff
- editorError.foreground#c24038
- editorGroup.background#181a1f
- editorGroup.border#181a1f
- editorGroupHeader.tabsBackground#21252b
- editorGutter.addedBackground#109868
- editorGutter.deletedBackground#9A353D
- editorGutter.modifiedBackground#948B60
- editorHoverWidget.background#21252b
- editorHoverWidget.border#181a1f
- editorHoverWidget.highlightForeground#61afef
- editorIndentGuide.activeBackground#c8c8c859
- editorIndentGuide.background#3b4048
- editorInlayHint.background#2c313c
- editorInlayHint.foreground#abb2bf
- editorLineNumber.activeForeground#abb2bf
- editorLineNumber.foreground#495162
- editorMarkerNavigation.background#21252b
- editorOverviewRuler.addedBackground#109868
- editorOverviewRuler.deletedBackground#9A353D
- editorOverviewRuler.modifiedBackground#948B60
- editorRuler.foreground#abb2bf26
- editorSuggestWidget.background#21252b
- editorSuggestWidget.border#181a1f
- editorSuggestWidget.selectedBackground#2c313a
- editorWarning.foreground#fd9947
- editorWhitespace.foreground#ffffff1d
- editorWidget.background#21252b
- focusBorder#3e4452
- gitDecoration.ignoredResourceForeground#636b78
- input.background#1d1f23
- input.foreground#abb2bf
- list.activeSelectionBackground#2c313a
- list.activeSelectionForeground#d7dae0
- list.focusBackground#323842
- list.focusForeground#f0f0f0
- list.highlightForeground#c5c5c5
- list.hoverBackground#2c313a
- list.hoverForeground#abb2bf
- list.inactiveSelectionBackground#323842
- list.inactiveSelectionForeground#d7dae0
- list.warningForeground#fd9947
- menu.foreground#abb2bf
- menu.separatorBackground#343a45
- minimapGutter.addedBackground#109868
- minimapGutter.deletedBackground#9A353D
- minimapGutter.modifiedBackground#948B60
- panel.border#3e4452
- panelSectionHeader.background#21252b
- peekViewEditor.background#1b1d23
- peekViewEditor.matchHighlightBackground#29244b
- peekViewResult.background#22262b
- scrollbar.shadow#23252c
- scrollbarSlider.activeBackground#747d9180
- scrollbarSlider.background#4e566660
- scrollbarSlider.hoverBackground#5a637580
- settings.focusedRowBackground#202122
- settings.headerForeground#fff
- sideBar.background#21252b
- sideBar.foreground#abb2bf
- sideBarSectionHeader.background#202122
- sideBarSectionHeader.foreground#abb2bf
- statusBar.background#21252b
- statusBar.debuggingBackground#cc6633
- statusBar.debuggingBorder#ff000000
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#21252b
- statusBarItem.remoteBackground#4d78cc
- statusBarItem.remoteForeground#f8fafd
- tab.activeBackground#202122
- tab.activeBorder#b4b4b4
- tab.activeForeground#dcdcdc
- tab.border#181a1f
- tab.hoverBackground#323842
- tab.inactiveBackground#21252b
- tab.unfocusedHoverBackground#323842
- terminal.ansiBlack#3f4451
- terminal.ansiBlue#4aa5f0
- terminal.ansiBrightBlack#4f5666
- terminal.ansiBrightBlue#4dc4ff
- terminal.ansiBrightCyan#4cd1e0
- terminal.ansiBrightGreen#a5e075
- terminal.ansiBrightMagenta#de73ff
- terminal.ansiBrightRed#ff616e
- terminal.ansiBrightWhite#d7dae0
- terminal.ansiBrightYellow#f0a45d
- terminal.ansiCyan#42b3c2
- terminal.ansiGreen#8cc265
- terminal.ansiMagenta#c162de
- terminal.ansiRed#e05561
- terminal.ansiWhite#e6e6e6
- terminal.ansiYellow#d18f52
- terminal.background#202122
- terminal.border#3e4452
- terminal.foreground#abb2bf
- terminal.selectionBackground#abb2bf30
- textBlockQuote.background#2e3440
- textBlockQuote.border#4b5362
- textLink.foreground#61afef
- textPreformat.foreground#fd9947
- titleBar.activeBackground#202122
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#21252b
- titleBar.inactiveForeground#6b717d
- tree.indentGuidesStroke#ffffff1d
- walkThrough.embeddedEditorBackground#2e3440
- welcomePage.buttonHoverBackground#404754
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 | #5dd1ff | — |
| variable.other.generic-type.haskell | #fa83be | — |
| support.variable.magic | #5dd1ff | — |
| punctuation.separator.period,punctuation.separator.element,punctuation.parenthesis.begin,punctuation.parenthesis.end | #abb2bf | — |
| variable.parameter.function.language.special.self | #31dbd3 | — |
| variable.parameter.function.language.special.cls | #31dbd3 | — |
| storage.modifier.lifetime | #abb2bf | — |
| entity.name.lifetime | #31dbd3 | — |
| variable.language | #5dd1ff | — |
| constant.other.character-class.regexp | #5dd1ff | — |
| keyword.operator, punctuation.accessor | #fa83be | — |
| keyword.operator.expression | #f0638d | — |
| keyword.operator.spread, keyword.operator.rest | #f0638d | — |
| keyword.operator.bitwise | #b17bf7 | — |
| keyword.operator.type.annotation | #abb2bf | — |
| keyword.operator.quantifier.regexp | #ffb980 | — |
| string.regexp | #ff7843 | — |
| 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 | #ffc062 | — |
| markup.inserted.diff | #85ce73 | — |
| markup.deleted.diff | #ef596f | — |
| meta.function.c,meta.function.cpp | #5dd1ff | — |
| punctuation.separator.key-value | #abb2bf | — |
| support.constant | #31dbd3 | — |
| variable.other.constant | #61afef | — |
| support.constant.property-value | #fd9947 | — |
| support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name | #fd9947 | — |
| punctuation.separator.list.comma.css | #abb2bf | — |
| support.constant.color.w3c-standard-color-name.css | #fd9947 | — |
| support.type.vendored.property-name.css | #2bbac5 | — |
| support.module.node,support.type.object.module,support.module.node | #31dbd3 | — |
| variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node | #5dd1ff | — |
| support.type.object.console | #5dd1ff | — |
| support.variable.property.process | #fd9947 | — |
| keyword.operator.misc | #abb2bf | — |
| support.type.object.dom | #2bbac5 | — |
| support.variable.dom,support.variable.property.dom | #5dd1ff | — |
| punctuation.separator.delimiter | #abb2bf | — |
| punctuation.separator.c,punctuation.separator.cpp | #fa83be | — |
| support.type.posix-reserved.c,support.type.posix-reserved.cpp | #2bbac5 | — |
| variable.parameter.function.language | #fd9947 | — |
| support.type | #2bbac5 | — |
| variable.parameter.function | #fd9947 | — |
| punctuation.definition.arguments.begin,punctuation.definition.arguments.end,punctuation.separator.arguments,punctuation.definition.list.begin,punctuation.definition.list.end | #abb2bf | — |
| meta.function-call.generic | #ffc062 | — |
| keyword | #fa83be | — |
| entity.name.namespace | #31dbd3 | — |
| variable | #5dd1ff | — |
| variable.c | #abb2bf | — |
| variable.language | #61afef | — |
| token.variable.parameter.java | #abb2bf | — |
| entity.name.function, meta.require, support.function.any-method, variable.function, support.function | #ffc062 | — |
| support.class | #31dbd3 | — |
| support.type.primitive | #91dfc9 | — |
| entity.name.class.identifier.namespace.type | #31dbd3 | — |
| entity.name.class, variable.other.class.js, variable.other.class.ts | #31dbd3 | — |
| variable.other.class.php | #5dd1ff | — |
| entity.name.type | #21e8b0 | — |
| entity.name.type.module | #61afef | — |
| control.elements | #fd9947 | — |
| keyword.other.special-method | #ffc062 | — |
| storage | #fa83be | italic |
| support.type.property-name | #5dd1ff | — |
| meta.tag | #abb2bf | — |
| string | #85ce73 | — |
| constant.other.symbol | #2bbac5 | — |
| constant | #FF7843 | — |
| constant.language.null, constant.language.undefined | #ff7843b7 | — |
| punctuation.definition.constant | #fd9947 | — |
| entity.name.tag | #ef596f | — |
| entity.other.attribute-name | #af96df | — |
| entity.other.attribute-name.id | #61afef | normal |
| entity.other.attribute-name.class.css | #fd9947 | normal |
| meta.selector | #fa83be | — |
| markup.heading | #5dd1ff | — |
| heading.1.markdown | #b789d2 | — |
| heading.2.markdown | #61afef | — |
| markup.strikethrough.markdown | #abb2bf68 | — |
| meta.separator.markdown | #ca8141 | — |
| heading.3.markdown | #49bc90 | — |
| keyword.other.unit | #5dd1ff | — |
| markup.bold,todo.bold | #fd9947 | — |
| punctuation.definition.bold | #4fa6ec | — |
| markup.italic, punctuation.definition.italic,todo.emphasis | #fa83be | — |
| emphasis md | #fa83be | — |
| punctuation.definition.list.begin.markdown | #4fa6ec | — |
| markup.heading.setext | #abb2bf | — |
| punctuation.definition.bold.markdown | #fd9947 | — |
| markup.inline.raw.markdown | #85ce73 | — |
| markup.inline.raw.string.markdown | #85ce73 | — |
| punctuation.definition.raw.markdown | #4fa6ec | — |
| punctuation.definition.list.markdown | #4fa6ec | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #5dd1ff | — |
| beginning.punctuation.definition.list.markdown | #5dd1ff | — |
| punctuation.definition.metadata.markdown | #5dd1ff | — |
| markup.underline.link.markdown,markup.underline.link.image.markdown | #fa83be | — |
| string.other.link.title.markdown,string.other.link.description.markdown | #61afef | — |
| markup.raw.monospace.asciidoc | #85ce73 | — |
| punctuation.definition.asciidoc | #4fa6ec | — |
| markup.list.asciidoc | #4fa6ec | — |
| markup.link.asciidoc,markup.other.url.asciidoc | #fa83be | — |
| string.unquoted.asciidoc,markup.other.url.asciidoc | #61afef | — |
| punctuation.section.embedded, variable.interpolation | #5dd1ff | — |
| punctuation.section.embedded.begin,punctuation.section.embedded.end | #fa83be | — |
| invalid.illegal | #ffffff | — |
| invalid.illegal.bad-ampersand.html | #abb2bf | — |
| invalid.illegal.unrecognized-tag.html | #ef596f | — |
| invalid.broken | #ffffff | — |
| invalid.deprecated | #ffffff | — |
| invalid.deprecated.entity.other.attribute-name.html | #fd9947 | — |
| invalid.unimplemented | #ffffff | — |
| source.json meta.structure.dictionary.json > string.quoted.json | #5dd1ff | — |
| source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string | #5dd1ff | — |
| 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 | #85ce73 | — |
| source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json | #2bbac5 | — |
| support.type.property-name.json | #5dd1ff | — |
| support.type.property-name.json punctuation | #5dd1ff | — |
| text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade | #fa83be | — |
| punctuation.section.array.begin.php | #abb2bf | — |
| punctuation.section.array.end.php | #abb2bf | — |
| meta.function.decorator | #ffc062 | — |
| support.token.decorator,meta.function.decorator.identifier | #2bbac5 | — |
| function.parameter | #abb2bf | — |
| function.brace | #abb2bf | — |
| function.parameter.ruby, function.parameter.cs | #abb2bf | — |
| constant.language.symbol.ruby | #2bbac5 | — |
| rgb-value | #2bbac5 | — |
| inline-color-decoration rgb-value | #fd9947 | — |
| less rgb-value | #fd9947 | — |
| selector.sass | #5dd1ff | — |
| block.scope.end,block.scope.begin | #abb2bf | — |
| token.info-token | #61afef | — |
| token.warn-token | #fd9947 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #fa83be | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #fa83be | — |
| meta.template.expression | #abb2bf | — |
| support.type.type.flowtype | #61afef | — |
| meta.property.object | #5dd1ff | — |
| variable.parameter.function.js | #5dd1ff | — |
| keyword.other.template.begin | #85ce73 | — |
| keyword.other.template.end | #85ce73 | — |
| keyword.other.substitution.begin | #85ce73 | — |
| keyword.other.substitution.end | #85ce73 | — |
| entity.name.package.go | #61afef | — |
| support.type.prelude.elm | #2bbac5 | — |
| punctuation.quasi.element | #fa83be | — |
| constant.character.entity | #5dd1ff | — |
| entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class | #2bbac5 | — |
| entity.global.clojure | #4fa6ec | — |
| meta.symbol.clojure | #5dd1ff | — |
| meta.arguments.coffee, variable.parameter.function.coffee | #5dd1ff | — |
| source.ini | #85ce73 | — |
| meta.scope.prerequisites.makefile | #5dd1ff | — |
| source.makefile | #4fa6ec | — |
| support.variable.semantic.hlsl | #61afef | — |
| 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 | #fa83be | — |
| text.variable, text.bracketed | #5dd1ff | — |
| beginning.punctuation.definition.quote.markdown.xi | #85ce73 | — |
| beginning.punctuation.definition.list.markdown.xi | #7f848e | — |
| constant.character.xi | #61afef | — |
| accent.xi | #61afef | — |
| wikiword.xi | #fd9947 | — |
| punctuation.definition.tag.xi | #5c6370 | — |
| entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition | #4fa6ec | — |
| entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #5dd1ff | — |
| meta.brace.square | #abb2bf | — |
| comment, punctuation.definition.comment | #7f848e | italic |
| markup.quote.markdown | #3f7771 | — |
| punctuation.definition.block.sequence.item.yaml | #abb2bf | — |
| constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir | #2bbac5 | — |
| entity.name.variable.parameter.cs | #61afef | — |
| entity.name.variable.field.cs | #5dd1ff | — |
| markup.deleted | #ef596f | — |
| markup.inserted | #85ce73 | — |
| markup.underline | — | underline |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #BE5046 | — |
| support.other.namespace.php | #abb2bf | — |
| variable.other.object | #61afef | — |
| variable.other.constant.property | #5dd1ff | — |
| entity.other.inherited-class | #61afef | — |
| support.other.parenthesis.regexp | #fd9947 | — |
| constant.character.escape | #2bbac5 | — |
| 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 | — | italic |
| markup.italic.markdown | — | italic |
| keyword.control | #b680df | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...