Semantic Colors

Name: Semantic Colors
Author: Sergey Bovyrin

Publisher: Sergey BovyrinThemes in package: 1

The theme is inspired by natural colors and brings semantic meaning to syntax highlighting

Open in VS Code GitHub

VS Code preview

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

Semantic Colors — Semantic Colors

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f8f6f2
activityBar.border#5a564e44
activityBar.dropBackground#37a4ae11
activityBar.foreground#37a4ae
activityBar.inactiveForeground#5a564e88
activityBarBadge.background#37a4ae
activityBarBadge.foreground#f8f6f2
badge.background#37a4ae
badge.foreground#f8f6f2
breadcrumb.activeSelectionForeground#37a4ae
breadcrumb.background#5a564e11
breadcrumb.focusForeground#37a4ae
breadcrumb.foreground#5a564eaa
breadcrumbPicker.background#f8f6f2
button.background#37a4ae
button.foreground#f8f6f2
button.hoverBackground#37a4ae88
debugExceptionWidget.background#f8f6f211
debugExceptionWidget.border#c09159
debugToolBar.background#f8f6f2
debugToolBar.border#00000000
descriptionForeground#5a564e
diffEditor.border#5a564e44
diffEditor.insertedTextBackground#88a23955
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#d58a9155
diffEditor.removedTextBorder#00000000
dropdown.background#f8f6f2
dropdown.border#5a564e44
dropdown.foreground#5a564e
dropdown.listBackground#f8f6f2
editor.background#f8f6f2
editor.findMatchBackground#88a23944
editor.findMatchBorder#88a239AA
editor.findMatchHighlightBackground#88a23944
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#88a23944
editor.findRangeHighlightBorder#00000000
editor.foreground#5a564e
editor.hoverHighlightBackground#c0915922
editor.inactiveSelectionBackground#37a4ae11
editor.lineHighlightBackground#5a564e11
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#88a23944
editor.rangeHighlightBorder#00000000
editor.selectionBackground#37a4ae44
editor.selectionForeground#5a564e
editor.selectionHighlightBackground#c0915944
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#c0915944
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#37a4ae44
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#00000000
editorBracketMatch.border#37a4ae
editorCodeLens.foreground#5a564e88
editorCursor.background#37a4ae
editorCursor.foreground#37a4ae
editorError.border#00000000
editorError.foreground#cf5454
editorGroup.border#5a564e44
editorGroup.dropBackground#37a4ae11
editorGroup.emptyBackground#f8f6f2
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#f8f6f2
editorGroupHeader.tabsBackground#f8f6f2
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#88a239
editorGutter.background#f8f6f2
editorGutter.commentRangeForeground#5a564e55
editorGutter.deletedBackground#cf5454
editorGutter.modifiedBackground#37a4ae
editorHint.border#00000000
editorHint.foreground#5a564e88
editorHoverWidget.background#f8f6f2
editorHoverWidget.border#00000000
editorIndentGuide.activeBackground#37a4ae22
editorIndentGuide.background#00000000
editorInfo.border#00000000
editorInfo.foreground#37a4ae
editorLineNumber.activeForeground#37a4ae
editorLineNumber.foreground#5a564e88
editorLink.activeForeground#37a4ae
editorMarkerNavigation.background#f8f6f2
editorMarkerNavigationError.background#cf5454
editorMarkerNavigationInfo.background#37a4ae
editorMarkerNavigationWarning.background#c09159
editorOverviewRuler.addedForeground#88a239
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#37a4ae
editorOverviewRuler.commonContentForeground#37a4aeAA
editorOverviewRuler.currentContentForeground#5a564eAA
editorOverviewRuler.deletedForeground#5a564eAA
editorOverviewRuler.errorForeground#cf5454
editorOverviewRuler.findMatchForeground#88a239AA
editorOverviewRuler.incomingContentForeground#88a239AA
editorOverviewRuler.infoForeground#37a4ae
editorOverviewRuler.modifiedForeground#37a4aeAA
editorOverviewRuler.rangeHighlightForeground#88a23944
editorOverviewRuler.selectionHighlightForeground#c09159AA
editorOverviewRuler.warningForeground#c09159
editorOverviewRuler.wordHighlightForeground#c09159AA
editorOverviewRuler.wordHighlightStrongForeground#37a4aeAA
editorPane.background#f8f6f2
editorRuler.foreground#5a564e11
editorSuggestWidget.background#f8f6f2
editorSuggestWidget.border#00000000
editorSuggestWidget.foreground#5a564e
editorSuggestWidget.highlightForeground#37a4ae
editorSuggestWidget.selectedBackground#5a564e11
editorUnnecessaryCode.border#cf5454
editorUnnecessaryCode.opacity#5a564e
editorWarning.border#00000000
editorWarning.foreground#c09159
editorWhitespace.foreground#5a564e11
editorWidget.background#f8f6f2
editorWidget.border#37a4ae
editorWidget.resizeBorder#37a4ae
errorForeground#cf5454
extensionButton.prominentBackground#37a4ae
extensionButton.prominentForeground#f8f6f2
extensionButton.prominentHoverBackground#37a4ae88
focusBorder#37a4ae99
foreground#5a564e
gitDecoration.addedResourceForeground#88a239
gitDecoration.conflictingResourceForeground#d58a91
gitDecoration.deletedResourceForeground#cf5454
gitDecoration.ignoredResourceForeground#5a564e88
gitDecoration.modifiedResourceForeground#37a4ae
gitDecoration.submoduleResourceForeground#5a564e
gitDecoration.untrackedResourceForeground#88a239
gitlens.gutterBackgroundColor#f8f6f2
gitlens.gutterForegroundColor#5a564e88
gitlens.gutterUncommittedForegroundColor#37a4ae
gitlens.lineHighlightBackgroundColor#88a23933
gitlens.lineHighlightOverviewRulerColor#37a4ae
gitlens.trailingLineBackgroundColor#c0915933
gitlens.trailingLineForegroundColor#c09159
input.background#f8f6f2
input.border#5a564e33
input.foreground#5a564e
input.placeholderForeground#5a564e88
inputOption.activeBorder#37a4ae
inputValidation.errorBackground#f8f6f2
inputValidation.errorBorder#cf5454
inputValidation.errorForeground#cf5454
inputValidation.infoBackground#f8f6f2
inputValidation.infoBorder#37a4ae
inputValidation.infoForeground#37a4ae
inputValidation.warningBackground#f8f6f2
inputValidation.warningBorder#c09159
inputValidation.warningForeground#c09159
list.activeSelectionBackground#5a564e11
list.activeSelectionForeground#5a564e
list.dropBackground#37a4ae33
list.errorForeground#cf5454
list.focusBackground#5a564e11
list.focusForeground#5a564e
list.highlightForeground#37a4ae
list.hoverBackground#5a564e11
list.hoverForeground#5a564e
list.inactiveFocusBackground#00000000
list.inactiveSelectionBackground#00000000
list.inactiveSelectionForeground#5a564e
list.invalidItemForeground#cf5454
list.warningForeground#c09159
listFilterWidget.background#37a4ae44
listFilterWidget.noMatchesOutline#c0915988
listFilterWidget.outline#37a4ae44
menu.background#f8f6f2
menu.foreground#5a564e
menu.selectionBackground#37a4ae55
menu.selectionBorder#5a564e44
menu.selectionForeground#5a564e
menu.separatorBackground#5a564e11
menubar.selectionBackground#37a4ae55
menubar.selectionBorder#5a564e44
menubar.selectionForeground#5a564e
merge.border#5a564e22
merge.commonContentBackground#37a4ae33
merge.commonHeaderBackground#37a4ae66
merge.currentContentBackground#5a564e44
merge.currentHeaderBackground#5a564e88
merge.incomingContentBackground#88a23933
merge.incomingHeaderBackground#88a23966
notificationCenter.border#5a564e22
notificationCenterHeader.background#f8f6f2
notificationCenterHeader.foreground#5a564e
notificationLink.foreground#37a4ae
notifications.background#f8f6f2
notifications.border#5a564e11
notifications.foreground#5a564e
notificationToast.border#5a564e11
panel.background#f8f6f2
panel.border#5a564e44
panel.dropBackground#37a4ae11
panelTitle.activeBorder#37a4ae
panelTitle.activeForeground#5a564e
panelTitle.inactiveForeground#5a564e88
peekView.border#5a564e11
peekViewEditor.background#f8f6f2
peekViewEditor.matchHighlightBackground#88a23944
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#f8f6f2
peekViewResult.background#f8f6f2
peekViewResult.fileForeground#5a564e
peekViewResult.lineForeground#5a564e
peekViewResult.matchHighlightBackground#4b9b8044
peekViewResult.selectionBackground#37a4ae22
peekViewResult.selectionForeground#5a564e
peekViewTitle.background#f8f6f2
peekViewTitleDescription.foreground#5a564eBB
peekViewTitleLabel.foreground#5a564e
pickerGroup.border#5a564e44
pickerGroup.foreground#5a564e
progressBar.background#37a4ae
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#37a4ae88
scrollbarSlider.background#5a564e22
scrollbarSlider.hoverBackground#5a564e44
selection.background#37a4ae55
settings.checkboxBackground#f8f6f2
settings.checkboxBorder#5a564e44
settings.checkboxForeground#37a4ae
settings.dropdownBackground#f8f6f2
settings.dropdownBorder#5a564e44
settings.dropdownForeground#5a564e
settings.dropdownListBorder#5a564e44
settings.headerForeground#5a564e
settings.modifiedItemIndicator#37a4ae
settings.numberInputBackground#f8f6f2
settings.numberInputBorder#5a564e44
settings.numberInputForeground#5a564e
settings.textInputBackground#f8f6f2
settings.textInputBorder#5a564e44
settings.textInputForeground#5a564e
sideBar.background#f8f6f2
sideBar.border#5a564e44
sideBar.dropBackground#37a4ae33
sideBar.foreground#5a564e
sideBarSectionHeader.background#f8f6f2
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#5a564e
sideBarTitle.foreground#00000000
statusBar.background#f8f6f2
statusBar.border#00000000
statusBar.debuggingBackground#f8f6f2
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#5a564e
statusBar.foreground#5a564e
statusBar.noFolderBackground#f8f6f2
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#5a564e
statusBarItem.activeBackground#5a564e11
statusBarItem.hostBackground#4b9b8088
statusBarItem.hoverBackground#5a564e22
statusBarItem.prominentBackground#f8f6f2
statusBarItem.prominentHoverBackground#5a564e22
tab.activeBackground#f8f6f2
tab.activeBorder#37a4ae
tab.activeBorderTop#00000000
tab.activeForeground#5a564e
tab.activeModifiedBorder#c09159
tab.border#00000000
tab.hoverBackground#f8f6f2
tab.hoverBorder#37a4ae
tab.inactiveBackground#f8f6f2
tab.inactiveForeground#5a564e66
tab.inactiveModifiedBorder#c09159
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#5a564e
tab.unfocusedActiveModifiedBorder#c09159
tab.unfocusedHoverBackground#f8f6f2
tab.unfocusedHoverBorder#37a4ae
tab.unfocusedInactiveForeground#5a564e66
tab.unfocusedInactiveModifiedBorder#c09159
terminal.ansiBlack#5a564e
terminal.ansiBlue#37a4ae
terminal.ansiBrightBlack#5a564e
terminal.ansiBrightBlue#37a4ae
terminal.ansiBrightCyan#37a4ae
terminal.ansiBrightGreen#88a239
terminal.ansiBrightMagenta#d58a91
terminal.ansiBrightRed#cf5454
terminal.ansiBrightWhite#f8f6f2
terminal.ansiBrightYellow#c09159
terminal.ansiCyan#37a4ae
terminal.ansiGreen#88a239
terminal.ansiMagenta#d58a91
terminal.ansiRed#cf5454
terminal.ansiWhite#f8f6f2
terminal.ansiYellow#c09159
terminal.background#f8f6f2
terminal.border#5a564e44
terminal.foreground#5a564e
terminal.selectionBackground#37a4ae55
terminalCursor.background#f8f6f2
terminalCursor.foreground#37a4ae
textBlockQuote.background#d58a9155
textBlockQuote.border#5a564e22
textCodeBlock.background#f8f6f2
textLink.activeForeground#37a4ae
textLink.foreground#37a4ae
textPreformat.foreground#5a564e
textSeparator.foreground#5a564e88
titleBar.activeBackground#f8f6f2
titleBar.activeForeground#5a564e
titleBar.border#5a564e22
titleBar.inactiveBackground#f8f6f2
titleBar.inactiveForeground#5a564e88
walkThrough.embeddedEditorBackground#f8f6f2
welcomePage.background#f8f6f2
welcomePage.buttonBackground#37a4ae
welcomePage.buttonHoverBackground#37a4ae88
widget.shadow#5a564e44

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#cf5454	—
comment, comment punctuation, comment entity, comment string, comment meta.link string, comment keyword, comment storage, comment support, comment constant, comment constant.language, comment variable, comment markup storage, comment meta.tag entity, comment meta.tag entity.other	#5a564e99	italic
text, constant, entity, variable, punctuation, support, support.constant, meta.class support.class, meta.var support.class, meta.var support.constant, meta.import constant.language, meta.tag entity.other, meta.selector entity.other, string, string.regexp constant, meta.property-value constant.other.color, markup.quote	#5a564e	—
entity.name.function, meta.function support, meta.function-call support, meta.tag entity support.class, meta.method.declaration storage, markup meta.link, source.shell support.function	#37a4ae	—
keyword, storage, constant.language, markup.raw, markup.inline.raw, string meta.template punctuation, keyword punctuation, meta.tag entity, meta.property-value support.constant, source.shell string.interpolated punctuation, support.type.property-name.json	#c09159	—
meta.type support, meta.type entity, meta.type string, meta.type meta.brace, meta.return.type entity, meta.return.type support, meta.other.type keyword, meta.other.type support, meta.other.type support.class, meta.function storage.type.php, comment entity.name.type	#d58a91	—
markup.italic, string, string.regexp	—	italic
constant.character, markup.heading, markup.bold, meta.selector entity, meta.property-value keyword.other.important	—	bold
comment storage, comment keyword	—	italic bold
markup meta.link	—	italic underline
comment markup storage	—

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