Hydroxy

Name: Hydroxy
Author: Virej Dasani

Publisher: Virej DasaniThemes in package: 2

A dark, sleek theme with an awesome color scheme!

Open in VS Code GitHub

Color themes

VS Code preview

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

Hydroxy — Hydroxy Alt Colors

fetchUser.ts

index.ts

README.md

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#2b58bd
activityBar.background#21272e
activityBar.border#1a1a1a
activityBar.foreground#cfc6c6
activityBar.inactiveForeground#474747
activityBarBadge.background#2b58bd
activityBarBadge.foreground#fff5f5
badge.background#1a55d9
badge.foreground#fff5f5
breadcrumb.activeSelectionForeground#fff5f5
breadcrumb.focusForeground#fff5f5
breadcrumb.foreground#6c6767
button.background#2f2f2f
button.foreground#8f8c8c
button.hoverBackground#272b34
debugExceptionWidget.background#1e2329
debugExceptionWidget.border#0d0c0c
debugIcon.breakpointCurrentStackframeForeground#1a55d9
debugIcon.breakpointDisabledForeground#c0b6b6
debugIcon.breakpointForeground#fc618d
debugIcon.breakpointStackframeForeground#fff5f5
debugIcon.breakpointUnverifiedForeground#fd9353
debugIcon.continueForeground#fff5f5
debugIcon.disconnectForeground#fff5f5
debugIcon.pauseForeground#fff5f5
debugIcon.restartForeground#7bd88f
debugIcon.startForeground#7bd88f
debugIcon.stepBackForeground#fff5f5
debugIcon.stepIntoForeground#fff5f5
debugIcon.stepOutForeground#fff5f5
debugIcon.stepOverForeground#fff5f5
debugIcon.stopForeground#fc618d
debugToolBar.background#141414
descriptionForeground#8f8c8c
diffEditor.insertedTextBackground#7bd88f19
diffEditor.removedTextBackground#fc618d19
dropdown.background#272b34
dropdown.border#0d0c0c
dropdown.foreground#8f8c8c
dropdown.listBackground#373535
editor.background#272b34
editor.findMatchBackground#fff5f526
editor.findMatchBorder#1a55d9
editor.findMatchHighlightBackground#fff5f526
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#fff5f50c
editor.findRangeHighlightBorder#00000000
editor.foreground#cccccc
editor.hoverHighlightBackground#fff5f510
editor.inactiveSelectionBackground#fff5f50c
editor.lineHighlightBackground#fff5f50c
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#373535
editor.rangeHighlightBorder#373535
editor.selectionBackground#c0b6b626
editor.selectionHighlightBackground#fff5f526
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#fff5f526
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#fff5f526
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#272b34
editorBracketMatch.border#6c6767
editorCodeLens.foreground#6c6767
editorCursor.background#272b34
editorCursor.foreground#ffffff
editorError.border#00000000
editorError.foreground#fc618d
editorGroup.border#1e2329
editorGroup.dropBackground#1e2329bf
editorGroup.emptyBackground#272b34
editorGroup.focusedEmptyBorder#0d0c0c
editorGroupHeader.noTabsBackground#272b34
editorGroupHeader.tabsBackground#1e2329
editorGroupHeader.tabsBorder#0d0c0c
editorGutter.addedBackground#cbf075
editorGutter.background#272b34
editorGutter.deletedBackground#f0758a
editorGutter.modifiedBackground#75f0f0
editorHint.border#0d0c0c
editorHint.foreground#948ae3
editorHoverWidget.background#373535
editorHoverWidget.border#0d0c0c
editorIndentGuide.background#373535
editorInfo.border#0d0c0c
editorInfo.foreground#5ad4e6
editorLightBulb.foreground#fce566
editorLightBulbAutoFix.foreground#7bd88f
editorLineNumber.activeForeground#c0b6b6
editorLineNumber.foreground#4b4b4b
editorLink.activeForeground#5ad4e6
editorMarkerNavigation.background#373535
editorMarkerNavigationError.background#fc618d
editorMarkerNavigationInfo.background#5ad4e6
editorMarkerNavigationWarning.background#fd9353
editorOverviewRuler.addedForeground#cbf075
editorOverviewRuler.border#0d0c0c
editorOverviewRuler.currentContentForeground#373535
editorOverviewRuler.deletedForeground#f0758a
editorOverviewRuler.errorForeground#f0758a
editorOverviewRuler.findMatchForeground#fff5f526
editorOverviewRuler.incomingContentForeground#373535
editorOverviewRuler.infoForeground#5ad4e6
editorOverviewRuler.modifiedForeground#90dcf3
editorOverviewRuler.rangeHighlightForeground#fff5f526
editorOverviewRuler.selectionHighlightForeground#fff5f526
editorOverviewRuler.warningForeground#fd9353
editorOverviewRuler.wordHighlightForeground#fff5f526
editorOverviewRuler.wordHighlightStrongForeground#fff5f526
editorPane.background#0d0c0c
editorRuler.foreground#474747
editorSuggestWidget.background#373535
editorSuggestWidget.border#373535
editorSuggestWidget.foreground#c0b6b6
editorSuggestWidget.highlightForeground#fff5f5
editorSuggestWidget.selectedBackground#6c6767
editorWarning.border#00000000
editorWarning.foreground#fd9353
editorWhitespace.foreground#474747
editorWidget.background#373535
editorWidget.border#373535
errorForeground#fc618d
extensionButton.prominentBackground#373535
extensionButton.prominentForeground#fff5f5
extensionButton.prominentHoverBackground#474747
focusBorder#555050
foreground#fff5f5
gitDecoration.addedResourceForeground#cbf075
gitDecoration.conflictingResourceForeground#fd9353
gitDecoration.deletedResourceForeground#f0758a
gitDecoration.ignoredResourceForeground#474747
gitDecoration.modifiedResourceForeground#90dcf3
gitDecoration.untrackedResourceForeground#fd9353
input.background#2f2f2f
input.border#2c2c2c
input.foreground#fff5f5
input.placeholderForeground#6c6767
inputOption.activeBackground#474747
inputOption.activeBorder#474747
inputValidation.errorBackground#373535
inputValidation.errorBorder#fc618d
inputValidation.errorForeground#fc618d
inputValidation.infoBackground#373535
inputValidation.infoBorder#5ad4e6
inputValidation.infoForeground#5ad4e6
inputValidation.warningBackground#373535
inputValidation.warningBorder#fd9353
inputValidation.warningForeground#fd9353
list.activeSelectionBackground#2f2f2f
list.activeSelectionForeground#cccccc
list.dropBackground#1e2329bf
list.errorForeground#fc618d
list.focusBackground#272b34
list.focusForeground#fff5f5
list.highlightForeground#fff5f5
list.hoverBackground#1e2329
list.hoverForeground#fff5f5
list.inactiveFocusBackground#272b34
list.inactiveSelectionBackground#272b34
list.inactiveSelectionForeground#cccccc
list.invalidItemForeground#fc618d
list.warningForeground#fd9353
listFilterWidget.background#272b34
listFilterWidget.noMatchesOutline#fc618d
listFilterWidget.outline#0d0c0c
merge.border#0d0c0c
merge.commonContentBackground#fff5f519
merge.commonHeaderBackground#fff5f526
merge.currentContentBackground#fc618d19
merge.currentHeaderBackground#fc618d26
merge.incomingContentBackground#7bd88f19
merge.incomingHeaderBackground#7bd88f26
minimap.errorHighlight#fc618d
minimap.warningHighlight#fd9353
minimapGutter.addedBackground#cbf075
minimapGutter.deletedBackground#f0758a
minimapGutter.modifiedBackground#90dcf3
notificationCenter.border#373535
notificationCenterHeader.background#373535
notificationCenterHeader.foreground#8f8c8c
notificationLink.foreground#1a55d9
notifications.background#373535
notifications.border#373535
notifications.foreground#c0b6b6
notificationsErrorIcon.foreground#fc618d
notificationsInfoIcon.foreground#5ad4e6
notificationsWarningIcon.foreground#fd9353
notificationToast.border#373535
panel.background#1e2329
panel.border#1e2329
panelTitle.activeBorder#1e2329
panelTitle.activeForeground#1a55d9
panelTitle.inactiveForeground#474747
peekView.border#0d0c0c
peekViewEditor.background#373535
peekViewEditor.matchHighlightBackground#474747
peekViewEditorGutter.background#373535
peekViewResult.background#373535
peekViewResult.fileForeground#8f8c8c
peekViewResult.lineForeground#8f8c8c
peekViewResult.matchHighlightBackground#474747
peekViewResult.selectionBackground#373535
peekViewResult.selectionForeground#fff5f5
peekViewTitle.background#373535
peekViewTitleDescription.foreground#8f8c8c
peekViewTitleLabel.foreground#fff5f5
pickerGroup.border#0d0c0c
pickerGroup.foreground#474747
problemsErrorIcon.foreground#1a55d9
problemsInfoIcon.foreground#5ad4e6
problemsWarningIcon.foreground#fd9353
progressBar.background#373535
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#fff5f512
scrollbarSlider.background#fff5f512
scrollbarSlider.hoverBackground#fff5f512
selection.background#c0b6b626
settings.checkboxBackground#373535
settings.checkboxBorder#373535
settings.checkboxForeground#fff5f5
settings.dropdownBackground#373535
settings.dropdownBorder#373535
settings.dropdownForeground#fff5f5
settings.dropdownListBorder#8f8c8c
settings.headerForeground#1a55d9
settings.modifiedItemIndicator#1a55d9
settings.numberInputBackground#373535
settings.numberInputBorder#373535
settings.numberInputForeground#fff5f5
settings.textInputBackground#373535
settings.textInputBorder#373535
settings.textInputForeground#fff5f5
sideBar.background#21272e
sideBar.border#0d0c0c
sideBar.dropBackground#1e2329bf
sideBar.foreground#8f8c8c
sideBarSectionHeader.background#1e2329
sideBarSectionHeader.foreground#cfc6c6
sideBarTitle.foreground#474747
statusBar.background#1e2329
statusBar.border#0d0c0c
statusBar.debuggingBackground#6c6767
statusBar.debuggingBorder#1e2329
statusBar.debuggingForeground#fff5f5
statusBar.foreground#6c6767
statusBar.noFolderBackground#1e2329
statusBar.noFolderBorder#0d0c0c
statusBar.noFolderForeground#6c6767
statusBarItem.activeBackground#272b34
statusBarItem.hoverBackground#272b34
statusBarItem.prominentBackground#373535
statusBarItem.prominentHoverBackground#373535
statusBarItem.remoteBackground#1e2329
statusBarItem.remoteForeground#f25262
tab.activeBackground#272b34
tab.activeBorder#0d0c0c
tab.activeBorderTop#1a55d9
tab.activeForeground#f4f4f4
tab.border#1e2329
tab.hoverBackground#272b34
tab.hoverBorder#0d0c0c
tab.hoverForeground#dddddd
tab.inactiveBackground#1e2329
tab.inactiveForeground#606060
tab.unfocusedActiveBorder#1e2329
tab.unfocusedActiveBorderTop#606060
tab.unfocusedActiveForeground#8f8c8c
tab.unfocusedHoverBackground#272b34
tab.unfocusedHoverForeground#dddddd
tab.unfocusedInactiveBackground#1e2329
tab.unfocusedInactiveForeground#606060
textBlockQuote.background#373535
textBlockQuote.border#373535
textCodeBlock.background#373535
textLink.activeForeground#fff5f5
textLink.foreground#f25262
textPreformat.foreground#fff5f5
textSeparator.foreground#6c6767
titleBar.activeBackground#1e2329
titleBar.activeForeground#8f8c8c
titleBar.border#0d0c0c
titleBar.inactiveBackground#1e2329
titleBar.inactiveForeground#474747
tree.indentGuidesStroke#fff5f515
walkThrough.embeddedEditorBackground#1e2329
welcomePage.buttonBackground#1e2329
welcomePage.buttonHoverBackground#1e2329
widget.shadow#1e2329

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text	#646464	italic
comment storage.type	#646464	—
comment entity.name.type	#646464	—
comment variable, comment variable.other	#646464	—
comment.git-status.header.remote	#fc618d	—
comment.git-status.header.local	#5ad4e6	—
comment.other.git-status.head	#d7d7d7	—
constant	#a5a5f0	—
constant.other	#c8e1ff	—
constant.other.symbol	#5ad4e6	—
constant.numeric	#a5a5f0	—
entity.name	#dfbf74	—
entity.name.function, entity.name.function-call	#5eaae0	—
entity.name.section	#f25262	—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component	#f25c6d	—
entity.other.attribute-name	#da985f	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css	#da985f	—
entity.other.attribute-name.id.css	#4cacf2	—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#5ad4e6	italic
entity.other.git-status.hex	#948ae3	—
invalid	—	italic
keyword	#b392f0	—
keyword.operator, keyword.operator.member, keyword.operator.new	#16b9c5	—
keyword.other.substitution	#8b888f	—
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#f25262	—
markup.raw	#fd9353	—
markup.underline	—	underline
markup.underline.link	#5ad4e6	—
markup.inserted, markup.inserted punctuation.definition.inserted	#7bd88f	—
markup.deleted, markup.deleted punctuation.definition.deleted	#fc618d	—
markup.changed, markup.changed punctuation.definition.changed	#fce566	—
markup.ignored, markup.ignored punctuation.definition.ignored	#8b888f	—
markup.untracked	#8b888f	—
markup.quote	—	italic
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	#888f88	—
meta.function-call.python, meta.function-call.arguments.python meta.function-call.python	#b392f0	—
meta.function-call.python meta.function-call.arguments.python	#fff5f5	—
meta.object.member	#f25c6d	—
meta.diff.git-diff.header	#fce566	—
meta.separator.markdown	#8b888f	—
punctuation	#8b888f	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#bab6c0	—
source	#dfbf74	—
source.scss, source.sass	#8f8888	—
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less	#fff5f5	italic
source.git-show.commit.sha	#948ae3	—
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	#8b888f	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#948ae3	—
source.git-show meta.diff.range.unified	#fd9353	—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#8f8888	—
storage	#5ad4e6	—
storage.modifier, storage.type.modifier	#d861dd	italic
storage.type	#d861dd	—
storage.type.function.arrow	#f25262
string	#86ca79	—
string source	#fff5f5	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#f25262	—
support.constant	#da985f	—
support.function	#b8d96f	—
support.type, entity.name.type.object.console	#5ad4e6	italic
support.type.property-name	#aab1c0
support.variable	#5ad4e6	—
support.class	#5ad4e6	—
text	#f6f6f6	—
variable	#f25c6d	—
variable.parameter, parameters variable.function	#ef8f5c	italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#f6f6f6	italic
variable.other.object	#dfbf74	—
variable.other.constant, variable.other.property, variable.other.object.property	#dc5767	—
token.info-token	#316BCD	—
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}!`;
}