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 Dark

fetchUser.ts

index.ts

README.md

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#003847
badge.background#047aa6
button.background#2aa19899
debugExceptionWidget.background#00212b
debugExceptionWidget.border#ab395b
debugToolBar.background#00212b
dropdown.background#00212b
dropdown.border#2aa19899
editor.background#002b36
editor.foreground#839496
editor.lineHighlightBackground#073642
editor.selectionBackground#073642
editor.selectionHighlightBackground#85990020
editor.wordHighlightBackground#004454aa
editor.wordHighlightStrongBackground#005a6faa
editorCursor.foreground#839496
editorGroup.border#00212b
editorGroup.dropBackground#2aa19844
editorGroup.emptyBackground#011b23
editorGroupHeader.tabsBackground#004052
editorGutter.background#073642
editorHoverWidget.background#004052
editorLineNumber.activeForeground#6e8a93
editorLineNumber.foreground#566c74
editorMarkerNavigationError.background#ab395b
editorMarkerNavigationWarning.background#5b7e7a
editorWhitespace.foreground#93a1a180
editorWidget.background#00212b
errorForeground#ffeaea
focusBorder#2aa19899
input.background#003847
input.foreground#93a1a1
input.placeholderForeground#93a1a1aa
inputOption.activeBorder#2aa19899
inputValidation.errorBackground#571b26
inputValidation.errorBorder#a92049
inputValidation.infoBackground#052730
inputValidation.infoBorder#363b5f
inputValidation.warningBackground#5d5938
inputValidation.warningBorder#9d8a5e
list.activeSelectionBackground#005a6f
list.dropBackground#00445488
list.focusBackground#005a6f
list.highlightForeground#1ebcc5
list.hoverBackground#004454aa
list.inactiveSelectionBackground#00445488
panel.border#2b2b4a
peekView.border#2b2b4a
peekViewEditor.background#10192c
peekViewEditor.matchHighlightBackground#7744aa40
peekViewEditorGutter.background#073642
peekViewResult.background#00212b
peekViewTitle.background#00212b
pickerGroup.border#2aa19899
pickerGroup.foreground#2aa19899
progressBar.background#047aa6
selection.background#2aa19899
sideBar.background#00212b
sideBarTitle.foreground#93a1a1
statusBar.background#00212b
statusBar.debuggingBackground#00212b
statusBar.foreground#93a1a1
statusBar.noFolderBackground#00212b
statusBarItem.prominentBackground#003847
statusBarItem.prominentHoverBackground#003847
tab.activeBackground#002b37
tab.activeForeground#d6dbdb
tab.border#003847
tab.inactiveBackground#004052
tab.inactiveForeground#93a1a1
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#586e75
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#93a1a1
terminal.ansiBrightGreen#859900
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#839496
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#839496
terminal.ansiYellow#b58900
terminal.foreground#839496
titleBar.activeBackground#002c39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.quoted.docstring	#586e75	—
string	#93a1a1	bold
punctuation.definition.string, storage.type.string.python	#839496	—
source.go constant.other.placeholder.go, source.go constant.character.escape.go	#859900
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}!`;
}