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 — Selenized 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...
~/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.activeBackground#0096f566
activityBar.activeBorder#39c7b9
activityBar.background#275b69
activityBar.foreground#c8d7d8
activityBar.inactiveForeground#adbcbc
activityBarBadge.background#0096f5BB
badge.background#0096f5AA
button.background#0096f5
debugExceptionWidget.background#0e4956
debugExceptionWidget.border#fd564e
debugToolBar.background#0e4956
disabledForeground#718b90
dropdown.background#0e4956
dropdown.border#f38649
editor.background#053d48
editor.foreground#c8d7d8
editor.inactiveSelectionBackground#0096f580
editor.lineHighlightBackground#0e4956
editor.selectionBackground#0096f5AA
editor.selectionHighlightBackground#275b6980
editor.wordHighlightBackground#275b6999
editor.wordHighlightStrongBackground#275b69AA
editorCursor.background#0e4956
editorCursor.foreground#0096f5
editorGroup.border#718b90
editorGroup.dropBackground#39c7b9AA
editorGroupHeader.border#275b69
editorGroupHeader.tabsBackground#275b69
editorGroupHeader.tabsBorder#275b69
editorHoverWidget.background#275b69
editorHoverWidget.border#718b90
editorIndentGuide.activeBackground1#0096f580
editorIndentGuide.background1#adbcbc80
editorInlayHint.foreground#718b90
editorLineNumber.activeForeground#adbcbc
editorLineNumber.foreground#718b90
editorStickyScroll.shadow#275b69
editorStickyScrollHover.background#275b6944
editorWhitespace.foreground#718b90AA
editorWidget.background#0e4956
errorForeground#fd564e
extensionButton.prominentBackground#0096f5
extensionButton.prominentHoverBackground#f38649AA
focusBorder#39c7b999
foreground#c8d7d8
input.background#275b69
input.border#718b90
input.foreground#c8d7d8
input.placeholderForeground#718b90
inputOption.activeBorder#39c7b9
list.activeSelectionBackground#0096f588
list.errorForeground#fd564e
list.focusBackground#0096f566
list.highlightForeground#0096f5
list.hoverBackground#0096f544
list.inactiveSelectionBackground#275b69
list.warningForeground#e3b230
notebook.cellEditorBackground#0e4956
notebook.editorBackground#053d48
panel.border#718b90
panelTitle.activeBorder#0096f5
panelTitle.activeForeground#c8d7d8
panelTitle.inactiveForeground#718b90
peekView.border#0096f5
peekViewEditor.background#0e4956
peekViewEditor.matchHighlightBackground#a58cec40
peekViewResult.background#0e4956
peekViewTitle.background#0e4956
pickerGroup.border#39c7b999
pickerGroup.foreground#39c7b999
progressBar.background#0096f5
scrollbar.shadow#275b69
selection.background#0e4956
settings.checkboxBackground#275b69
settings.dropdownBackground#275b69
settings.modifiedItemIndicator#0096f5
settings.numberInputBackground#275b69
settings.textInputBackground#275b69
sideBar.background#0e4956
sideBar.foreground#c8d7d8
sideBarTitle.foreground#c8d7d8
statusBar.background#0e4956
statusBar.debuggingBackground#0e4956
statusBar.foreground#c8d7d8
statusBar.noFolderBackground#0e4956
statusBarItem.errorBackground#fd564e
statusBarItem.prominentBackground#053d48
statusBarItem.prominentHoverBackground#275b6999
statusBarItem.remoteBackground#0096f5
statusBarItem.warningBackground#e3b230
tab.activeBackground#053d48
tab.activeBorder#0096f5
tab.activeBorderTop#0096f5
tab.activeForeground#c8d7d8
tab.activeModifiedBorder#0096f5
tab.border#718b90
tab.inactiveBackground#275b69
tab.inactiveForeground#adbcbc
terminal.ansiBlack#0e4956
terminal.ansiBlue#0096f5
terminal.ansiBrightBlack#053d48
terminal.ansiBrightBlue#0096f5
terminal.ansiBrightCyan#0096f5
terminal.ansiBrightGreen#80b83c
terminal.ansiBrightMagenta#a58cec
terminal.ansiBrightRed#f38649
terminal.ansiBrightWhite#c8d7d8
terminal.ansiBrightYellow#e3b230
terminal.ansiCyan#39c7b9
terminal.ansiGreen#80b83c
terminal.ansiMagenta#f176bd
terminal.ansiRed#fd564e
terminal.ansiWhite#adbcbc
terminal.ansiYellow#e3b230
terminal.background#053d48
terminal.foreground#c8d7d8
terminal.selectionBackground#0e4956
terminalCursor.background#0e4956
terminalCursor.foreground#adbcbc
textBlockQuote.background#0e4956
textCodeBlock.background#0e4956
textPreformat.background#0e4956
titleBar.activeBackground#0e4956
toolbar.hoverBackground#275b6980
walkThrough.embeddedEditorBackground#053d48
welcomePage.background#053d48
welcomePage.progress.background#275b69
welcomePage.progress.foreground#0096f5
welcomePage.tileBackground#0e4956

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#718b90	italic
comment.block.preprocessor	#718b90
comment.documentation, comment.block.documentation	#718b90	—
invalid.illegal	#fd564e	—
keyword.operator.new, keyword	#e3b230	—
keyword.operator	#adbcbc	—
constant.language, support.constant, variable.language	#f38649	—
variable, entity.name.variable, support.variable	#c8d7d8	—
variable.other.property, variable.other.constant.property	#c8d7d8	—
entity.name.function, support.function	#0096f5	—
entity.name.function.macro	#a58cec	—
entity.name.type, support.type, storage.type, storage	#e3b230	—
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	#80b83c	—
entity.name.type.interface, entity.name.type.alias	#f38649	—
entity.name.type.enum	#80b83c	—
variable.other.enummember	#c8d7d8	—
variable.other.event	#c8d7d8	—
entity.name.namespace, entity.name.type.package.go	#f176bd	—
keyword.control.import, keyword.control.from, keyword.control.directive.include, keyword.other.import	#f38649	—
entity.name.exception	#fd564e	—
entity.name.section	—	bold
constant.numeric, constant.character, constant, variable.other.constant	#f176bd	—
string	#39c7b9	—
constant.character.escape	#adbcbc	—
string.regexp	#0096f5	—
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	#f176bd	—
constant.other.symbol	#f38649	—
punctuation, brackets	#adbcbc	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#adbcbc	—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#adbcbc	—
entity.name.tag	#0096f5	—
meta.tag entity.other.attribute-name, meta.attribute.class.html, entity.other.attribute-name.html	#adbcbc	italic
constant.character.entity, punctuation.definition.entity	#f38649	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#a58cec	—
meta.property-name, support.type.property-name	#80b83c	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#80b83c	—
keyword.other.important	—	bold
markup.changed	#e3b230	—
markup.deleted	#fd564e	—
markup.italic	—	italic
markup.error	#f176bd	bold
markup.inserted	#80b83c	—
meta.link	#0096f5	—
markup.output, markup.raw	#c8d7d8	—
markup.prompt	#adbcbc	—
markup.heading	#f38649	—
markup.bold	—	bold
markup.traceback	#f176bd	—
markup.underline	—	underline
markup.quote	#a58cec	—
markup.list	#0096f5	—
markup.bold, markup.italic	#c8d7d8	—
markup.inline.raw	#f38649
meta.attribute	#c8d7d8	—
meta.diff	—	italic
meta.diff.range, meta.diff.index, meta.separator	#0096f5	—
meta.diff.header.from-file	#0096f5	—
meta.diff.header.to-file	#0096f5	—
meta.diff.header	#0096f5	—
entity.name.import.go, entity.name.type.go, variable.other.assignment.go, variable.other.go	#80b83c	—

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