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#000000
- activityBar.border#202020
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#707070
- activityBarBadge.background#ffffff
- activityBarBadge.foreground#000000
- badge.background#ffffff
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.background#000000
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#808080
- breadcrumbPicker.background#0a0a0a
- button.background#ffffff
- button.foreground#000000
- button.hoverBackground#e0e0e0
- button.secondaryBackground#303030
- button.secondaryForeground#ffffff
- button.secondaryHoverBackground#404040
- diffEditor.insertedLineBackground#00ff8820
- diffEditor.insertedTextBackground#00ff8830
- diffEditor.removedLineBackground#ff444420
- diffEditor.removedTextBackground#ff444430
- dropdown.background#0a0a0a
- dropdown.border#303030
- dropdown.foreground#ffffff
- dropdown.listBackground#0a0a0a
- editor.background#000000
- editor.findMatchBackground#ffaa00a0
- editor.findMatchHighlightBackground#ffaa0060
- editor.findRangeHighlightBackground#ffaa0030
- editor.foreground#ffffff
- editor.hoverHighlightBackground#0080ff20
- editor.inactiveSelectionBackground#0080ff20
- editor.lineHighlightBackground#0a0a0a
- editor.rangeHighlightBackground#0a0a0a
- editor.selectionBackground#0080ff50
- editor.selectionHighlightBackground#0080ff30
- editor.wordHighlightBackground#00d4ff30
- editor.wordHighlightStrongBackground#00d4ff50
- editorBracketMatch.background#0080ff30
- editorBracketMatch.border#ffffff
- editorCodeLens.foreground#808080
- editorCursor.foreground#ffffff
- editorHoverWidget.background#0a0a0a
- editorHoverWidget.border#303030
- editorIndentGuide.activeBackground#505050
- editorIndentGuide.background#202020
- editorLineNumber.activeForeground#a0a0a0
- editorLineNumber.foreground#404040
- editorRuler.foreground#202020
- editorSuggestWidget.background#0a0a0a
- editorSuggestWidget.border#303030
- editorSuggestWidget.foreground#ffffff
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#1a1a1a
- editorWhitespace.foreground#303030
- editorWidget.background#0a0a0a
- editorWidget.border#303030
- gitDecoration.conflictingResourceForeground#ffaa00
- gitDecoration.deletedResourceForeground#ff4444
- gitDecoration.ignoredResourceForeground#606060
- gitDecoration.modifiedResourceForeground#00a8ff
- gitDecoration.submoduleResourceForeground#ff00ff
- gitDecoration.untrackedResourceForeground#00ff88
- input.background#0a0a0a
- input.border#303030
- input.foreground#ffffff
- input.placeholderForeground#808080
- inputOption.activeBorder#ffffff
- inputValidation.errorBackground#0a0a0a
- inputValidation.errorBorder#ff4444
- inputValidation.warningBackground#0a0a0a
- inputValidation.warningBorder#ffaa00
- list.activeSelectionBackground#0080ff
- list.activeSelectionForeground#ffffff
- list.errorForeground#ff4444
- list.focusBackground#0080ff
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#1a1a1a
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#0080ff60
- list.inactiveSelectionForeground#ffffff
- list.warningForeground#ffaa00
- merge.border#303030
- merge.currentHeaderBackground#00a8ff50
- merge.incomingHeaderBackground#00ff8850
- notificationCenter.border#303030
- notificationCenterHeader.background#0a0a0a
- notificationLink.foreground#ffffff
- notifications.background#0a0a0a
- notifications.border#303030
- notifications.foreground#ffffff
- panel.background#000000
- panel.border#202020
- panelTitle.activeBorder#ffffff
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#808080
- peekView.border#ffffff
- peekViewEditor.background#0a0a0a
- peekViewEditor.matchHighlightBackground#ffaa0080
- peekViewResult.background#000000
- peekViewResult.matchHighlightBackground#ffaa0080
- peekViewResult.selectionBackground#0080ff
- peekViewTitle.background#000000
- peekViewTitleDescription.foreground#808080
- peekViewTitleLabel.foreground#ffffff
- progressBar.background#ffffff
- scrollbarSlider.activeBackground#50505080
- scrollbarSlider.background#30303080
- scrollbarSlider.hoverBackground#40404080
- sideBar.background#000000
- sideBar.border#202020
- sideBar.foreground#d0d0d0
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#202020
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#ffffff
- statusBar.background#000000
- statusBar.border#202020
- statusBar.debuggingBackground#ff0000
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#d0d0d0
- statusBar.noFolderBackground#000000
- statusBarItem.prominentBackground#0080ff
- statusBarItem.remoteBackground#ffffff
- statusBarItem.remoteForeground#000000
- tab.activeBackground#000000
- tab.activeBorder#00000000
- tab.activeBorderTop#00000000
- tab.activeForeground#ffffff
- tab.border#00000000
- tab.inactiveBackground#000000
- tab.inactiveForeground#808080
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#00000000
- terminal.ansiBlack#21262d
- terminal.ansiBlue#60a5fa
- terminal.ansiBrightBlack#3d4451
- terminal.ansiBrightBlue#93c5fd
- terminal.ansiBrightCyan#67e8f9
- terminal.ansiBrightGreen#86efac
- terminal.ansiBrightMagenta#d8b4fe
- terminal.ansiBrightRed#fca5a5
- terminal.ansiBrightWhite#f0f6fc
- terminal.ansiBrightYellow#fcd34d
- terminal.ansiCyan#22d3ee
- terminal.ansiGreen#4ade80
- terminal.ansiMagenta#c084fc
- terminal.ansiRed#f87171
- terminal.ansiWhite#e6edf3
- terminal.ansiYellow#fbbf24
- terminal.background#000000
- terminal.foreground#ffffff
- titleBar.activeBackground#000000
- titleBar.activeForeground#ffffff
- titleBar.border#202020
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#808080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6e7681 | italic |
| string, string.quoted, string.template | #00ff88 | — |
| constant.character.escape, constant.other.placeholder | #ffaa00 | — |
| constant.numeric, constant.language.numeric | #00a8ff | — |
| constant.language, constant.other, variable.language.this, variable.language.super, variable.other.constant | #00d4ff | — |
| keyword, storage.type, storage.modifier | #ffdd00 | |
| keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical | #ff9900 | |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison | #9ca3af | — |
| entity.name.function, support.function, meta.function-call | #00d4ff | |
| entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class | #ffffff | bold |
| entity.name.type, support.type, entity.name.type.interface | #e6edf3 | — |
| variable, meta.definition.variable, entity.name.variable | #e0e0e0 | — |
| variable.parameter, meta.parameters | #b4bac5 | — |
| variable.other.property, variable.other.object.property, support.variable.property | #d0d0d0 | — |
| entity.name.tag, meta.tag | #ffffff | — |
| entity.other.attribute-name, meta.attribute | #cc66ff | — |
| meta.decorator, punctuation.decorator | #ffaa00 | — |
| punctuation, meta.brace, punctuation.definition.block, punctuation.section | #909090 | — |
| punctuation.separator, punctuation.terminator | #6e7681 | — |
| support.type.property-name.json, meta.object-literal.key | #66ccff | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #ffffff | — |
| support.type.property-name.css | #66ccff | — |
| variable.language.special.self.python | #00d4ff | italic |
| entity.name.function.decorator.python | #fbbf24 | — |
| support.function.magic.python | #cc66ff | italic |
| keyword.control.import, keyword.control.export, keyword.control.from | #b4bac5 | — |
| entity.name.type.ts, entity.name.type.tsx | #e6edf3 | — |
| support.class.component.tsx, support.class.component.jsx | #ffffff | bold |
| invalid, invalid.illegal, invalid.deprecated | #ff4444 | underline |
| markup.heading, entity.name.section.markdown | #ffffff | bold |
| markup.bold | #ffffff | bold |
| markup.italic | #d0d0d0 | italic |
| markup.underline.link, string.other.link.title.markdown | #00d4ff | — |
| markup.inline.raw, markup.fenced_code.block.markdown | #00a8ff | — |