Solarized Neue & Yuki

Name: Solarized Neue & Yuki
Author: Phillip Sauerbeck

Publisher: Phillip SauerbeckThemes in package: 4

Customized solarized theme

Open in VS Code GitHub

Color themes

VS Code preview

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

Solarized Neue & Yuki — Solarized Lilac

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.background#F0F0F0
activityBar.border#F0F0F0
activityBar.foreground#403f53
activityBarBadge.background#403f53
activityBarBadge.foreground#F0F0F0
badge.background#8382E6
badge.foreground#F0F0F0
button.background#8382E6
button.foreground#F0F0F0
debugExceptionWidget.background#F0F0F0
debugExceptionWidget.border#d9d9d9
debugToolBar.background#F0F0F0
descriptionForeground#403f53
dropdown.background#F0F0F0
dropdown.border#d9d9d9
dropdown.foreground#403f53
editor.background#E5E5EB
editor.findMatchBackground#93A1A16c
editor.findMatchHighlightBackground#D5F151
editor.findRangeHighlightBackground#E0E7EA
editor.foreground#403f53
editor.hoverHighlightBackground#d3e8f8
editor.lineHighlightBackground#D4D6E4
editor.rangeHighlightBackground#E8E8EB
editor.selectionBackground#E0E0E0
editor.selectionHighlightBackground#d3e8f8
editor.wordHighlightBackground#d3e8f8
editor.wordHighlightStrongBackground#A3CFEE
editorBracketMatch.background#d3e8f8
editorBracketMatch.border#8382E6
editorCodeLens.foreground#403f53
editorCursor.foreground#90A7B2
editorError.border#FBFBFB
editorError.foreground#E64D49
editorGroup.border#E1E1EB
editorGroupHeader.noTabsBackground#E1E1EB
editorGroupHeader.tabsBackground#E1E1EB
editorGroupHeader.tabsBorder#D7D7EB
editorGutter.addedBackground#49d0c5
editorGutter.deletedBackground#f76e6e
editorGutter.modifiedBackground#6fbef6
editorHoverWidget.background#F0F0F0
editorHoverWidget.border#d9d9d9
editorIndentGuide.activeBackground#888888
editorIndentGuide.background#d9d9d9
editorLineNumber.activeForeground#403f53
editorLineNumber.foreground#90A7B2
editorMarkerNavigation.background#D0D0D0
editorMarkerNavigationError.background#f76e6e
editorMarkerNavigationWarning.background#daaa01
editorOverviewRuler.errorForeground#E64D49
editorOverviewRuler.warningForeground#daaa01
editorRuler.foreground#d9d9d9
editorSuggestWidget.background#F0F0F0
editorSuggestWidget.border#d9d9d9
editorSuggestWidget.foreground#403f53
editorSuggestWidget.highlightForeground#403f53
editorSuggestWidget.selectedBackground#d3e8f8
editorWarning.border#daaa01
editorWarning.foreground#daaa01
editorWhitespace.foreground#d9d9d9
editorWidget.background#F0F0F0
editorWidget.border#d9d9d9
errorForeground#403f53
extensionButton.prominentBackground#8382E6
extensionButton.prominentForeground#F0F0F0
focusBorder#93A1A1
foreground#403f53
input.background#ECECF2
input.border#d9d9d9
input.foreground#403f53
input.placeholderForeground#93A1A1
inputOption.activeBorder#8382E6
inputValidation.errorBackground#f76e6e
inputValidation.errorBorder#de3d3b
inputValidation.infoBackground#F0F0F0
inputValidation.infoBorder#D0D0D0
inputValidation.warningBackground#daaa01
inputValidation.warningBorder#E0AF02
list.activeSelectionBackground#0B0DAD18
list.activeSelectionForeground#403f53
list.errorForeground#E64D49
list.focusForeground#403f53
list.highlightForeground#403f53
list.hoverForeground#403f53
list.inactiveSelectionBackground#0B0DAD18
list.inactiveSelectionForeground#403f53
list.warningForeground#daaa01
notificationCenter.border#CCCCCC
notificationCenterHeader.background#F0F0F0
notificationCenterHeader.foreground#403f53
notificationLink.foreground#2466D2
notifications.background#F0F0F0
notifications.border#CCCCCC
notifications.foreground#403f53
notificationToast.border#CCCCCC
panel.background#F0F0F0
panel.border#d9d9d9
peekView.border#d9d9d9
peekViewEditor.background#F6F6F6
peekViewEditor.matchHighlightBackground#49d0c5
peekViewEditorGutter.background#F6F6F6
peekViewResult.background#F0F0F0
peekViewResult.fileForeground#403f53
peekViewResult.lineForeground#403f53
peekViewResult.matchHighlightBackground#49d0c5
peekViewResult.selectionBackground#0B0DAD18
peekViewResult.selectionForeground#2AA198
peekViewTitle.background#F0F0F0
peekViewTitleDescription.foreground#403f53
peekViewTitleLabel.foreground#403f53
pickerGroup.border#d9d9d9
pickerGroup.foreground#403f53
progressBar.background#8382E6
scrollbar.shadow#CCCCCC
selection.background#B1B0E6
sideBar.background#E1E1EB
sideBar.border#D7D7EB
sideBar.foreground#403f53
sideBarTitle.foreground#403f53
statusBar.background#E1E1EB
statusBar.border#D7D7EB
statusBar.debuggingBackground#F0F0F0
statusBar.debuggingForeground#403f53
statusBar.foreground#403f53
statusBar.noFolderBackground#F0F0F0
statusBar.noFolderForeground#403f53
tab.activeBackground#F6F6FC
tab.activeForeground#403f53
tab.activeModifiedBorder#8382E6
tab.border#E1E1EB
tab.inactiveBackground#E1E1EB
tab.inactiveForeground#403f53
tab.inactiveModifiedBorder#93A1A1
tab.unfocusedActiveModifiedBorder#93A1A1
tab.unfocusedInactiveModifiedBorder#93A1A1
terminal.ansiBlack#403f53
terminal.ansiBlue#288ed7
terminal.ansiBrightBlack#403f53
terminal.ansiBrightBlue#288ed7
terminal.ansiBrightCyan#8382E6
terminal.ansiBrightGreen#08916a
terminal.ansiBrightMagenta#d6438a
terminal.ansiBrightRed#de3d3b
terminal.ansiBrightWhite#F0F0F0
terminal.ansiBrightYellow#daaa01
terminal.ansiCyan#8382E6
terminal.ansiGreen#08916a
terminal.ansiMagenta#d6438a
terminal.ansiRed#de3d3b
terminal.ansiWhite#F0F0F0
terminal.ansiYellow#E0AF02
terminal.background#F6F6F6
terminal.foreground#403f53
titleBar.activeBackground#E1E1EB
widget.shadow#d9d9d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
bold, support.class.ruby, variable.other.block.ruby, variable.other.ruby, variable, entity.name.type.class.ruby, entity.other.attribute-name.id, entity.name.tag.id.haml, meta.definition.function.ts entity.name.function.ts	—	bold
italic, variable.other.property.js, storage.type.js, quote, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, markup.italic.markdown, entity.name.function, meta.tag.sgml.doctype.html, entity.name.tag.less, keyword.operator.relational, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.delimiter.period, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, keyword.control, keyword.other.unit.scss, keyword.other.unit.sass, markup.inserted.diff, entity.other.attribute-name, entity.name.function, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, italic	—	italic
darkGray, quote, meta.property-value.scss, markup.quote.markdown, string.template punctuation.definition.string, variable.parameter.function.coffee, meta.js punctuation.definition.js, terminator.js, variable.other.readwrite.cs, meta.preprocessor.macro.cpp, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, support.class.js, variable.js, variable.other.js, string.other.link.title.markdown, string.other.link.description.markdown, meta.function-call.php punctuation, punctuation.python, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, variable.parameter, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, meta.brace, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array	#403f53	—
cloudy-blue, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.function punctuation.separator.comma	#5f7e97	—
cyan, variable.other.jsdoc, variable.other.phpdoc, variable.assignment.coffee	#2EA9FF	—
comment	#BBBBBF	italic
text-color-dark, keyword.operator.assignment, variable.scss, keyword.operator.assignment.js	#403f53	—
light-gray, comment.line.double-slash, punctuation.definition.tag.haml	#BBBBBF	—
lime, keyword.other.important.scss	#859900	—
teal, variable, variable.other.block.ruby, variable.other.ruby, meta.block.parameters.ruby, meta.var-single-variable.expr.js, meta.var.expr.js, string.quoted, meta.structure.dictionary.value.json string.quoted.double, support.type.property-name.css, meta.function-call.python, meta.function-call.generic.python, entity.name.tag.scss, entity.name.tag.sass, punctuation.definition.metadata.markdown, support.constant.meta.property-value, keyword.operator, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, keyword.control.operator, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.property, support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control, variable.language, support.variable.property, raw, variable.assignment.coffee, entity.name.type.namespace.cs, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, constant.keyword.clojure, source.go meta.function-call.go, entity.name.function.preprocessor.cpp, entity.scope.name.cpp, support.function.powershell, variable.other.object.js, keyword.other.unit.css, markup.inline.raw.markdown	#2AA198	—
teal-soft	#2AA198aa	—
brick-orange, punctuation.definition.constant.ruby, punctuation.definition.parameters, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.separator.arguments, entity.other.attribute-name.pseudo-class.css, punctuation.section.embedded, string.template meta.template.expression, constant.language.boolean, constant.language.null, source.go constant.language.go, source.go constant.other.placeholder.go, storage.type.language.primitive.cpp, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, constant.language.python	#CB4B16	—
777777, entity.name.tag.haml, support.type.property-name.json, string.quoted.double.json punctuation.definition.string.json, support.function.misc.scss, variable.other.object.property, variable.parameter, meta.class entity.name.type.class.js, entity.name.type.js, entity.name.type.module.js, variable.other.php, variable.other.property.php, support.class.php, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, entity.name.type.ts, entity.name.type.tsx, entity.name.tag.yaml, meta.class entity.name.type.class.tsx, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.class, meta.class entity.name.type.class, meta.namespace-block.cpp	#777777	—
purple, variable.other.readwrite.js, support.class.ruby, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx, variable.other.property.js, variable.scss, constant.language.symbol.hashkey.ruby, punctuation.definition.constant.hashkey.ruby, entity.name.type.class.ruby, entity.name.tag.id.haml, punctuation.definition.constant, punctuation.definition.constant.ruby, constant.language.symbol.ruby, support.function, punctuation.separator.method.ruby, meta.property-list entity.name.tag.reference, variable.parameter.function.js, constant.other.color.rgb-value punctuation.definition.constant, keyword.other.unit, meta.attribute-selector.less entity.other.attribute-name.attribute, source.python variable.language.special, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, support.class.component.js, support.class.component.tsx, constant.character.numeric, constant.character.escape, constant.other.color, entity.other.attribute-name.id, meta.attribute-selector.css entity.other.attribute-name.attribute	#5253C4	—
purple-soft, storage.type.js, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css	#5253C4aa	—
gold, keyword.operator.logical.ruby, keyword.control.def.ruby, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.ruby, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, variable.other.constant	#D39600	—
gold-soft	#D3960077	—
pink, constant.language, constant.numeric, support.class, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.deleted.diff, variable.interpolation, invalid, meta.at-rule.include.scss, invalid.illegal	#D33682	—
red, support.constant.property-value.css, punctuation.definition.string, punctuation.definition.string.begin.markdown, source.elixir punctuation.definition.string, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string	#DC322F	—
blue, source.ruby, variable.other.readwrite.instance, string.regexp, string.regexp keyword.other, variable.parameter.function.python, meta.function-call.arguments.python, entity.name.function.decorator.python, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, entity.name.tag.custom, variable.function, meta.function-call, entity.name.type.class.cs, storage.type.cs, keyword.other.unit.css, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir entity.name.function, source.elixir constant.other.symbol.elixir, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir constant.other.keywords.elixir, variable.other.readwrite.powershell, entity.other.attribute-name.id.html, meta.method.declaration storage.type.js, support.constant.json, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.bold.markdown, beginning.punctuation.definition.list.markdown, markup.inline.raw.string.markdown, variable.other.global.php, variable.other.global.php punctuation.definition.variable, support.constant, support.variable.dom, support.type, entity.name.function, entity.name.class, entity.name.tag.class.haml, entity.other.inherited-class, entity.other.attribute-name, markup.inserted.diff, string, support.constant.math, constant.character, constant.other, keyword.operator.relational, keyword.other.unit.scss, keyword.other.unit.sass, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, storage, storage.type, markup.italic.markdown, keyword.control, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, punctuation.accessor, keyword, source.elixir .punctuation.binary.elixir, keyword.operator.logical, entity.name.function, punctuation.definition.tag, meta.tag, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.switch.js, keyword.control.switch.ts, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, meta.delimiter.period	#2466D2	—
blue-soft, keyword.control.def.ruby	#2466D2aa	—

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