Ubuntu Color Theme

Name: Ubuntu Color Theme
Author: Radu Matei

Publisher: Radu MateiThemes in package: 1

A color theme inspired by the Ubuntu terminal

Open in VS Code GitHub

VS Code preview

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

Ubuntu Color Theme — Ubuntu Color 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.activeBackground#fa8d3e13
activityBar.activeBorder#fa8d3e
activityBar.activeFocusBorder#fa8d3e
activityBar.background#23071a
activityBar.dropBorder#fa8d3e
activityBar.inactiveForeground#a6a6a6
activityBarBadge.background#fa8d3e
activityBarBadge.foreground#000000
badge.background#fa8d3e
badge.foreground#000000
button.background#FA8D3E
button.foreground#000000
button.hoverBackground#3083c0
checkbox.background#3d0d2d
diffEditor.insertedTextBackground#FFCE6B30
diffEditor.removedTextBackground#F0717135
dropdown.background#3d0d2d
dropdown.border#470f34
editor.background#300a24
editor.findMatchBorder#A5A59E30
editor.findMatchHighlightBackground#A5A59E30
editor.foldBackground#FFCE6B30
editor.foreground#F1F1E7
editor.lineHighlightBackground#3d0d2d
editor.selectionBackground#fa8d3e30
editorBracketMatch.background#2b0920
editorBracketMatch.border#c77031
editorCursor.background#000000
editorCursor.foreground#fa8d3e
editorError.foreground#F07171
editorGroup.border#23071a
editorGroup.dropBackground#fa8d3e30
editorGroupHeader.noTabsBackground#3d0d2d
editorGroupHeader.tabsBackground#3d0d2d
editorGutter.addedBackground#FFCE6B
editorGutter.deletedBackground#F07171
editorGutter.modifiedBackground#FA8D3E
editorHoverWidget.border#4a0f37
editorIndentGuide.activeBackground#fa8d3e
editorIndentGuide.background#4a0f37
editorInfo.foreground#FA8D3E
editorLineNumber.activeForeground#dd5cb4
editorLineNumber.foreground#841c63
editorLink.activeForeground#fa8d3e
editorMarkerNavigation.background#300a24
editorMarkerNavigationError.background#F07171
editorMarkerNavigationInfo.background#FA8D3E
editorMarkerNavigationWarning.background#EF7C2A
editorOverviewRuler.addedForeground#FA8D3E
editorOverviewRuler.border#4a0f37
editorOverviewRuler.bracketMatchForeground#fa8d3e
editorOverviewRuler.deletedForeground#FA8D3E
editorOverviewRuler.errorForeground#F07171
editorOverviewRuler.infoForeground#FA8D3E
editorOverviewRuler.modifiedForeground#FA8D3E
editorOverviewRuler.selectionHighlightForeground#fa8d3e
editorOverviewRuler.warningForeground#EF7C2A
editorPane.background#26081c
editorRuler.foreground#4a0f37
editorSuggestWidget.background#3d0d2d
editorSuggestWidget.border#4a0f37
editorSuggestWidget.highlightForeground#4CBF99
editorWarning.foreground#EF7C2A
editorWhitespace.foreground#63154a
editorWidget.background#300a24
editorWidget.resizeBorder#4a0f37
errorForeground#F07171
extensionButton.prominentBackground#FA8D3E
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#2c7ab3
focusBorder#fa8d3e
foreground#A5A59E
gitDecoration.addedResourceForeground#FFCE6B
gitDecoration.deletedResourceForeground#F07171
gitDecoration.modifiedResourceForeground#FA8D3E
gitDecoration.stageDeletedResourceForeground#F07171
gitDecoration.stageModifiedResourceForeground#FA8D3E
input.background#3d0d2d
input.border#470f34
inputValidation.errorBackground#F0717190
inputValidation.errorBorder#F07171
inputValidation.errorForeground#000000
inputValidation.infoBackground#FA8D3E90
inputValidation.infoBorder#FA8D3E
inputValidation.infoForeground#000000
inputValidation.warningBackground#EF7C2A90
inputValidation.warningBorder#EF7C2A
inputValidation.warningForeground#000000
list.activeSelectionBackground#fa8d3e20
list.errorForeground#F07171
list.focusBackground#fa8d3e30
list.highlightForeground#4CBF99
list.hoverBackground#450e33
list.inactiveSelectionBackground#fa8d3e25
list.warningForeground#EF7C2A
menu.background#300a24
menu.foreground#A5A59E
menu.selectionBackground#fa8d3eDD
menu.selectionForeground#000000
menu.separatorBackground#63154a
minimap.errorHighlight#F07171
minimap.selectionHighlight#fa8d3e80
minimap.warningHighlight#EF7C2A
minimapGutter.addedBackground#FFCE6B
minimapGutter.deletedBackground#F07171
minimapGutter.modifiedBackground#FA8D3E
notebook.focusedRowBorder#fa8d3e
notifications.background#300a24
notificationsErrorIcon.foreground#F07171
notificationsInfoIcon.foreground#FA8D3E
notificationsWarningIcon.foreground#EF7C2A
panel.dropBorder#fa8d3e
panelTitle.activeBorder#fa8d3e
peekViewResult.background#3d0d2d
peekViewTitle.background#23071a
pickerGroup.border#160511
pickerGroup.foreground#fa8d3e
problemsErrorIcon.foreground#F07171
problemsInfoIcon.foreground#FA8D3E
problemsWarningIcon.foreground#EF7C2A
progressBar.background#fa8d3e
scrollbar.shadow#060104
scrollbarSlider.activeBackground#63154a40
scrollbarSlider.background#7d1a5d50
scrollbarSlider.hoverBackground#961f7040
selection.background#fa8d3e80
settings.modifiedItemIndicator#FA8D3E
sideBar.background#2a091f
sideBarSectionHeader.background#370c28
statusBar.background#23071a
statusBarItem.hoverBackground#fa8d3e
statusBarItem.prominentBackground#fa8d3e
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#e17f38
tab.activeBackground#300a24
tab.activeBorder#fa8d3e
tab.activeModifiedBorder#FA8D3E
tab.border#4a0f37
tab.hoverBackground#4a0f37
tab.inactiveBackground#3d0d2d
tab.lastPinnedBorder#fa8d3e50
terminal.selectionBackground#fa8d3e
terminalCursor.background#000000
terminalCursor.foreground#fa8d3e
textLink.activeForeground#FFCE6B
textLink.foreground#FA8D3E
textPreformat.foreground#A470D8
textSeparator.foreground#160511
titleBar.activeBackground#3d0d2d
titleBar.border#420e30
titleBar.inactiveBackground#300a24
widget.shadow#060104

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#F07171	—
meta.embedded, source.groovy.embedded, meta.template.expression	#A5A59E	—
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable	#C6C6BD	—
comment, punctuation.definition.comment	#535351	—
string, punctuation.definition.string	#A5A59E	—
constant.character.escape	#FA8D3E	—
keyword, constant.language.import-export-all	#FFCE6B	—
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type	#F07171	—
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new	#95CCFF	—
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class	#FFCE6B	—
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded	#A470D8	—
constant	#F07171	—
constant.numeric, constant.language	#fa8d3e	—
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust	#fa8d3e	—
punctuation, meta.brace	#D9D9d9	—
comment.block.documentation entity.name.type	#A470D8	—
variable.language.this, variable.language.special.self	#95CCFF	—
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype	#A5A59E	—
entity.name.tag	#FA8D3E	—
meta.tag string	#4CBF99	—
meta.attribute punctuation.definition.string	#A5A59E	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#FFCE6B	—
constant.character.entity, punctuation.definition.entity	#fa8d3e	—
entity.name.section.markdown, markup.heading.setext	#FFCE6B	—
punctuation.definition.list	#FFCE6B	—
meta.separator.markdown	#FFCE6B	—
markup.inline.raw	#FA8D3E	—
markup.bold	—	bold
markup.italic	—	italic
meta.link punctuation.definition.string, meta.image punctuation.definition.string	#A5A59E	—
link, markup.underline.link, constant.other.reference.link.markdown	#FFCE6B	—
markup.quote	#fa8d3e	—
entity.name.tag.css, entity.name.tag.wildcard	#4CBF99	—
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity	#FFCE6B	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color	#FA8D3E	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#FFCE6B	—
source.css constant.numeric	#4CBF99	—
meta.property-name, support.type.property-name	#fa8d3e	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#FFCE6B	—
variable.parameter.url	#fa8d3e	—
punctuation.definition.variable	#A5A59E	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#FFCE6B	—
entity.name.section	#FFCE6B	—
support.type.property-name.json	#FFCE6B	—
markup.inserted	#FFCE6B	—
markup.changed	#FA8D3E	—
markup.deleted	#F07171	—
meta.diff.header	#FA8D3E	italic
meta.diff.range	#FA8D3E	—

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