Notion Code Theme

Name: Notion Code Theme
Author: Harshit Gangwar

Publisher: Harshit GangwarThemes in package: 1

For Notion lovers who love to Code

Open in VS Code GitHub

VS Code preview

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

Notion Code Theme — Notion Code Theme

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.activeBackground#EAE4F2
activityBar.activeBorder#9A6DD7
activityBar.activeFocusBorder#9A6DD7
activityBar.background#EBECED
activityBar.border#F7F6F3
activityBar.dropBorder#9A6DD7
activityBar.foreground#9A6DD7
activityBar.inactiveForeground#9B9A97
activityBarBadge.background#EAE4F2
activityBarBadge.foreground#6724DE
badge.background#EAE4F2
badge.foreground#6724DE
breadcrumb.activeSelectionForeground#9A6DD7
breadcrumb.focusForeground#996dd7d0
button.background#9B9A97
button.secondaryBackground#DDEBF1
button.secondaryForeground#529CCA
checkbox.background#EBECED
checkbox.border#979A9B
checkbox.foreground#979A9B
dropdown.background#EBECED
dropdown.border#EBECED
dropdown.foreground#37352F
dropdown.listBackground#EBECED
editor.background#F7F6F3
editor.findMatchBackground#FFDC49
editor.findMatchBorder#FFDC49
editor.findMatchHighlightBackground#f6b472
editor.findMatchHighlightBorder#f6b472
editor.findRangeHighlightBackground#f6b472
editor.findRangeHighlightBorder#f6b472
editor.foldBackground#EBECED
editor.foreground#37352F
editor.hoverHighlightBackground#DDEBF1
editor.inactiveSelectionBackground#EBECED
editor.lineHighlightBackground#EAE4F2
editor.lineHighlightBorder#EAE4F2
editor.selectionBackground#DDEBF1
editor.selectionForeground#505558
editor.selectionHighlightBackground#DDEBF1
editor.selectionHighlightBorder#DDEBF1
editor.wordHighlightBackground#DDEBF1
editor.wordHighlightBorder#DDEBF1
editor.wordHighlightStrongBackground#DDEBF1
editor.wordHighlightStrongBorder#DDEBF1
editorBracketMatch.background#979a9b2c
editorBracketMatch.border#979a9b34
editorCursor.foreground#37352F
editorError.background#ffabc4
editorError.border#ffffff
editorError.foreground#37352F
editorGroup.border#EBECED
editorGroup.dropBackground#ddebf1a1
editorGroup.emptyBackground#EBECED
editorGroup.focusedEmptyBorder#EBECED
editorGroupHeader.border#EBECED
editorGroupHeader.tabsBackground#EBECED
editorGroupHeader.tabsBorder#EBECED
editorIndentGuide.activeBackground#979a9b7e
editorIndentGuide.background#cccccc
editorLightBulb.foreground#529CCA
editorLightBulbAutoFix.foreground#529CCA
editorLineNumber.activeForeground#505558
editorLineNumber.foreground#929191
editorLink.activeForeground#4DAB9A
editorOverviewRuler.addedForeground#666666
editorOverviewRuler.background#b6b8b9
editorOverviewRuler.border#b6b8b9
editorOverviewRuler.bracketMatchForeground#666666
editorOverviewRuler.commonContentForeground#529cca85
editorOverviewRuler.currentContentForeground#e255a07e
editorOverviewRuler.deletedForeground#ff84c2c7
editorOverviewRuler.errorForeground#ffabc4
editorOverviewRuler.findMatchForeground#f6b472
editorOverviewRuler.incomingContentForeground#996dd77c
editorOverviewRuler.infoForeground#ffdb49ed
editorOverviewRuler.modifiedForeground#529CCA
editorOverviewRuler.rangeHighlightForeground#ddebf1a1
editorOverviewRuler.selectionHighlightForeground#DDEBF1
editorOverviewRuler.warningForeground#ddebf1a1
editorOverviewRuler.wordHighlightForeground#ddebf1a1
editorOverviewRuler.wordHighlightStrongForeground#666666
editorWarning.background#4dab9a7c
editorWarning.border#4dab9a81
editorWarning.foreground#37352F
editorWidget.border#ddebf100
editorWidget.foreground#585858
editorWidget.resizeBorder#ddebf100
errorForeground#ffabc4
extensionBadge.remoteBackground#EAE4F2
extensionBadge.remoteForeground#6724DE
extensionButton.prominentBackground#0077df13
extensionButton.prominentForeground#0077df
extensionButton.prominentHoverBackground#0077df2c
extensionIcon.starForeground#0077df
focusBorder#979A9B
foreground#354C4B
gitDecoration.addedResourceForeground#00876B
gitDecoration.conflictingResourceForeground#f370b6
gitDecoration.deletedResourceForeground#e90061
gitDecoration.ignoredResourceForeground#979A9B
gitDecoration.modifiedResourceForeground#ec841b
gitDecoration.renamedResourceForeground#9A6DD7
gitDecoration.stageDeletedResourceForeground#937264
gitDecoration.stageModifiedResourceForeground#9A6DD7
gitDecoration.submoduleResourceForeground#575655
gitDecoration.untrackedResourceForeground#00876B
input.background#EBECED
input.placeholderForeground#929191
list.activeSelectionBackground#cbb1f0
list.activeSelectionForeground#37352F
list.dropBackground#DDEBF1
list.errorForeground#E03E3E
list.filterMatchBackground#EAE4F2
list.filterMatchBorder#6724DE
list.hoverBackground#EAE4F2
list.hoverForeground#37352F
list.inactiveFocusBackground#d5bdf6
list.inactiveSelectionBackground#d5bdf6
list.invalidItemForeground#FFA344
list.warningForeground#FFA344
listFilterWidget.background#DDEDEA
listFilterWidget.noMatchesOutline#529CCA
listFilterWidget.outline#529CCA
merge.commonContentBackground#529cca80
merge.commonHeaderBackground#529ccace
merge.currentContentBackground#e255a07e
merge.currentHeaderBackground#e255a0bc
merge.incomingContentBackground#996dd77c
merge.incomingHeaderBackground#996dd7b9
minimap.background#ebeced7e
minimap.errorHighlight#ffabc4
minimap.selectionHighlight#9B9A97
notebookStatusSuccessIcon.foreground#676969
notificationCenter.border#EBECED
notificationCenterHeader.background#EBECED
notificationCenterHeader.foreground#676969
notificationLink.foreground#676969
notifications.background#EBECED
notifications.border#EBECED
notifications.foreground#676969
notificationsErrorIcon.foreground#ffabc4
notificationsInfoIcon.foreground#996dd7c4
notificationsWarningIcon.foreground#E255A1
panel.background#EBECED
panel.border#F7F6F3
panel.dropBorder#cdcdce
panelInput.border#EBECED
panelSection.border#EBECED
panelSection.dropBackground#EBECED
panelSectionHeader.background#EBECED
panelSectionHeader.border#EBECED
panelSectionHeader.foreground#EBECED
panelTitle.activeBorder#9A6DD7
panelTitle.activeForeground#9A6DD7
panelTitle.inactiveForeground#676969
peekView.border#EBECED
peekViewEditor.background#EBECED
peekViewEditor.matchHighlightBackground#EAE4F2
peekViewEditor.matchHighlightBorder#EAE4F2
peekViewEditorGutter.background#EAE4F2
peekViewResult.background#EBECED
peekViewResult.fileForeground#37352F
peekViewResult.lineForeground#37352F
peekViewResult.matchHighlightBackground#EAE4F2
peekViewResult.selectionBackground#EAE4F2
peekViewResult.selectionForeground#37352F
peekViewTitle.background#EBECED
peekViewTitleDescription.foreground#9B9A97
peekViewTitleLabel.foreground#37352F
pickerGroup.border#EBECED
pickerGroup.foreground#676969
progressBar.background#529CCA
sash.hoverBorder#EBECED
scrollbar.shadow#979A9B
scrollbarSlider.activeBackground#666666
scrollbarSlider.background#b6b8b9
scrollbarSlider.hoverBackground#9B9A97
searchEditor.findMatchBackground#4DAB9A
searchEditor.findMatchBorder#4DAB9A
searchEditor.textInputBorder#4DAB9A
selection.background#EBECED
sideBar.border#F7F6F3
sideBar.dropBackground#F7F6F3
sideBar.foreground#37352F
sideBarSectionHeader.background#EBECED
sideBarSectionHeader.border#EBECED
sideBarSectionHeader.foreground#9A6DD7
sideBarTitle.foreground#505558
statusBar.background#EBECED
statusBar.border#EBECED
statusBar.debuggingBackground#EBECED
statusBar.debuggingBorder#EBECED
statusBar.debuggingForeground#676969
statusBar.foreground#676969
statusBar.noFolderBackground#EBECED
statusBar.noFolderBorder#EBECED
statusBar.noFolderForeground#676969
statusBarItem.activeBackground#cbb1f0
statusBarItem.errorBackground#ffabc4
statusBarItem.errorForeground#676969
statusBarItem.hoverBackground#cbb1f0c9
statusBarItem.prominentBackground#EBECED
statusBarItem.prominentForeground#cbb1f0
statusBarItem.prominentHoverBackground#cbb1f0c9
statusBarItem.remoteBackground#EBECED
statusBarItem.remoteForeground#676969
tab.activeBackground#EAE4F2
tab.activeForeground#37352F
tab.activeModifiedBorder#d5bdf6
tab.border#d5bdf6
tab.hoverBackground#EAE4F2
tab.hoverForeground#9B9A97
tab.inactiveBackground#EBECED
tab.inactiveForeground#9B9A97
tab.inactiveModifiedBorder#EBECED
tab.lastPinnedBorder#EBECED
tab.unfocusedActiveBackground#ddebf1a1
tab.unfocusedActiveBorder#EBECED
tab.unfocusedActiveBorderTop#EBECED
tab.unfocusedActiveForeground#9B9A97
tab.unfocusedActiveModifiedBorder#EBECED
tab.unfocusedHoverBackground#EAE4F2
tab.unfocusedHoverBorder#EBECED
tab.unfocusedHoverForeground#9B9A97
tab.unfocusedInactiveBackground#EBECED
tab.unfocusedInactiveForeground#9B9A97
tab.unfocusedInactiveModifiedBorder#EBECED
terminal.ansiBlack#454B4E
terminal.ansiBlue#529CCA
terminal.ansiBrightBlack#2F3437
terminal.ansiBrightBlue#529cca
terminal.ansiBrightCyan#9A6DD7
terminal.ansiBrightGreen#36d1b5
terminal.ansiBrightMagenta#996dd7b2
terminal.ansiBrightRed#E255A1
terminal.ansiBrightWhite#f3f3f3
terminal.ansiBrightYellow#FFA344
terminal.ansiCyan#0077df
terminal.ansiGreen#36d1b5
terminal.ansiMagenta#E255A1
terminal.ansiRed#E255A1
terminal.ansiWhite#f3f3f3
terminal.ansiYellow#FFA344
terminal.background#EBECED
terminal.border#F7F6F3
terminal.foreground#2F3437
terminal.selectionBackground#2F3437
terminalCursor.background#2F3437
terminalCursor.foreground#2F3437
textLink.activeForeground#4DAB9A
textLink.foreground#9A6DD7
widget.shadow#9B9A97

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#708090	—
comment.block.preprocessor	#708090
comment.documentation, comment.block.documentation	#669900	—
invalid.illegal	#ee8917	—
keyword.operator	#9A6E3A	—
keyword, storage	#0077AA	—
storage.type, support.type	#0077AA	—
constant.language, support.constant, variable.language	#AB6526	—
variable, support.variable	#37352F	—
entity.name.function, support.function	#DD4A68	—
entity.name.type, entity.other.inherited-class, support.class	#DD4A68	—
entity.name.exception	#e98a3c	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#990055	—
string	#669900	—
constant.character.escape	#777777	—
string.regexp	#4B83CD	—
constant.other.symbol	#669900	—
punctuation	#999999	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#a80707	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#999999	—
entity.name.tag	#990055	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#669900	—
string.quoted.single.html, string.quoted.double.html	#0077AA	—
constant.character.entity, punctuation.definition.entity	#990055	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#37352F	—
meta.property-name, support.type.property-name	#990055	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#37352F	—
keyword.other.important	#DD4A68	—
entity.other.attribute-name.js	#6940A5	—
string.quoted.single.js, string.quoted.double.js	#669900	—
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	—
markup.error	#ffabc4	—
markup.inserted	#000000	—
meta.link	#4B83CD	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#4B83CD	—
markup.bold, markup.italic	#448C27	—
markup.inline.raw	#AB6526
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—
entity.name.type.parameter.cpp	#37352F	—

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