IBM Carbon Design System Theme

Name: IBM Carbon Design System Theme
Author: achkasov

Publisher: achkasovThemes in package: 8

Color theme based on IBM Carbon Design System

GitHub

Color themes

VS Code preview

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

IBM Carbon Design System Theme — IBM Carbon Gray 10

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#393939
activityBar.activeBackground#ffffff
activityBar.activeBorder#0f62fe
activityBar.activeFocusBorder#0f62fe
activityBar.background#f4f4f4
activityBar.border#c6c6c6
activityBar.foreground#161616
activityBar.inactiveForeground#525252
activityBarBadge.background#0043ce
activityBarBadge.foreground#f4f4f4
activityBarTop.activeBackground#ffffff
activityBarTop.activeBorder#0f62fe
activityBarTop.background#ffffff
activityBarTop.foreground#161616
activityBarTop.inactiveForeground#525252
badge.background#0043ce
badge.foreground#f4f4f4
banner.iconForeground#4589ff
breadcrumb.activeSelectionForeground#161616
breadcrumb.background#f4f4f4
breadcrumb.focusForeground#0043ce
breadcrumb.foreground#0f62fe
button.background#0f62fe
button.foreground#f4f4f4
button.hoverBackground#0353e9
button.secondaryBackground#393939
button.secondaryForeground#f4f4f4
button.secondaryHoverBackground#4c4c4c
checkbox.background#ffffff
checkbox.border#8d8d8d
checkbox.foreground#161616
checkbox.selectBackground#ffffff
checkbox.selectBorder#0f62fe
commentsView.resolvedIcon#f4f4f425
commentsView.unresolvedIcon#ffffff
debugConsoleInputIcon.foreground#e0e0e0
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#e0e0e0
debugIcon.breakpointCurrentStackframeForeground#f1c21b
debugIcon.breakpointDisabledForeground#f4f4f425
debugIcon.breakpointForeground#ff8389
debugIcon.breakpointStackframeForeground#42be65
debugIcon.breakpointUnverifiedForeground#f1c21b
debugIcon.continueForeground#4589ff
debugIcon.disconnectForeground#ff8389
debugIcon.pauseForeground#4589ff
debugIcon.restartForeground#42be65
debugIcon.startForeground#42be65
debugIcon.stepBackForeground#4589ff
debugIcon.stepIntoForeground#4589ff
debugIcon.stepOutForeground#4589ff
debugIcon.stepOverForeground#4589ff
debugIcon.stopForeground#ff8389
debugToolBar.background#ffffff
debugToolBar.border#e0e0e0
diffEditor.border#c6c6c6
diffEditor.insertedTextBackground#0f62fe1e
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#da1e281e
diffEditor.removedTextBorder#00000000
dropdown.background#ffffff
dropdown.border#e0e0e0
dropdown.foreground#161616
dropdown.listBackground#ffffff
editor.background#f4f4f4
editor.findMatchBackground#0f62fe80
editor.findMatchHighlightBackground#8d8d8d80
editor.findMatchHighlightBorder#8d8d8d
editor.findRangeHighlightBackground#8d8d8d1e
editor.foldBackground#8d8d8d80
editor.foreground#161616
editor.hoverHighlightBackground#8d8d8d00
editor.inactiveSelectionBackground#8d8d8d1e
editor.lineHighlightBackground#8d8d8d1e
editor.lineHighlightBorder#ff000000
editor.rangeHighlightBackground#8d8d8d80
editor.rangeHighlightBorder#ff000000
editor.selectionBackground#0f62fe80
editor.selectionForeground#f4f4f4
editor.selectionHighlightBackground#8d8d8d1e
editor.selectionHighlightBorder#8d8d8d80
editor.wordHighlightBackground#8d8d8d00
editor.wordHighlightStrongBackground#8d8d8d1e
editor.wordHighlightStrongBorder#0f62fe
editorBracketMatch.background#8d8d8d1e
editorBracketMatch.border#8d8d8d80
editorCodeLens.foreground#1616161e
editorCursor.background#161616
editorCursor.foreground#0f62fe
editorError.background#00000000
editorError.foreground#da1e28
editorGroup.border#c6c6c6
editorGroup.emptyBackground#ffffff
editorGroupHeader.border#c6c6c600
editorGroupHeader.noTabsBackground#ffffff
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#e0e0e0
editorGutter.addedBackground#42be65
editorGutter.background#f4f4f4
editorGutter.commentRangeForeground#6f6f6f
editorGutter.deletedBackground#ffb3b8
editorGutter.foldingControlForeground#6f6f6f
editorGutter.modifiedBackground#f1c21b
editorHoverWidget.background#ffffff
editorHoverWidget.border#e0e0e0
editorHoverWidget.foreground#161616
editorHoverWidget.highlightForeground#0f62fe
editorHoverWidget.statusBarBackground#ffffff
editorIndentGuide.activeBackground1#c6c6c6
editorIndentGuide.background1#e0e0e001
editorInfo.background#00000000
editorInfo.foreground#f1c21b
editorInlayHint.background#8d8d8d1e
editorInlayHint.foreground#a8a8a8
editorLineNumber.activeForeground#161616
editorLineNumber.foreground#8d8d8d80
editorLink.activeForeground#0043ce
editorMarkerNavigation.background#393939
editorMarkerNavigationError.background#da1e28
editorMarkerNavigationInfo.background#0043ce
editorMarkerNavigationWarning.background#f1c21b
editorOverviewRuler.background#8d8d8d00
editorOverviewRuler.border#39393900
editorRuler.foreground#525252
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#e0e0e0
editorSuggestWidget.focusHighlightForeground#0043ce
editorSuggestWidget.foreground#525252
editorSuggestWidget.highlightForeground#0f62fe
editorSuggestWidget.selectedBackground#e0e0e0
editorSuggestWidget.selectedForeground#161616
editorSuggestWidget.selectedIconForeground#161616
editorSuggestWidgetStatus.foreground#161616
editorWarning.foreground#f1c21b
editorWhitespace.foreground#f4f4f480
editorWidget.background#ffffff
editorWidget.border#e0e0e0
editorWidget.foreground#161616
editorWidget.resizeBorder#0f62fe
extensionIcon.preReleaseForeground#42be65
extensionIcon.sponsorForeground#ff8389
extensionIcon.starForeground#f1c21b
extensionIcon.verifiedForeground#4589ff
focusBorder#0f62fe
foreground#525252
gitDecoration.addedResourceForeground#161616
gitDecoration.conflictingResourceForeground#f1c21b
gitDecoration.deletedResourceForeground#da1e28
gitDecoration.ignoredResourceForeground#a8a8a8
gitDecoration.modifiedResourceForeground#161616
gitDecoration.renamedResourceForeground#161616
gitDecoration.stageDeletedResourceForeground#f1c21b
gitDecoration.stageModifiedResourceForeground#f1c21b
gitDecoration.submoduleResourceForeground#0043ce
gitDecoration.untrackedResourceForeground#a8a8a8
icon.foreground#525252
input.background#ffffff
input.border#8d8d8d
input.foreground#161616
input.placeholderForeground#6f6f6f
inputOption.activeBackground#0f62fe
inputOption.activeBorder#0f62fe
inputOption.activeForeground#f4f4f4
inputValidation.errorBorder#da1e28
list.activeSelectionBackground#8d8d8d51
list.activeSelectionForeground#161616
list.activeSelectionIconForeground#161616
list.dropBackground#8d8d8d1e
list.errorForeground#da1e28
list.focusAndSelectionOutline#ffffff00
list.focusBackground#52525200
list.focusForeground#161616
list.focusOutline#0f62fe
list.highlightForeground#161616
list.hoverBackground#8d8d8d1e
list.hoverForeground#161616
list.inactiveSelectionBackground#8d8d8d33
list.inactiveSelectionForeground#161616
list.inactiveSelectionIconForeground#161616
list.invalidItemForeground#da1e28
list.warningForeground#161616
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#da1e28
listFilterWidget.outline#a8a8a8
listFilterWidget.shadow#00000033
menu.background#ffffff
menu.border#ffffff
menu.foreground#525252
menu.selectionBackground#e8e8e8
menu.selectionBorder#e8e8e8
menu.selectionForeground#161616
menu.separatorBackground#e0e0e0
menubar.selectionBackground#8d8d8d1e
menubar.selectionBorder#ffffff00
menubar.selectionForeground#161616
merge.commonContentBackground#4d53583d
merge.commonHeaderBackground#6970773d
merge.currentContentBackground#005d5d3d
merge.currentHeaderBackground#007d793d
merge.incomingContentBackground#00539a3d
merge.incomingHeaderBackground#0072c33d
minimap.background#8d8d8d00
minimap.errorHighlight#da1e28
minimap.findMatchHighlight#8d8d8d80
minimap.infoHighlight#0043ce
minimap.selectionHighlight#0f62fe80
minimap.selectionOccurrenceHighlight#8d8d8d80
minimap.warningHighlight#f1c21b
minimapGutter.addedBackground#24a148
minimapGutter.deletedBackground#da1e28
minimapGutter.modifiedBackground#f1c21b
minimapSlider.activeBackground#8d8d8d66
minimapSlider.background#8d8d8d3d
minimapSlider.hoverBackground#8d8d8d28
notebookStatusErrorIcon.foreground#ff8389
notebookStatusRunningIcon.foreground#ffffff
notebookStatusSuccessIcon.foreground#42be65
notificationCenter.border#c6c6c6
notificationCenterHeader.background#f4f4f4
notificationCenterHeader.foreground#161616
notificationLink.foreground#78a9ff
notifications.background#ffffff
notifications.border#e0e0e0
notifications.foreground#161616
notificationsErrorIcon.foreground#da1e28
notificationsInfoIcon.foreground#0043ce
notificationsWarningIcon.foreground#f1c21b
notificationToast.border#e0e0e0
panel.background#ffffff
panel.border#c6c6c6
panelSection.border#8d8d8d66
panelTitle.activeBorder#0f62fe
panelTitle.activeForeground#161616
panelTitle.inactiveForeground#525252
peekView.border#0f62fe
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#8d8d8d1e
peekViewEditor.matchHighlightBorder#8d8d8d80
peekViewEditorGutter.background#ffffff
peekViewResult.background#ffffff
peekViewResult.fileForeground#525252
peekViewResult.lineForeground#525252
peekViewResult.matchHighlightBackground#16161600
peekViewResult.selectionBackground#8d8d8d51
peekViewResult.selectionForeground#161616
peekViewTitle.background#0f62fe
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#f4f4f4
pickerGroup.border#e0e0e0
pickerGroup.foreground#161616
ports.iconRunningProcessForeground#369432
progressBar.background#0f62fe
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#8d8d8d66
scrollbarSlider.background#8d8d8d3d
scrollbarSlider.hoverBackground#8d8d8d28
selection.background#0f62fe
settings.checkboxBackground#ffffff
settings.checkboxBorder#8d8d8d
settings.checkboxForeground#161616
settings.dropdownBackground#ffffff
settings.dropdownBorder#e0e0e0
settings.dropdownForeground#161616
settings.dropdownListBorder#e0e0e0
settings.focusedRowBackground#8d8d8d3d
settings.focusedRowBorder#52525200
settings.headerBorder#8d8d8d00
settings.headerForeground#161616
settings.modifiedItemIndicator#0f62fe
settings.numberInputBackground#ffffff
settings.numberInputBorder#8d8d8d
settings.numberInputForeground#161616
settings.rowHoverBackground#8d8d8d1e
settings.sashBorder#e0e0e0
settings.settingsHeaderHoverForeground#161616
settings.textInputBackground#ffffff
settings.textInputBorder#8d8d8d
settings.textInputForeground#161616
sideBar.background#ffffff
sideBar.border#c6c6c6
sideBar.dropBackground#8d8d8d
sideBar.foreground#525252
sideBarActivityBarTop.border#e0e0e0
sideBarSectionHeader.background#e0e0e000
sideBarSectionHeader.border#e0e0e0
sideBarSectionHeader.foreground#161616
sideBarTitle.background#16161600
sideBarTitle.foreground#161616
sideBySideEditor.verticalBorder#c6c6c6
statusBar.background#161616
statusBar.border#161616
statusBar.debuggingBackground#a2191f
statusBar.debuggingBorder#fa4d56
statusBar.debuggingForeground#ffd7d9
statusBar.foreground#e0e0e0
statusBar.noFolderBackground#6929c4
statusBar.noFolderBorder#a56eff
statusBar.noFolderForeground#e8daff
statusBarItem.activeBackground#ffffff66
statusBarItem.compactHoverBackground#6f6f6f66
statusBarItem.errorBackground#da1e28
statusBarItem.errorForeground#ffffff
statusBarItem.errorHoverBackground#ba1b23
statusBarItem.errorHoverForeground#f4f4f4
statusBarItem.focusBorder#f4f4f4
statusBarItem.hoverBackground#6f6f6f66
statusBarItem.hoverForeground#ffffff
statusBarItem.offlineBackground#f1c21b
statusBarItem.offlineForeground#ffffff
statusBarItem.offlineHoverBackground#ff832b
statusBarItem.offlineHoverForeground#d0e2ff
statusBarItem.prominentBackground#0f62fe
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#0353e9
statusBarItem.prominentHoverForeground#f4f4f4
statusBarItem.remoteBackground#0f62fe00
statusBarItem.remoteForeground#78a9ff
statusBarItem.remoteHoverBackground#8d8d8d28
statusBarItem.remoteHoverForeground#a6c8ff
statusBarItem.warningBackground#f1c21b
statusBarItem.warningForeground#ffffff
statusBarItem.warningHoverBackground#ff832b
statusBarItem.warningHoverForeground#f4f4f4
symbolIcon.arrayForeground#525252
symbolIcon.booleanForeground#525252
symbolIcon.classForeground#525252
symbolIcon.colorForeground#525252
symbolIcon.constantForeground#525252
symbolIcon.constructorForeground#525252
symbolIcon.enumeratorForeground#525252
symbolIcon.enumeratorMemberForeground#525252
symbolIcon.eventForeground#525252
symbolIcon.fieldForeground#525252
symbolIcon.fileForeground#525252
symbolIcon.folderForeground#525252
symbolIcon.functionForeground#525252
symbolIcon.interfaceForeground#525252
symbolIcon.keyForeground#525252
symbolIcon.keywordForeground#525252
symbolIcon.methodForeground#525252
symbolIcon.moduleForeground#525252
symbolIcon.namespaceForeground#525252
symbolIcon.nullForeground#525252
symbolIcon.numberForeground#525252
symbolIcon.objectForeground#525252
symbolIcon.operatorForeground#525252
symbolIcon.packageForeground#525252
symbolIcon.propertyForeground#525252
symbolIcon.referenceForeground#525252
symbolIcon.snippetForeground#525252
symbolIcon.stringForeground#525252
symbolIcon.structForeground#525252
symbolIcon.textForeground#525252
symbolIcon.typeParameterForeground#525252
symbolIcon.unitForeground#525252
symbolIcon.variableForeground#525252
tab.activeBackground#f4f4f4
tab.activeBorder#f4f4f4
tab.activeBorderTop#0f62fe
tab.activeForeground#161616
tab.border#e0e0e0
tab.hoverBackground#cacaca
tab.hoverBorder#8d8d8d00
tab.hoverForeground#161616
tab.inactiveBackground#e0e0e0
tab.inactiveForeground#525252
tab.lastPinnedBorder#e0e0e0
tab.unfocusedActiveBorder#f4f4f4
tab.unfocusedActiveBorderTop#e0e0e0
tab.unfocusedActiveForeground#161616
tab.unfocusedHoverBackground#8d8d8d28
tab.unfocusedHoverBorder#6f6f6f
terminal.ansiBlack#525252
terminal.ansiBlue#4589ff
terminal.ansiBrightBlack#525252
terminal.ansiBrightBlue#d0e2ff
terminal.ansiBrightCyan#9ef0f0
terminal.ansiBrightGreen#a7f0ba
terminal.ansiBrightMagenta#e8daff
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#f4f4f4
terminal.ansiBrightYellow#f1c21b
terminal.ansiCyan#009d9a
terminal.ansiGreen#24a148
terminal.ansiMagenta#a56eff
terminal.ansiRed#da1e28
terminal.ansiWhite#ffffff
terminal.ansiYellow#ff832b
terminal.background#ffffff
terminal.border#c6c6c6
terminal.foreground#525252
terminal.inactiveSelectionBackground#3a3d41
terminal.selectionBackground#0f62fe80
terminalCursor.foreground#0f62fe
testing.iconErrored#ff8389
testing.iconErrored.retired#da1e28
testing.iconFailed#ff8389
testing.iconFailed.retired#da1e28
testing.iconPassed#42be65
testing.iconPassed.retired#24a148
testing.iconQueued#f1c21b
testing.iconQueued.retired#f1c21b
testing.iconSkipped#f4f4f425
testing.iconSkipped.retired#f4f4f425
testing.iconUnset#f4f4f425
testing.iconUnset.retired#f4f4f425
textLink.activeForeground#0043ce
textLink.foreground#0f62fe
titleBar.activeBackground#f4f4f4
titleBar.activeForeground#525252
titleBar.border#c6c6c6
titleBar.inactiveBackground#f4f4f4
titleBar.inactiveForeground#6f6f6f
tree.indentGuidesStroke#39393900
walkThrough.embeddedEditorBackground#00000050
welcomePage.background#f4f4f4
welcomePage.progress.background#e0e0e0
welcomePage.progress.foreground#0f62fe
welcomePage.tileBackground#ffffff
welcomePage.tileBorder#e0e0e0
welcomePage.tileHoverBackground#e8e8e8
widget.border#e0e0e0
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#161616	—
emphasis	—	italic
strong	—	bold
header	#6929c4	—
comment	#161616	—
constant.language	#161616	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#161616	—
constant.regexp	#161616	—
entity.name.tag	#0043ce	—
entity.name.tag.css, entity.name.tag.less	#0043ce	—
entity.other.attribute-name	#007d79	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#6929c4	—
invalid	#da1e28	—
markup.underline	—	underline
markup.bold	#525252	bold
markup.heading	#0043ce	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#161616	—
markup.deleted	#c6c6c6	—
markup.changed	#000000	—
punctuation.definition.quote.begin.markdown	#9f1853	—
punctuation.definition.list.begin.markdown	#007d79	—
markup.inline.raw	#9f1853	—
punctuation.definition.tag	#0043ce	—
meta.preprocessor, entity.name.function.preprocessor	#007d79	—
meta.preprocessor.string	#9f1853	—
meta.preprocessor.numeric	#161616	—
meta.structure.dictionary.key.python	#007d79	—
meta.diff.header	#0043ce	—
storage	#6929c4	—
storage.type	#6929c4	—
storage.modifier, keyword.operator.noexcept	#6929c4	—
string, meta.embedded.assembly	#9f1853	—
string.tag	#0043ce	—
string.value	#9f1853	—
string.regexp	#161616	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#161616	—
meta.template.expression	#161616	—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded	#007d79	—
keyword	#6929c4	bold
keyword.control	#6929c4	—
keyword.operator	#6929c4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#6929c4	—
keyword.other.unit	#6929c4	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#0043ce	—
support.function.git-rebase	#0043ce	—
constant.sha.git-rebase	#161616	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#6929c4	—
variable.language	#6929c4	—
comment	#161616	italic
punctuation.definition.comment	#161616	italic
string	#9f1853	—
meta.embedded.assembly	#9f1853	—
keyword - keyword.operator	#6929c4	—
keyword.control	#6929c4	—
storage	#6929c4	—
storage.type	#6929c4	—
constant.numeric	#161616	—
entity.name.function	#007d79	—
support.function	#007d79	—
variable	#161616	—
entity.name.variable	#161616	—
comment	#161616	italic
entity.name.type	#161616	italic
constant.language, punctuation.section.embedded, enumMember, constant, punctuation, variable, support, meta, entity, variable.other.enummember	#161616	—
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, string, string.quoted.single.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments	#9f1853	—
punctuation.definition.table.toml, support.type.property-name.table.toml, variable.language.this, keyword.operator.expression.typeof.js, keyword.other.unit, keyword, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.css, punctuation.separator.key-value.html, string.quoted.double.html, string.unquoted.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, keyword.control, storage, storage.modifier, constant.language.json.comments, meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust	#6929c4	—
support.type.property-name, support.type.property-name.css, entity.name.function.preprocessor, class, support.type.property-name.json, punctuation.support.type.property-name, entity.other.attribute-name	#007d79	—
entity.name.tag.css, operator, keyword.operator, keyword.operator.borrow.and.rust, punctuation.separator.dictionary.key-value.json, punctuation.definition.tag, entity.name.tag	#0043ce	—
emphasis	—	italic
invalid	—	—
markup	—	—
strong	—	bold
token.info-token	#0043ce	—
token.warn-token	#f1c21b	—
token.error-token	#da1e28	—
token.debug-token	#a56eff	—

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