Vivid Life Theme
Publisher: Vivid Life ThemeThemes in package: 24
A multi-flavor color scheme system for VS Code (Visual Studio Code). 4 flavors × 6 variants = 24 themes. WCAG AA verified.
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.activeBackground#0000000d
- activityBar.activeBorder#713f12e6
- activityBar.background#d4d4d4
- activityBar.border#e5e5e5
- activityBar.foreground#171717
- activityBar.inactiveForeground#525252
- activityBarBadge.background#713f12
- activityBarBadge.foreground#f5f5f5
- badge.background#713f12
- badge.foreground#f5f5f5
- breadcrumb.activeSelectionForeground#713f12
- breadcrumb.background#f5f5f5
- breadcrumb.focusForeground#171717
- breadcrumb.foreground#404040
- breadcrumbPicker.background#ffffff
- button.background#713f12
- button.border#d4d4d4
- button.foreground#f5f5f5
- button.hoverBackground#713f12e6
- button.secondaryBackground#ffffff
- button.secondaryForeground#171717
- button.secondaryHoverBackground#ffffff
- charts.blue#1d4ed8
- charts.foreground#171717
- charts.green#4d7c0f
- charts.lines#525252
- charts.orange#c2410c
- charts.purple#7e22ce
- charts.red#b91c1c
- charts.yellow#a16207
- checkbox.background#ffffff
- checkbox.border#d4d4d4
- checkbox.foreground#171717
- checkbox.selectBackground#713f12
- checkbox.selectBorder#713f12
- debugConsole.errorForeground#7f1d1d
- debugConsole.infoForeground#1e3a8a
- debugConsole.sourceForeground#404040
- debugConsole.warningForeground#713f12
- debugConsoleInputIcon.foreground#713f12
- debugIcon.breakpointDisabledForeground#737373
- debugIcon.breakpointForeground#7f1d1d
- debugIcon.breakpointUnverifiedForeground#525252
- debugIcon.continueForeground#365314
- debugIcon.disconnectForeground#713f12
- debugIcon.pauseForeground#1e3a8a
- debugIcon.restartForeground#365314
- debugIcon.startForeground#365314
- debugIcon.stepIntoForeground#1e3a8a
- debugIcon.stepOutForeground#1e3a8a
- debugIcon.stepOverForeground#1e3a8a
- debugIcon.stopForeground#7f1d1d
- debugToolBar.background#ffffff
- debugToolBar.border#d4d4d4
- descriptionForeground#525252
- diffEditor.insertedLineBackground#3653141a
- diffEditor.insertedTextBackground#36531426
- diffEditor.removedLineBackground#7f1d1d1a
- diffEditor.removedTextBackground#7f1d1d26
- diffEditorGutter.insertedLineBackground#36531433
- diffEditorGutter.removedLineBackground#7f1d1d33
- diffEditorOverview.insertedForeground#36531466
- diffEditorOverview.removedForeground#7f1d1d66
- dropdown.background#ffffff
- dropdown.border#d4d4d4
- dropdown.foreground#171717
- dropdown.listBackground#ffffff
- editor.background#f5f5f5
- editor.findMatchBackground#713f1266
- editor.findMatchHighlightBackground#713f1233
- editor.findRangeHighlightBackground#713f121a
- editor.focusedStackFrameHighlightBackground#713f1240
- editor.foreground#171717
- editor.hoverHighlightBackground#713f1226
- editor.inactiveSelectionBackground#713f1226
- editor.lineHighlightBackground#0000000d
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#0000000d
- editor.selectionBackground#713f1240
- editor.selectionHighlightBackground#713f1226
- editor.stackFrameHighlightBackground#713f1226
- editor.symbolHighlightBackground#713f1233
- editor.wordHighlightBackground#0e749040
- editor.wordHighlightStrongBackground#164e6366
- editorBracketHighlight.foreground1#171717
- editorBracketHighlight.foreground2#b91c1c
- editorBracketHighlight.foreground3#c2410c
- editorBracketHighlight.foreground4#713f12
- editorBracketHighlight.foreground5#365314
- editorBracketHighlight.foreground6#1d4ed8
- editorBracketHighlight.unexpectedBracket.foreground#7f1d1d
- editorBracketMatch.background#713f1233
- editorBracketMatch.border#713f12
- editorCodeLens.foreground#525252
- editorCursor.foreground#713f12
- editorError.foreground#7f1d1d
- editorGroup.border#e5e5e5
- editorGroup.emptyBackground#d4d4d4
- editorGroupHeader.noTabsBackground#d4d4d4
- editorGroupHeader.tabsBackground#d4d4d4
- editorGroupHeader.tabsBorder#e5e5e5
- editorGutter.addedBackground#365314
- editorGutter.background#f5f5f5
- editorGutter.deletedBackground#7f1d1d
- editorGutter.modifiedBackground#1e3a8a
- editorHint.foreground#525252
- editorHoverWidget.background#ffffff
- editorHoverWidget.border#d4d4d4
- editorHoverWidget.foreground#171717
- editorHoverWidget.statusBarBackground#d4d4d4
- editorIndentGuide.activeBackground1#d4d4d4
- editorIndentGuide.background1#e5e5e5
- editorInfo.foreground#1e3a8a
- editorLineNumber.activeForeground#171717
- editorLineNumber.foreground#525252
- editorLink.activeForeground#713f12
- editorOverviewRuler.addedForeground#365314
- editorOverviewRuler.border#e5e5e5
- editorOverviewRuler.bracketMatchForeground#713f12
- editorOverviewRuler.deletedForeground#7f1d1d
- editorOverviewRuler.errorForeground#7f1d1d
- editorOverviewRuler.findMatchForeground#713f1299
- editorOverviewRuler.infoForeground#1e3a8a
- editorOverviewRuler.modifiedForeground#1e3a8a
- editorOverviewRuler.rangeHighlightForeground#713f1266
- editorOverviewRuler.selectionHighlightForeground#713f1266
- editorOverviewRuler.warningForeground#713f12
- editorOverviewRuler.wordHighlightForeground#713f1266
- editorRuler.foreground#e5e5e5
- editorSuggestWidget.background#ffffff
- editorSuggestWidget.border#d4d4d4
- editorSuggestWidget.focusHighlightForeground#713f12
- editorSuggestWidget.foreground#171717
- editorSuggestWidget.highlightForeground#713f12
- editorSuggestWidget.selectedBackground#e5e5e5
- editorSuggestWidget.selectedForeground#171717
- editorSuggestWidget.selectedIconForeground#713f12
- editorUnnecessaryCode.opacity#00000099
- editorWarning.foreground#713f12
- editorWhitespace.foreground#737373
- editorWidget.background#ffffff
- editorWidget.border#d4d4d4
- editorWidget.foreground#171717
- editorWidget.resizeBorder#713f12
- errorForeground#7f1d1d
- extensionBadge.remoteBackground#713f12
- extensionBadge.remoteForeground#f5f5f5
- extensionButton.prominentBackground#713f12
- extensionButton.prominentForeground#f5f5f5
- extensionButton.prominentHoverBackground#713f12e6
- extensionIcon.preReleaseForeground#1e3a8a
- extensionIcon.starForeground#713f12
- extensionIcon.verifiedForeground#365314
- focusBorder#713f12
- foreground#171717
- gitDecoration.addedResourceForeground#365314
- gitDecoration.conflictingResourceForeground#713f12
- gitDecoration.deletedResourceForeground#7f1d1d
- gitDecoration.ignoredResourceForeground#737373
- gitDecoration.modifiedResourceForeground#1e3a8a
- gitDecoration.renamedResourceForeground#1e3a8a
- gitDecoration.stageDeletedResourceForeground#7f1d1d
- gitDecoration.stageModifiedResourceForeground#713f12
- gitDecoration.submoduleResourceForeground#525252
- gitDecoration.untrackedResourceForeground#365314
- icon.foreground#404040
- input.background#ffffff
- input.border#d4d4d4
- input.foreground#171717
- input.placeholderForeground#525252
- inputOption.activeBackground#713f1240
- inputOption.activeBorder#713f12
- inputOption.activeForeground#171717
- inputOption.hoverBackground#0000000d
- inputValidation.errorBackground#7f1d1d33
- inputValidation.errorBorder#7f1d1d
- inputValidation.errorForeground#171717
- inputValidation.infoBackground#1e3a8a33
- inputValidation.infoBorder#1e3a8a
- inputValidation.infoForeground#171717
- inputValidation.warningBackground#713f1233
- inputValidation.warningBorder#713f12
- inputValidation.warningForeground#171717
- list.activeSelectionBackground#e5e5e5
- list.activeSelectionForeground#171717
- list.activeSelectionIconForeground#713f12
- list.deemphasizedForeground#525252
- list.dropBackground#00000014
- list.errorForeground#7f1d1d
- list.focusBackground#e5e5e5
- list.focusForeground#171717
- list.focusHighlightForeground#713f12
- list.focusOutline#713f12
- list.highlightForeground#713f12
- list.hoverBackground#0000000d
- list.hoverForeground#171717
- list.inactiveSelectionBackground#e5e5e5
- list.inactiveSelectionForeground#404040
- list.inactiveSelectionIconForeground#404040
- list.invalidItemForeground#7f1d1d
- list.warningForeground#713f12
- listFilterWidget.background#ffffff
- listFilterWidget.noMatchesOutline#7f1d1d
- listFilterWidget.outline#713f12
- menu.background#ffffff
- menu.border#d4d4d4
- menu.foreground#171717
- menu.selectionBackground#e5e5e5
- menu.selectionBorder#00000000
- menu.selectionForeground#171717
- menu.separatorBackground#e5e5e5
- menubar.selectionBackground#0000000d
- menubar.selectionBorder#00000000
- menubar.selectionForeground#171717
- merge.border#e5e5e5
- merge.commonContentBackground#52525226
- merge.commonHeaderBackground#5252524d
- merge.currentContentBackground#1e3a8a26
- merge.currentHeaderBackground#1e3a8a4d
- merge.incomingContentBackground#36531426
- merge.incomingHeaderBackground#3653144d
- minimap.background#f5f5f5
- minimap.errorHighlight#7f1d1d
- minimap.findMatchHighlight#713f1266
- minimap.selectionHighlight#713f1240
- minimap.selectionOccurrenceHighlight#713f1233
- minimap.warningHighlight#713f12
- minimapGutter.addedBackground#365314
- minimapGutter.deletedBackground#7f1d1d
- minimapGutter.modifiedBackground#1e3a8a
- minimapSlider.activeBackground#52525280
- minimapSlider.background#52525233
- minimapSlider.hoverBackground#5252524d
- notebook.cellBorderColor#e5e5e5
- notebook.cellHoverBackground#0000000d
- notebook.cellInsertionIndicator#713f12
- notebook.cellStatusBarItemHoverBackground#0000000d
- notebook.cellToolbarSeparator#e5e5e5
- notebook.editorBackground#f5f5f5
- notebook.focusedCellBackground#0000000d
- notebook.focusedCellBorder#713f12
- notebook.focusedEditorBorder#713f12
- notebook.inactiveFocusedCellBorder#d4d4d4
- notebook.inactiveSelectedCellBorder#d4d4d4
- notebook.outputContainerBackgroundColor#d4d4d4
- notebook.selectedCellBackground#e5e5e5
- notebook.selectedCellBorder#d4d4d4
- notebook.symbolHighlightBackground#713f1226
- notificationCenter.border#d4d4d4
- notificationCenterHeader.background#d4d4d4
- notificationCenterHeader.foreground#171717
- notificationLink.foreground#713f12
- notifications.background#ffffff
- notifications.border#d4d4d4
- notifications.foreground#171717
- notificationsErrorIcon.foreground#7f1d1d
- notificationsInfoIcon.foreground#1e3a8a
- notificationsWarningIcon.foreground#713f12
- notificationToast.border#d4d4d4
- panel.background#f5f5f5
- panel.border#e5e5e5
- panel.dropBorder#713f12
- panelInput.border#d4d4d4
- panelSection.border#e5e5e5
- panelSectionHeader.background#d4d4d4
- panelSectionHeader.foreground#171717
- panelTitle.activeBorder#713f12
- panelTitle.activeForeground#171717
- panelTitle.inactiveForeground#525252
- peekView.border#713f12
- peekViewEditor.background#f5f5f5
- peekViewEditor.matchHighlightBackground#713f124d
- peekViewEditor.matchHighlightBorder#713f12
- peekViewEditorGutter.background#f5f5f5
- peekViewResult.background#d4d4d4
- peekViewResult.fileForeground#171717
- peekViewResult.lineForeground#404040
- peekViewResult.matchHighlightBackground#713f124d
- peekViewResult.selectionBackground#e5e5e5
- peekViewResult.selectionForeground#171717
- peekViewTitle.background#d4d4d4
- peekViewTitleDescription.foreground#525252
- peekViewTitleLabel.foreground#171717
- pickerGroup.border#e5e5e5
- pickerGroup.foreground#713f12
- problemsErrorIcon.foreground#7f1d1d
- problemsInfoIcon.foreground#1e3a8a
- problemsWarningIcon.foreground#713f12
- progressBar.background#713f12
- quickInput.background#ffffff
- quickInput.foreground#171717
- quickInputList.focusBackground#e5e5e5
- quickInputList.focusForeground#171717
- quickInputList.focusIconForeground#713f12
- quickInputTitle.background#d4d4d4
- scrollbar.shadow#17171788
- scrollbarSlider.activeBackground#525252b3
- scrollbarSlider.background#52525266
- scrollbarSlider.hoverBackground#52525280
- selection.background#713f1240
- settings.checkboxBackground#ffffff
- settings.checkboxBorder#d4d4d4
- settings.checkboxForeground#171717
- settings.dropdownBackground#ffffff
- settings.dropdownBorder#d4d4d4
- settings.dropdownForeground#171717
- settings.headerForeground#171717
- settings.modifiedItemIndicator#713f12
- settings.numberInputBackground#ffffff
- settings.numberInputBorder#d4d4d4
- settings.numberInputForeground#171717
- settings.textInputBackground#ffffff
- settings.textInputBorder#d4d4d4
- settings.textInputForeground#171717
- sideBar.background#d4d4d4
- sideBar.border#e5e5e5
- sideBar.dropBackground#00000014
- sideBar.foreground#404040
- sideBarSectionHeader.background#f5f5f5
- sideBarSectionHeader.border#e5e5e5
- sideBarSectionHeader.foreground#404040
- sideBarTitle.foreground#171717
- statusBar.background#d4d4d4
- statusBar.border#713f12
- statusBar.debuggingBackground#7f1d1d
- statusBar.debuggingBorder#e5e5e5
- statusBar.debuggingForeground#f5f5f5
- statusBar.foreground#171717
- statusBar.noFolderBackground#d4d4d4
- statusBar.noFolderBorder#e5e5e5
- statusBar.noFolderForeground#171717
- statusBarItem.activeBackground#00000026
- statusBarItem.errorBackground#7f1d1d
- statusBarItem.errorForeground#f5f5f5
- statusBarItem.hoverBackground#0000001a
- statusBarItem.prominentBackground#00000014
- statusBarItem.prominentHoverBackground#00000026
- statusBarItem.remoteBackground#713f12
- statusBarItem.remoteForeground#f5f5f5
- statusBarItem.warningBackground#713f12
- statusBarItem.warningForeground#f5f5f5
- tab.activeBackground#f5f5f5
- tab.activeBorder#00000000
- tab.activeBorderTop#713f12
- tab.activeForeground#171717
- tab.activeModifiedBorder#713f12
- tab.border#e5e5e5
- tab.hoverBackground#ffffff
- tab.hoverForeground#171717
- tab.inactiveBackground#d4d4d4
- tab.inactiveForeground#525252
- tab.inactiveModifiedBorder#713f12
- tab.unfocusedActiveForeground#404040
- tab.unfocusedHoverBackground#ffffff
- tab.unfocusedInactiveForeground#525252
- terminal.ansiBlack#171717
- terminal.ansiBlue#1d4ed8
- terminal.ansiBrightBlack#737373
- terminal.ansiBrightBlue#1e3a8a
- terminal.ansiBrightCyan#164e63
- terminal.ansiBrightGreen#365314
- terminal.ansiBrightMagenta#581c87
- terminal.ansiBrightRed#7f1d1d
- terminal.ansiBrightWhite#d4d4d4
- terminal.ansiBrightYellow#713f12
- terminal.ansiCyan#0e7490
- terminal.ansiGreen#4d7c0f
- terminal.ansiMagenta#7e22ce
- terminal.ansiRed#b91c1c
- terminal.ansiWhite#404040
- terminal.ansiYellow#a16207
- terminal.background#f5f5f5
- terminal.border#e5e5e5
- terminal.findMatchBackground#713f1266
- terminal.findMatchHighlightBackground#713f1233
- terminal.foreground#171717
- terminal.inactiveSelectionBackground#713f1226
- terminal.selectionBackground#713f124d
- terminalCursor.background#f5f5f5
- terminalCursor.foreground#713f12
- textBlockQuote.background#d4d4d4
- textBlockQuote.border#713f12
- textCodeBlock.background#d4d4d4
- textLink.activeForeground#713f12
- textLink.foreground#713f12
- textPreformat.foreground#365314
- textSeparator.foreground#e5e5e5
- titleBar.activeBackground#d4d4d4
- titleBar.activeForeground#171717
- titleBar.border#e5e5e5
- titleBar.inactiveBackground#d4d4d4
- titleBar.inactiveForeground#525252
- tree.inactiveIndentGuidesStroke#e5e5e5
- tree.indentGuidesStroke#e5e5e5
- walkThrough.embeddedEditorBackground#d4d4d4
- welcomePage.background#f5f5f5
- welcomePage.progress.background#d4d4d4
- welcomePage.progress.foreground#713f12
- welcomePage.tileBackground#d4d4d4
- welcomePage.tileHoverBackground#ffffff
- widget.shadow#17171788
- window.activeBorder#d4d4d4
- window.inactiveBorder#e5e5e5
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, comment.block | #525252 | — |
| keyword.control, keyword.other, storage.type, storage.modifier | #7e22ce | — |
| string, string.quoted, string.template | #365314 | — |
| constant.numeric, constant.language | #c2410c | — |
| entity.name.function, support.function | #1d4ed8 | — |
| variable.parameter | #7c2d12 | italic |
| entity.name.type, entity.name.class, support.class, support.type | #713f12 | — |
| constant.other | #c2410c | — |
| entity.name.tag | #1d4ed8 | — |
| entity.other.attribute-name | #4d7c0f | — |
| string.regexp | #b91c1c | — |
| punctuation | #404040 | — |
| variable.other.readwrite, variable.other | #171717 | — |
| variable.other.property, variable.other.member, support.type.property-name | #171717 | — |
| entity.name.function.decorator, meta.decorator entity.name.function, punctuation.decorator | #1d4ed8 | italic |
| keyword.operator | #7e22ce | — |
| support.function.builtin, support.class.builtin, support.variable.builtin | #1d4ed8 | italic |
| entity.name.namespace, entity.name.module | #713f12 | — |
| entity.name.function.macro, support.function.macro | #1d4ed8 | — |
| storage.modifier.lifetime.rust, entity.name.lifetime.rust | #c2410c | — |
| markup.heading, entity.name.section, punctuation.definition.heading | #7e22ce | bold |
| markup.underline.link, string.other.link | #1d4ed8 | — |
| entity.other.pseudo-class, entity.other.pseudo-element, meta.selector entity.other.attribute-name | #1d4ed8 | — |
| keyword.other.unit | #c2410c | — |
| constant.other.color, constant.other.color.rgb-value.css | #365314 | — |
| comment.line.shebang | #525252 | — |
| markup.italic | #713f12 | italic |
| markup.bold | #c2410c | bold |
| invalid.illegal | #7f1d1d | italic underline |
| invalid.deprecated | #171717 | italic underline |
| variable.other.event, support.type.event | #1d4ed8 | — |
| entity.name.label, variable.label | #171717 | italic |
| variable.language.this, variable.language.self, variable.language.super | #c2410c | italic |
| comment.block.documentation keyword | #7e22ce | — |
| comment.block.documentation entity.name.type | #713f12 | italic |
| comment.block.documentation variable | #7c2d12 | italic |
| variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx | #171717 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #7e22ce | — |
| constant.character.escape | #7e22ce | — |
| source.shell variable.other, variable.other.normal.shell | #7e22ce | — |
| variable.other.alias.yaml | #365314 | italic underline |
| string.quoted.docstring.multi | #525252 | italic |
| keyword.control.at-rule, punctuation.definition.keyword | #7e22ce | — |
| markup.bold.markdown markup.italic.markdown, markup.italic.markdown markup.bold.markdown | #713f12 | bold italic |
| string.other.link.description.markdown, string.other.link.title.markdown | #1d4ed8 | — |
| markup.inline.raw, markup.fenced_code.block, markup.raw.block | #365314 | — |
| markup.quote, punctuation.definition.quote.begin | #713f12 | italic |
| beginning.punctuation.definition.list.markdown, punctuation.definition.list_item | #1d4ed8 | — |
| meta.separator.markdown | #525252 | — |
| markup.inserted, meta.diff.header.to-file | #365314 | — |
| markup.deleted, meta.diff.header.from-file | #b91c1c | — |
| markup.changed | #c2410c | — |
| meta.diff.range, meta.diff.header | #1d4ed8 | — |
| support.type.property-name.json, string.quoted.double.json support.type.property-name.json | #1d4ed8 | — |
| entity.name.tag.yaml, string.unquoted.plain.out.yaml entity.name.tag.yaml | #1d4ed8 | — |