Solarized Monochrome Theme

Name: Solarized Monochrome Theme
Author: Andy Walker

Publisher: Andy WalkerThemes in package: 2

Solarized theme for VS Code with minimal syntax highlighting

Open in VS Code GitHub

Color themes

VS Code preview

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

Solarized Monochrome Theme — Solarized Monochrome Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ddd6c1
activityBar.dropBorder#b58900
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.foreground#657b83
editor.lineHighlightBackground#eee8d5
editor.selectionBackground#eee8d5
editor.selectionHighlightBackground#cb4b1620
editorCursor.foreground#657b83
editorGroup.border#ddd6c1
editorGroup.dropBackground#ddd6c1aa
editorGroup.emptyBackground#fffbf2
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).

scope	foreground	fontStyle
comment, string.quoted.docstring	#93a1a1	—
string	#586e75	bold
punctuation.definition.string, storage.type.string.python	#657b83	—
source.go constant.other.placeholder.go, source.go constant.character.escape.go	#cb4b16
beginning.punctuation, entity.name.section.group-title, entity.name.tag, keyword.const, keyword.function, keyword.import, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.expression, keyword.operator.increment, keyword.operator.increment-decrement, keyword.operator.logical, keyword.operator.new, keyword.operator.other, keyword.other.special-method, keyword.package, keyword.type, keyword.var, markup.heading, meta.tag.sgml.doctype.html, punctuation.separator.key-value	—	—
emphasis, storage, comment, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tag.jade, entity.other.attribute-name.tag.pug, markup.italic, variable.language	—	italic
entity.other.attribute-name.class, entity.other.attribute-name.id, keyword.control, storage.modifier, storage.type.class, storage.type.enum, storage.type.function, storage.type.import, storage.type.interface, storage.type.js, storage.type.namespace, storage.type.property, storage.type.string.python, storage.type.ts	—	—

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}!`;
}