White Oak Chillhop

Name: White Oak Chillhop
Author: ZaderRox1111

Publisher: ZaderRox1111Themes in package: 1

VSCode Theme designed on codethemecustomizer.com to match the live wallpaper White Oak Chillhop.

Open in VS Code GitHub

VS Code preview

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

White Oak Chillhop — White Oak Chillhop 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.background#152528
activityBar.border#15252860
activityBar.foreground#7aa4a1
activityBarBadge.background#E65C56
activityBarBadge.foreground#152528
badge.background#15252830
badge.foreground#3e7a7f
breadcrumb.activeSelectionForeground#3e7a7f
breadcrumb.background#152528
breadcrumb.focusForeground#7aa4a1
breadcrumb.foreground#ff8349
breadcrumbPicker.background#152528
button.background#3e7a7f50
contrastBorder#3e7a7f40
debugToolBar.background#152528
diffEditor.insertedTextBackground#FEAD8215
diffEditor.removedTextBackground#c976c020
dropdown.background#152528
dropdown.border#FEAD8210
editor.background#152528
editor.findMatchBackground#152528
editor.findMatchBorder#3e7a7f
editor.findMatchHighlightBackground#3e7a7f93
editor.findMatchHighlightBorder#FEAD8230
editor.foreground#d4d4d4
editor.lineHighlightBackground#15252850
editor.selectionBackground#E65C5630
editor.selectionHighlightBackground#3e7a7f6b
editor.selectionHighlightBorder#E65C56f0
editorBracketMatch.background#152528
editorBracketMatch.border#aa5a6b7f
editorCursor.foreground#aa5a6b
editorError.foreground#c976c070
editorGroup.border#15252830
editorGroupHeader.tabsBackground#152528
editorGutter.addedBackground#FEAD8260
editorGutter.deletedBackground#c976c060
editorGutter.modifiedBackground#E65C5660
editorHoverWidget.background#152528
editorHoverWidget.border#FEAD8210
editorIndentGuide.activeBackground#3e7a7f90
editorIndentGuide.background#3e7a7f50
editorInfo.foreground#E65C5670
editorLineNumber.activeForeground#E65C56
editorLineNumber.foreground#3e7a7fc0
editorLink.activeForeground#7aa4a1
editorMarkerNavigation.background#7aa4a105
editorOverviewRuler.border#152528
editorOverviewRuler.errorForeground#c976c040
editorOverviewRuler.findMatchForeground#3e7a7f
editorOverviewRuler.infoForeground#E65C5640
editorOverviewRuler.warningForeground#aa5a6b70
editorRuler.foreground#3e7a7f70
editorSuggestWidget.background#152528
editorSuggestWidget.border#FEAD8210
editorSuggestWidget.foreground#7aa4a1
editorSuggestWidget.highlightForeground#aa5a6b
editorSuggestWidget.selectedBackground#3e7a7f20
editorWarning.foreground#FEAD82
editorWhitespace.foreground#7aa4a140
editorWidget.background#152528
editorWidget.border#aa5a6b
editorWidget.resizeBorder#3e7a7f
extensionButton.prominentBackground#FEAD8290
extensionButton.prominentHoverBackground#c976c0
focusBorder#FEAD8200
gitDecoration.conflictingResourceForeground#aa5a6b
gitDecoration.deletedResourceForeground#c976c0
gitDecoration.ignoredResourceForeground#3e7a7f
gitDecoration.modifiedResourceForeground#ff8349
gitDecoration.untrackedResourceForeground#E65C56
input.background#0c1515
input.border#FEAD8210
input.foreground#7aa4a1
input.placeholderForeground#7aa4a160
inputOption.activeBackground#7aa4a130
inputOption.activeBorder#7aa4a130
inputValidation.errorBorder#c976c050
inputValidation.infoBorder#E65C5650
inputValidation.warningBorder#aa5a6b50
list.activeSelectionBackground#152528
list.activeSelectionForeground#3e7a7f
list.focusBackground#0c1515
list.focusForeground#E65C56
list.highlightForeground#3e7a7f
list.hoverBackground#0c1515
list.hoverForeground#FEAD82
list.inactiveSelectionBackground#15252830
list.inactiveSelectionForeground#3e7a7f
list.warningForeground#aa5a6b
listFilterWidget.background#15252830
listFilterWidget.noMatchesOutline#15252830
listFilterWidget.outline#15252830
menu.background#152528f8
menu.border#3e7a7f50
menu.foreground#7aa4a1
menu.selectionBackground#0c1515
menu.selectionBorder#15252830
menu.selectionForeground#7aa4a1
menu.separatorBackground#7aa4a1
menubar.selectionBackground#0c1515
menubar.selectionBorder#3e7a7f50
menubar.selectionForeground#7aa4a1
minimap.background#152528
minimapGutter.addedBackground#c976c0
minimapGutter.deletedBackground#aa5a6b
minimapGutter.modifiedBackground#FEAD82
minimapSlider.activeBackground#FEAD82b0
minimapSlider.background#FEAD8280
minimapSlider.hoverBackground#FEAD82a0
notificationLink.foreground#3e7a7f
notifications.background#152528
notifications.foreground#7aa4a1
panel.background#152528
panel.border#7aa4a17f
panelTitle.activeBorder#3e7a7f
panelTitle.activeForeground#FEAD82
panelTitle.inactiveForeground#7aa4a1
peekView.border#15252830
peekViewEditor.background#7aa4a105
peekViewEditor.matchHighlightBackground#3e7a7f50
peekViewEditorGutter.background#7aa4a105
peekViewResult.background#7aa4a105
peekViewResult.matchHighlightBackground#3e7a7f50
peekViewResult.selectionBackground#3e7a7f70
peekViewTitle.background#7aa4a105
peekViewTitleDescription.foreground#7aa4a160
pickerGroup.foreground#3e7a7f
progressBar.background#3e7a7f
scrollbar.shadow#15252800
scrollbarSlider.activeBackground#3e7a7fcc
scrollbarSlider.background#3e7a7fbb
scrollbarSlider.hoverBackground#3e7a7fee
selection.background#3e7a7f
settings.checkboxBackground#152528
settings.checkboxForeground#7aa4a1
settings.dropdownBackground#152528
settings.dropdownForeground#7aa4a1
settings.headerForeground#3e7a7f
settings.modifiedItemIndicator#3e7a7f
settings.numberInputBackground#152528
settings.numberInputForeground#7aa4a1
settings.textInputBackground#152528
settings.textInputForeground#7aa4a1
sideBar.background#152528
sideBar.border#3e7a7f50
sideBar.foreground#E65C56
sideBarSectionHeader.background#152528
sideBarSectionHeader.border#15252860
sideBarSectionHeader.foreground#E65C56
sideBarTitle.foreground#7aa4a1
statusBar.background#0c1515
statusBar.border#15252860
statusBar.debuggingBackground#aa5a6b
statusBar.debuggingForeground#FEAD82
statusBar.foreground#7aa4a1
statusBar.noFolderBackground#152528
statusBarItem.hoverBackground#3e7a7f20
statusBarItem.remoteBackground#3e7a7f
statusBarItem.remoteForeground#152528
tab.activeBackground#3e7a7f50
tab.activeBorder#3e7a7f
tab.activeForeground#FEAD82
tab.activeModifiedBorder#3e7a7f
tab.border#152528
tab.inactiveBackground#3e7a7f20
tab.inactiveForeground#7aa4a1af
tab.unfocusedActiveBackground#3e7a7f40
tab.unfocusedActiveBorder#3e7a7f
tab.unfocusedActiveForeground#7aa4a1
tab.unfocusedInactiveBackground#3e7a7f10
tab.unfocusedInactiveForeground#7aa4a17f
terminal.ansiBlack#152528
terminal.ansiBlue#E65C56
terminal.ansiBrightBlack#3e7a7f
terminal.ansiBrightBlue#E65C56
terminal.ansiBrightCyan#E65C56
terminal.ansiBrightGreen#FEAD82
terminal.ansiBrightMagenta#aa5a6b
terminal.ansiBrightRed#c976c0
terminal.ansiBrightWhite#FEAD82
terminal.ansiBrightYellow#aa5a6b
terminal.ansiCyan#E65C56
terminal.ansiGreen#FEAD82
terminal.ansiMagenta#aa5a6b
terminal.ansiRed#c976c0
terminal.ansiWhite#FEAD82
terminal.ansiYellow#aa5a6b
terminalCursor.background#152528
terminalCursor.foreground#aa5a6b
textLink.activeForeground#7aa4a1
textLink.foreground#3e7a7f
titleBar.activeBackground#152528
titleBar.activeForeground#7aa4a1
titleBar.border#15252860
titleBar.inactiveBackground#152528
titleBar.inactiveForeground#3e7a7f
tree.indentGuidesStroke#0c1515
widget.shadow#15252830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
	#152528	—
storage.type.js, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, markup.changed, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#ff8349	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#ff8349	italic
meta.function-call, variable.function, support.function, keyword.other.special-method, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.other.attribute-name, entity.other.attribute-name.class, string.other.link.title.markdown, variable.language.fenced.markdown	#E65C56	—
entity.name.function, markup.italic, entity.name.method.js, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#E65C56	italic
markup.bold, markup.bold string, markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string, meta.separator	#E65C56	bold
markup.underline	#E65C56	underline
variable, string constant.other.placeholder, meta.block variable.other, support.other.variable, string.other.link, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, variable.language, meta.class-method.js entity.name.function.js, variable.function.constructor, constant.other.color, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, markup.inserted	#7aa4a1	—
variable.language	#7aa4a1	italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, text.html.markdown, punctuation.definition.list_item.markdown, markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end, markup.table	#d4d4d4	—
keyword, storage.modifier, keyword.control, constant.other.color, punctuation, meta.tag, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#b3bbbb	—
markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown	#00000050	—
source.js constant.other.object.key.js string.unquoted.label.js	#b3bbbb	italic
support.function, support.type, variable.parameter, entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, string.regexp, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, string.other.link.description.title.markdown, markup.raw.block, entity.name.tag, meta.tag.sgml	#aa5a6b	—
	#3e7a7f	—
	#0c1515	—
	#7aa4a1	—
storage.type, constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, source.sass keyword.control, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, constant.character.escape, text.html.markdown markup.inline.raw.markdown, constant.other.reference.link.markdown	#FEAD82	—
string.other.link, string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.quote punctuation.definition.blockquote.markdown	#c99376	—
markup.quote	—	italic
comment, punctuation.definition.comment	#6e7a7d	italic
invalid, invalid.illegal, markup.deleted.git_gutter, markup.deleted	#c976c0	—
url, link, uri	—	underline

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