Solarized & Selenized

Name: Solarized & Selenized
Author: Santoso Wijaya

Publisher: Santoso WijayaThemes in package: 4

A Solarized and Selenized color themes combo for Visual Studio Code

Open in VS Code GitHub

Color themes

VS Code preview

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

Solarized & Selenized — Solarized Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#bb880166
activityBar.activeBorder#cf4b15
activityBar.background#d7cebc
activityBar.foreground#566e76
activityBar.inactiveForeground#637b82
activityBarBadge.background#bb8801BB
badge.background#bb8801AA
button.background#bb8801
debugExceptionWidget.background#f0e7d5
debugExceptionWidget.border#e0332e
debugToolBar.background#f0e7d5
disabledForeground#92a1a1
dropdown.background#f0e7d5
dropdown.border#cf4b15
editor.background#fff6e3
editor.foreground#566e76
editor.inactiveSelectionBackground#bb880180
editor.lineHighlightBackground#f0e7d5
editor.selectionBackground#bb8801AA
editor.selectionHighlightBackground#d7cebc80
editor.wordHighlightBackground#d7cebc99
editor.wordHighlightStrongBackground#d7cebcAA
editorCursor.background#f0e7d5
editorCursor.foreground#cf4b15
editorGroup.border#92a1a1
editorGroup.dropBackground#cf4b15AA
editorGroupHeader.border#d7cebc
editorGroupHeader.tabsBackground#d7cebc
editorGroupHeader.tabsBorder#d7cebc
editorHoverWidget.background#d7cebc
editorHoverWidget.border#92a1a1
editorIndentGuide.activeBackground1#bb880180
editorIndentGuide.background1#637b8280
editorInlayHint.foreground#92a1a1
editorLineNumber.activeForeground#637b82
editorLineNumber.foreground#92a1a1
editorStickyScroll.shadow#d7cebc
editorStickyScrollHover.background#d7cebc44
editorWhitespace.foreground#92a1a1AA
editorWidget.background#f0e7d5
errorForeground#e0332e
extensionButton.prominentBackground#bb8801
extensionButton.prominentHoverBackground#cf4b15AA
focusBorder#cf4b1599
foreground#566e76
input.background#d7cebc
input.border#92a1a1
input.foreground#566e76
input.placeholderForeground#92a1a1
inputOption.activeBorder#cf4b15
list.activeSelectionBackground#bb880188
list.errorForeground#e0332e
list.focusBackground#bb880166
list.highlightForeground#bb8801
list.hoverBackground#bb880144
list.inactiveSelectionBackground#d7cebc
list.warningForeground#bb8801
notebook.cellEditorBackground#f0e7d5
notebook.editorBackground#fff6e3
panel.border#92a1a1
panelTitle.activeBorder#bb8801
panelTitle.activeForeground#566e76
panelTitle.inactiveForeground#92a1a1
peekView.border#bb8801
peekViewEditor.background#f0e7d5
peekViewEditor.matchHighlightBackground#5c73c440
peekViewResult.background#f0e7d5
peekViewTitle.background#f0e7d5
pickerGroup.border#cf4b1599
pickerGroup.foreground#cf4b1599
progressBar.background#bb8801
scrollbar.shadow#d7cebc
selection.background#f0e7d5
settings.checkboxBackground#d7cebc
settings.dropdownBackground#d7cebc
settings.modifiedItemIndicator#bb8801
settings.numberInputBackground#d7cebc
settings.textInputBackground#d7cebc
sideBar.background#f0e7d5
sideBar.foreground#566e76
sideBarTitle.foreground#566e76
statusBar.background#f0e7d5
statusBar.debuggingBackground#f0e7d5
statusBar.foreground#566e76
statusBar.noFolderBackground#f0e7d5
statusBarItem.errorBackground#e0332e
statusBarItem.prominentBackground#fff6e3
statusBarItem.prominentHoverBackground#d7cebc99
statusBarItem.remoteBackground#bb8801
statusBarItem.warningBackground#bb8801
tab.activeBackground#fff6e3
tab.activeBorder#bb8801
tab.activeBorderTop#bb8801
tab.activeForeground#566e76
tab.activeModifiedBorder#bb8801
tab.border#92a1a1
tab.inactiveBackground#d7cebc
tab.inactiveForeground#637b82
terminal.ansiBlack#f0e7d5
terminal.ansiBlue#008dd1
terminal.ansiBrightBlack#fff6e3
terminal.ansiBrightBlue#008dd1
terminal.ansiBrightCyan#008dd1
terminal.ansiBrightGreen#8d9800
terminal.ansiBrightMagenta#5c73c4
terminal.ansiBrightRed#cf4b15
terminal.ansiBrightWhite#566e76
terminal.ansiBrightYellow#bb8801
terminal.ansiCyan#1fa198
terminal.ansiGreen#8d9800
terminal.ansiMagenta#f2579c
terminal.ansiRed#e0332e
terminal.ansiWhite#637b82
terminal.ansiYellow#bb8801
terminal.background#fff6e3
terminal.foreground#566e76
terminal.selectionBackground#f0e7d5
terminalCursor.background#f0e7d5
terminalCursor.foreground#637b82
textBlockQuote.background#f0e7d5
textCodeBlock.background#f0e7d5
textPreformat.background#f0e7d5
titleBar.activeBackground#f0e7d5
toolbar.hoverBackground#d7cebc80
walkThrough.embeddedEditorBackground#fff6e3
welcomePage.background#fff6e3
welcomePage.progress.background#d7cebc
welcomePage.progress.foreground#bb8801
welcomePage.tileBackground#f0e7d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#92a1a1	italic
comment.block.preprocessor	#92a1a1
comment.documentation, comment.block.documentation	#92a1a1	—
invalid.illegal	#e0332e	—
keyword.operator.new, keyword	#bb8801	—
keyword.operator	#637b82	—
constant.language, support.constant, variable.language	#cf4b15	—
variable, entity.name.variable, support.variable	#566e76	—
variable.other.property, variable.other.constant.property	#566e76	—
entity.name.function, support.function	#008dd1	—
entity.name.function.macro	#5c73c4	—
entity.name.type, support.type, storage.type, storage	#bb8801	—
entity.name.class, entity.name.type.class, entity.other.inherited-class, support.class, meta.class.js, variable.other.readwrite.alias.js, variable.other.object.js, storage.type.protobuf	#8d9800	—
entity.name.type.interface, entity.name.type.alias	#cf4b15	—
entity.name.type.enum	#8d9800	—
variable.other.enummember	#566e76	—
variable.other.event	#566e76	—
entity.name.namespace, entity.name.type.package.go	#f2579c	—
keyword.control.import, keyword.control.from, keyword.control.directive.include, keyword.other.import	#cf4b15	—
entity.name.exception	#e0332e	—
entity.name.section	—	bold
constant.numeric, constant.character, constant, variable.other.constant	#f2579c	—
string	#1fa198	—
constant.character.escape	#637b82	—
string.regexp	#008dd1	—
string.constant.character.escape, string.interpolated.dollar.shell, string.interpolated.backtick.shell, constant.character.format, constant.character.escape, punctuation.section.embedded, punctuation.definition.template-expression	#f2579c	—
constant.other.symbol	#cf4b15	—
punctuation, brackets	#637b82	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#637b82	—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#637b82	—
entity.name.tag	#008dd1	—
meta.tag entity.other.attribute-name, meta.attribute.class.html, entity.other.attribute-name.html	#637b82	italic
constant.character.entity, punctuation.definition.entity	#cf4b15	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#5c73c4	—
meta.property-name, support.type.property-name	#8d9800	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#8d9800	—
keyword.other.important	—	bold
markup.changed	#bb8801	—
markup.deleted	#e0332e	—
markup.italic	—	italic
markup.error	#f2579c	bold
markup.inserted	#8d9800	—
meta.link	#008dd1	—
markup.output, markup.raw	#566e76	—
markup.prompt	#637b82	—
markup.heading	#cf4b15	—
markup.bold	—	bold
markup.traceback	#f2579c	—
markup.underline	—	underline
markup.quote	#5c73c4	—
markup.list	#008dd1	—
markup.bold, markup.italic	#566e76	—
markup.inline.raw	#cf4b15
meta.attribute	#566e76	—
meta.diff	—	italic
meta.diff.range, meta.diff.index, meta.separator	#008dd1	—
meta.diff.header.from-file	#008dd1	—
meta.diff.header.to-file	#008dd1	—
meta.diff.header	#008dd1	—
entity.name.import.go, entity.name.type.go, variable.other.assignment.go, variable.other.go	#8d9800	—

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