Smooth Dark

Name: Smooth Dark
Author: PiesArentSquare

Publisher: PiesArentSquareThemes in package: 1

A nice dark theme inpired by monokai and material

Open in VS Code GitHub

VS Code preview

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

Smooth Dark — Smooth Dark

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.activeBackground#292D3E00
activityBar.activeBorder#c27c43
activityBar.activeFocusBorder#e4bd68
activityBar.background#292D3E
activityBar.border#91969D00
activityBar.dropBorder#75cbdf
activityBar.foreground#c5c5c5
activityBar.inactiveForeground#91969D
activityBarBadge.background#c27c43
activityBarBadge.foreground#ffffff
badge.background#c27c43
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#c5c5c5
button.background#4e61cc
button.foreground#ffffff
button.hoverBackground#5179ce
button.secondaryBackground#000000
button.secondaryForeground#91969D
button.secondaryHoverBackground#1E2026
charts.blue#4e61cc
charts.foreground#c5c5c5
charts.green#a6d66e
charts.lines#1E2026
charts.orange#c27c43
charts.purple#b06fd0
charts.red#EE4A66
charts.yellow#e4bd68
checkbox.background#1E2026
checkbox.border#c5c5c500
checkbox.foreground#c5c5c5
debugConsole.errorForeground#EE4A66
debugConsole.infoForeground#3b8ba5
debugConsole.sourceForeground#75cbdf
debugConsole.warningForeground#e4bd68
debugConsoleInputIcon.foreground#ff0000
debugExceptionWidget.background#1E2026
debugExceptionWidget.border#EE4A66
debugIcon.breakpointCurrentStackframeForeground#75cbdf
debugIcon.breakpointDisabledForeground#91969D
debugIcon.breakpointForeground#EE4A66
debugIcon.breakpointStackframeForeground#e4bd68
debugIcon.breakpointUnverifiedForeground#ff0000
debugIcon.continueForeground#a6d66e
debugIcon.disconnectForeground#ff0000
debugIcon.pauseForeground#e4bd68
debugIcon.restartForeground#a6d66e
debugIcon.startForeground#a6d66e
debugIcon.stepBackForeground#75cbdf
debugIcon.stepIntoForeground#75cbdf
debugIcon.stepOutForeground#75cbdf
debugIcon.stepOverForeground#75cbdf
debugIcon.stopForeground#EE4A66
debugTokenExpression.boolean#75cbdf
debugTokenExpression.error#EE4A66
debugTokenExpression.name#5179ce
debugTokenExpression.number#b06fd0
debugTokenExpression.string#e4bd68
debugTokenExpression.value#c5c5c5
debugToolBar.background#1E2026
debugView.exceptionLabelBackground#fff000
debugView.exceptionLabelForeground#ff00ff
debugView.stateLabelBackground#232632
debugView.stateLabelForeground#c5c5c5
debugView.valueChangedHighlight#4BB994
descriptionForeground#91969D
diffEditor.diagonalFill#91969D60
diffEditor.insertedTextBackground#a6d66e60
diffEditor.removedTextBackground#B1405F60
dropdown.background#1E2026
dropdown.border#00000000
dropdown.foreground#c5c5c5
dropdown.listBackground#1E2026
editor.background#292D3E
editor.findMatchBackground#75cbdf30
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#75cbdf18
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#232632
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#c27c4360
editor.foldBackground#232632
editor.foreground#c5c5c5
editor.hoverHighlightBackground#292D3E
editor.inactiveSelectionBackground#33394D60
editor.lineHighlightBackground#232632
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#ff0000
editor.rangeHighlightBackground#91969D30
editor.rangeHighlightBorder#00000000
editor.selectionBackground#33394D
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#91969D30
editor.selectionHighlightBorder#00000000
editor.snippetFinalTabstopHighlightBackground#c27c4360
editor.snippetTabstopHighlightBackground#3b8ba560
editor.stackFrameHighlightBackground#3b8ba560
editor.symbolHighlightBackground#1E2026
editor.symbolHighlightBorder#75cbdf
editor.wordHighlightBackground#75cbdf30
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#e4bd6830
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#c5c5c5
editorBracketHighlight.foreground2#75cbdf
editorBracketHighlight.foreground3#e4bd68
editorBracketHighlight.foreground4#b06fd0
editorBracketHighlight.foreground5#4BB994
editorBracketHighlight.foreground6#5179ce
editorBracketHighlight.unexpectedBracket.foreground#EE4A66
editorBracketMatch.background#00000000
editorBracketMatch.border#91969D60
editorCodeLens.foreground#e4bd68
editorCursor.background#1E2026
editorCursor.foreground#ffffff
editorError.foreground#EE4A66
editorGroup.border#1E2026
editorGroup.dropBackground#5179ce30
editorGroup.emptyBackground#1E2026
editorGroup.focusedEmptyBorder#75cbdf
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#292D3E
editorGroupHeader.tabsBackground#292D3E
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#a6d66e
editorGutter.commentRangeForeground#ff0000
editorGutter.deletedBackground#EE4A66
editorGutter.foldingControlForeground#91969D
editorGutter.modifiedBackground#3b8ba5
editorHint.border#00000000
editorHint.foreground#e4bd68
editorHoverWidget.statusBarBackground#1E2026
editorIndentGuide.activeBackground#91969D
editorIndentGuide.background#91969D60
editorInfo.foreground#75cbdf
editorLightBulb.foreground#e4bd68
editorLightBulbAutoFix.foreground#75cbdf
editorLineNumber.activeForeground#91969D
editorLineNumber.foreground#91969D60
editorLink.activeForeground#75cbdf
editorMarkerNavigation.background#292D3E
editorOverviewRuler.addedForeground#a6d66e
editorOverviewRuler.background#1E2026
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#91969D
editorOverviewRuler.deletedForeground#B1405F
editorOverviewRuler.errorForeground#EE4A66
editorOverviewRuler.findMatchForeground#c27c43
editorOverviewRuler.infoForeground#75cbdf
editorOverviewRuler.modifiedForeground#3b8ba5
editorOverviewRuler.rangeHighlightForeground#ff0000
editorOverviewRuler.selectionHighlightForeground#91969D80
editorOverviewRuler.warningForeground#e4bd68
editorOverviewRuler.wordHighlightForeground#75cbdf60
editorOverviewRuler.wordHighlightStrongForeground#e4bd6860
editorPane.background#1E2026
editorRuler.foreground#1E2026
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000060
editorWarning.foreground#e4bd68
editorWhitespace.foreground#91969D60
editorWidget.background#292D3E
editorWidget.border#1E2026
editorWidget.foreground#c5c5c5
editorWidget.resizeBorder#75cbdf
errorForeground#EE4A66
focusBorder#00000000
foreground#c5c5c5
gitDecoration.addedResourceForeground#4BB994
gitDecoration.conflictingResourceForeground#EE4A66
gitDecoration.deletedResourceForeground#B1405F
gitDecoration.ignoredResourceForeground#91969D
gitDecoration.modifiedResourceForeground#e4bd68
gitDecoration.submoduleResourceForeground#b06fd0
gitDecoration.untrackedResourceForeground#a6d66e
icon.foreground#75cbdf
input.background#1E2026
input.border#00000000
input.foreground#ffffff
input.placeholderForeground#91969D
inputOption.activeBackground#5179ce20
inputOption.activeBorder#91969D60
inputOption.activeForeground#c5c5c5
inputValidation.errorBackground#1E2026
inputValidation.errorBorder#EE4A66
inputValidation.errorForeground#EE4A66
inputValidation.infoBackground#1E2026
inputValidation.infoBorder#75cbdf
inputValidation.infoForeground#75cbdf
inputValidation.warningBackground#1E2026
inputValidation.warningBorder#e4bd68
inputValidation.warningForeground#e4bd68
list.activeSelectionBackground#1E2026
list.activeSelectionForeground#ffffff
list.deemphasizedForeground#91969D60
list.dropBackground#e4bd6830
list.errorForeground#EE4A66
list.filterMatchBackground#4e61cc60
list.filterMatchBorder#00000000
list.focusBackground#33394D
list.focusForeground#ffffff
list.highlightForeground#e4bd68
list.hoverBackground#232632
list.hoverForeground#ffffff
list.inactiveFocusBackground#33394D60
list.inactiveSelectionBackground#232632
list.inactiveSelectionForeground#c5c5c5
list.invalidItemForeground#EE4A66
list.warningForeground#e4bd68
listFilterWidget.background#1E2026
listFilterWidget.noMatchesOutline#EE4A66
listFilterWidget.outline#75cbdf
menubar.selectionBackground#232632
menubar.selectionForeground#ffffff
merge.border#1e2026
merge.commonContentBackground#a6d66e30
merge.commonHeaderBackground#a6d66e60
merge.currentContentBackground#75cbdf30
merge.currentHeaderBackground#75cbdf60
merge.incomingContentBackground#e4bd6830
merge.incomingHeaderBackground#e4bd6860
minimap.background#1E2026
minimap.errorHighlight#EE4A66
minimap.findMatchHighlight#c27c43
minimap.selectionHighlight#91969D60
minimap.warningHighlight#e4bd68
minimapGutter.addedBackground#a6d66e
minimapGutter.deletedBackground#B1405F
minimapGutter.modifiedBackground#3b8ba5
minimapSlider.activeBackground#91969D60
minimapSlider.background#91969D18
minimapSlider.hoverBackground#91969D30
notificationCenter.border#232632
notificationCenterHeader.background#292D3E
notificationCenterHeader.foreground#c5c5c5
notificationsErrorIcon.foreground#EE4A66
notificationsInfoIcon.foreground#75cbdf
notificationsWarningIcon.foreground#e4bd68
panel.background#292D3E
panel.border#91969D60
panel.dropBorder#75cbdf
panelInput.border#ff0000
panelSection.border#91969D60
panelSection.dropBackground#75cbdf
panelSectionHeader.background#232632
panelSectionHeader.border#ff0000
panelSectionHeader.foreground#c5c5c5
panelTitle.activeBorder#e4bd68
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#91969D
peekView.border#91969D60
peekViewEditor.background#232632
peekViewEditor.matchHighlightBackground#e4bd6860
peekViewResult.background#292D3E
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#c5c5c5
peekViewResult.matchHighlightBackground#e4bd6860
peekViewResult.selectionBackground#5179ce30
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e2026
peekViewTitleDescription.foreground#c5c5c5
peekViewTitleLabel.foreground#75cbdf
pickerGroup.border#1e2026
pickerGroup.foreground#e4bd68
progressBar.background#75cbdf
sash.hoverBorder#75cbdf
scm.providerBorder#ff0000
scrollbar.shadow#1E2026
scrollbarSlider.activeBackground#91969D
scrollbarSlider.background#91969D40
scrollbarSlider.hoverBackground#91969D80
searchEditor.findMatchBackground#75cbdf30
searchEditor.textInputBorder#75cbdf
selection.background#91969D
settings.modifiedItemIndicator#4BB994
sideBar.background#292D3E
sideBar.border#91969D00
sideBar.dropBackground#5179ce30
sideBar.foreground#c5c5c5
sideBarSectionHeader.background#232632
sideBarSectionHeader.border#292D3E
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#232632
statusBar.border#00000000
statusBar.debuggingBackground#c27c43
statusBar.debuggingForeground#ffffff
statusBar.foreground#91969D
statusBar.noFolderBackground#232632
statusBar.noFolderForeground#91969D
statusBarItem.activeBackground#91969D60
statusBarItem.errorBackground#EE4A66
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#91969D30
statusBarItem.prominentBackground#c27c43
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#e4bd68
symbolIcon.arrayForeground#c5c5c5
symbolIcon.booleanForeground#b06fd0
symbolIcon.classForeground#c27c43
symbolIcon.colorForeground#c5c5c5
symbolIcon.constantForeground#4e61cc
symbolIcon.constructorForeground#4BB994
symbolIcon.enumeratorForeground#e4bd68
symbolIcon.enumeratorMemberForeground#5179ce
symbolIcon.eventForeground#c5c5c5
symbolIcon.fieldForeground#75cbdf
symbolIcon.fileForeground#c5c5c5
symbolIcon.folderForeground#c5c5c5
symbolIcon.functionForeground#78429B
symbolIcon.interfaceForeground#5179ce
symbolIcon.keyForeground#c5c5c5
symbolIcon.keywordForeground#c5c5c5
symbolIcon.methodForeground#b06fd0
symbolIcon.moduleForeground#c5c5c5
symbolIcon.namespaceForeground#c5c5c5
symbolIcon.nullForeground#4e61cc
symbolIcon.numberForeground#b06fd0
symbolIcon.objectForeground#c5c5c5
symbolIcon.operatorForeground#5179ce
symbolIcon.packageForeground#c5c5c5
symbolIcon.propertyForeground#5179ce
symbolIcon.referenceForeground#c5c5c5
symbolIcon.snippetForeground#c5c5c5
symbolIcon.stringForeground#e4bd68
symbolIcon.structForeground#c5c5c5
symbolIcon.textForeground#c5c5c5
symbolIcon.typeParameterForeground#c5c5c5
symbolIcon.unitForeground#c5c5c5
symbolIcon.variableForeground#c27c43
tab.activeBackground#1E2026
tab.activeBorder#e4bd68
tab.activeBorderTop#e4bd6800
tab.activeForeground#ffffff
tab.border#292D3E
tab.hoverBackground#e4bd6830
tab.hoverBorder#c5c5c5
tab.hoverForeground#ffffff
tab.inactiveBackground#232632
tab.inactiveForeground#c5c5c5
tab.lastPinnedBorder#1E2026
tab.unfocusedActiveBackground#232632
tab.unfocusedActiveBorder#c27c43
tab.unfocusedActiveForeground#c5c5c5
tab.unfocusedHoverBackground#c27c4330
tab.unfocusedHoverBorder#c5c5c5
tab.unfocusedHoverForeground#c5c5c5
tab.unfocusedInactiveBackground#292D3E
tab.unfocusedInactiveForeground#91969D
terminal.ansiBlack#000000
terminal.ansiBlue#4e61cc
terminal.ansiBrightBlack#6d768f
terminal.ansiBrightBlue#5179ce
terminal.ansiBrightCyan#75cbdf
terminal.ansiBrightGreen#a6d66e
terminal.ansiBrightMagenta#b06fd0
terminal.ansiBrightRed#EE4A66
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e4bd68
terminal.ansiCyan#3b8ba5
terminal.ansiGreen#4BB994
terminal.ansiMagenta#78429B
terminal.ansiRed#B1405F
terminal.ansiWhite#91969D
terminal.ansiYellow#c27c43
terminal.selectionBackground#91969D30
textBlockQuote.background#1E2026
textBlockQuote.border#e4bd68
textCodeBlock.background#1E2026
textLink.activeForeground#75cbdf
textLink.foreground#3b8ba5
textPreformat.foreground#e4bd68
textSeparator.foreground#ff00ff
titleBar.activeBackground#292D3E
titleBar.activeForeground#c5c5c5
titleBar.border#00000000
titleBar.inactiveBackground#292D3E
titleBar.inactiveForeground#91969D
tree.indentGuidesStroke#e4bd68
widget.shadow#1E2026
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#91969D60	italic
string, string.quoted, string.other	#e4bd68	—
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.string, punctuation.definition.interpolation	#3b8ba5	—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor	#c5c5c5	—
meta.property-list, meta.block, punctuation.terminator, punctuation.section.block, meta.structure.dictionary	#75cbdf	—
constant.numeric	#b06fd0	—
constant.language	#75cbdf	—
constant.character, constant.other	#5179ce	—
variable.language	#EE4A66	—
keyword, keyword.operator.logical, keyword.operator.constructor	#EE4A66	—
keyword.operator	#EE4A66	—
storage	#EE4A66	—
storage.type	#3b8ba5	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#67a3e9	—
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block	#67a3e9	—
variable.other, variable.other.property, variable.other.block	#c5c5c5	—
entity.other.inherited-class	#67a3e9	—
storage.modifier.import, storage.modifier.package	#e4bd68	—
entity.name.function, support.function	#a6d66e	—
variable.parameter, entity.name.variable.parameter, parameter.variable	#c27c43	italic
entity.name.function-call	#ff00ff	—
function.support.builtin, function.support.core	#00ffa0	—
entity.name.tag, entity.name.tag.class.js	#EE4A66
entity.name.tag.class, entity.name.tag.id	#e4bd68	—
meta.attribute	#a6d66e	—
support.constant	#c27c43	—
support.type, support.variable	#3b8ba5	—
support.dictionary.json	#3b8ba5	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#c5c5c5	—
meta.selector	#e4bd68	italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass	#75cbdf	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#ffa000	—
variable.css, variable.scss, variable.less, variable.sass	#3b8ba5	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#e4bd68	—
unit.css, unit.scss, unit.less, unit.sass	#ff00a0	—
function.css, function.scss, function.less, function.sass	#ffa000	—
invalid	#EE4A66	—
invalid.deprecated	#B1405F	—
support.type.property-name.json	#B1405F	—
string.detected-link	#75cbdf	—
meta.diff, meta.diff.header	#00ffa0	—
markup.deleted	#EE4A66	—
markup.inserted	#a6d66e	—
markup.changed	#75cbdf	—

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