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#141414
- activityBar.background#000000
- activityBar.foreground#d7e3fc
- breadcrumb.background#0d0d0d
- breadcrumb.focusForeground#8c8c8c
- breadcrumb.foreground#595959
- debugToolBar.background#0d0d0d
- descriptionForeground#d7e3fc
- editor.background#0d0d0d
- editor.inactiveSelectionBackground#8c8c8c50
- editor.selectionBackground#8c8c8c50
- editorCursor.foreground#d7e3fc
- editorGroup.border#0d0d0d
- editorGroup.dropBackground#26262670
- editorGroup.emptyBackground#0d0d0d
- editorGroupHeader.border#0a0e14
- editorGroupHeader.tabsBackground#0d0d0d
- editorGroupHeader.tabsBorder#0d0d0d
- editorHoverWidget.background#1a1a1a
- editorHoverWidget.border#000000
- editorHoverWidget.foreground#fafafa
- editorLineNumber.foreground#595959
- editorSuggestWidget.background#1a1a1a
- editorSuggestWidget.border#000000
- editorSuggestWidget.foreground#f5f5f5
- editorSuggestWidget.highlightForeground#1890ff
- editorSuggestWidget.selectedBackground#262626
- editorWidget.background#1f1f1f
- editorWidget.border#0d0d0d
- editorWidget.foreground#f5f5f5
- editorWidget.resizeBorder#262626
- errorForeground#ff3333
- focusBorder#262626
- foreground#8c8c8c
- icon.foreground#f5f5f5
- menu.background#0d0d0d
- menu.border#000000
- menu.foreground#d7e3fc
- menu.selectionBackground#262626
- menu.selectionBorder#262626
- menu.selectionForeground#d7e3fc
- menu.separatorBackground#595959
- menubar.selectionBackground#262626
- menubar.selectionBorder#262626
- menubar.selectionForeground#d7e3fc
- notificationCenter.border#000000
- notificationCenterHeader.background#0d0d0d
- notificationCenterHeader.foreground#d7e3fc
- notifications.background#0d0d0d
- notifications.foreground#d7e3fc
- notificationToast.border#0d0d0d
- panel.background#0d0d0d
- panel.border#0d0d0d
- panelInput.border#595959
- panelTitle.activeBorder#8c8c8c
- panelTitle.activeForeground#d7e3fc
- panelTitle.inactiveForeground#8c8c8c
- peekView.border#434343
- pickerGroup.border#434343
- pickerGroup.foreground#595959
- quickInput.background#0d0d0d
- quickInput.foreground#d7e3fc
- selection.background#273747fd
- sideBar.background#0d0d0d
- sideBar.border#0d0d0d
- sideBar.foreground#d7e3fc
- sideBarSectionHeader.background#0d0d0d
- sideBarSectionHeader.border#0d0d0d
- sideBarTitle.foreground#d7e3fc
- statusBar.background#0d0d0d
- statusBar.border#0d0d0d
- statusBar.debuggingBackground#FA9672
- statusBar.debuggingBorder#0d0d0d
- statusBar.debuggingForeground#1f1f1f
- statusBar.foreground#d7e3fc
- statusBar.noFolderBackground#0d0d0d
- statusBar.noFolderBorder#0d0d0d
- statusBarItem.activeBackground#fa541c
- tab.activeBackground#000000
- tab.activeBorderTop#f0f0f0
- tab.activeForeground#f5f5f5
- tab.hoverBackground#0d0d0d80
- tab.inactiveBackground#0d0d0d
- tab.unfocusedActiveBackground#00000090
- tab.unfocusedHoverBackground#0d0d0d80
- terminal.ansiBrightWhite
- terminal.ansiBrightYellow
- terminal.ansiCyan#69c0ff
- terminal.ansiGreen#69c0ff
- terminal.ansiMagenta#95de64
- terminal.ansiRed#FA9672
- terminal.ansiWhite#FA9672
- terminal.ansiYellow#FA9672
- terminal.foreground#d7e3fc
- terminal.selectionBackground#ffffff50
- terminalCursor.background#d7e3fc
- terminalCursor.foreground#d7e3fc
- textBlockQuote.background#1f0707
- titleBar.activeBackground#0d0d0d
- titleBar.activeForeground#d7e3fc
- titleBar.border#0d0d0d
- titleBar.inactiveBackground#0d0d0d
- titleBar.inactiveForeground#8c8c8c
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| source | #d7e3fc | — |
| — | #d7e3fc | — |
| comment | #626a73 | italic |
| string, constant.other.symbol | #d7e3fc | — |
| string.regexp, constant.character, constant.other | #5cdbd3 | — |
| constant.numeric | #ffd666 | — |
| constant.language | #ffd666 | — |
| variable | #d7e3fc | — |
| variable.member | #69c0ff | — |
| variable.language | #69c0ff | italic |
| storage | #95de64 | — |
| keyword | #95de64 | — |
| keyword.operator | #FA9672 | — |
| punctuation.separator, punctuation.terminator | #FA9672 | — |
| punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array, punctuation.definition.entity, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.separator.inheritance, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard, punctuation.section.function.ruby, punctuation.separator.object.ruby | #FA7F55 | — |
| keyword.other.unit.percentage, keyword.other.unit.px, keyword.other.unit.rem, keyword.other.unit.em | #FA7F55 | — |
| none | #FA9672 | — |
| meta.separator | #FA9672 | — |
| punctuation.accessor | #FA9672 | — |
| source.java storage.type, source.haskell storage.type, source.c storage.type | #59c2ff | — |
| entity.other.inherited-class | #39bae6 | — |
| storage.type.function | #d7e3fc | — |
| source.java storage.type.primitive | #39bae6 | — |
| entity.name.function | #FA9672 | — |
| variable.parameter, meta.parameter | #ffffb8 | — |
| variable.function, variable.annotation, meta.function-call.generic, support.function.go | #d7e3fc | — |
| support.function, support.macro | #69c0ff | — |
| entity.name.import, entity.name.package | #d7e3fc | — |
| entity.name | #d7e3fc | — |
| entity.name.tag, meta.tag.sgml | #69c0ff | — |
| punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag | #40a9ff80 | — |
| entity.other.attribute-name | #FA9672 | — |
| support.constant | #FA9672 | italic |
| support.type, support.class, source.go storage.type | #69c0ff | — |
| meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation | #ffd591 | — |
| invalid | #ff4d4f | — |
| meta.diff, meta.diff.header | #c594c5 | — |
| source.ruby variable.other.readwrite | #FA9672 | — |
| source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag | #59c2ff | — |
| source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type | #8c8c8c | — |
| support.type.property-name | #d9d9d9 | normal |
| constant.numeric.line-number.find-in-files - match | #595959 | — |
| constant.numeric.line-number.match | #95de64 | — |
| entity.name.filename.find-in-files | #d7e3fc | — |
| message.error | #52c41a | — |
| markup.heading, markup.heading entity.name | #8c8c8c | bold |
| markup.underline.link, string.other.link | #40a9ff | — |
| markup.italic | #40a9ff | italic |
| markup.bold | #40a9ff | bold |
| markup.italic markup.bold, markup.bold markup.italic | — | bold italic |
| markup.raw | — | — |
| markup.raw.inline | — | — |
| meta.separator | #626a73 | bold |
| markup.quote | #b5f5ec | italic |
| markup.list punctuation.definition.list.begin | #ff7a45 | — |
| markup.inserted | #91b362 | — |
| markup.changed | #bae7ff | — |
| markup.deleted | #efdbff | — |
| markup.strike | #ffc069 | — |
| markup.table | #39bae6 | — |
| text.html.markdown markup.inline.raw | #ffc069 | — |
| text.html.markdown meta.dummy.line-break | #8c8c8c | — |
| punctuation.definition.markdown | #8c8c8c | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...