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#16251f
  • activityBar.border#20382f
  • activityBar.foreground#d0f0e0
  • activityBarBadge.background#2ecc71
  • activityBarBadge.foreground#1b2c25
  • dropdown.background#1a2b25
  • dropdown.border#20382f
  • dropdown.foreground#d0f0e0
  • editor.background#1b2c25
  • editor.foreground#d0f0e0
  • editor.lineHighlightBackground#20382f
  • editor.selectionBackground#25443750
  • editorBracketMatch.background#25443750
  • editorBracketMatch.border#2ecc71
  • editorCursor.foreground#2ecc71
  • editorGroupHeader.border#20382f
  • editorGroupHeader.noTabsBackground#1a2b25
  • editorGroupHeader.tabsBackground#1f342d
  • editorHoverWidget.background#1a2b25
  • editorHoverWidget.border#20382f
  • editorIndentGuide.background#20382f
  • editorLineHighlightBorder#25443750
  • editorLineNumber.activeForeground#d0f0e0
  • editorLineNumber.foreground#66cdaa
  • editorOverviewRuler.background#1b2c25
  • editorOverviewRuler.border#20382f
  • editorOverviewRuler.currentContentForeground#2ecc71
  • editorOverviewRuler.incomingContentForeground#5af7c1
  • editorOverviewRuler.modifiedForeground#3ae0a0
  • editorSuggestWidget.background#1a2b25
  • editorSuggestWidget.foreground#d0f0e0
  • editorSuggestWidget.highlightForeground#2ecc71
  • editorSuggestWidget.selectedBackground#25443750
  • editorWidget.background#1f342d
  • editorWidget.border#20382f
  • menu.background#1a2b25
  • menu.foreground#d0f0e0
  • menu.selectionBackground#25443780
  • menu.selectionForeground#d0f0e0
  • menu.separatorBackground#25443750
  • minimap.background#1b2c25
  • panel.background#1a2b25
  • panel.border#20382f
  • panelTitle.activeBorder#2ecc71
  • panelTitle.activeForeground#d0f0e0
  • panelTitle.inactiveForeground#66cdaa
  • pickerGroup.border#25443750
  • pickerGroup.foreground#2ecc71
  • quickInput.background#1a2b25
  • quickInput.foreground#d0f0e0
  • quickInputList.focusBackground#25443750
  • quickInputTitle.background#16251f
  • scrollbarSlider.activeBackground#254437ff
  • scrollbarSlider.background#25443780
  • scrollbarSlider.hoverBackground#254437aa
  • sideBar.background#1a2b25
  • sideBar.border#20382f
  • sideBar.foreground#d0f0e0
  • sideBarSectionHeader.background#16251f
  • sideBarSectionHeader.foreground#2ecc71
  • sideBarTitle.foreground#2ecc71
  • statusBar.background#16251f
  • statusBar.debuggingBackground#254437
  • statusBar.debuggingForeground#d0f0e0
  • statusBar.foreground#d0f0e0
  • statusBar.noFolderBackground#1a2b25
  • tab.activeBackground#20382f
  • tab.activeBorder#2ecc71
  • tab.activeForeground#d0f0e0
  • tab.border#20382f
  • tab.hoverBackground#214138
  • tab.hoverForeground#d0f0e0
  • tab.inactiveBackground#1a2b25
  • tab.inactiveForeground#66cdaa
  • terminal.ansiBlack#1a2b25
  • terminal.ansiBlue#7ad0b5
  • terminal.ansiBrightBlack#66cdaa
  • terminal.ansiBrightBlue#7ff0d1
  • terminal.ansiBrightCyan#a0f0e0
  • terminal.ansiBrightGreen#3ae0a0
  • terminal.ansiBrightMagenta#5af7c1
  • terminal.ansiBrightRed#ff9a9a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#bdf7aa
  • terminal.ansiCyan#5af7c1
  • terminal.ansiGreen#2ecc71
  • terminal.ansiMagenta#3ad18f
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#d0f0e0
  • terminal.ansiYellow#b7f07d
  • terminal.background#1b2c25
  • terminal.foreground#d0f0e0
  • terminalCursor.foreground#2ecc71
  • titleBar.activeBackground#16251f
  • titleBar.activeForeground#d0f0e0
  • titleBar.inactiveBackground#14221b
  • titleBar.inactiveForeground#66cdaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#66cdaaitalic
keyword, storage.type, storage.modifier, keyword.control#ff6b6bbold
variable#f0d0a0
string#5af7c1
function, entity.name.function, meta.function-call, variable.function#82AAFF
class, support.class, support.type, entity.name.type#D4BFFF
constant.numeric, constant.language#ffd700
operator, punctuation#d0f0e0
tag, entity.name.tag#ffb86c
entity.other.attribute-name, support.type.property-name, attribute-name#ff79c6
meta.brace#d0f0e0
markup.bold, markup.italic, markup.underline, markup.quote#f0d0a0bold
invalid, invalid.illegal#ff6b6b
text#d0f0e0
LuminaShade by Jack Pritom Soren - VS Code Theme