Skip to main content
Coding Theme

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#26251e
  • activityBar.border#3a3933
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#f54e00
  • activityBarBadge.foreground#26251e
  • badge.background#ffffff22
  • badge.foreground#e0e0e0
  • breadcrumb.activeSelectionForeground#f54e00
  • breadcrumb.background#26251e
  • breadcrumb.foreground#a0a0a0
  • button.background#f54e00
  • button.foreground#ffffff
  • descriptionForeground#a0a0a0
  • disabledForeground#a0a0a0
  • dropdown.background#26251e
  • dropdown.border#3a3933
  • dropdown.foreground#e0e0e0
  • dropdown.listBackground#26251e
  • editor.background#26251e
  • editor.findMatchBackground#f54e00
  • editor.findMatchBorder#f54e00
  • editor.findMatchForeground#26251e
  • editor.findMatchHighlightBackground#f54e0044
  • editor.foreground#e0e0e0
  • editor.selectionBackground#ffffff22
  • editorBracketHighlight.foreground1#f54e00
  • editorBracketHighlight.foreground2#7eb6f6
  • editorBracketHighlight.foreground3#99c794
  • editorBracketHighlight.foreground4#c594c5
  • editorBracketHighlight.foreground5#e0e0e0
  • editorBracketHighlight.foreground6#808080
  • editorCursor.foreground#e0e0e0
  • editorError.foreground#bf616a
  • editorGroup.border#3a3933
  • editorGroupHeader.tabsBackground#26251e
  • editorGroupHeader.tabsBorder#3a3933
  • editorHint.foreground#a0a0a0
  • editorIndentGuide.activeBackground#ffffff22
  • editorIndentGuide.background#ffffff11
  • editorInfo.foreground#7eb6f6
  • editorLineNumber.activeForeground#e0e0e0
  • editorLineNumber.foreground#606060
  • editorLink.activeForeground#7eb6f6
  • editorSuggestWidget.focusHighlightForeground#7eb6f6
  • editorSuggestWidget.highlightForeground#7eb6f6
  • editorWarning.foreground#ebcb8b
  • editorWidget.background#26251e
  • editorWidget.border#3a3933
  • editorWidget.foreground#e0e0e0
  • errorForeground#bf616a
  • errorLens.errorBackground#bf616a22
  • errorLens.errorForeground#f54e00
  • errorLens.infoBackground#81a1c122
  • errorLens.infoForeground#7eb6f6
  • errorLens.warningBackground#ebcb8b22
  • errorLens.warningForeground#ebcb8b
  • focusBorder#f54e00
  • foreground#e0e0e0
  • gitDecoration.addedResourceForeground#a3be8c
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitlens.gutterAddedForegroundColor#a3be8c
  • gitlens.gutterBackgroundColor#26251e
  • gitlens.gutterDeletedForegroundColor#bf616a
  • gitlens.gutterModifiedForegroundColor#ebcb8b
  • icon.foreground#a0a0a0
  • input.background#26251e
  • input.border#3a3933
  • input.foreground#e0e0e0
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBackground#f54e0022
  • inputOption.activeBorder#f54e00
  • inputOption.activeForeground#e0e0e0
  • inputValidation.errorBackground#382c27
  • inputValidation.errorBorder#bf616a
  • inputValidation.errorForeground#e0e0e0
  • inputValidation.infoBackground#313638
  • inputValidation.infoBorder#7eb6f6
  • inputValidation.infoForeground#e0e0e0
  • inputValidation.warningBackground#3e392b
  • inputValidation.warningBorder#ebcb8b
  • inputValidation.warningForeground#e0e0e0
  • list.activeSelectionBackground#ffffff22
  • list.activeSelectionForeground#e0e0e0
  • list.activeSelectionIconForeground#e0e0e0
  • list.focusForeground#e0e0e0
  • list.focusHighlightForeground#7eb6f6
  • list.highlightForeground#7eb6f6
  • list.hoverBackground#ffffff11
  • list.inactiveSelectionBackground#ffffff11
  • list.inactiveSelectionForeground#e0e0e0
  • menu.border#3a3933
  • panel.background#26251e
  • panel.border#3a3933
  • pickerGroup.border#3a3933
  • pickerGroup.foreground#7eb6f6
  • progressBar.background#f54e00
  • sash.hoverBorder#f54e00
  • selection.background#ffffff22
  • sideBar.background#26251e
  • sideBar.border#3a3933
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#26251e
  • sideBarSectionHeader.border#3a3933
  • sideBarSectionHeader.foreground#e0e0e0
  • statusBar.background#26251e
  • statusBar.border#3a3933
  • statusBar.debuggingBackground#26251e
  • statusBar.debuggingBorder#3a3933
  • statusBar.debuggingForeground#e0e0e0
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#26251e
  • statusBar.noFolderBorder#3a3933
  • statusBar.noFolderForeground#e0e0e0
  • statusBarItem.remoteBackground#26251e
  • statusBarItem.remoteForeground#f54e00
  • statusBarItem.remoteHoverBackground#ffffff22
  • statusBarItem.remoteHoverForeground#f54e00
  • tab.activeBackground#302f28
  • tab.activeBorder#f54e00
  • tab.activeForeground#e0e0e0
  • tab.border#3a3933
  • tab.inactiveBackground#26251e
  • tab.inactiveForeground#a0a0a0
  • tab.unfocusedActiveBackground#302f28
  • tab.unfocusedActiveBorder#f54e0099
  • tab.unfocusedInactiveBackground#26251e
  • terminal.ansiBlack#26251e
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#26251e
  • textLink.activeForeground#7eb6f6
  • textLink.foreground#7eb6f6
  • titleBar.activeBackground#26251e
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#26251e
  • widget.border#3a3933
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, support.type.property-name.css, support.type.vendored.property-name.css, keyword.other.definition.ini, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml, entity.other.attribute-name.namespace.xml, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, variable.other.property.js, variable.other.property.ts, variable.other.property.tsx, variable.object.property.js, variable.object.property.ts, variable.object.property.tsx, support.type.property-name.js, support.type.property-name.ts, support.type.property-name.tsx, meta.object-literal.key.js, meta.object-literal.key.js string.quoted, meta.object-literal.key.js punctuation.definition.string, meta.object-literal.key.ts, meta.object-literal.key.ts string.quoted, meta.object-literal.key.ts punctuation.definition.string, meta.object-literal.key.tsx, meta.object-literal.key.tsx string.quoted, meta.object-literal.key.tsx punctuation.definition.string, support.type.property-name.toml, variable.other.env#7eb6f6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.section.group-title.ini, support.type.property-name.table.toml, support.type.property-name.array.toml#f54e00
support.constant.property-value.css, source.css support.constant.color, support.constant.font-name.css, constant.character.escape.json, constant.character.escape.toml, constant.character.escape.env#c594c5
keyword.operator.assignment.env, punctuation.eq.toml#a0a0a0
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.from, keyword.control.trycatch, storage.type, storage.modifier, entity.name.tag, punctuation.definition.tag, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.definition.variable.php, punctuation.definition.variable.shell, punctuation.section.bracket.shell#f54e00
variable.function, entity.name.function, meta.function-call, support.function, entity.name.function.preprocessor, keyword.other.special-method, punctuation.definition.macro.rust, entity.name.function.macro.rust#7eb6f6
string, punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end#99c794
constant.numeric, constant.language, constant.other, variable.other.constant, variable.other.enummember#c594c5
comment, punctuation.definition.comment#909090
punctuation.separator, punctuation.terminator, punctuation.bracket, punctuation.section, meta.brace, meta.bracket, meta.paren, punctuation.accessor#a0a0a0
meta.decorator, punctuation.decorator, storage.type.annotation, entity.name.type.annotation, meta.attribute.rust#909090
entity.name.section.markdown, punctuation.definition.heading.markdown#f54e00bold
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown#7eb6f6
markup.quote.markdown, punctuation.definition.quote.begin.markdown#99c794
markup.inline.raw.markdown, markup.fenced_code.block.markdown, punctuation.definition.raw.markdown#c594c5
markup.boldbold
markup.italicitalic
markup.heading#f54e00bold
Lumen Themes by thousight - VS Code Theme