Unified Glow

Name: Unified Glow
Author: Ikram Hussain Siyam

Publisher: Ikram Hussain SiyamThemes in package: 13

All of your favorite themes in one place.

Open in VS Code GitHub

Color themes

VS Code preview

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

Unified Glow — Next.js - Unified Glow

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.activeBorder#5cc2b2
activityBar.background#1a1a1a
activityBar.border#101010
activityBar.foreground#dcdcdc
activityBar.inactiveForeground#858585
activityBarBadge.background#5cc2b2
activityBarBadge.foreground#1a1a1a
activityBarTop.activeBorder#5cc2b2
activityBarTop.background#1a1a1a
activityBarTop.foreground#dcdcdc
activityBarTop.inactiveForeground#606060
badge.background#5cc2b2
badge.foreground#1a1a1a
breadcrumb.activeSelectionForeground#dcdcdc
breadcrumb.background#1a1a1a
breadcrumb.focusForeground#dcdcdc
breadcrumb.foreground#a0a0a0
button.background#5cc2b2
button.border#ffffff12
button.foreground#1a1a1a
button.hoverBackground#5cc2b2bb
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#3c3c3c
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#1a1a1a
debugExceptionWidget.border#101010
debugToolBar.background#1a1a1a
debugToolBar.border#101010
descriptionForeground#8b949e
diffEditor.border#444444
diffEditor.insertedLineBackground#23863633
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedLineBackground#da363333
diffEditor.removedTextBackground#ff000033
dropdown.background#3c3c3c
dropdown.border#00000000
dropdown.foreground#cccccc
dropdown.listBackground#313131
editor.background#202020
editor.findMatchBackground#515c6a
editor.findMatchBorder#4598f7
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f7837
editor.foreground#dcdcdc
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#0000
editor.lineHighlightBorder#ffffff13
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#ffffff24
editor.selectionHighlightBackground#add6ff26
editor.selectionHighlightBorder#495f77
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketHighlight.foreground1#ddbc00
editorBracketHighlight.foreground2#c868c5
editorBracketHighlight.foreground3#179fff
editorBracketHighlight.foreground4#00000000
editorBracketHighlight.foreground5#00000000
editorBracketHighlight.foreground6#00000000
editorBracketHighlight.unexpectedBracket.foreground#ff1212cc
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#1a1a1a
editorCursor.foreground#aeafad
editorError.background#b73a3400
editorError.border#ffffff00
editorError.foreground#f48771
editorGroup.border#444444
editorGroup.emptyBackground#1a1a1a
editorGroupHeader.tabsBackground#1a1a1a
editorGroupHeader.tabsBorder#101010
editorGutter.addedBackground#587c0c
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#7b7b7b
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#1a1a1a
editorHoverWidget.border#101010
editorHoverWidget.foreground#a0a0a0
editorIndentGuide.activeBackground1#393939
editorIndentGuide.background1#252525
editorInfo.background#4490bf00
editorInfo.border#4490bf00
editorInfo.foreground#75beff
editorInlayHint.background#8b949e33
editorInlayHint.foreground#8b949e
editorInlayHint.typeBackground#8b949e33
editorInlayHint.typeForeground#8b949e
editorLineNumber.activeForeground#aaa9a9
editorLineNumber.foreground#545454
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#1a1a1a
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#1a1a1a
editorSuggestWidget.border#101010
editorSuggestWidget.foreground#a0a0a0
editorSuggestWidget.highlightForeground#5cc2b2
editorSuggestWidget.selectedBackground#282828
editorWarning.background#a9904000
editorWarning.border#ffffff00
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#1a1a1a
editorWidget.foreground#a0a0a0
editorWidget.resizeBorder#101010
errorForeground#f85149
focusBorder#5cc2b2
foreground#a0a0a0
gitDecoration.addedResourceForeground#40c458
gitDecoration.conflictingResourceForeground#8484f5
gitDecoration.deletedResourceForeground#f04343
gitDecoration.ignoredResourceForeground#777777
gitDecoration.modifiedResourceForeground#fdca7d
gitDecoration.stageDeletedResourceForeground#f04343
gitDecoration.stageModifiedResourceForeground#fdca7d
gitDecoration.submoduleResourceForeground#60adf5
gitDecoration.untrackedResourceForeground#99dbb0
icon.foreground#858585
input.background#3c3c3c
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#ffffff24
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
keybindingLabel.foreground#cccccc
list.activeSelectionBackground#ffffff24
list.activeSelectionForeground#dcdcdc
list.activeSelectionIconForeground#ffffff
list.dropBackground#ffffff12
list.focusBackground#ffffff24
list.focusForeground#dcdcdc
list.highlightForeground#5cc2b2
list.hoverBackground#ffffff12
list.hoverForeground#dcdcdc
list.inactiveSelectionBackground#ffffff12
list.inactiveSelectionForeground#dcdcdc
listFilterWidget.background#101010
listFilterWidget.noMatchesOutline#ff2424
listFilterWidget.outline#5cc2b2
menu.background#1a1a1a
menu.border#ffffff13
menu.foreground#858585
menu.selectionBackground#ffffff12
menu.selectionBorder#ffffff12
menu.selectionForeground#dcdcdc
menu.separatorBackground#ffffff13
menubar.selectionBackground#ffffff12
menubar.selectionBorder#101010
menubar.selectionForeground#dcdcdc
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403b
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384b
merge.incomingHeaderBackground#395f8f
minimap.background#1a1a1a
minimap.errorHighlight#f48771
minimap.findMatchHighlight#515c6a
minimap.selectionHighlight#ffffff24
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#101010
notificationCenterHeader.background#1a1a1a
notificationCenterHeader.foreground#dcdcdc
notifications.background#1a1a1a
notifications.border#101010
notifications.foreground#a0a0a0
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#101010
panel.background#1a1a1a
panel.border#101010
panelInput.border#ffffff15
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#5cc2b2
peekViewEditor.background#202020
peekViewEditor.matchHighlightBackground#ff91002a
peekViewEditor.matchHighlightBorder#ee941e80
peekViewResult.background#1a1a1a
peekViewResult.fileForeground#dcdcdc
peekViewResult.lineForeground#a0a0a0
peekViewResult.matchHighlightBackground#ea5c004d
peekViewTitle.background#1a1a1a
peekViewTitleDescription.foreground#a0a0a0
pickerGroup.border#101010
pickerGroup.foreground#5cc2b2
ports.iconRunningProcessForeground#369432
progressBar.background#5cc2b2
quickInput.background#1a1a1a
quickInput.foreground#858585
scrollbar.shadow#1a1a1a
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
selection.background#ffffff24
settings.dropdownBackground#313131
settings.dropdownBorder#ffffff1f
settings.focusedRowBackground#ffffff07
settings.headerForeground#a0a0a0
settings.modifiedItemIndicator#bb800966
sideBar.background#1a1a1a
sideBar.border#101010
sideBar.dropBackground#ffffff12
sideBar.foreground#858585
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#dcdcdc
sideBarTitle.foreground#a0a0a0
statusBar.background#1a1a1a
statusBar.border#101010
statusBar.debuggingBackground#5cc2b210
statusBar.debuggingBorder#0000
statusBar.debuggingForeground#5cc2b2
statusBar.focusBorder#5cc2b2
statusBar.foreground#858585
statusBar.noFolderBackground#1a1a1a
statusBar.noFolderBorder#101010
statusBar.noFolderForeground#a0a0a0
statusBarItem.activeBackground#ffffff25
statusBarItem.focusBorder#0078d4
statusBarItem.hoverBackground#5cc2b220
statusBarItem.hoverForeground#5cc2b2
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#5cc2b2
statusBarItem.remoteForeground#1a1a1a
statusBarItem.remoteHoverBackground#52ac9f
statusBarItem.remoteHoverForeground#1a1a1a
tab.activeBackground#202020
tab.activeBorder#202020
tab.activeBorderTop#5cc2b2
tab.activeForeground#ffffff
tab.border#101010
tab.hoverBackground#1f1f1f
tab.hoverForeground#ffffff
tab.inactiveBackground#1a1a1a
tab.inactiveForeground#858585
tab.lastPinnedBorder#cccccc33
tab.unfocusedActiveBorder#1f1f1f
tab.unfocusedActiveBorderTop#ffffff15
tab.unfocusedHoverBackground#6e76811a
terminal.ansiBlack#1a1a1a
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#80808059
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.selectionBackground#ffffff40
terminal.tab.activeBorder#0078d4
terminalCursor.background#ffffff24
terminalCursor.foreground#ffffff
textBlockQuote.background#010409
textBlockQuote.border#ffffff14
textCodeBlock.background#6e768166
textLink.activeForeground#40a6ff
textLink.foreground#3794ff
textSeparator.foreground#21262d
titleBar.activeBackground#1a1a1a
titleBar.activeForeground#858585
titleBar.border#101010
titleBar.inactiveBackground#202020
titleBar.inactiveForeground#858585
tree.indentGuidesStroke#393939
walkThrough.embeddedEditorBackground#00000050
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#ffffff0f
widget.border#ffffff15
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator	#848484	—
entity.other.jinja2.delimiter	#848484	—
keyword.other.substitution	#848484	—
keyword.other.parenthesis.elm	#848484	—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#848484	—
markup.ignored, markup.ignored punctuation.definition.ignored	#848484	—
markup.untracked	#848484	—
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js	#848484	—
punctuation	#848484	—
punctuation.definition.comment	#545454	—
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator	#848484	—
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array	#848484	—
source.scss, source.sass	#848484	—
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file	#848484	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#848484	—
string source punctuation.section.embedded, string punctuation.definition.string source	#848484	—
support.constant.handlebars	#848484	—
support.function.delimiter.elm	#848484	—
comment, string.comment	#545454	—
string	#E5C07B	—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#C678DD	—
string.template.js	#E5C07B	—
meta.template.expression.js	#ABB2BF	—
constant.numeric	#C678DD	—
string.embedded.begin, string.embedded.end	#C678DD	—
string.embedded	#98C379	—
constant.language	#56B6C2	—
constant.character, constant.other	#56B6C2	—
variable.language	#E06C75	—
variable.readwrite, variable.readwrite.other.block	#61AFEF	—
keyword, keyword.operator.logical, keyword.operator.constructor	#E06C75	—
keyword.operator	#E06C75	—
storage	#E06C75	—
storage.type	#56B6C2	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#61AFEF	—
variable.other.object	#61AFEF	—
variable.other.property, variable.other.block	#ABB2BF	—
entity.other.inherited-class	#98C379	—
entity.name.function, support.function	#98C379	—
variable.parameter	#D19A66	—
entity.name.function-call	#ABB2BF	—
function.support.builtin, function.support.core	#98C379	—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#E06C75	—
entity.name.tag.class, entity.name.tag.id	#56B6C2	—
entity.other.attribute-name	#98C379	—
support.constant	#56B6C2	—
support.type, support.variable	#56B6C2	—
support.dictionary.json	#56B6C2	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#ABB2BF	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#98C379	—
variable.css, variable.scss, variable.less, variable.sass	#56B6C2	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#E5C07B	—
unit.css, unit.scss, unit.less, unit.sass	#C678DD	—
function.css, function.scss, function.less, function.sass	#56B6C2	—
support.other.variable	—
invalid	#F8F8F0	—
invalid.deprecated	#F8F8F0	—
structure.dictionary.property-name.json	#56B6C2	—
string.detected-link	#61AFEF	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#C678DD	—
markup.inserted	#E5C07B	—
markup.changed	#E5C07B	—
constant.numeric.line-number.find-in-files - match	#56B6C2A0	—
entity.name.filename.find-in-files	#E5C07B	—
markup.italic, markup.italic.markdown	—	italic
punctuation.definition.italic.markdown	#696969
markup.underline.link.markdown	#61AFEF	—
markup.bold.markdown	—	bold
punctuation.definition.bold.markdown	#696969	none
markup.heading.markdown	#E06C75	bold
punctuation.definition.heading.markdown	#696969	none
markup.quote.markdown	#98C379	—
meta.separator.markdown	#C678DD	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#56B6C2	—
punctuation.definition.list_item.markdown	#FFFFFF	bold
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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