custom-dokitheme

Name: custom-dokitheme
Author: Arjun S

Publisher: Arjun SThemes in package: 1

A doki theme customized for me

Open in VS Code GitHub

VS Code preview

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

custom-dokitheme — custom-dokitheme

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#262127
activityBar.border#3f3741
activityBar.foreground#d7cf8b
activityBar.inactiveForeground#d7cf8bbb
activityBarBadge.background#d7cf8b
activityBarBadge.foreground#262127
badge.background#d7cf8b
badge.foreground#262127
breadcrumb.activeSelectionForeground#fdea25
breadcrumb.focusForeground#b0a17f
breadcrumb.foreground#675a6c
button.background#433f46
button.foreground#b4afa2
button.secondaryBackground#433f46cc
button.secondaryForeground#b4afa2bb
charts.blue#9b6bdf
charts.green#42e66c
charts.orange#fdea25
charts.purple#ff96fd
charts.red#e356a7
charts.yellow#efa554
checkbox.border#7f7782
checkbox.foreground#d7cf8b
debugConsole.errorForeground#ff2525
debugConsole.infoForeground#b0a17f
debugConsole.sourceForeground#fdea25
debugExceptionWidget.border#3f3741
debugIcon.breakpointCurrentStackframeForeground#29466c
debugIcon.breakpointDisabledForeground#685e6d
debugIcon.breakpointForeground#d7cf8b
debugIcon.breakpointStackframeForeground#24324b
debugIcon.breakpointUnverifiedForeground#545c5b
debugIcon.continueForeground#d7cf8b
debugIcon.restartForeground#42e66c
debugIcon.startForeground#d7cf8b
debugIcon.stepIntoForeground#efa554
debugIcon.stepOutForeground#75d7ec
debugIcon.stepOverForeground#9b6bdf
debugIcon.stopForeground#ff2525
debugTokenExpression.boolean#5fff9f
debugTokenExpression.error#ff2525
debugTokenExpression.name#ffa38f
debugTokenExpression.number#9ca2ff
debugTokenExpression.string#77c2ff
debugTokenExpression.value#b0a17f
debugToolBar.background#211c22
debugView.stateLabelBackground#3c373f
debugView.valueChangedHighlight#29466c99
descriptionForeground#b0a17f
diffEditor.insertedTextBackground#1e342550
diffEditor.removedTextBackground#32323950
dropdown.background#1c171d
dropdown.border#3f3741
dropdown.foreground#d3d3d3
editor.background#1c171d
editor.findMatchBackground#29466c
editor.findMatchBorder#d7cf8b
editor.findMatchHighlightBackground#195a80aa
editor.focusedStackFrameHighlightBackground#24324b
editor.foreground#f8f8f2
editor.lineHighlightBackground#26212777
editor.lineHighlightBorder#26212700
editor.linkedEditingBackground#3f3640
editor.selectionBackground#29466c
editor.selectionHighlightBackground#3f3640
editor.snippetTabstopHighlightBackground#3f3640aa
editor.stackFrameHighlightBackground#29466c
editor.wordHighlightBackground#3f3640aa
editor.wordHighlightStrongBackground#3f3640aa
editorBracketHighlight.foreground1#f8f8f2
editorBracketHighlight.foreground2#ff96fd
editorBracketHighlight.foreground3#ffa38f
editorBracketHighlight.foreground4#fdea25
editorBracketHighlight.foreground5#ff96fd
editorBracketHighlight.foreground6#9ca2ff
editorBracketHighlight.unexpectedBracket.foreground#ff2525
editorBracketMatch.border#d7cf8b
editorCursor.background#1c171d
editorCursor.foreground#d7cf8b
editorError.border#4b2424
editorError.foreground#ff2525
editorGroup.border#3f3741
editorGroup.dropBackground#3f3640aa
editorGroupHeader.tabsBackground#1c171d
editorGutter.addedBackground#1e3425
editorGutter.background#00000000
editorGutter.deletedBackground#323239
editorGutter.modifiedBackground#1f4966
editorHint.border#3f3741
editorHoverWidget.border#3f3741
editorIndentGuide.activeBackground#3f3741
editorIndentGuide.background#3f3741
editorInfo.border#3f3741
editorLineNumber.activeForeground#d7cf8b
editorLineNumber.foreground#675a6c
editorOverviewRuler.border#3f3741
editorOverviewRuler.findMatchForeground#24324b
editorSuggestWidget.background#211c22
editorSuggestWidget.border#1c171d
editorUnnecessaryCode.border#545c5b
editorWarning.border#3f3741
editorWidget.background#211c22
editorWidget.border#d7cf8b
errorForeground#ff2525
focusBorder#3f3741
foreground#d3d3d3
gitDecoration.ignoredResourceForeground#685e6d
gitDecoration.modifiedResourceForeground#d7cf8b
input.background#151016aa
input.border#3f3741
input.placeholderForeground#b0a17f
inputOption.activeBorder#3f3741
inputValidation.errorBackground#4b2424
inputValidation.errorForeground#ff2525
inputValidation.warningBackground#2f2a20
keybindingLabel.background#433f46
keybindingLabel.bottomBorder#3f3741
keybindingLabel.foreground#b4afa2
list.activeSelectionBackground#29466c
list.activeSelectionForeground#fefefe
list.deemphasizedForeground#b0a17f
list.errorForeground#ff2525
list.focusBackground#29466c
list.focusForeground#fefefe
list.highlightForeground#d7cf8b
list.hoverBackground#29466c7a
list.inactiveSelectionBackground#24324b99
list.inactiveSelectionForeground#d3d3d3
list.invalidItemForeground#685e6d
merge.border#3f3741
minimap.errorHighlight#ff2525aa
minimap.selectionHighlight#29466c
notificationCenter.border#3f3741
notifications.background#211c2280
notifications.border#3f3741
notificationToast.border#d7cf8b9a
panel.background#1c171d
panel.border#3f3741
panelSection.dropBackground#3f3640aa
panelSectionHeader.background#211c22
panelTitle.activeBorder#d7cf8b
panelTitle.activeForeground#d3d3d3
panelTitle.inactiveForeground#d3d3d3
peekView.border#d7cf8b
peekViewEditor.background#2d3d55
peekViewEditor.matchHighlightBackground#24324b
peekViewEditorGutter.background#2d3d55
peekViewResult.background#151016
peekViewResult.fileForeground#b0a17f
peekViewResult.matchHighlightBackground#24324b
peekViewResult.selectionBackground#29466c
peekViewTitle.background#211c22
peekViewTitleDescription.foreground#b0a17f
peekViewTitleLabel.foreground#d3d3d3
pickerGroup.border#3f3741
pickerGroup.foreground#b0a17f
progressBar.background#d7cf8b
quickInput.foreground#d3d3d3
quickInput.list.focusBackground#29466caa
scrollbar.shadow#1111113a
scrollbarSlider.activeBackground#d7cf8b9a
scrollbarSlider.background#d7cf8b5a
scrollbarSlider.hoverBackground#d7cf8b9a
searchEditor.findMatchBackground#195a80
selection.background#29466c
settings.focusedRowBackground#3c373f
settings.modifiedItemIndicator#d7cf8b
settings.sashBorder#3f3741
sideBar.background#1c171d
sideBar.border#3f3741
sideBarSectionHeader.background#262127
statusBar.background#d7cf8b
statusBar.border#3f3741
statusBar.debuggingBackground#d7cf8b
statusBar.foreground#262127
statusBar.noFolderBackground#d7cf8b
statusBarItem.prominentBackground#29466caa
statusBarItem.prominentForeground#fefefe
statusBarItem.remoteBackground#29466c
statusBarItem.remoteForeground#fefefe
symbolIcon.arrayForeground#9ca2ff
symbolIcon.booleanForeground#5fff9f
symbolIcon.classForeground#ffa38f
symbolIcon.colorForeground#d7cf8b
symbolIcon.constantForeground#9ca2ff
symbolIcon.constructorForeground#ffa38f
symbolIcon.enumeratorForeground#ff96fd
symbolIcon.enumeratorMemberForeground#9ca2ff
symbolIcon.eventForeground#d7cf8b
symbolIcon.fieldForeground#ff96fd
symbolIcon.fileForeground#7f7782
symbolIcon.folderForeground#7f7782
symbolIcon.functionForeground#fdea25
symbolIcon.interfaceForeground#77c2ff
tab.activeBackground#3c373f
tab.activeBorder#d7cf8b
tab.border#3f3741
tab.hoverBackground#3c373faa
tab.inactiveBackground#1c171d
terminal.ansiBlack#282936
terminal.ansiBlue#62d6e8
terminal.ansiBrightBlack#626483
terminal.ansiBrightBlue#62d6e8
terminal.ansiBrightCyan#a1efe4
terminal.ansiBrightGreen#ebff87
terminal.ansiBrightMagenta#b45bcf
terminal.ansiBrightRed#ea51b2
terminal.ansiBrightWhite#f7f7fb
terminal.ansiBrightYellow#00f769
terminal.ansiCyan#a1efe4
terminal.ansiGreen#ebff87
terminal.ansiMagenta#b45bcf
terminal.ansiRed#ea51b2
terminal.ansiWhite#e9e9f4
terminal.ansiYellow#00f769
terminal.background#191b1f
terminal.foreground#e9e9f4
terminalCursor.background#e9e9f4
terminalCursor.foreground#e9e9f4
testing.iconErrored#ff2525
testing.iconFailed#ff2525
testing.runAction#d7cf8b
textBlockQuote.background#2d3d55
textBlockQuote.border#3f3741
textCodeBlock.background#2d3d55
textLink.activeForeground#d7cf8b
textLink.foreground#d7cf8baa
textSeparator.foreground#3f3741
titleBar.activeBackground#211c22
titleBar.border#3f3741
titleBar.inactiveBackground#211c22
toolbar.activeBackground#3c373f
toolbar.hoverBackground#3c373f
toolbar.hoverOutline#3c373f
tree.indentGuidesStroke#3f3741
welcomePage.tileBackground#2d3d55aa
welcomePage.tileHoverBackground#29466caa
widget.shadow#1111115a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
invalid	#FF2525	underline strikethrough
invalid.deprecated	#B0A17F	underline italic
markup.underline	—	underline
markup.bold	—	bold
markup.italic	—	italic
support.type.property-name.json, meta.object-literal.key, variable.object.property, variable.other.readwrite.alias, variable.other.property, meta.brace	#F8F8F2	—
source, punctuation.definition.parameters, punctuation.definition.block, text.html.markdown, variable.other.constant, meta.definition.variable, variable.other.constant.js, variable.other.constant.ts	#F8F8F2	—
variable.parameter, meta.parameters, meta.function-call.arguments, markup.inline.raw.string.markdown, string	#77C2FF	—
constant.language.json, keyword, storage.type, storage.modifier, keyword.operator.optional, keyword.operator.new, keyword.operator.instanceof, keyword.operator.expression.typeof, constant.language.boolean, variable.language.this, constant.language.undefined, constant.language.java, constant.language.python, support.type.primitive.ts, markup.heading.setext, punctuation.definition.raw.markdown	#5FFF9F	—
variable.other.constant, meta.definition.method, meta.definition.function, meta.embedded.line, markup.inline.raw.string, variable.css, meta.function, support.class, meta.method.identifier, variable.other.readwrite.alias	#FFA38F	—
keyword.operator, entity.name.tag, meta.template.expression, punctuation.definition.list.begin, support.class.component.svelte, punctuation.definition.link.restructuredtext, punctuation.definition.typeparameters	#77BBFF	—
entity.name.type.class, meta.type, variable.other.object, entity.name.type, markup.heading, string.other.link.title, storage.modifier.import, meta.import, storage.type.java, support.type.property-name, meta.property-name	#FF96FD	—
support.type.primitive, entity.name.type.interface, variable.parameter.function-call	#FF96FD	italic
meta.function-call, meta.decorator, meta.link, meta.method-call, meta.function-call.ts, storage.type.annotation, meta.declaration.annotation, support.function, meta.assertion.look-ahead.regexp, entity.name.function	#FDEA25	—
entity.other.attribute-name	#FDEA25	italic
constant.numeric, support.type.object.module, variable.other.enummember, meta.enum.declaration, constant.other.color, variable.language.special, support.constant, meta.type.parameters, fenced_code.block.language.markdown, entity.name.section.markdown	#9CA2FF	—
	#9CA2FF	italic
comment, markup.quote	#716B78	italic
markup.fenced_code.block	—	bold
	#B0A17F	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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