Tech Learner Theme
Publisher: Tech LearnerThemes in package: 8
Official VSCode theme of Tech Learner!
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#0e0d1a
- activityBar.border#5966cc50
- activityBar.foreground#dddfe9
- activityBarBadge.background#8c97ea
- activityBarBadge.foreground#0e0d1a
- badge.background#0e0d1a30
- badge.foreground#5966cc
- breadcrumb.activeSelectionForeground#5966cc
- breadcrumb.background#0e0d1a
- breadcrumb.focusForeground#dddfe9
- breadcrumb.foreground#6a77d8
- breadcrumbPicker.background#0e0d1a
- button.background#5966cc50
- contrastBorder#5966cc50
- debugToolBar.background#0e0d1a
- diffEditor.insertedTextBackground#c800be15
- diffEditor.removedTextBackground#01d64820
- dropdown.background#0e0d1a
- dropdown.border#ffffff10
- editor.background#0e0d1a
- editor.findMatchBackground#0e0d1a
- editor.findMatchBorder#5966cc
- editor.findMatchHighlightBackground#5966cc93
- editor.findMatchHighlightBorder#ffffff30
- editor.foreground#dddfe9
- editor.lineHighlightBackground#0e0d1a50
- editor.selectionBackground#8c97ea30
- editor.selectionHighlightBackground#5966cc6b
- editor.selectionHighlightBorder#8c97eaf0
- editorBracketMatch.background#0e0d1a
- editorBracketMatch.border#ff00f27f
- editorCursor.foreground#ff00f2
- editorError.foreground#ffe553
- editorGroup.border#5966cc50
- editorGroupHeader.tabsBackground#0e0d1a
- editorGutter.addedBackground#c800be60
- editorGutter.deletedBackground#01d64860
- editorGutter.modifiedBackground#8c97ea60
- editorHoverWidget.background#0e0d1a
- editorHoverWidget.border#ffffff10
- editorIndentGuide.activeBackground#383b3d
- editorIndentGuide.background#383b3d70
- editorInfo.foreground#8c97ea70
- editorLineNumber.activeForeground#8c97ea
- editorLineNumber.foreground#5966ccc0
- editorLink.activeForeground#dddfe9
- editorMarkerNavigation.background#dddfe905
- editorOverviewRuler.border#0e0d1a
- editorOverviewRuler.errorForeground#01d64840
- editorOverviewRuler.findMatchForeground#5966cc
- editorOverviewRuler.infoForeground#8c97ea40
- editorOverviewRuler.warningForeground#ff000070
- editorRuler.foreground#383b3d
- editorSuggestWidget.background#0e0d1a
- editorSuggestWidget.border#ffffff10
- editorSuggestWidget.foreground#dddfe9
- editorSuggestWidget.highlightForeground#ff00f2
- editorSuggestWidget.selectedBackground#5966cc20
- editorWarning.foreground#c800be
- editorWhitespace.foreground#dddfe940
- editorWidget.background#0e0d1a
- editorWidget.border#ff00f2
- editorWidget.resizeBorder#5966cc
- extensionButton.prominentBackground#c800be90
- extensionButton.prominentHoverBackground#01d648
- focusBorder#ffffff00
- gitDecoration.conflictingResourceForeground#ff00f2
- gitDecoration.deletedResourceForeground#ff00f2
- gitDecoration.ignoredResourceForeground#8c97ea
- gitDecoration.modifiedResourceForeground#8c97ea
- gitDecoration.untrackedResourceForeground#8c97ea
- input.background#1d1e38
- input.border#ffffff10
- input.foreground#dddfe9
- input.placeholderForeground#dddfe960
- inputOption.activeBackground#dddfe930
- inputOption.activeBorder#dddfe930
- inputValidation.errorBorder#01d64850
- inputValidation.infoBorder#8c97ea50
- inputValidation.warningBorder#ff00f250
- list.activeSelectionBackground#0e0d1a
- list.activeSelectionForeground#5966cc
- list.focusBackground#1d1e38
- list.focusForeground#8c97ea
- list.highlightForeground#5966cc
- list.hoverBackground#5966cc30
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#0e0d1a30
- list.inactiveSelectionForeground#5966cc
- list.warningForeground#ff00f2
- listFilterWidget.background#0e0d1a30
- listFilterWidget.noMatchesOutline#0e0d1a30
- listFilterWidget.outline#0e0d1a30
- menu.background#0e0d1af8
- menu.border#5966cc50
- menu.foreground#dddfe9
- menu.selectionBackground#5966cc30
- menu.selectionBorder#0e0d1a30
- menu.selectionForeground#dddfe9
- menu.separatorBackground#5966cc9f
- menubar.selectionBackground#1b184b
- menubar.selectionBorder#5966cc50
- menubar.selectionForeground#dddfe9
- minimap.background#141325
- minimapGutter.addedBackground#ff00f2
- minimapGutter.deletedBackground#ff00f2
- minimapGutter.modifiedBackground#ff00f2
- minimapSlider.activeBackground#5966ccb0
- minimapSlider.background#5966cc80
- minimapSlider.hoverBackground#5966cca0
- notificationLink.foreground#5966cc
- notifications.background#0e0d1a
- notifications.foreground#dddfe9
- panel.background#0e0d1a
- panel.border#5966cc50
- panelTitle.activeBorder#5966cc
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#dddfe9
- peekView.border#0e0d1a30
- peekViewEditor.background#dddfe905
- peekViewEditor.matchHighlightBackground#5966cc50
- peekViewEditorGutter.background#dddfe905
- peekViewResult.background#dddfe905
- peekViewResult.matchHighlightBackground#5966cc50
- peekViewResult.selectionBackground#5966cc70
- peekViewTitle.background#dddfe905
- peekViewTitleDescription.foreground#dddfe960
- pickerGroup.foreground#5966cc
- progressBar.background#5966cc
- quickInputList.focusBackground#5966cc30
- quickInputList.focusForeground#b6bdf2
- scrollbar.shadow#0e0d1a00
- scrollbarSlider.activeBackground#5966cc
- scrollbarSlider.background#5966cc
- scrollbarSlider.hoverBackground#5966cc
- selection.background#5966cc
- settings.checkboxBackground#0e0d1a
- settings.checkboxForeground#dddfe9
- settings.dropdownBackground#0e0d1a
- settings.dropdownForeground#dddfe9
- settings.headerForeground#5966cc
- settings.modifiedItemIndicator#5966cc
- settings.numberInputBackground#0e0d1a
- settings.numberInputForeground#dddfe9
- settings.textInputBackground#0e0d1a
- settings.textInputForeground#dddfe9
- sideBar.background#0e0d1a
- sideBar.border#5966cc50
- sideBar.foreground#8c97ea
- sideBarSectionHeader.background#0e0d1a
- sideBarSectionHeader.border#0e0d1a60
- sideBarSectionHeader.foreground#8c97ea
- sideBarTitle.foreground#dddfe9
- statusBar.background#2c2772
- statusBar.border#0e0d1a60
- statusBar.debuggingBackground#ff00f2
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#c4cbff
- statusBar.noFolderBackground#0e0d1a
- statusBarItem.hoverBackground#5966cc20
- statusBarItem.remoteBackground#5966cc
- statusBarItem.remoteForeground#0e0d1a
- tab.activeBackground#5966cc20
- tab.activeBorder#5966cc
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#5966cc
- tab.border#5966cc90
- tab.inactiveBackground#0e0d1a
- tab.inactiveForeground#5966cc
- tab.unfocusedActiveBorder#5966cc
- tab.unfocusedActiveForeground#dddfe9
- tab.unfocusedHoverBackground#1b184ba0
- tab.unfocusedHoverForeground#dddfe9a0
- terminal.ansiBlack#0e0d1a
- terminal.ansiBlue#8c97ea
- terminal.ansiBrightBlack#5966cc
- terminal.ansiBrightBlue#8c97ea
- terminal.ansiBrightCyan#23deff
- terminal.ansiBrightGreen#17f648
- terminal.ansiBrightMagenta#ff00f2
- terminal.ansiBrightRed#fa1313
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffffff
- terminal.ansiCyan#8c97ea
- terminal.ansiGreen#00c82b
- terminal.ansiMagenta#ff00f2
- terminal.ansiRed#fa1313
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffe553
- terminalCursor.background#0e0d1a
- terminalCursor.foreground#ff00f2
- textLink.activeForeground#dddfe9
- textLink.foreground#5966cc
- titleBar.activeBackground#0e0d1a
- titleBar.activeForeground#dddfe9
- titleBar.border#5966cc50
- titleBar.inactiveBackground#0e0d1a
- titleBar.inactiveForeground#8c97ea
- tree.indentGuidesStroke#383b3d
- widget.shadow#0e0d1a30
- window.activeBorder#0e0d1a
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier | #ff00f2 | — |
| variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss | — | italic |
| punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss | #c800be | — |
| constant.other.php | #ff00f2 | — |
| constant.other.color | #FFFFFF | — |
| invalid, invalid.illegal | #01d648 | — |
| Keyword, Storage | — | italic |
| keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss | #a7a8af | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #6d6f7c | — |
| keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js | #dddfe9 | — |
| punctuation.definition, string.quoted.single.scss | #a7a8af | — |
| keyword.control | — | bold |
| comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html | #6d6f7c | — |
| text.html.derivative | #a7a8af | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #dddfe9 | — |
| entity.name.tag.html | — | bold |
| variable.parameter.js, variable.parameter.keyframe-list.css | #ff00f2 | — |
| variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js, entity.name.type.module.js | #6a77d8 | |
| string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control | #8c97ea | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #c4cbff | — |
| support.other.variable, string.other.link, markup.table | #dddfe9 | — |
| constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html | #ff00f2 | — |
| variable.parameter.function.language.special, variable.parameter | #01d648 | — |
| constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #c800be | |
| entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html | #FF00F2 | — |
| support.type | #B2CCD6 | — |
| 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 | #6a77d8 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #01d648 | — |
| entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #8c97ea | italic |
| entity.other.attribute-name, support.function | #ff00f2 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key | #dddfe9 | — |
| source.scss keyword.control | #ff0000 | — |
| markup.inserted | #c800be | — |
| markup.deleted | #01d648 | — |
| markup.changed | #ff00f2 | — |
| string.regexp | #c4cbff | — |
| constant.character.escape | #c4cbff | — |
| *url*, *link*, *uri* | — | underline |
| source.js constant.other.object.key.js string.unquoted.label.js | #dddfe9 | italic |
| support.type.property-name.json | #dddfe9 | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #dddfe9 | — |
| text.html.markdown markup.inline.raw.markdown | #ff00f2 | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #5966cc50 | — |
| text.html.markdown meta.dummy.line-break | — | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown | #6a77d8 | bold |
| markup.underline | #8c97ea | underline |
| markup.strike | — | |
| markup.quote punctuation.definition.blockquote.markdown | #5966cc50 | — |
| markup.quote | — | italic |
| string.other.link.description.title.markdown | #ff00f2 | — |
| constant.other.reference.link.markdown | #ff00f2 | — |
| markup.raw.block | #ff00f2 | — |
| punctuation.definition.raw.markdown, punctuation.definition.markdown | #c4cbff | — |
| variable.language.fenced.markdown | #5966cc | — |
| meta.separator | #a7a8af | bold |
| token.info-token | #5966cc | — |
| token.warn-token | #ff00f2 | — |
| token.error-token | #ff293b | — |
| token.debug-token | #c4cbff | — |
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#0c1a25
- activityBar.dropBackground#FF652F80
- activityBarBadge.background#FF652F
- activityBarBadge.foreground#ffffff
- badge.background#FF652F
- badge.foreground#ffffff
- button.background#FF652F
- button.foreground#ffffff
- debugToolBar.background#0c1a25
- dropdown.background#0e1e2b
- editor.background#09131b
- editor.foreground#FFFFFF
- editor.lineHighlightBorder#FFFFFF1a
- editor.rangeHighlightBackground#FFFFFF0d
- editorCursor.foreground#FFE400
- editorGroup.dropBackground#FF652F80
- editorGroup.focusedEmptyBorder#FF652F
- editorGroupHeader.tabsBackground#0a1620
- editorHoverWidget.background#0a1620
- editorLineNumber.activeForeground#FF652F
- editorLineNumber.foreground#FFFFFF4d
- editorMarkerNavigation.background#0a1620
- editorWidget.background#0a1620
- focusBorder#7e2200
- foreground#FFFFFF
- input.background#0e1e2b
- inputOption.activeBorder#FF652F
- list.activeSelectionBackground#FF652F80
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#FF652F80
- list.focusBackground#FF652F80
- list.focusForeground#FFFFFF
- list.highlightForeground#FF652F
- list.hoverBackground#FFFFFF1a
- list.inactiveSelectionBackground#FFFFFF33
- panel.background#0a1620
- panel.border#FFFFFF1a
- panelTitle.activeBorder#FFFFFF80
- panelTitle.inactiveForeground#FFFFFF80
- peekView.border#FF652F
- peekViewEditor.background#070f15
- peekViewResult.background#0a1620
- peekViewTitle.background#09131b
- pickerGroup.border#FFFFFF1a
- sash.hoverBorder#ff652F
- selection.background#FF652F
- sideBar.background#0a1620
- sideBarSectionHeader.background#0c1a25
- statusBar.background#070f15
- statusBar.debuggingBackground#FF652F
- statusBar.debuggingForeground#ffffff
- statusBar.noFolderBackground#070f15
- statusBarItem.activeBackground#FF652F80
- statusBarItem.hoverBackground#FFFFFF1a
- statusBarItem.remoteBackground#FF652F
- statusBarItem.remoteForeground#ffffff
- tab.activeBorder#FF652F
- tab.activeModifiedBorder#FF652F
- tab.border#00000033
- tab.inactiveBackground#0c1a25
- tab.inactiveModifiedBorder#993c1c
- tab.lastPinnedBorder#ff652f
- tab.unfocusedActiveModifiedBorder#cc5025
- tab.unfocusedInactiveModifiedBorder#993c1c
- titleBar.activeBackground#070f15
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Global settings | #FFFFFF | — |
| string | #14A76C | — |
| constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html | #1efaa2 | — |
| constant.language.boolean | #FF652F | — |
| constant.numeric | #FFE400 | — |
| variable, support.variable, support.class, support.constant, meta.definition.variable, entity.name.function | #746aff | — |
| variable.other.constant | #ff5177 | — |
| keyword, modifier, variable.language.this, support.type.object, constant.language | #5eb7ee | — |
| keyword.control.flow.js | #FFE400 | — |
| entity.name.function, support.function | #FFE400 | — |
| storage.type, storage.modifier, keyword.operator.expression | #FF652F | — |
| support.module, support.node | #ff9746 | italic |
| support.type | #ff9d00 | — |
| entity.name.type, entity.other.inherited-class | #ff9d00 | — |
| comment, comment.block.js | #577997 | italic |
| entity.name.type.class | #ff9d00 | underline |
| variable.object.property, meta.field.declaration entity.name.function | #5eb7ee | — |
| meta.definition.method entity.name.function | #5eb7ee | — |
| meta.function, entity.name.function | #5eb7ee | — |
| template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #FF652F | — |
| meta.embedded, source.groovy.embedded, meta.template.expression | #FFFFFF | — |
| entity.name.tag.yaml | #ff9746 | — |
| meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json | #5eb7ee | — |
| constant.language.json | #FF652F | — |
| entity.other.attribute-name.class | #FF652F | — |
| entity.other.attribute-name.id | #14A76C | — |
| source.css entity.name.tag | #5eb7ee | — |
| meta.tag, punctuation.definition.tag | #FF652F | — |
| entity.name.tag | #ffc598 | — |
| entity.other.attribute-name | #FFE400 | — |
| markup.heading | #FF652F | — |
| text.html.markdown meta.link.inline, meta.link.reference | #ff9746 | — |
| text.html.markdown beginning.punctuation.definition.list | #FF652F | — |
| markup.italic | #ff9746 | italic |
| markup.bold | #ff9746 | bold |
| markup.bold markup.italic, markup.italic markup.bold | #ff9746 | italic bold |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #14A76C | — |
| markup.inline.raw.string.markdown | #14A76C | — |
| punctuation.definition.heading.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, markup.fenced_code.block.markdown, meta.separator.markdown | #356ea0 | — |
| keyword.other.definition.ini | #ff9746 | — |
| entity.name.section.group-title.ini | #FF652F | — |
| source.cs meta.class.identifier storage.type | #5eb7ee | underline |
| source.cs meta.method.identifier entity.name.function | #5eb7ee | — |
| source.cs meta.method-call meta.method, source.cs entity.name.function | #FFE400 | — |
| source.cs storage.type | #5eb7ee | — |
| source.cs meta.method.return-type | #5eb7ee | — |
| source.cs meta.preprocessor | #1b3951 | — |
| source.cs entity.name.type.namespace | #FFFFFF | — |
| Global settings | #FFFFFF | — |
| modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html, keyword.control.flow.js | — | 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#011627
- activityBar.border#219fd544
- activityBar.foreground#99d0f7
- activityBarBadge.background#219fd5
- activityBarBadge.foreground#ffffff
- badge.background#219fd5
- badge.foreground#ffffff
- button.background#03648a
- button.foreground#ffffff
- button.hoverBackground#219fd5
- contrastActiveBorder#122d42
- contrastBorder#122d42
- debugExceptionWidget.background#011627
- debugToolBar.background#022846
- diffEditor.insertedTextBackground#99b76d23
- diffEditor.insertedTextBorder#addb6733
- diffEditor.removedTextBackground#ef535033
- diffEditor.removedTextBorder#ef53504d
- editor.background#011627
- editor.findMatchHighlightBackground#103362
- editor.foreground#a7dbf7
- editor.hoverHighlightBackground#0c4994
- editor.inactiveSelectionBackground#7e57c25a
- editor.lineHighlightBackground#0c499477
- editor.rangeHighlightBackground#103362
- editor.selectionBackground#103362
- editor.selectionHighlightBackground#103362
- editor.wordHighlightBackground#103362
- editor.wordHighlightStrongBackground#103362
- editorBracketMatch.background#219fd54d
- editorCursor.foreground#219fd5
- editorError.foreground#ef5350
- editorGroup.border#219fd544
- editorGroupHeader.tabsBackground#011627
- editorGutter.background#011627
- editorHoverWidget.background#011627
- editorHoverWidget.border#5f7e97
- editorIndentGuide.activeBackground#C792EA
- editorIndentGuide.background#0e2c45
- editorLineNumber.foreground#219fd5
- editorOverviewRuler.commonContentForeground#7e57c2
- editorOverviewRuler.currentContentForeground#7e57c2
- editorOverviewRuler.incomingContentForeground#7e57c2
- editorSuggestWidget.background#2C3043
- editorSuggestWidget.border#2B2F40
- editorSuggestWidget.foreground#d6deeb
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#5f7e97
- editorWarning.foreground#ffca28
- editorWhitespace.foreground#3B3A32
- editorWidget.background#0b2942
- editorWidget.border#262A39
- errorForeground#EF5350
- foreground#d6deeb
- gitDecoration.modifiedResourceForeground#219fd5
- gitDecoration.untrackedResourceForeground#5ABEB0
- input.background#0b253a
- input.border#5f7e97
- input.foreground#ffffffcc
- input.placeholderForeground#5f7e97
- inputOption.activeBorder#ffffff
- inputValidation.errorBackground#ef5350
- inputValidation.errorBorder#ef5350
- inputValidation.infoBackground#219fd5
- inputValidation.infoBorder#219fd5
- inputValidation.warningBackground#f7ecb5
- inputValidation.warningBorder#f7ecb5
- inputValidation.warningForeground#000000
- list.activeSelectionBackground#219fd5
- list.dropBackground#011627
- list.focusBackground#03648a
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#011627
- list.hoverForeground#219fd5
- list.inactiveSelectionBackground#0e293f
- list.inactiveSelectionForeground#5f7e97
- list.invalidItemForeground#975f94
- notificationLink.foreground#80CBC4
- notifications.background#011627
- notifications.foreground#ffffffcc
- notificationToast.border#219fd544
- panel.background#011627
- panel.border#219fd5
- panelTitle.activeBorder#5f7e97
- panelTitle.activeForeground#219fd5
- panelTitle.inactiveForeground#5f7e97
- peekView.border#f7ecb5
- peekViewEditor.background#011627
- peekViewEditor.matchHighlightBackground#7e57c25a
- peekViewResult.background#011627
- peekViewResult.matchHighlightBackground#7e57c25a
- peekViewResult.selectionBackground#2E3250
- peekViewResult.selectionForeground#cecece
- peekViewTitle.background#011627
- peekViewTitleDescription.foreground#697098
- peekViewTitleLabel.foreground#cecece
- pickerGroup.border#219fd544
- quickInput.list.focusBackground#219fd5
- scrollbar.shadow#010b14
- scrollbarSlider.activeBackground#084d8180
- scrollbarSlider.background#084d8180
- scrollbarSlider.hoverBackground#084d8180
- selection.background#4373c2
- sideBar.background#011627
- sideBar.border#219fd544
- sideBar.foreground#7799bb
- sideBarSectionHeader.background#011627
- sideBarSectionHeader.foreground#7799bb
- sideBarTitle.foreground#7799bb
- statusBar.background#219fd5
- statusBar.debuggingBackground#b15a91
- statusBar.noFolderBackground#011627
- statusBarItem.activeBackground#03648a
- statusBarItem.hoverBackground#03648a
- statusBarItem.prominentBackground#03648a
- statusBarItem.prominentHoverBackground#03648a
- tab.activeBackground#0b2942
- tab.activeBorderTop#219fd5
- tab.activeForeground#d2dee7
- tab.inactiveBackground#010e1a
- tab.inactiveForeground#5f7e97
- terminal.ansiBlack#011627
- textLink.activeForeground#98c8ed
- textLink.foreground#219fd5
- titleBar.activeBackground#112233
- titleBar.activeForeground#eeefff
- titleBar.border#303030
- titleBar.inactiveBackground#000a11
- walkThrough.embeddedEditorBackground#001111
- welcomePage.buttonBackground#011627
- welcomePage.buttonHoverBackground#011627
- widget.shadow#219fd5
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #bce7ff | — |
| meta.paragraph.markdown, string.other.link.description.title.markdown | #EEFFFF | — |
| entity.name.section.markdown, punctuation.definition.heading.markdown | #5ABEB0 | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown | #82AAFF | — |
| markup.quote.markdown | #82AAFF | italic |
| markup.bold.markdown, punctuation.definition.bold.markdown | #57cdff | bold |
| markup.italic.markdown, punctuation.definition.italic.markdown | #C792EA | italic |
| markup.inline.raw.string.markdown, markup.fenced_code.block.markdown | #f7ecb5 | italic |
| punctuation.definition.metadata.markdown | #f3b8c2 | — |
| markup.underline.link.image.markdown, markup.underline.link.markdown | #6dbdfa | — |
| comment | #999999 | italic |
| punctuation.definition.string | #6bff81 | — |
| string | #bcf0c0 | — |
| string.quoted, variable.other.readwrite.js | #bcf0c0 | |
| constant.numeric | #8dec95 | — |
| constant.language.boolean | #8dec95 | — |
| constant | #A170C6 | — |
| constant.language, punctuation.definition.constant, variable.other.constant | #92b6f4 | — |
| constant.character, constant.other | #82AAFF | — |
| variable | #a4ceee | italic |
| variable.other.object.js | #d6deeb | italic |
| variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts | #d6deeb | — |
| meta.class entity.name.type.class.tsx | #d29ffcff | — |
| entity.name.type.tsx, entity.name.type.module.tsx | #d29ffcff | — |
| meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx | #a1bde6 | — |
| variable.other.object.property | #f7ecb5 | italic |
| variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property | #7fdbca | — |
| variable.other.readwrite.js, variable.parameter | #d7dbe0 | — |
| string.template meta.template.expression | #c63ed3 | — |
| string.template punctuation.definition.string | #fff | — |
| storage | #6dbdfa | |
| keyword, storage.type, storage.modifier, variable.language.this | #00bff9 | italic |
| keyword.operator | #00bff9 | italic |
| storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts | #c792ea | italic |
| variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other | #d3eed6 | — |
| entity.name.class | #f7ecb5 | — |
| entity.other.inherited-class | #4FB4D8 | |
| variable.other.readwrites, meta.definition.variable | #f7ecb5 | |
| support.variable.property | #7fdbca | — |
| entity.name.function | #87aff4 | italic |
| variable.parameter | #d7dbe0 | |
| entity.name.tag | #6dbdfa | |
| entity.name.type | #d29ffc | — |
| entity.other.attribute-name | #f7ecb5 | italic |
| punctuation.decorator | #f7ecb5 | italic |
| punctuation.definition.block, punctuation.definition.tag | #ffffff | — |
| support.function | #f7ecb5 | |
| support.constant | #ec9cd2 | |
| support.type, support.class | #7fdbca | — |
| support.other.variable | #CBCDD2 | — |
| invalid | #6dbdfa | italic bold underline |
| invalid.deprecated | #6dbdfa | bold italic underline |
| support.type.property-name.json | #91dacd | — |
| support.constant.json | #addb67 | — |
| meta.structure.dictionary.value.json string.quoted.double | #e0aff5 | — |
| string.quoted.double.json punctuation.definition.string.json | #80CBC4 | — |
| meta.structure.dictionary.json meta.structure.dictionary.value constant.language | #f29fd8 | — |
| source.json support | #6dbdfa | — |
| source.json string, source.json punctuation.definition.string | #ece7cd | — |
| markup.list | #6dbdfa | — |
| markup.heading punctuation.definition.heading, entity.name.section | #4FB4D8 | |
| text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown | #78bd65 | — |
| meta.paragraph.markdown | #ffffff | — |
| markup.quote | #78bd65 | italic |
| meta.link | #78BD65 | — |
| source.dockerfile | #99d0f7 | — |
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#1d1f23
- activityBar.foreground#d7dae0
- activityBarBadge.background#528bff
- activityBarBadge.foreground#f8fafd
- button.background#528bff
- diffEditor.insertedTextBackground#00809b33
- dropdown.background#1d1f23
- dropdown.border#181a1f
- editor.background#121212
- editor.findMatchHighlightBackground#314365
- editor.lineHighlightBackground#1d1f23
- editor.selectionBackground#3e4451
- editorCursor.foreground#f8f8f0
- editorError.foreground#704040
- editorGroup.background#181a1f
- editorGroup.border#181a1f
- editorGroupHeader.tabsBackground#181a1f
- editorHoverWidget.background#181a1f
- editorHoverWidget.border#181a1f
- editorIndentGuide.background#3b4048
- editorInfo.foreground#707040
- editorLineNumber.foreground#495162
- editorRuler.foreground#484848
- editorSuggestWidget.background#181a1f
- editorSuggestWidget.border#181a1f
- editorSuggestWidget.selectedBackground#2c313a
- editorWarning.foreground#407040
- editorWhitespace.foreground#484a50
- editorWidget.background#181a1f
- focusBorder#181a1f
- input.background#1d1f23
- list.activeSelectionBackground#121212
- list.activeSelectionForeground#d7dae0
- list.focusBackground#383e4a
- list.highlightForeground#c5c5c5
- list.hoverBackground#121212
- list.inactiveSelectionBackground#121212
- list.inactiveSelectionForeground#d7dae0
- notification.background#181a1f
- peekView.border#202020
- peekViewEditor.background#202020
- scrollbarSlider.activeBackground#747d9180
- scrollbarSlider.background#4e566680
- scrollbarSlider.hoverBackground#5a637580
- sideBar.background#181a1f
- sideBar.border#1d1f23
- sideBarSectionHeader.background#181a1f
- statusBar.background#020202
- statusBar.debuggingBackground#020202
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#020202
- statusBarItem.hoverBackground#2c313a
- tab.activeBackground#121212
- tab.border#181a1f
- tab.inactiveBackground#181a1f
- titleBar.activeBackground#020202
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#020202
- titleBar.inactiveForeground#6b717d
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #bbbbbbff | — |
| comment, string.comment | #5c6370 | italic |
| string | #e5c07b | — |
| punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts | #c678dd | — |
| string.template.js | #e5c07b | — |
| meta.template.expression.js | #abb2bf | — |
| constant.numeric | #c678dd | — |
| string.embedded.begin, string.embedded.end | #c678dd | — |
| string.embedded | #98c379 | — |
| constant.language | #56b6c2 | — |
| constant.character, constant.other | #56b6c2 | — |
| variable.language | #e06c75 | — |
| variable.readwrite, variable.readwrite.other.block | #61afef | — |
| 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 | #61afef | — |
| variable.other.property, variable.other.block | #abb2bf | — |
| entity.other.inherited-class | #98c379 | — |
| entity.name.function, support.function | #98c379 | — |
| variable.parameter | #d19a66 | italic |
| entity.name.function-call | #abb2bf | — |
| function.support.builtin, function.support.core | #98c379 | — |
| entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx | #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 | — |
| 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 | — |
| structure.dictionary.property-name.json | #56b6c2 | — |
| string.detected-link | #61afef | — |
| meta.diff, meta.diff.header | #75715E | — |
| markup.deleted | #c678dd | — |
| markup.inserted | #e5c07b | — |
| 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 | #696969 | none |
| markup.underline.link.markdown | #61afef | — |
| markup.bold.markdown | — | bold |
| punctuation.definition.bold.markdown | #696969 | none |
| markup.heading.markdown | #e06c75 | bold |
| punctuation.definition.heading.markdown | #696969 | none |
| markup.quote.markdown | #98c379 | — |
| meta.separator.markdown | #c678dd | bold |
| markup.raw.inline.markdown, markup.raw.block.markdown | #56b6c2 | — |
| punctuation.definition.list_item.markdown | #ffffff | bold |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |