Solarized Pro

Name: Solarized Pro
Author: noble-gase

Publisher: noble-gaseThemes in package: 1

A dark solarized theme for VSCode

Open in VS Code GitHub

VS Code preview

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

Solarized Pro — Solarized Pro

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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...
~/my-project $

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#002b36
activityBar.border#003847
activityBarBadge.background#d33682
badge.background#d33682
badge.foreground#eee8d5
button.background#d33682
button.foreground#eee8d5
debugExceptionWidget.background#00212b
debugExceptionWidget.border#2aa198
debugToolBar.background#00212b
diffEditor.insertedLineBackground#16ab7120
diffEditor.insertedTextBackground#16ab7130
dropdown.background#00212b
dropdown.border#d33682
dropdown.foreground#839496
editor.background#002b36
editor.findMatchBackground#d3368280
editor.findMatchBorder#d33682
editor.findMatchHighlightBackground#85990060
editor.findMatchHighlightBorder#8196b54d
editor.findRangeHighlightBackground#2aa19840
editor.foreground#839496
editor.inactiveSelectionBackground#93a1a130
editor.lineHighlightBackground#ffffff10
editor.lineHighlightBorder#8196b520
editor.selectionBackground#2aa19860
editor.selectionHighlightBackground#2aa19860
editor.selectionHighlightBorder#8196b540
editor.wordHighlightBackground#8196b520
editor.wordHighlightBorder#8196b54d
editor.wordHighlightStrongBackground#8196b540
editor.wordHighlightTextBackground#8196b520
editorCursor.foreground#d33682
editorGroup.border#00212b
editorGroup.dropBackground#2aa19844
editorGroupHeader.tabsBackground#00212b
editorGroupHeader.tabsBorder#003847
editorHoverWidget.background#004052
editorIndentGuide.background1#586e7534
editorInlayHint.background#003847
editorInlayHint.foreground#cdcdcf60
editorInlayHint.parameterBackground#003847
editorInlayHint.parameterForeground#cdcdcf60
editorInlayHint.typeBackground#003847
editorInlayHint.typeForeground#cdcdcf60
editorLineNumber.activeForeground#eee8d5
editorLineNumber.foreground#586e75
editorLink.activeForeground#d33682
editorMarkerNavigationError.background#d33682
editorMarkerNavigationWarning.background#5b7e7a
editorRuler.foreground#ffffff25
editorWhitespace.foreground#586e7534
editorWidget.background#00212b
errorForeground#ffeaea
focusBorder#2aa19899
foreground#839496
git.blame.editorDecorationForeground#586e75
gitDecoration.conflictingResourceForeground#839496
gitDecoration.deletedResourceForeground#dc322f
gitDecoration.ignoredResourceForeground#586e75
gitDecoration.modifiedResourceForeground#859900
gitDecoration.untrackedResourceForeground#2aa198
input.background#003847
input.border#00212b
input.foreground#839496
input.placeholderForeground#93a1a1aa
inputOption.activeBackground#d33682
inputOption.activeBorder#d33682
inputValidation.errorBackground#571b26
inputValidation.errorBorder#a92049
inputValidation.infoBackground#052730
inputValidation.infoBorder#363b5f
inputValidation.warningBackground#5d5938
inputValidation.warningBorder#9d8a5e
list.activeSelectionBackground#005a6f
list.activeSelectionForeground#839496
list.dropBackground#00445488
list.focusBackground#005a6f
list.highlightForeground#1ebcc5
list.hoverBackground#004454aa
list.inactiveSelectionBackground#00445488
notifications.background#003847
notifications.foreground#839496
panel.border#00212b
panelTitle.activeBorder#d33682
peekView.border#2aa198ab
peekViewEditor.background#00212b
peekViewEditor.matchHighlightBackground#284b53
peekViewResult.background#002b36
peekViewTitle.background#002b36
pickerGroup.border#2aa19899
pickerGroup.foreground#2aa19899
progressBar.background#047aa6
scrollbarSlider.activeBackground#1ebcc5
scrollbarSlider.background#1ebcc530
scrollbarSlider.hoverBackground#1ebcc580
selection.background#2aa19860
sideBar.background#00212b
sideBar.border#003847
sideBarSectionHeader.background#002b36
sideBarSectionHeader.foreground#eee8d5
sideBarTitle.foreground#93a1a1
statusBar.background#00212b
statusBar.border#003847
statusBar.debuggingBackground#00212b
statusBar.foreground#93a1a1
statusBar.noFolderBackground#00212b
statusBarItem.prominentBackground#003847
statusBarItem.prominentHoverBackground#003847
tab.activeBackground#003847
tab.activeBorder#d33682
tab.activeForeground#eee8d5
tab.border#00384700
tab.hoverBackground#002b36
tab.hoverBorder#d33682
tab.inactiveBackground#00212b
tab.inactiveForeground#93a1a1
tab.unfocusedActiveBorder#dc322f50
tab.unfocusedHoverBackground#002b36
tab.unfocusedHoverBorder#d33682
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#073642
terminal.ansiBrightBlue#268bd2
terminal.ansiBrightCyan#268bd2
terminal.ansiBrightGreen#859900
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#b58900
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5
terminal.ansiYellow#b58900
terminal.foreground#839496
titleBar.activeBackground#002b36
titleBar.activeForeground#eee8d5
titleBar.inactiveBackground#002b36
titleBar.inactiveForeground#b2b2b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#839496	—
variable, variable.parameter, variable.other, variable.other.property, entity.name.namespace, entity.other.attribute-name, meta.embedded, markup.list, source.groovy.embedded, string meta.image.inline.markdown, punctuation.definition.string, support.type.property-name.css, string.quoted.other.lt-gt.include.c, entity.name.scope-resolution.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.namespace.using.cpp, entity.name.scope-resolution.template.definition.cpp, string.quoted.other.lt-gt.include.cpp, variable.other.readwrite.js, variable.other.object.js, variable.other.constant.js, keyword.operator.key-value.rust, keyword.operator.access.dot.rust, keyword.operator.namespace.rust, variable.legacy.builtin.python, support.class.php, constant.other.table-name.sql, constant.other.database-name.sql, keyword.other.definition.ini, source.toml, support.type.property-name.toml	#839496	—
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text, constant.numeric.line-number.find-in-files, markup.quote, meta.documentation, meta.diff, meta.diff.header, punctuation.definition.tag	#586e75	—
string, string.regexp, string.quoted.double, string.quoted.single, keyword.control.label.latex, keyword.control.ref.latex, entity.name.filename.find-in-files, markup.changed, markup.inline.raw, punctuation.section.embedded.begin, punctuation.section.embedded.end, text.tex.latex constant.other.math.tex, text.tex.latex constant.other.general.math.tex, constant.other.general.math.tex, constant.other.general.math.tex, constant.character.math.tex, support.function.general.tex, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, markup.underline.link.markdown, meta.link.reference constant.other.reference.link.markdown, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, string.quoted.other.lt-gt.include.c, meta.preprocessor.c.include, punctuation.definition.string.begin.c, punctuation.definition.string.end.c, punctuation.definition.string.begin.cpp, punctuation.definition.string.end.cpp	#2aa198	—
constant.numeric, constant.character, constant.language, constant.other, entity.other.inherited-class, constant.other.reference.link.markdown, punctuation.definition.list.begin.markdown, keyword.constant.bool.zig, keyword.constant.default.zig	#6c71c4	—
keyword, keyword.control, keyword.other.protobuf, variable.language, entity.name.tag.css, entity.name.tag.scss, markup.bold, markup.italic, source.less keyword.control.html.elements, source.sass keyword.control.untitled, meta.shebang.shell, punctuation.definition.comment.shebang.shell, constant.language.null.go, constant.language.null.js, constant.language.undefined.js	#d33682	—
entity.name.tag, entity.name.function, entity.name.section, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.tag.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.tag.pseudo-class, meta.brace.square, meta.diff.range, markup.heading, markup.heading.setext, support.function.perl, punctuation.section.brackets, entity.name.section.group-title.ini, support.type.property-name.table.toml, meta.table.toml	#268bd2	—
keyword.operator, keyword.control.import, keyword.control.import.from, keyword.other.unit, keyword.other.special-method, markup.inserted, markup.inserted.git_gutter, storage, storage.type, storage.modifier, string.other.math.tex, support, support.function, support.type, support.class, support.function.be.latex, entity.name.command.shell, punctuation.definition.variable, constant.other.placeholder.c, storage.modifier.c++, keyword.control.from.js, keyword.control.export.js, keyword.control.default.js, storage.type.class.python, storage.type.function.python, storage.modifier.global.python, markup.underline.link.markdown, markup.underline.link.image.markdown, punctuation.definition.quote.begin.markdown, keyword.go.mod, keyword.map.go, keyword.var.go, keyword.type.go, keyword.const.go, keyword.struct.go, keyword.channel.go, keyword.control.go, keyword.control.import.go, keyword.package.go, keyword.function.go, keyword.interface.go, entity.name.type.any.go, constant.other.placeholder.go, keyword.other.rust, meta.attribute.rust, meta.macro.rust, meta.interpolation.rust, support.type.primitive.rust, entity.name.type.option.rust, entity.name.type.result.rust, entity.name.type.primitive.rust, entity.name.function.macro.rust, entity.name.function.macro.rules.rust, entity.name.type.protobuf, keyword.other.directive.protobuf, keyword.storage.zig, keyword.structure.zig, keyword.statement.zig, keyword.default.zig, keyword.type.zig, keyword.type.integer.zig, keyword.other.sql, keyword.other.DML.sql, source.ini, support.type.property-name.array.toml, meta.array.table.toml	#859900	—
variable.function, entity.name.class, entity.name.type, entity.name.scope-resolution, entity.other.attribute-name.id, entity.other.attribute-name.class, string.other.math.tex, markup.heading, markup.changed.git_gutter, meta.encoding, meta.preprocessor, meta.group.braces.tex, meta.tag.xml entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, support.constant.color, support.function.be.latex, punctuation.definition.heading.markdown, invalid.deprecated.color.w3c-non-standard-color-name.scss, keyword.other.typedef.c, keyword.control.directive.define.c, keyword.control.directive.include.c, support.type.posix-reserved.c, meta.preprocessor.macro.c, meta.encoding.cpp, entity.name.namespace.cpp, keyword.control.directive.include.cpp, keyword.control.directive.define.cpp, entity.name.type.zig, support.function.builtin.zig, keyword.operator.new.js, keyword.operator.delete.js, keyword.operator.void.js, keyword.operator.in.js, keyword.operator.of.js, keyword.operator.instanceof.js, keyword.operator.expression.typeof.js, keyword.operator.expression.void.js, keyword.operator.expression.delete.js, keyword.operator.relational.js, keyword.other.type.php, support.function.magic.php, meta.array support.function.construct.php, support.type.exception.python, support.variable.magic.python, support.function.magic.python, support.function.builtin.python, keyword.other.create.sql	#b58900	—
	#cb4b16	—
entity.other.attribute-name, meta.scope.for-in-loop.shell, meta.scope.case-block.shell, meta.scope.case-body.shell, variable.other.loop.shell	#93a1a1	—
meta.brace.round, meta.brace.curly, punctuation.section, punctuation.section.block, punctuation.definition.parameters, punctuation.section.group, meta.selector.css, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.other.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, punctuation.separator.key-value.html	#657b83	—
invalid, other.package.exclude, other.remove, markup.deleted, markup.deleted.git_gutter, punctuation.separator.continuation, punctuation.section.group.tex, punctuation.definition.arguments.begin.latex, punctuation.definition.arguments.end.latex, punctuation.definition.arguments.latex, punctuation.definition.constant.math.tex, punctuation.definition.string.begin.tex, punctuation.definition.string.end.tex, punctuation.definition.logical-expression.shell, variable.parameter.definition.label.latex	#dc322f	—
markup.bold, markup.heading, markup.heading.setext	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough