Vytalitech Light
Publisher: VytalitechThemes in package: 1
A light grey theme for maximum zen.
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#bab8b8
- activityBar.foreground#000000
- activityBarBadge.background#ff4b4b
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#000000
- breadcrumb.focusForeground#1a1a1a
- breadcrumb.foreground#333333
- breadcrumbPicker.background#e0e0e0
- button.background#005A9E
- button.foreground#ffffff
- button.hoverBackground#005A9E
- diffEditor.insertedTextBackground#ddffdd88
- diffEditor.removedTextBackground#ffeaea88
- editor.background#dededc
- editor.inactiveSelectionBackground#d0d0d066
- editor.lineHighlightBackground#ffffff
- editor.selectionBackground#cce7ff
- editorBracketHighlight.foreground1#000000
- editorBracketHighlight.foreground2#000000
- editorBracketHighlight.foreground3#000000
- editorBracketHighlight.foreground4#000000
- editorBracketHighlight.foreground5#000000
- editorBracketHighlight.foreground6#000000
- editorBracketHighlight.unexpectedBracket.foreground#FF0000
- editorBracketMatch.background#00000023
- editorBracketMatch.border#ff000020
- editorCursor.foreground#007acc
- editorGhostText.foreground#999999
- editorGroupHeader.noTabsBackground#d0d0d0
- editorGroupHeader.tabsBackground#bab8b8
- editorGutter.addedBackground#22863a
- editorGutter.deletedBackground#d91e18
- editorGutter.modifiedBackground#007acc
- editorIndentGuide.activeBackground1#000000
- editorIndentGuide.activeBackground2#000000
- editorIndentGuide.activeBackground3#000000
- editorIndentGuide.activeBackground4#000000
- editorIndentGuide.activeBackground5#000000
- editorIndentGuide.activeBackground6#000000
- editorIndentGuide.background1#c0bebe
- editorIndentGuide.background2#c0bebe
- editorIndentGuide.background3#c0bebe
- editorIndentGuide.background4#c0bebe
- editorIndentGuide.background5#c0bebe
- editorIndentGuide.background6#c0bebe
- editorLineNumber.activeForeground#000000
- editorLineNumber.foreground#888888
- editorSuggestWidget.background#f5f5f5
- editorSuggestWidget.border#cccccc
- editorSuggestWidget.foreground#1a1a1a
- editorSuggestWidget.highlightForeground#007acc
- editorSuggestWidget.selectedBackground#e0e0e0
- editorSuggestWidget.selectedForeground#000000
- extensionButton.background#e4e8e7
- extensionButton.foreground#000000
- extensionButton.hoverBackground#96e7fc
- extensionButton.prominentForeground#000000
- focusBorder#5cacac
- icon.foreground#005A9E
- list.activeSelectionBackground#15bcda70
- list.activeSelectionForeground#000000
- list.activeSelectionIconForeground#005bbb
- list.focusBackground#dcdcdc
- list.focusForeground#000000
- list.focusHighlightForeground#007acc
- list.highlightForeground#007acc
- list.hoverBackground#f5f5f5
- list.hoverForeground#000000
- list.inactiveSelectionBackground#15bcda30
- list.inactiveSelectionForeground#333333
- list.inactiveSelectionIconForeground#999999
- panel.background#d6d8df
- panel.border#b0b0b0
- panelSection.border#cccccc
- panelSectionHeader.background#eaeaea
- panelSectionHeader.foreground#000000
- panelTitle.activeBorder#007acc
- panelTitle.activeForeground#000000
- panelTitle.inactiveForeground#464646be
- pickerGroup.border#cccccc
- pickerGroup.foreground#005bbb
- quickInput.background#d0d0d0
- quickInput.foreground#1a1a1a
- quickInputList.focusBackground#d0d0d0
- quickInputList.focusForeground#007acc
- quickInputList.focusIconForeground#005bbb
- quickInputTitle.background#eaeaea
- sideBar.background#cecece
- sideBar.foreground#000000
- sideBarSectionHeader.foreground#000000
- sideBarTitle.foreground#000000
- statusBar.background#bab8b8
- statusBar.foreground#000000
- statusBar.noFolderBackground#e6e7e9
- statusBarItem.activeBackground#cfcfcf
- statusBarItem.hoverBackground#c3c7d1
- statusBarItem.prominentBackground#cccccc
- statusBarItem.prominentHoverBackground#bbbbbb
- tab.activeBackground#e8e6e6
- tab.activeBorderTop#007acc
- tab.activeForeground#000000
- tab.activeModifiedBorder#ff0000
- tab.border#2c2b2b
- tab.hoverForeground#000000
- tab.inactiveBackground#bab8b8
- tab.inactiveForeground#000000
- tab.inactiveModifiedBorder#ff8888
- tab.unfocusedActiveForeground#222222
- tab.unfocusedActiveModifiedBorder#ffaaaa
- tab.unfocusedInactiveForeground#666666
- tab.unfocusedInactiveModifiedBorder#ffcccc
- terminal.ansiBlack#333333
- terminal.ansiBlue#0067ce
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#188cd9
- terminal.ansiBrightCyan#4db6ac
- terminal.ansiBrightGreen#50b03c
- terminal.ansiBrightMagenta#d670d6
- terminal.ansiBrightRed#e57373
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fdd835
- terminal.ansiCyan#1ba287
- terminal.ansiGreen#22863a
- terminal.ansiMagenta#8a2be2
- terminal.ansiRed#cc0000
- terminal.ansiWhite#eaeaea
- terminal.ansiYellow#b58900
- terminal.background#d6d8df
- terminal.foreground#000000
- terminalCursor.background#213132
- terminalCursor.foreground#03040588
- titleBar.activeBackground#b6b6b6
- titleBar.activeForeground#000000
- titleBar.inactiveBackground#eaeaea
- titleBar.inactiveForeground#444444
- toolbar.activeBackground#eaeaea
- toolbar.hoverBackground#dcdcdc
- toolbar.hoverOutline#999999
- tree.inactiveIndentGuidesStroke#ff0000
- tree.indentGuidesStroke#cccccc
- tree.tableColumnsBorder#cccccc
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| storage.type.interface.ts, storage.type.namespace.ts, storage.type.enum.ts, storage.type.class.ts, storage.modifier.ts, storage.type.interface.tsx, storage.type.namespace.tsx, storage.type.enum.tsx, storage.type.class.tsx, storage.modifier.tsx, storage.type.interface.js, storage.type.namespace.js, storage.type.enum.js, storage.type.class.js, storage.modifier.js | #033e6e | bold |
| entity.other.attribute-name.html | #818c8f | |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #818c8f | |
| support.type.property-name.css | #188cd9 | |
| text.html.derivative | #000000 | |
| entity.name.type.class.ts, entity.name.type.class.tsx, entity.name.type.class.js, entity.name.type, entity.name.type.ts, entity.name.type.tsx, support.class, entity.name.type.js | #0281FF | |
| support.function, entity.name.function | #8757c8 | |
| variable, variable.parameter.ts, variable.parameter.tsx, variable.parameter.js | #5E5E5E | |
| string | #50b03c | |
| Comments | #6a737d | italic |
| keyword.control.as.ts, entity.name.type.ts, keyword.control.as.tsx, entity.name.type.tsx, keyword.control.as.js, entity.name.type.js | #8c9156 | |
| variable.object.property.ts, meta.object-literal.key.ts, meta.definition.property.ts, meta.field.declaration.ts, meta.brace.round.ts, punctuation.terminator.statement.ts, punctuation.accessor.ts, variable.object.property.tsx, meta.object-literal.key.tsx, meta.definition.property.tsx, meta.field.declaration.tsx, meta.brace.round.tsx, punctuation.terminator.statement.tsx, punctuation.accessor.tsx, punctuation.separator.key-value.html, variable.object.property.js, meta.object-literal.key.js, meta.definition.property.js, meta.field.declaration.js, meta.brace.round.js, punctuation.terminator.statement.js, punctuation.accessor.js | #000000 | |
| storage.type.property.ts, storage.type.property.tsx, storage.type.property.js | #000000 | bold |
| keyword.control.import.ts, keyword.control.from.ts, keyword.control.import.tsx, keyword.control.from.tsx, keyword.control.import.js, keyword.control.from.js | #8E813F | |
| entity.other.inherited-class.ts, entity.other.inherited-class.tsx, entity.other.inherited-class.js | #4d0045 | |
| meta.type.annotation.ts, keyword.operator.type.annotation.ts, keyword.operator.optional.ts, support.type.builtin.ts, keyword.operator.type.ts, support.type.primitive.ts, keyword.operator.new.ts, keyword.control.export.ts, keyword.operator.assignment.ts, keyword.control.flow.ts, keyword.operator.comparison.ts, keyword.operator.ternary.ts, meta.type.annotation.tsx, keyword.operator.type.annotation.tsx, keyword.operator.optional.tsx, support.type.builtin.tsx, keyword.operator.type.tsx, support.type.primitive.tsx, keyword.operator.new.tsx, keyword.control.export.tsx, keyword.operator.assignment.tsx, keyword.control.flow.tsx, keyword.operator.comparison.tsx, keyword.operator.ternary.tsx, keyword, meta.type.annotation.js, keyword.operator.type.annotation.js, keyword.operator.optional.js, support.type.builtin.js, keyword.operator.type.js, support.type.primitive.js, support.type.primitive, keyword.operator.new.js, keyword.control.export.js, keyword.operator.assignment.js, keyword.control.flow.js, keyword.operator.comparison.js, keyword.operator.ternary.js | #8e813f | |
| keyword.operator.arithmetic.ts, keyword.operator.arithmetic.tsx, keyword.operator.arithmetic.js | #160eac | |
| variable.language.this.ts, variable.other.property.ts, variable.other.object.property.ts, entity.name.function.ts, variable.other.constant.ts, variable.other.readwrite.ts, variable.other.readwrite.alias.ts, variable.other.object.ts, variable.language.this.tsx, variable.other.property.tsx, variable.other.object.property.tsx, entity.name.function.tsx, variable.other.constant.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.tsx, variable.other.object.tsx, variable.language.this.js, variable.other.property.js, variable.other.object.js, variable.other.object.property.js, entity.name.function.js, variable.other.constant.js, variable.other.readwrite.js, variable.other.readwrite.alias.js | #0067ce | |
| entity.other.attribute-name.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.ts, punctuation.definition.tag.end.ts, entity.other.attribute-name.ts, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, entity.other.attribute-name.tsx | #888888 | |
| storage.type.js, storage.type.function.arrow.js, storage.type.ts, storage.type.function.arrow.ts, storage.type.tsx, storage.type.function.arrow.tsx | #0A3640 | bold |
| string.template.ts, string.quoted.double.ts, string.quoted.single.ts, string.template.tsx, string.quoted.double.tsx, string.quoted.single.tsx, string.quoted.double.js, string.quoted.single.js, string.template.js | #31ad35 | |
| storage.modifier.async.js, storage.modifier.async.ts, storage.modifier.async.tsx | #000000 | bold |
| constant.numeric, constant.numeric.decimal.js, constant.numeric.decimal.ts, constant.numeric.decimal.tsx | #DE4A80 | |
| constant.language.boolean.true.js, constant.language.null.js, constant.character.escape.js, constant.language.boolean.false.js, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.null.ts, constant.character.escape.ts, constant.language.boolean.true.tsx, constant.language.boolean.false.tsx, constant.language.null.tsx, constant.character.escape.tsx | #C95E16 |