Simplified Solarized 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.background#ddd6c1
• activityBar.dropBackground#eee8d5
• activityBar.foreground#584c27
• activityBarBadge.background#b58900
• badge.background#b58900aa
• button.background#ac9d57
• debugExceptionWidget.background#ddd6c1
• debugExceptionWidget.border#ab395b
• debugToolBar.background#ddd6c1
• dropdown.background#eee8d5
• dropdown.border#d3af86
• editor.background#fdf6e3
• editor.lineHighlightBackground#eee8d5
• editor.selectionBackground#eee8d5
• editorCursor.foreground#657b83
• editorGroup.background#fffbf2
• editorGroup.border#ddd6c1
• editorGroup.dropBackground#ddd6c1aa
• editorGroupHeader.tabsBackground#d9d2c2
• editorGutter.background#eee8d5
• editorHoverWidget.background#ccc4b0
• editorLineNumber.activeForeground#6f7776
• editorLineNumber.foreground#9ca8a6
• editorWhitespace.foreground#586e7580
• editorWidget.background#eee8d5
• extensionButton.prominentBackground#b58900
• extensionButton.prominentHoverBackground#584c27aa
• focusBorder#d3af86
• input.background#ddd6c1
• input.foreground#586e75
• input.placeholderForeground#586e75aa
• inputOption.activeBorder#d3af86
• list.activeSelectionBackground#dfca88
• list.activeSelectionForeground#6c6c6c
• list.focusBackground#dfca8866
• list.highlightForeground#b58900
• list.hoverBackground#dfca8844
• list.inactiveSelectionBackground#d1cbb8
• panel.border#ddd6c1
• peekView.border#b58900
• peekViewEditor.background#fffbf2
• peekViewEditor.matchHighlightBackground#7744aa40
• peekViewResult.background#eee8d5
• peekViewTitle.background#eee8d5
• pickerGroup.border#2aa19899
• pickerGroup.foreground#2aa19899
• progressBar.background#b58900
• selection.background#ccc4b0
• sideBar.background#eee8d5
• sideBarTitle.foreground#586e75
• statusBar.background#eee8d5
• statusBar.debuggingBackground#eee8d5
• statusBar.foreground#586e75
• statusBar.noFolderBackground#eee8d5
• statusBarItem.prominentBackground#ddd6c1
• statusBarItem.prominentHoverBackground#ddd6c199
• tab.activeBackground#fdf6e3
• tab.border#ddd6c1
• tab.inactiveBackground#d3cbb7
• tab.inactiveForeground#586e75
• terminal.ansiBlack#657b83
• terminal.ansiBlue#268bd2
• terminal.ansiBrightBlack#657b83
• terminal.ansiBrightBlue#839496
• terminal.ansiBrightCyan#93a1a1
• terminal.ansiBrightGreen#859900
• terminal.ansiBrightMagenta#6c71c4
• terminal.ansiBrightRed#cb4b16
• terminal.ansiBrightWhite#eee8d5
• terminal.ansiBrightYellow#657b83
• terminal.ansiCyan#2aa198
• terminal.ansiGreen#859900
• terminal.ansiMagenta#d33682
• terminal.ansiRed#dc322f
• terminal.ansiWhite#eee8d5
• terminal.ansiYellow#b58900
• terminal.foreground#657b83
• titleBar.activeBackground#eee8d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...