Solarized

Name: Solarized
Author: Ryan Olson

Publisher: Ryan OlsonThemes in package: 5

Optimized Solarized theme for VS Code

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Solarized — Solarized Dark+

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#001f26
activityBar.foreground#839496
activityBar.inactiveForeground#83949666
activityBarBadge.background#268bd2
activityBarBadge.foreground#eafbfb
badge.background#586e75
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#002b36
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#839496
button.background#0e639c
button.foreground#ffffff
button.hoverBackground#1177bb
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#073642
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#333333
debugExceptionWidget.border#474747
debugToolBar.background#001f26
debugToolBar.border#586e7566
diffEditor.border#444444
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#073642
dropdown.border#00000000
dropdown.foreground#cccccc
editor.background#002b36
editor.foldBackground#264f784d
editor.foreground#839496
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#073642
editor.lineHighlightBorder#28282800
editor.selectionBackground#268ad25b
editor.selectionHighlightBackground#add6ff1b
editor.selectionHighlightBorder#495F7700
editorBracketHighlight.foreground1#268bd2
editorBracketHighlight.foreground2#b58900
editorBracketHighlight.foreground3#d33682
editorBracketMatch.background#268bd21a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#002b36
editorCursor.foreground#839496
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#e35957
editorGroup.border#444444
editorGroup.emptyBackground#002b36
editorGroupHeader.tabsBackground#001f26
editorGutter.addedBackground#587c0c
editorGutter.background#073642
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#001f26
editorHoverWidget.border#657b8359
editorHoverWidget.foreground#839496
editorIndentGuide.activeBackground1#657b8366
editorIndentGuide.background1#657b8324
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#2faca1
editorLineNumber.activeForeground#839496
editorLineNumber.foreground#586e75
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#001f26
editorSuggestWidget.border#657b8359
editorSuggestWidget.foreground#839496
editorSuggestWidget.highlightForeground#268bd2
editorSuggestWidget.selectedBackground#184c71
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#cb9a07
editorWhitespace.foreground#e3e4e229
editorWidget.background#001f26
editorWidget.foreground#839496
editorWidget.resizeBorder#586e7544
focusBorder#2aa19899
foreground#839496
gitDecoration.addedResourceForeground#7a8a0d
gitDecoration.conflictingResourceForeground#7679a9
gitDecoration.deletedResourceForeground#b65933
gitDecoration.ignoredResourceForeground#788688
gitDecoration.modifiedResourceForeground#9f7b0c
gitDecoration.stageDeletedResourceForeground#b65933
gitDecoration.stageModifiedResourceForeground#9f7b0c
gitDecoration.submoduleResourceForeground#4e908c
gitDecoration.untrackedResourceForeground#729492
icon.foreground#839496
input.background#073642
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#007fd466
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
list.activeSelectionBackground#184c71
list.activeSelectionForeground#b9cdcd
list.dropBackground#268bd244
list.focusBackground#184c71
list.focusForeground#c6d9d9
list.highlightForeground#268bd2
list.hoverBackground#002f38
list.hoverForeground#839496
list.inactiveSelectionBackground#002b36
list.inactiveSelectionForeground#839496
listFilterWidget.background#002f38
listFilterWidget.noMatchesOutline#dc322f
listFilterWidget.outline#00000000
menu.background#252526
menu.border#00000085
menu.foreground#cccccc
menu.selectionBackground#094771
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#839496
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#01344177
minimap.errorHighlight#cb4b16
minimap.findMatchHighlight#515c6a
minimap.selectionHighlight#264f78
minimap.warningHighlight#b58900
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#474747
notificationCenterHeader.background#001f26
notificationCenterHeader.foreground#839496
notifications.background#001f26
notifications.border#073642
notifications.foreground#839496
notificationsErrorIcon.foreground#dc322fc9
notificationsInfoIcon.foreground#2aa198
notificationsWarningIcon.foreground#b58900
notificationToast.border#073642
panel.background#002b36
panel.border#657b8359
panelSection.border#80808059
panelTitle.activeBorder#268bd2
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#268bd2
peekViewEditor.background#002b36
peekViewEditor.matchHighlightBackground#268bd255
peekViewEditor.matchHighlightBorder#268bd255
peekViewEditorGutter.background#073642
peekViewResult.background#001f26
peekViewResult.fileForeground#839496
peekViewResult.lineForeground#657b83
peekViewResult.matchHighlightBackground#268bd255
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#001f26
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#839496
pickerGroup.border#586e75
pickerGroup.foreground#268bd2
progressBar.background#268bd2
scrollbar.shadow#000000
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
selection.background#2aa19899
settings.focusedRowBackground#ffffff07
settings.headerForeground#839496
sideBar.background#001f26
sideBar.dropBackground#268bd244
sideBar.foreground#839496
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#83949622
sideBarSectionHeader.foreground#839496
sideBarTitle.foreground#839496
statusBar.background#001b21
statusBar.debuggingBackground#cc6633
statusBar.debuggingForeground#ffffff
statusBar.foreground#839496
statusBar.noFolderBackground#6c71c4
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#859900
statusBarItem.remoteForeground#ffffff
tab.activeBackground#002b36
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#b4c6c6
tab.border#657b8334
tab.inactiveBackground#001f26
tab.inactiveForeground#ffffff80
terminal.ansiBlack#14181d
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#676767
terminal.ansiBrightBlue#268bd2
terminal.ansiBrightCyan#2aa198
terminal.ansiBrightGreen#859900
terminal.ansiBrightMagenta#d33682
terminal.ansiBrightRed#dc322f
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#b58900
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#b58900
terminal.border#80808059
terminal.foreground#839496
terminal.selectionBackground#ffffff40
terminalCursor.background#0087FF
terminalCursor.foreground#ffffff
textLink.foreground#3794ff
titleBar.activeBackground#001f26
titleBar.activeForeground#839496
titleBar.border#00000000
titleBar.inactiveBackground#001f2699
titleBar.inactiveForeground#83949699
tree.indentGuidesStroke#657b8344
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block.documentation	#586e75	—
constant, string, meta.preprocessor.string, meta.embedded.assembly, keyword.other.unit, meta.object-literal.key	#2aa198	—
variable.language.special.self.python, meta.definition.function entity.name.function, variable.other.constant entity.name.function, entity.name.function.python, support.function.magic.python, entity.name.method, meta.definition.method entity.name.function, meta.method.declaration storage.type, entity.name.tag, entity.other.attribute-name.class	#268bd2	—
meta.preprocessor, entity.name.function.preprocessor, keyword.control.import, keyword.control.from, keyword.control.as, meta.export keyword.control.export	#cb4b16	—
keyword, storage.type, storage.modifier, meta.export.default keyword.control.export, entity.name.tag.css	#859900	—
support.type, support.type.property-name.css, entity.name.type, meta.function.python meta.item-access.python, entity.name.type.class	#b58900	—
string.regexp, constant.regexp	#dc322f	—
punctuation.definition.tag.begin, punctuation.definition.tag.end	#586e75	—
entity.other.attribute-name	#839496	—
invalid	#dc322f	—
variable.other.readwrite.alias	#839496	—
emphasis	—	italic
strong	—	bold
markup.underline	—	underline
markup.bold	—	bold
markup.heading	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}