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 Neue

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...

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#1a1a1a
activityBar.border#00000060
activityBar.foreground#EEFFFF
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#4A4A4A
button.background#61616150
debugToolBar.background#212121
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#212121
dropdown.border#FFFFFF10
editor.background#041E27
editor.foreground#839496
editor.lineHighlightBackground#0A2933
editor.selectionBackground#0A2933
editor.selectionHighlightBackground#B5890020
editorBracketMatch.background#212121
editorBracketMatch.border#B5890050
editorCursor.foreground#b58900
editorError.foreground#DC322Faa
editorGroup.border#00000030
editorGroupHeader.tabsBackground#212121
editorGutter.addedBackground#C3E88D60
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#82AAFF60
editorHoverWidget.background#212121
editorHoverWidget.border#FFFFFF10
editorIndentGuide.background#42424270
editorLineNumber.activeForeground#848484
editorLineNumber.foreground#84848444
editorLink.activeForeground#EEFFFF
editorMarkerNavigation.background#EEFFFF05
editorOverviewRuler.border#212121
editorRuler.foreground#42424270
editorSuggestWidget.background#212121
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#EEFFFF
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#B58900aa
editorWhitespace.foreground#EEFFFF40
editorWidget.background#1a1a1a
extensionButton.prominentBackground#C3E88D90
extensionButton.prominentHoverBackground#C3E88D
focusBorder#FFFFFF00
gitDecoration.conflictingResourceForeground#B58900
gitDecoration.deletedResourceForeground#DC322F
gitDecoration.ignoredResourceForeground#84848490
gitDecoration.modifiedResourceForeground#6C71C4
gitDecoration.untrackedResourceForeground#C3E88D90
input.background#FFFFFF05
input.border#FFFFFF10
input.foreground#EEFFFF
input.placeholderForeground#EEFFFF60
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBorder#FFCB6B50
list.activeSelectionBackground#2EAFA277
list.activeSelectionForeground#FFFFFF
list.focusBackground#2EAFA277
list.focusForeground#FFFFFF
list.highlightForeground#2EAFA2
list.hoverBackground#00000040
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#2EAFA2
notificationLink.foreground#80CBC4
notifications.background#212121
notifications.foreground#EEFFFF
panel.background#1a1a1a
panel.border#00000060
panelTitle.activeForeground#EEFFFF
peekView.border#00000030
peekViewEditor.background#EEFFFF05
peekViewEditor.matchHighlightBackground#61616150
peekViewEditorGutter.background#EEFFFF05
peekViewResult.background#EEFFFF05
peekViewResult.matchHighlightBackground#61616150
peekViewResult.selectionBackground#84848470
peekViewTitle.background#EEFFFF05
peekViewTitleDescription.foreground#EEFFFF60
pickerGroup.foreground#80CBC4
progressBar.background#80CBC4
scrollbar.shadow#21212100
scrollbarSlider.activeBackground#00000050
scrollbarSlider.background#00000070
scrollbarSlider.hoverBackground#00000030
selection.background#F35717dd
sideBar.background#1E232A
sideBar.border#00000060
sideBar.foreground#767C89
sideBarSectionHeader.background#1C2026
sideBarTitle.foreground#EEFFFF
statusBar.background#1a1a1a
statusBar.border#00000060
statusBar.debuggingBackground#C792EA
statusBar.debuggingForeground#ffffff
statusBar.foreground#616161
statusBar.noFolderBackground#212121
tab.activeBackground#2b303b
tab.activeForeground#ddefe6
tab.border#212121
tab.inactiveBackground#212121
tab.inactiveForeground#848484
tab.unfocusedActiveBorder#4A4A4A
tab.unfocusedActiveForeground#EEFFFF
terminal.ansiBlack#93A1A1
terminal.ansiBlue#288ed7
terminal.ansiBrightBlack#93A1A1
terminal.ansiBrightBlue#288ed7
terminal.ansiBrightCyan#2AA298
terminal.ansiBrightGreen#08916a
terminal.ansiBrightMagenta#d6438a
terminal.ansiBrightRed#de3d3b
terminal.ansiBrightWhite#212121
terminal.ansiBrightYellow#daaa01
terminal.ansiCyan#2AA298
terminal.ansiGreen#08916a
terminal.ansiMagenta#d6438a
terminal.ansiRed#de3d3b
terminal.ansiWhite#212121
terminal.ansiYellow#E0AF02
terminal.background#2B303B
terminal.foreground#93A1A1
textLink.activeForeground#EEFFFF
textLink.foreground#80CBC4
titleBar.activeBackground#1a1a1a
titleBar.activeForeground#4A4A4A
titleBar.border#00000060
titleBar.inactiveBackground#1a1a1a
titleBar.inactiveForeground#4A4A4A
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
bold, variable.other.readwrite.instance, variable.other.readwrite.js, variable.parameter, variable.other.ruby, entity.other.attribute-name.id, entity.name.tag.id.haml, entity.other.attribute-name.id.html, variable.other.block.ruby	—	bold
italic, entity.name.function, support.function.core.ruby, variable.other.property.js, storage.type.js, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, 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, 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	#93A1A1	—
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	#586E75	italic
text-color-dark, punctuation.section.function.ruby	#93A1A1	—
light-gray, comment.line.double-slash	#586E75	—
lime, keyword.control, keyword.control.at-rule.include.scss, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, variable.other.block.ruby, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, keyword.operator.assignment, keyword.operator.comparison, keyword.control.module.ruby, keyword.control.class.ruby, keyword.operator.relational, string.regexp, string.regexp keyword.other, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.operator, keyword.operator.logical.ruby, meta.block.parameters.ruby, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.ruby, keyword.other.important.scss	#859900	—
blue, punctuation.accessor, entity.name.function, entity.name.tag.yaml, punctuation.separator.method.ruby, entity.name.tag.html, support.function.core.ruby, punctuation.definition.tag.html, entity.name.tag.class.haml, entity.name.tag.id.haml, entity.other.attribute-name.id.html, entity.other.attribute-name, variable.other.ruby, entity.name.function.ruby, variable.parameter, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx, variable.other.property.js, storage, storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx, storage.type.cs, meta.method.declaration storage.type.js, variable, meta.var-single-variable.expr.js, meta.var.expr.js, 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, 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, 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	#268BD2	—
blue-soft, punctuation.definition.parameters, entity.name.tag.haml, keyword.control.def.ruby, storage.type.js, 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	#268BD2aa	—
teal, string.quoted, meta.structure.dictionary.value.json string.quoted.double, support.constant.property-value.css	#269186	—
brick-orange, support.class, support.class.ruby, entity.name.type.ts, entity.name.type.tsx, entity.name.type.js, entity.name.type.module.js, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.class, constant.character.escape, variable.language.this.js, 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, variable.parameter, support.type.property-name.json, string.quoted.double.json punctuation.definition.string.json, support.function.misc.scss, meta.class entity.name.type.class.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, meta.class entity.name.type.class.tsx, meta.class entity.name.type.class, meta.namespace-block.cpp	#777777	—
purple, variable.other.readwrite.instance, constant.numeric, constant.character.numeric, variable.scss, entity.name.type.class.ruby, punctuation.definition.constant, 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.other.color, meta.attribute-selector.css entity.other.attribute-name.attribute	#6C71C4	—
purple-soft, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css	#6C71C4aa	—
gold, support.type.property-name.css, constant.language.symbol.hashkey.ruby, punctuation.definition.constant.hashkey.ruby, punctuation.definition.constant.ruby, constant.language.symbol.ruby, support.function, variable.other.constant	#B38700	—
gold-soft, punctuation.separator.key-value, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby, punctuation.separator.object.ruby	#B38700aa	—
pink, constant.language, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.deleted.diff, variable.interpolation, invalid, meta.at-rule.include.scss, invalid.illegal	#D33682	—
red, 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	—
gold, source.ruby, 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, 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, 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, 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.class, entity.other.inherited-class, markup.inserted.diff, string, support.constant.math, constant.character, constant.other, keyword.other.unit.scss, keyword.other.unit.sass, markup.italic.markdown, meta.var.expr, keyword, source.elixir .punctuation.binary.elixir, 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, meta.tag.sgml.doctype.html, meta.delimiter.period	#B58900	—
gold-soft	#B58900aa	—

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