vividic

Name: vividic
Author: Jaydeep Shil

Publisher: Jaydeep ShilThemes in package: 1

Want to decorate your VS-code with the vivid color? You must try this , Made In India.

GitHub

VS Code preview

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

vividic — vividic

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#ffbe0a
activityBar.background#1c0433
activityBar.dropBorder#ffbe0a
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffbe0a66
activityBarBadge.background#1100ff
activityBarBadge.foreground#c01e1e
badge.background#1abc9c
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#140721
breadcrumb.focusForeground#fbff03
breadcrumb.foreground#ff057a
breadcrumbPicker.background#140721
button.background#ff057a
button.foreground#ffffff
button.hoverBackground#ff3995
button.secondaryBackground#ff057a
button.secondaryForeground#ffffff
button.secondaryHoverBackground#ff3995
charts.blue#75beff
charts.foreground#ffffff
charts.green#89d185
charts.lines#ffffff80
charts.orange#d18616
charts.purple#b180d7
charts.red#f48771
charts.yellow#cca700
checkbox.background#200b34
checkbox.border#ff057a
checkbox.foreground#f0f0f0
debugConsole.errorForeground#f48771
debugConsole.infoForeground#75beff
debugConsole.sourceForeground#ffffff
debugConsole.warningForeground#cca700
debugConsoleInputIcon.foreground#ffffff
debugExceptionWidget.background#420b0d
debugExceptionWidget.border#a31515
debugIcon.breakpointCurrentStackframeForeground#ffcc00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#e51400
debugIcon.breakpointStackframeForeground#89d185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#75beff
debugIcon.disconnectForeground#f48771
debugIcon.pauseForeground#75beff
debugIcon.restartForeground#89d185
debugIcon.startForeground#89d185
debugIcon.stepBackForeground#75beff
debugIcon.stepIntoForeground#75beff
debugIcon.stepOutForeground#75beff
debugIcon.stepOverForeground#75beff
debugIcon.stopForeground#f48771
debugTokenExpression.boolean#4e94ce
debugTokenExpression.error#f48771
debugTokenExpression.name#c586c0
debugTokenExpression.number#b5cea8
debugTokenExpression.string#ce9178
debugTokenExpression.value#cccccc99
debugToolBar.background#1c092e
debugView.exceptionLabelBackground#6c2022
debugView.exceptionLabelForeground#ffffff
debugView.stateLabelBackground#88888844
debugView.stateLabelForeground#ffffff
debugView.valueChangedHighlight#569cd6
descriptionForeground#ffffffb3
diffEditor.diagonalFill#cccccc33
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#200b34
dropdown.border#ff057a
dropdown.foreground#f0f0f0
editor.background#140721
editor.findMatchBackground#515c6a
editor.findMatchHighlightBackground#ea5c0055
editor.findRangeHighlightBackground#3a3d4166
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#2123634d
editor.foreground#ffffff
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#21236380
editor.lineHighlightBorder#ffffff1a
editor.linkedEditingBackground#ff00004d
editor.rangeHighlightBackground#ffffff0d
editor.selectionBackground#1016be
editor.selectionHighlightBackground#2f2963
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#ea5c0055
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorActiveLineNumber.foreground#c6c6c6
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.foreground#ff0000
editorError.foreground#f48771
editorGroup.border#444444
editorGroup.dropBackground#ff057a
editorGroup.focusedEmptyBorder#1abc9c
editorGroupHeader.noTabsBackground#140721
editorGroupHeader.tabsBackground#180827
editorGutter.addedBackground#587c0c
editorGutter.background#140721
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#180827
editorHoverWidget.border#454545
editorHoverWidget.foreground#ffffff
editorHoverWidget.statusBarBackground#1d0a2f
editorIndentGuide.activeBackground#e3e4e229
editorIndentGuide.background#e3e4e229
editorInfo.foreground#75beff
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75beff
editorLineNumber.activeForeground#1abc9c
editorLineNumber.foreground#ffffff4d
editorLink.activeForeground#c4ff2e
editorMarkerNavigation.background#180827
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.addedForeground#587c0c99
editorOverviewRuler.border#7f7f7f4d
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#94151b99
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#75beff
editorOverviewRuler.modifiedForeground#0c7d9d99
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#cca700
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#140721
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#180827
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#1abc9c
editorSuggestWidget.selectedBackground#140721
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#180827
editorWidget.border#454545
editorWidget.foreground#ffffff
errorForeground#f48771
extensionBadge.remoteBackground#2f00ff
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#ff057a
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#ff3995
focusBorder#ff0000
foreground#ffffff
gitDecoration.addedResourceForeground#f5ef4c
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#c5c5c5
imagePreview.border#80808059
input.background#200b34
input.foreground#ffffff
input.placeholderForeground#ffffff80
inputOption.activeBackground#270a4a
inputOption.activeBorder#000000
inputOption.activeForeground#ffffff
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.infoBackground#063b49
inputValidation.infoBorder#007acc
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
issues.closed#cb2431
issues.newIssueDecoration#ffffff48
issues.open#22863a
list.activeSelectionBackground#ff005d
list.activeSelectionForeground#ffffff
list.deemphasizedForeground#8c8c8c
list.dropBackground#1abc9c80
list.errorForeground#f88070
list.filterMatchBackground#ea5c0055
list.focusBackground#140721
list.focusForeground#ffffff
list.highlightForeground#1abc9c
list.hoverBackground#ffffff1a
list.inactiveSelectionBackground#ffffff33
list.invalidItemForeground#b89500
list.warningForeground#cca700
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#200b34
menu.foreground#f0f0f0
menu.selectionBackground#ff005d
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#cccccc
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40a6ff80
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#d18616
minimap.selectionHighlight#264f78
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
minimapSlider.activeBackground#bfbfbf33
minimapSlider.background#79797933
minimapSlider.hoverBackground#fbff0380
notebook.cellBorderColor#ffffff33
notebook.cellInsertionIndicator#ff0000
notebook.cellStatusBarItemHoverBackground#ffffff26
notebook.cellToolbarSeparator#80808059
notebook.focusedCellBorder#ff0000
notebook.focusedEditorBorder#ff0000
notebook.focusedRowBorder#ffffff1f
notebook.outputContainerBackgroundColor#ffffff33
notebook.rowHoverBackground#80808012
notebook.selectedCellBorder#ffffff33
notebook.symbolHighlightBackground#ffffff0b
notebookScrollbarSlider.activeBackground#bfbfbf66
notebookScrollbarSlider.background#79797966
notebookScrollbarSlider.hoverBackground#fbff03
notebookStatusErrorIcon.foreground#f48771
notebookStatusRunningIcon.foreground#ffffff
notebookStatusSuccessIcon.foreground#89d185
notificationCenterHeader.background#120522
notificationCenterHeader.foreground#ff057a
notificationLink.foreground#3794ff
notifications.background#0e041a
notifications.border#120522
notifications.foreground#ffffff
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
panel.background#140721
panel.border#fbff03
panel.dropBorder#ffc800
panelSection.border#fbff03
panelSection.dropBackground#ff057a
panelSectionHeader.background#80808033
panelTitle.activeBorder#ffffff80
panelTitle.activeForeground#ffc800
panelTitle.inactiveForeground#ffffff80
peekView.border#1abc9c
peekViewEditor.background#140721
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditorGutter.background#140721
peekViewResult.background#180827
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#140721
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#ffffff1a
pickerGroup.foreground#3794ff
problemsErrorIcon.foreground#f48771
problemsInfoIcon.foreground#75beff
problemsWarningIcon.foreground#cca700
progressBar.background#ff057a
quickInput.background#180827
quickInput.foreground#ffffff
quickInputTitle.background#ffffff1b
scm.providerBorder#454545
scrollbar.shadow#6af5d9
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#ffffff
searchEditor.findMatchBackground#ea5c0038
selection.background#1abc9c
settings.checkboxBackground#200b34
settings.checkboxBorder#ff057a
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#200b34
settings.dropdownBorder#ff057a
settings.dropdownForeground#f0f0f0
settings.dropdownListBorder#454545
settings.focusedRowBackground#80808024
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#200b34
settings.numberInputForeground#ffffff
settings.textInputBackground#200b34
settings.textInputForeground#ffffff
sideBar.background#0e041a
sideBar.border#270a4a
sideBar.dropBackground#ff057a
sideBar.foreground#ffbe0a
sideBarSectionHeader.background#1c092e
sideBarSectionHeader.foreground#ffbe0a
sideBarTitle.foreground#ffbe0a
statusBar.background#f24e30
statusBar.debuggingBackground#1abc9c
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#10051a
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#1abc9c80
statusBarItem.errorBackground#c72e0f
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#cf7d0a
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#1abc9c
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#ffffff
symbolIcon.booleanForeground#ffffff
symbolIcon.classForeground#ee9d28
symbolIcon.colorForeground#ffffff
symbolIcon.constantForeground#ffffff
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#ee9d28
symbolIcon.enumeratorMemberForeground#75beff
symbolIcon.eventForeground#ee9d28
symbolIcon.fieldForeground#75beff
symbolIcon.fileForeground#ffffff
symbolIcon.folderForeground#ffffff
symbolIcon.functionForeground#b180d7
symbolIcon.interfaceForeground#75beff
symbolIcon.keyForeground#ffffff
symbolIcon.keywordForeground#ffffff
symbolIcon.methodForeground#b180d7
symbolIcon.moduleForeground#ffffff
symbolIcon.namespaceForeground#ffffff
symbolIcon.nullForeground#ffffff
symbolIcon.numberForeground#ffffff
symbolIcon.objectForeground#ffffff
symbolIcon.operatorForeground#ffffff
symbolIcon.packageForeground#ffffff
symbolIcon.propertyForeground#ffffff
symbolIcon.referenceForeground#ffffff
symbolIcon.snippetForeground#ffffff
symbolIcon.stringForeground#ffffff
symbolIcon.structForeground#ffffff
symbolIcon.textForeground#ffffff
symbolIcon.typeParameterForeground#ffffff
symbolIcon.unitForeground#ffffff
symbolIcon.variableForeground#75beff
tab.activeBackground#140721
tab.activeBorder#fbff03
tab.activeForeground#ffffff
tab.activeModifiedBorder#1abc9c
tab.border#00000033
tab.hoverForeground#beff57
tab.inactiveBackground#1c092e
tab.inactiveForeground#ffffff80
tab.inactiveModifiedBorder#0f705d
tab.lastPinnedBorder#585858
tab.unfocusedActiveBackground#140721
tab.unfocusedActiveBorder#fbff0380
tab.unfocusedActiveForeground#ffffff80
tab.unfocusedActiveModifiedBorder#14967c
tab.unfocusedHoverForeground#beff5780
tab.unfocusedInactiveBackground#1c092e
tab.unfocusedInactiveForeground#ffffff40
tab.unfocusedInactiveModifiedBorder#0f705d
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#000000
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.background#140721
terminal.border#fbff03
terminal.foreground#3ac906
terminal.selectionBackground#ffffff40
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#0a0a0a66
textLink.activeForeground#3794ff
textLink.foreground#3794ff
textPreformat.foreground#d7ba7d
textSeparator.foreground#ffffff2e
titleBar.activeBackground#140721
titleBar.activeForeground#cccccc
titleBar.inactiveBackground#14072199
titleBar.inactiveForeground#cccccc99
tree.indentGuidesStroke#585858
welcomePage.buttonHoverBackground#ff057a
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string	#F74F4F	—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html	#FF7676	—
constant.language.boolean	#4E0DDB	—
constant.numeric	#FFFF33	—
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function	#27FFEA	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#F70596	—
entity.name.function, support.function	#FFFF33	—
storage.type, storage.modifier	#EB8059	—
support.module, support.node	#27FFEA	italic
support.type	#55FF55	—
entity.name.type, entity.other.inherited-class	#55FF55	—
comment	#ceb197	italic
entity.name.type.class	#F065C4	underline
variable.object.property, meta.field.declaration entity.name.function	#55FF55	—
meta.definition.method entity.name.function	#55FF55	—
meta.function entity.name.function	#55FF55	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#F70596	—
meta.embedded, source.groovy.embedded, meta.template.expression	#FFFFFF	—
entity.name.tag.yaml	#27FFEA	—
modifier	#FF7086	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#27FFEA	—
constant.language.json	#F70596	—
entity.other.attribute-name.class	#1ABC9C	—
entity.other.attribute-name.id	#F065C4	—
source.css entity.name.tag	#FFCB7D	—
meta.tag, punctuation.definition.tag	#F70596	—
entity.name.tag	#27FFEA	—
entity.other.attribute-name	#FFFF33	—
markup.heading	#F70596	—
text.html.markdown meta.link.inline, meta.link.reference	#27FFEA	—
text.html.markdown beginning.punctuation.definition.list	#F70596	—
markup.italic	#27FFEA	italic
markup.bold	#27FFEA	bold
markup.bold markup.italic, markup.italic markup.bold	#27FFEA	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#F74F4F	—
markup.inline.raw.string.markdown	#F74F4F	—
keyword.other.definition.ini	#27FFEA	—
entity.name.section.group-title.ini	#F70596	—
source.cs meta.class.identifier storage.type	#F065C4	underline
source.cs meta.method.identifier entity.name.function	#55FF55	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#FFFF33	—
source.cs storage.type	#55FF55	—
source.cs meta.method.return-type	#55FF55	—
source.cs meta.preprocessor	#3C1563	—
source.cs entity.name.type.namespace	#FFFFFF	—
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}!`;
}