Simple 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.activeBackground#2f363d
• activityBar.activeBorder#fff
• activityBar.background#24292e
• activityBar.border#e1e4e8
• activityBar.foreground#fff
• activityBar.inactiveForeground#959da5
• activityBarBadge.background#28a745
• activityBarBadge.foreground#fff
• badge.background#dbedff
• badge.foreground#005cc5
• breadcrumb.activeSelectionForeground#586069
• breadcrumb.focusForeground#2f363d
• breadcrumb.foreground#6a737d
• breadcrumbPicker.background#fafbfc
• button.background#159739
• button.foreground#fff
• button.hoverBackground#138934
• button.secondaryBackground#e1e4e8
• button.secondaryForeground#000
• button.secondaryHoverBackground#d1d5da
• checkbox.background#fafbfc
• checkbox.border#d1d5da
• debugToolBar.background#fff
• descriptionForeground#6a737d
• diffEditor.insertedTextBackground#34d05822
• diffEditor.removedTextBackground#d73a4922
• dropdown.background#fafbfc
• dropdown.border#e1e4e8
• dropdown.foreground#2f363d
• dropdown.listBackground#fff
• editor.background#fff
• editor.findMatchBackground#ffdf5d
• editor.findMatchHighlightBackground#ffdf5d66
• editor.focusedStackFrameHighlightBackground#28a74525
• editor.foldBackground#f1f8ff
• editor.foreground#000
• editor.inactiveSelectionBackground#0366d611
• editor.lineHighlightBackground#f6f8fa
• editor.linkedEditingBackground#0366d611
• editor.selectionBackground#0366d625
• editor.selectionHighlightBackground#34d05840
• editor.selectionHighlightBorder#34d05800
• editor.stackFrameHighlightBackground#ffd33d33
• editor.wordHighlightBackground#34d05800
• editor.wordHighlightBorder#24943e99
• editor.wordHighlightStrongBackground#34d05800
• editor.wordHighlightStrongBorder#24943e50
• editorBracketHighlight.foreground1#000
• editorBracketHighlight.foreground2#005cc5
• editorBracketHighlight.foreground3#22863a
• editorBracketHighlight.foreground4#c24e00
• editorBracketHighlight.foreground5#6f42c1
• editorBracketHighlight.foreground6#ab58b4
• editorBracketHighlight.unexpectedBracket.foreground#cb2431
• editorBracketMatch.background#34d05840
• editorBracketMatch.border#34d05800
• editorCursor.foreground#2f363d
• editorGroup.border#e1e4e8
• editorGroupHeader.tabsBackground#f6f8fa
• editorGroupHeader.tabsBorder#e1e4e8
• editorGutter.addedBackground#28a745
• editorGutter.deletedBackground#d73a49
• editorGutter.modifiedBackground#2188ff
• editorIndentGuide.activeBackground#d7dbe0
• editorIndentGuide.background#eff2f6
• editorInlayHint.background#f6f8fa
• editorInlayHint.foreground#959da5
• editorLineNumber.activeForeground#000
• editorLineNumber.foreground#1b1f234d
• editorOverviewRuler.border#fff
• 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#fff
• panel.border#e1e4e8
• panelInput.border#e1e4e8
• panelTitle.activeBorder#24292e
• 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
• tab.activeBackground#fff
• tab.activeBorder#24292e
• tab.activeForeground#2f363d
• tab.border#e1e4e8
• tab.hoverBackground#fff
• tab.inactiveBackground#f6f8fa
• tab.inactiveForeground#6a737d
• tab.unfocusedActiveBorder#fff
• tab.unfocusedActiveBorderTop#e1e4e8
• tab.unfocusedHoverBackground#fff
• terminalCursor.foreground#2f363d
• textBlockQuote.background#fafbfc
• textBlockQuote.border#e1e4e8
• textCodeBlock.background#f6f8fa
• textLink.activeForeground#005cc5
• textLink.foreground#0366d6
• textPreformat.foreground#586069
• textSeparator.foreground#d1d5da
• titleBar.activeBackground#fff
• titleBar.activeForeground#2f363d
• titleBar.border#e1e4e8
• titleBar.inactiveBackground#f6f8fa
• titleBar.inactiveForeground#6a737d
• tree.indentGuidesStroke#e1e4e8
• welcomePage.buttonBackground#f6f8fa
• welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...