Lume Theme
Publisher: LumeThemes in package: 3
Carefully crafted dark and light themes optimized for readability and long coding sessions
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#f5f5f4
- activityBar.border#d6d3d1
- activityBar.foreground#1c1917
- activityBar.inactiveForeground#78716c
- activityBarBadge.background#0891b2
- activityBarBadge.foreground#ffffff
- badge.background#0891b2
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#0891b2
- breadcrumb.background#fafaf9
- breadcrumb.focusForeground#1c1917
- breadcrumb.foreground#78716c
- breadcrumbPicker.background#f5f5f4
- button.background#0891b2
- button.foreground#ffffff
- button.hoverBackground#0e7490
- button.secondaryBackground#e7e5e4
- button.secondaryForeground#1c1917
- button.secondaryHoverBackground#d6d3d1
- diffEditor.insertedLineBackground#10b98110
- diffEditor.insertedTextBackground#10b98120
- diffEditor.removedLineBackground#ef444410
- diffEditor.removedTextBackground#ef444420
- dropdown.background#fafaf9
- dropdown.border#d6d3d1
- dropdown.foreground#1c1917
- dropdown.listBackground#fafaf9
- editor.background#fafaf9
- editor.findMatchBackground#fde68aa0
- editor.findMatchHighlightBackground#fde68a70
- editor.findRangeHighlightBackground#fef3c730
- editor.foreground#1c1917
- editor.hoverHighlightBackground#cffafe30
- editor.inactiveSelectionBackground#cffafe30
- editor.lineHighlightBackground#f5f5f4
- editor.rangeHighlightBackground#f5f5f4
- editor.selectionBackground#cffafe80
- editor.selectionHighlightBackground#cffafe40
- editor.wordHighlightBackground#fef3c750
- editor.wordHighlightStrongBackground#fef3c780
- editorBracketMatch.background#cffafe50
- editorBracketMatch.border#0891b2
- editorCodeLens.foreground#78716c
- editorCursor.foreground#0891b2
- editorHoverWidget.background#fafaf9
- editorHoverWidget.border#d6d3d1
- editorIndentGuide.activeBackground#a8a29e
- editorIndentGuide.background#d6d3d1
- editorLineNumber.activeForeground#78716c
- editorLineNumber.foreground#d6d3d1
- editorRuler.foreground#d6d3d1
- editorSuggestWidget.background#fafaf9
- editorSuggestWidget.border#d6d3d1
- editorSuggestWidget.foreground#1c1917
- editorSuggestWidget.highlightForeground#0891b2
- editorSuggestWidget.selectedBackground#cffafe
- editorWhitespace.foreground#e7e5e4
- editorWidget.background#f5f5f4
- editorWidget.border#d6d3d1
- gitDecoration.conflictingResourceForeground#f59e0b
- gitDecoration.deletedResourceForeground#ef4444
- gitDecoration.ignoredResourceForeground#78716c
- gitDecoration.modifiedResourceForeground#0891b2
- gitDecoration.submoduleResourceForeground#a855f7
- gitDecoration.untrackedResourceForeground#10b981
- input.background#fafaf9
- input.border#d6d3d1
- input.foreground#1c1917
- input.placeholderForeground#78716c
- inputOption.activeBorder#0891b2
- inputValidation.errorBackground#fafaf9
- inputValidation.errorBorder#ef4444
- inputValidation.warningBackground#fafaf9
- inputValidation.warningBorder#f59e0b
- list.activeSelectionBackground#a5f3fc
- list.activeSelectionForeground#164e63
- list.errorForeground#ef4444
- list.focusBackground#a5f3fc
- list.focusForeground#164e63
- list.highlightForeground#0891b2
- list.hoverBackground#f5f5f4
- list.hoverForeground#1c1917
- list.inactiveSelectionBackground#cffafe
- list.inactiveSelectionForeground#1c1917
- list.warningForeground#f59e0b
- merge.border#d6d3d1
- merge.currentHeaderBackground#0891b240
- merge.incomingHeaderBackground#10b98140
- notificationCenter.border#d6d3d1
- notificationCenterHeader.background#f5f5f4
- notificationLink.foreground#0891b2
- notifications.background#fafaf9
- notifications.border#d6d3d1
- notifications.foreground#1c1917
- panel.background#fafaf9
- panel.border#d6d3d1
- panelTitle.activeBorder#0891b2
- panelTitle.activeForeground#1c1917
- panelTitle.inactiveForeground#78716c
- peekView.border#0891b2
- peekViewEditor.background#f5f5f4
- peekViewEditor.matchHighlightBackground#fde68a80
- peekViewResult.background#fafaf9
- peekViewResult.matchHighlightBackground#fde68a80
- peekViewResult.selectionBackground#cffafe
- peekViewTitle.background#f5f5f4
- peekViewTitleDescription.foreground#78716c
- peekViewTitleLabel.foreground#1c1917
- progressBar.background#0891b2
- scrollbarSlider.activeBackground#78716c80
- scrollbarSlider.background#d6d3d180
- scrollbarSlider.hoverBackground#a8a29e80
- sideBar.background#f5f5f4
- sideBar.border#d6d3d1
- sideBar.foreground#1c1917
- sideBarSectionHeader.background#fafaf9
- sideBarSectionHeader.border#d6d3d1
- sideBarSectionHeader.foreground#1c1917
- sideBarTitle.foreground#1c1917
- statusBar.background#f5f5f4
- statusBar.border#d6d3d1
- statusBar.debuggingBackground#ef4444
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#1c1917
- statusBar.noFolderBackground#f5f5f4
- statusBarItem.prominentBackground#cffafe
- statusBarItem.remoteBackground#0891b2
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#fafaf9
- tab.activeBorder#00000000
- tab.activeBorderTop#00000000
- tab.activeForeground#1c1917
- tab.border#00000000
- tab.inactiveBackground#f5f5f4
- tab.inactiveForeground#78716c
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#00000000
- terminal.ansiBlack#1c1917
- terminal.ansiBlue#0891b2
- terminal.ansiBrightBlack#44403c
- terminal.ansiBrightBlue#22d3ee
- terminal.ansiBrightCyan#67e8f9
- terminal.ansiBrightGreen#34d399
- terminal.ansiBrightMagenta#c084fc
- terminal.ansiBrightRed#f87171
- terminal.ansiBrightWhite#1c1917
- terminal.ansiBrightYellow#fbbf24
- terminal.ansiCyan#06b6d4
- terminal.ansiGreen#10b981
- terminal.ansiMagenta#a855f7
- terminal.ansiRed#ef4444
- terminal.ansiWhite#78716c
- terminal.ansiYellow#f59e0b
- terminal.background#fafaf9
- terminal.foreground#1c1917
- titleBar.activeBackground#f5f5f4
- titleBar.activeForeground#1c1917
- titleBar.border#d6d3d1
- titleBar.inactiveBackground#f5f5f4
- titleBar.inactiveForeground#78716c
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #78716c | italic |
| string, string.quoted, string.template | #059669 | — |
| constant.character.escape, constant.other.placeholder | #10b981 | — |
| constant.numeric, constant.language.numeric | #0891b2 | — |
| constant.language, constant.other, variable.language.this, variable.language.super, variable.other.constant | #7c3aed | — |
| keyword, storage.type, storage.modifier | #dc2626 | |
| keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical | #c026d3 | |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison | #57534e | — |
| entity.name.function, support.function, meta.function-call | #0891b2 | |
| entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class | #7c3aed | bold |
| entity.name.type, support.type, entity.name.type.interface | #9333ea | — |
| variable, meta.definition.variable, entity.name.variable | #24292f | — |
| variable.parameter, meta.parameters | #1f2937 | — |
| variable.other.property, variable.other.object.property, support.variable.property | #24292f | — |
| entity.name.tag, meta.tag | #dc2626 | — |
| entity.other.attribute-name, meta.attribute | #ea580c | — |
| meta.decorator, punctuation.decorator | #f59e0b | — |
| punctuation, meta.brace, punctuation.definition.block, punctuation.section | #57534e | — |
| punctuation.separator, punctuation.terminator | #78716c | — |
| support.type.property-name.json, meta.object-literal.key | #0891b2 | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #7c3aed | — |
| support.type.property-name.css | #0891b2 | — |
| variable.language.special.self.python | #c026d3 | italic |
| entity.name.function.decorator.python | #f59e0b | — |
| support.function.magic.python | #a855f7 | italic |
| keyword.control.import, keyword.control.export, keyword.control.from | #c026d3 | — |
| entity.name.type.ts, entity.name.type.tsx | #9333ea | — |
| support.class.component.tsx, support.class.component.jsx | #7c3aed | bold |
| invalid, invalid.illegal, invalid.deprecated | #ef4444 | underline |
| markup.heading, entity.name.section.markdown | #1c1917 | bold |
| markup.bold | #1c1917 | bold |
| markup.italic | #1c1917 | italic |
| markup.underline.link, string.other.link.title.markdown | #0891b2 | — |
| markup.inline.raw, markup.fenced_code.block.markdown | #059669 | — |