lol light

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.activeBorder#f9826c
• activityBar.background#ffffff
• activityBar.border#e1e4e8
• activityBar.foreground#2f363d
• activityBar.inactiveForeground#959da5
• activityBarBadge.background#2188ff
• activityBarBadge.foreground#ffffff
• badge.background#dbedff
• badge.foreground#005cc5
• breadcrumb.activeSelectionForeground#586069
• breadcrumb.focusForeground#2f363d
• breadcrumb.foreground#6a737d
• breadcrumbPicker.background#fafbfc
• button.background#159739
• button.foreground#ffffff
• button.hoverBackground#138934
• checkbox.background#fafbfc
• checkbox.border#d1d5da
• debugToolBar.background#ffffff
• descriptionForeground#6a737d
• diffEditor.insertedTextBackground#34d05822
• diffEditor.removedTextBackground#d73a4922
• dropdown.background#fafbfc
• dropdown.border#e1e4e8
• dropdown.foreground#2f363d
• dropdown.listBackground#ffffff
• editor.background#ffffff
• editor.findMatchBackground#ffdf5d
• editor.findMatchHighlightBackground#ffdf5d66
• editor.focusedStackFrameHighlightBackground#fff5b1
• editor.foreground#24292e
• editor.inactiveSelectionBackground#0366d611
• editor.lineHighlightBackground#f6f8fa
• editor.selectionBackground#fff5b1
• editor.selectionHighlightBackground#34d05840
• editor.selectionHighlightBorder#34d05800
• editor.stackFrameHighlightBackground#fffbdd
• editor.wordHighlightBackground#34d05800
• editor.wordHighlightBorder#24943e99
• editor.wordHighlightStrongBackground#34d05800
• editor.wordHighlightStrongBorder#24943e50
• editorBracketMatch.background#34d05840
• editorBracketMatch.border#34d05800
• editorCursor.foreground#044289
• editorGroup.border#e1e4e8
• editorGroupHeader.tabsBackground#f6f8fa
• editorGroupHeader.tabsBorder#e1e4e8
• editorGutter.addedBackground#28a745
• editorGutter.deletedBackground#d73a49
• editorGutter.modifiedBackground#2188ff
• editorLineNumber.activeForeground#24292e
• editorLineNumber.foreground#1b1f234d
• editorOverviewRuler.border#ffffff
• editorWhitespace.foreground#d1d5da
• editorWidget.background#f6f8fa
• errorForeground#cb2431
• focusBorder#2188ff
• foreground#444d56
• gitDecoration.addedResourceForeground#28a745
• gitDecoration.conflictingResourceForeground#e36209
• gitDecoration.deletedResourceForeground#d73a49
• gitDecoration.ignoredResourceForeground#959da5
• gitDecoration.modifiedResourceForeground#005cc5
• gitDecoration.submoduleResourceForeground#959da5
• gitDecoration.untrackedResourceForeground#28a745
• input.background#fafbfc
• input.border#e1e4e8
• input.foreground#2f363d
• input.placeholderForeground#959da5
• list.activeSelectionBackground#e2e5e9
• list.activeSelectionForeground#2f363d
• list.focusBackground#cce5ff
• list.hoverBackground#ebf0f4
• list.hoverForeground#2f363d
• list.inactiveFocusBackground#dbedff
• list.inactiveSelectionBackground#e8eaed
• list.inactiveSelectionForeground#2f363d
• notificationCenterHeader.background#e1e4e8
• notificationCenterHeader.foreground#6a737d
• notifications.background#fafbfc
• notifications.border#e1e4e8
• notifications.foreground#2f363d
• notificationsErrorIcon.foreground#d73a49
• notificationsInfoIcon.foreground#005cc5
• notificationsWarningIcon.foreground#e36209
• panel.background#f6f8fa
• panel.border#e1e4e8
• panelInput.border#e1e4e8
• panelTitle.activeBorder#f9826c
• panelTitle.activeForeground#2f363d
• panelTitle.inactiveForeground#6a737d
• pickerGroup.border#e1e4e8
• pickerGroup.foreground#2f363d
• progressBar.background#2188ff
• quickInput.background#fafbfc
• quickInput.foreground#2f363d
• scrollbar.shadow#6a737d33
• scrollbarSlider.activeBackground#959da588
• scrollbarSlider.background#959da533
• scrollbarSlider.hoverBackground#959da544
• settings.headerForeground#2f363d
• settings.modifiedItemIndicator#2188ff
• sideBar.background#f6f8fa
• sideBar.border#e1e4e8
• sideBar.foreground#586069
• sideBarSectionHeader.background#f6f8fa
• sideBarSectionHeader.border#e1e4e8
• sideBarSectionHeader.foreground#2f363d
• sideBarTitle.foreground#2f363d
• statusBar.background#ffffff
• statusBar.border#e1e4e8
• statusBar.debuggingBackground#f9826c
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#586069
• statusBar.noFolderBackground#ffffff
• statusBarItem.prominentBackground#e8eaed
• tab.activeBackground#ffffff
• tab.activeBorder#ffffff
• tab.activeBorderTop#f9826c
• tab.activeForeground#2f363d
• tab.border#e1e4e8
• tab.hoverBackground#ffffff
• tab.inactiveBackground#f6f8fa
• tab.inactiveForeground#6a737d
• tab.unfocusedActiveBorder#ffffff
• tab.unfocusedActiveBorderTop#e1e4e8
• tab.unfocusedHoverBackground#ffffff
• terminal.foreground#586069
• textBlockQuote.background#fafbfc
• textBlockQuote.border#e1e4e8
• textCodeBlock.background#f6f8fa
• textLink.activeForeground#005cc5
• textLink.foreground#0366d6
• textPreformat.foreground#586069
• textSeparator.foreground#d1d5da
• titleBar.activeBackground#ffffff
• titleBar.activeForeground#2f363d
• titleBar.border#e1e4e8
• titleBar.inactiveBackground#f6f8fa
• titleBar.inactiveForeground#6a737d
• tree.indentGuidesStroke#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).