Google Colab Dark Theme

Name: Google Colab Dark Theme
Author: renxzen

Publisher: renxzenThemes in package: 1

Google Colab Dark Theme for VS Code

GitHub

VS Code preview

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

Google Colab Dark Theme — Google Colab Dark Theme

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#1e1e1e
activityBar.foreground#d4d4d4
badge.background#525252
badge.foreground#d4d4d4
breadcrumb.foreground#525252
button.background#525252
debugToolBar.background#383838
diffEditor.insertedTextBackground#62802680
diffEditor.removedTextBackground#8C224880
dropdown.background#383838
editor.background#1e1e1e
editor.foreground#d4d4d4
editor.lineHighlightBackground#52525200
editor.selectionBackground#264f78
editor.selectionHighlightBackground#525252
editorCursor.foreground#d4d4d4
editorGroup.border#313131
editorGroup.dropBackground#31313180
editorGroupHeader.tabsBackground#383838
editorHoverWidget.background#313131
editorHoverWidget.border#525252
editorIndentGuide.background#525252
editorLineNumber.foreground#90908a
editorSuggestWidget.background#1e1e1e
editorSuggestWidget.border#525252
editorWhitespace.foreground#525252
editorWidget.background#383838
focusBorder#525252
input.background#313131
inputOption.activeBorder#525252
inputValidation.errorBackground#8C2248
inputValidation.errorBorder#c283be
inputValidation.infoBackground#505C8F
inputValidation.infoBorder#819aff
inputValidation.warningBackground#808026
inputValidation.warningBorder#e2e22e
list.activeSelectionBackground#525252
list.dropBackground#313131
list.focusBackground#313131
list.highlightForeground#d4d4d4
list.hoverBackground#1e1e1edc
list.inactiveSelectionBackground#525252
panel.border#313131
panelTitle.activeBorder#525252
panelTitle.activeForeground#d4d4d4
panelTitle.inactiveForeground#525252
peekView.border#525252
peekViewEditor.background#1e1e1e
peekViewEditor.matchHighlightBackground#525252
peekViewResult.background#383838
peekViewResult.matchHighlightBackground#525252
peekViewResult.selectionBackground#313131
peekViewTitle.background#383838
pickerGroup.foreground#525252
progressBar.background#525252
selection.background#525252
sideBar.background#383838
sideBarSectionHeader.background#1e1e1e
statusBar.background#313131
statusBar.debuggingBackground#525252
statusBar.noFolderBackground#313131
tab.activeBackground#525252
tab.activeBorder#ccccc7
tab.border#383838
tab.inactiveBackground#313131
tab.inactiveForeground#ccccc7
tab.unfocusedActiveBorder#525252
titleBar.activeBackground#383838
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.function-call.js, entity.name.function, meta.function-call.js, support.function.dom.js, support.variable.dom.js, support.variable.property.js, support.variable.property.process, support.variable.object.process, meta.template.expression, constant.character, constant.other, variable, storage.modifier.import, storage.modifier, storage.modifier.package, keyword.operator, storage.type.generic, storage.type.modifier.access.control, entity.name.class.python, entity.name.function.member, entity.name.function.operator.member, entity.name.function.operator, variable.parameter, entity.other.attribute-name, support.constant, support.type, support.class, support.other.variable, invalid, invalid.deprecated, meta.structure.dictionary.json, string.quoted.double.json, markup.inserted, markup.bold, markup.italic, entity.name.function.decorator.python, meta.function-call.generic.python, meta.class.python, support.type.python, meta.method-call.php, entity.name.function, markup.heading, markup.heading.setext, variable.language, keyword.control.ternary	#d4d4d4	—
comment, string.quoted.docstring.multi.python, storage.type.class.jsdoc, variable.other.jsdoc, keyword.other.documentation.javadoc.java, entity.name.type.instance.jsdoc	#4f833a	—
constant.numeric	#b5ce9c	—
string, markup.changed, entity.name.filename.find-in-files, markup.list, support.type.property-name.json.comments	#ce9178	—
markup.inline.raw	#FD971F	—
punctuation.definition.template-expression, punctuation.section.embedded.coffee, keyword, keyword.other.import, keyword.control.import, keyword.control.flow, storage, entity.name.tag, meta.tag.sgml.doctype.html, markup.deleted, constant.numeric.line-number.find-in-files - match, markup.quote, storage.modifier.ts	#c283be	—
constant.language, storage.type, storage.type.built-in, entity.name.type, entity.other.inherited-class, entity.name.type.class, keyword.var.go, support.type.builtin.ts, support.type.primitive.ts, constant.language.boolean, entity.name.tag.css, entity.other.attribute-name.class.css, keyword.operator.instanceof.java	#5499D2	—
variable.parameter.function, variable.language.special, keyword.operator.logical	#9cdcfe	—
storage.type.annotation.java, entity.name.function, support.function, entity.name.function.java, storage.modifier.java, punctuation.definition.decorator.python, entity.name.function.decorator.python, support.type.python, punctuation.definition.annotation.java	#D7D7A6	—
diff.header	#525252	—
	#4ec9b0	—

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