Shale Theme

Name: Shale Theme
Author: mullakhmetov

Publisher: mullakhmetovThemes in package: 1

Dark theme inspired by Alabaster minimalism and Nord color scheme.

Open in VS Code GitHub

VS Code preview

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

Shale Theme — Shale

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.background#2e3440
activityBar.dropBackground#3b4252
activityBar.foreground#d8dee9
activityBarBadge.background#88c0d0
activityBarBadge.foreground#2e3440
badge.background#88c0d0
badge.foreground#2e3440
button.background#434c5e
button.foreground#d8dee9
button.hoverBackground#4c566a
debugExceptionWidget.background#4c566a
debugExceptionWidget.border#2e3440
debugToolBar.background#3b4252
descriptionForeground#d8dee9e6
diffEditor.insertedTextBackground#81a1c133
diffEditor.removedTextBackground#bf616a4d
dropdown.background#3b4252
dropdown.border#3b4252
dropdown.foreground#d8dee9
editor.background#2e3440
editor.findMatchBackground#88c0d066
editor.findMatchHighlightBackground#88c0d066
editor.findRangeHighlightBackground#88c0d066
editor.foreground#d8dee9
editor.hoverHighlightBackground#3b4252
editor.lineHighlightBackground#3b425249
editor.lineHighlightBorder#3b425249
editor.rangeHighlightBackground#434c5e52
editor.selectionBackground#81a1c166
editor.wordHighlightBackground#81a1c166
editor.wordHighlightStrongBackground#81a1c166
editorBracketMatch.background#2e344000
editorBracketMatch.border#88c0d0
editorCodeLens.foreground#4c566a
editorCursor.foreground#d8dee9
editorError.border#bf616a00
editorError.foreground#bf616a
editorGroup.border#3b425201
editorGroup.dropBackground#3b425299
editorGroupHeader.noTabsBackground#2e3440
editorGroupHeader.tabsBackground#2e3440
editorGroupHeader.tabsBorder#3b425200
editorGutter.addedBackground#a3be8c
editorGutter.background#2e3440
editorGutter.deletedBackground#bf616a
editorGutter.modifiedBackground#ebcb8b
editorHint.border#ebcb8b00
editorHint.foreground#ebcb8b
editorHoverWidget.background#3b4252
editorHoverWidget.border#3b4252
editorIndentGuide.activeBackground#4c566a
editorIndentGuide.background#434c5eb3
editorLineNumber.activeForeground#d8dee9
editorLineNumber.foreground#4c566a
editorLink.activeForeground#88c0d0
editorMarkerNavigation.background#5e81acc0
editorMarkerNavigationError.background#bf616ac0
editorMarkerNavigationWarning.background#ebcb8bc0
editorOverviewRuler.addedForeground#a3be8c
editorOverviewRuler.border#3b4252
editorOverviewRuler.currentContentForeground#3b4252
editorOverviewRuler.deletedForeground#bf616a
editorOverviewRuler.errorForeground#bf616a
editorOverviewRuler.findMatchForeground#88c0d066
editorOverviewRuler.incomingContentForeground#3b4252
editorOverviewRuler.infoForeground#81a1c1
editorOverviewRuler.modifiedForeground#ebcb8b
editorOverviewRuler.rangeHighlightForeground#88c0d066
editorOverviewRuler.selectionHighlightForeground#88c0d066
editorOverviewRuler.warningForeground#ebcb8b
editorOverviewRuler.wordHighlightForeground#88c0d066
editorOverviewRuler.wordHighlightStrongForeground#88c0d066
editorRuler.foreground#434c5e
editorSuggestWidget.background#2e3440
editorSuggestWidget.border#3b4252
editorSuggestWidget.foreground#d8dee9
editorSuggestWidget.highlightForeground#88c0d0
editorSuggestWidget.selectedBackground#434c5e
editorWarning.border#ebcb8b00
editorWarning.foreground#ebcb8b
editorWhitespace.foreground#4c566ab3
editorWidget.background#2e3440
editorWidget.border#3b4252
errorForeground#bf616a
extensionButton.prominentBackground#434c5e
extensionButton.prominentForeground#d8dee9
extensionButton.prominentHoverBackground#4c566a
focusBorder#3b4252
foreground#d8dee9
gitDecoration.conflictingResourceForeground#5e81ac
gitDecoration.deletedResourceForeground#bf616a
gitDecoration.ignoredResourceForeground#d8dee966
gitDecoration.modifiedResourceForeground#ebcb8b
gitDecoration.submoduleResourceForeground#8fbcbb
gitDecoration.untrackedResourceForeground#a3be8c
input.background#3b4252
input.border#3b4252
input.foreground#d8dee9
input.placeholderForeground#d8dee999
inputOption.activeBorder#5e81ac
inputValidation.errorBackground#bf616a
inputValidation.errorBorder#bf616a
inputValidation.infoBackground#81a1c1
inputValidation.infoBorder#81a1c1
inputValidation.warningBackground#d08770
inputValidation.warningBorder#d08770
list.activeSelectionBackground#434c5e
list.activeSelectionForeground#d8dee9
list.dropBackground#88c0d099
list.errorForeground#bf616a
list.focusBackground#88c0d099
list.focusForeground#d8dee9
list.highlightForeground#88c0d0
list.hoverBackground#3b4252
list.hoverForeground#eceff4
list.inactiveFocusBackground#434c5ecc
list.inactiveSelectionBackground#434c5e
list.inactiveSelectionForeground#d8dee9
list.warningForeground#ebcb8b
merge.border#3b425200
merge.currentContentBackground#81a1c14d
merge.currentHeaderBackground#81a1c166
merge.incomingContentBackground#8fbcbb4d
merge.incomingHeaderBackground#8fbcbb66
notificationCenter.border#3b425200
notificationCenterHeader.background#2e3440
notificationCenterHeader.foreground#88c0d0
notificationLink.foreground#88c0d0
notifications.background#3b4252
notifications.border#2e3440
notifications.foreground#d8dee9
notificationToast.border#3b425200
panel.background#2e3440
panel.border#3b4252
panelTitle.activeBorder#88c0d000
panelTitle.activeForeground#88c0d0
panelTitle.inactiveForeground#d8dee9
peekView.border#4c566a
peekViewEditor.background#2e3440
peekViewEditor.matchHighlightBackground#434c5e
peekViewEditorGutter.background#2e3440
peekViewResult.background#2e3440
peekViewResult.fileForeground#88c0d0
peekViewResult.lineForeground#d8dee966
peekViewResult.matchHighlightBackground#434c5e
peekViewResult.selectionBackground#3b4252
peekViewResult.selectionForeground#d8dee9
peekViewTitle.background#3b4252
peekViewTitleDescription.foreground#d8dee9
peekViewTitleLabel.foreground#88c0d0
pickerGroup.border#3b4252
pickerGroup.foreground#88c0d0
progressBar.background#88c0d0
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#434c5eaa
scrollbarSlider.background#434c5e99
scrollbarSlider.hoverBackground#434c5eaa
selection.background#88c0d099
sideBar.background#2e3440
sideBar.border#3b4252
sideBar.foreground#d8dee9
sideBarSectionHeader.background#3b4252
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#3b4252
statusBar.border#3b425200
statusBar.debuggingBackground#5e81ac
statusBar.debuggingForeground#d8dee9
statusBar.foreground#d8dee9
statusBar.noFolderBackground#3b4252
statusBar.noFolderForeground#d8dee9
statusBarItem.activeBackground#4c566a
statusBarItem.hoverBackground#434c5e
statusBarItem.prominentBackground#3b4252
statusBarItem.prominentHoverBackground#434c5e
tab.activeBackground#3b4252
tab.activeBorder#88c0d000
tab.activeForeground#d8dee9
tab.border#3b425200
tab.hoverBackground#3b4252cc
tab.hoverBorder#88c0d000
tab.inactiveBackground#2e3440
tab.inactiveForeground#d8dee966
tab.unfocusedHoverBackground#3b4252b3
terminal.ansiBlack#3b4252
terminal.ansiBlue#81a1c1
terminal.ansiBrightBlack#4c566a
terminal.ansiBrightBlue#81a1c1
terminal.ansiBrightCyan#8fbcbb
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#b48ead
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#eceff4
terminal.ansiBrightYellow#ebcb8b
terminal.ansiCyan#88c0d0
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ebcb8b
terminal.background#2e3440
terminal.foreground#d8dee9
textBlockQuote.background#3b4252
textBlockQuote.border#81a1c1
textCodeBlock.background#4c566a
textLink.activeForeground#88c0d0
textLink.foreground#88c0d0
textPreformat.foreground#8fbcbb
textSeparator.foreground#eceff4
titleBar.activeBackground#2e3440
titleBar.activeForeground#d8dee9
titleBar.border#2e344000
titleBar.inactiveBackground#2e3440
titleBar.inactiveForeground#d8dee966
walkThrough.embeddedEditorBackground#2e3440
welcomePage.buttonBackground#434c5e
welcomePage.buttonHoverBackground#4c566a
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b48ead	—
string, string.regexp, constant.other.symbol	#A3BE8C	—
constant.character.escape	#EBCB8B	—
constant.numeric, constant.character, constant.keyword, constant	#EBCB8B	—
entity.name	#88C0D0	—
punctuation	#ECEFF4	—
invalid	#D8DEE9	—
meta.diff.range, meta.diff.index, meta.separator	#8FBCBB	—
meta.diff.header.from-file	#8FBCBB	—
meta.diff.header.to-file	#8FBCBB	—

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