Omi Theme

Name: Omi Theme
Author: Omprakash Chauhan

Publisher: Omprakash ChauhanThemes in package: 2

A modern, eye-friendly VS Code theme optimized for web and mobile development with both light and dark variants

GitHub

Color themes

VS Code preview

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

Omi Theme — Omi Light

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#90A4AE20
activityBar.activeBorder#6182B8
activityBar.background#F3F3F3
activityBar.foreground#80CBC4
button.background#E7EAEC
button.border#B0BEC5
button.foreground#80CBC4
button.hoverBackground#CFD8DC
debugIcon.continueForeground#91B859
debugIcon.disconnectForeground#FFB62C
debugIcon.pauseForeground#FFB62C
debugIcon.restartForeground#91B859
debugIcon.startForeground#91B859
debugIcon.stepBackForeground#6182B8
debugIcon.stepIntoForeground#6182B8
debugIcon.stepOutForeground#6182B8
debugIcon.stepOverForeground#6182B8
debugIcon.stopForeground#E53935
debugToolBar.background#FAFAFA
dropdown.background#FAFAFA
dropdown.border#B0BEC5
dropdown.foreground#80CBC4
editor.background#F3F3F3
editor.findMatchBackground#997974
editor.findMatchBorder#997974
editor.findMatchHighlightBackground#997974
editor.findMatchHighlightBorder#997974
editor.foreground#80CBC4
editor.inactiveSelectionBackground#B0BEC570
editor.lineHighlightBackground#90A4AE20
editor.selectionBackground#80CBC440
editor.wordHighlightBackground#6182B8
editor.wordHighlightStrongBackground#E53935
editorIndentGuide.activeBackground#90A4AE
editorIndentGuide.background#B0BEC570
editorLineNumber.activeForeground#80CBC4
editorLineNumber.foreground#CFD8DC
editorSuggestWidget.background#FAFAFA
editorSuggestWidget.border#B0BEC5
editorSuggestWidget.highlightForeground#6182B8
editorSuggestWidget.selectedBackground#80CBC440
editorWidget.background#FAFAFA
editorWidget.border#B0BEC5
extensionButton.prominentBackground#6182B8
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#7C4DFF
gitDecoration.addedResourceForeground#91B859
gitDecoration.conflictingResourceForeground#E53935
gitDecoration.deletedResourceForeground#E53935
gitDecoration.ignoredResourceForeground#CFD8DC
gitDecoration.modifiedResourceForeground#FFB62C
gitDecoration.renamedResourceForeground#6182B8
gitDecoration.untrackedResourceForeground#7C4DFF
input.background#FAFAFA
input.border#B0BEC5
input.foreground#80CBC4
input.placeholderForeground#CFD8DC
list.activeSelectionBackground#80CBC440
list.activeSelectionForeground#80CBC4
list.background#FAFAFA
list.focusBackground#80CBC440
list.focusForeground#80CBC4
list.foreground#80CBC4
list.hoverBackground#E7EAEC
list.inactiveSelectionBackground#90A4AE20
list.inactiveSelectionForeground#80CBC4
notification.background#FAFAFA
notification.border#B0BEC5
notification.foreground#80CBC4
panel.background#FAFAFA
panel.border#B0BEC5
peekView.border#6182B8
peekViewEditor.background#FAFAFA
peekViewEditor.matchHighlightBackground#997974
peekViewResult.background#FAFAFA
peekViewResult.fileForeground#80CBC4
peekViewResult.lineForeground#CFD8DC
peekViewResult.matchHighlightBackground#997974
peekViewTitle.background#E7EAEC
peekViewTitleDescription.foreground#CFD8DC
peekViewTitleLabel.foreground#80CBC4
progressBar.background#6182B8
scrollbar.shadow#90A4AE50
scrollbarSlider.activeBackground#90A4AE
scrollbarSlider.background#CFD8DC
scrollbarSlider.hoverBackground#B0BEC5
sideBar.background#FAFAFA
sideBar.foreground#80CBC4
sideBarTitle.foreground#80CBC4
statusBar.background#FAFAFA
statusBar.debuggingBackground#FFB62C
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#80CBC4
tab.activeBackground#E7EAEC
tab.activeBorder#6182B8
tab.activeBorderTop#6182B8
tab.activeForeground#80CBC4
tab.border#B0BEC5
tab.inactiveBackground#F3F3F3
tab.inactiveForeground#CFD8DC
terminal.background#F3F3F3
terminal.foreground#80CBC4
titleBar.activeBackground#FAFAFA
titleBar.activeForeground#80CBC4
titleBar.inactiveBackground#F3F3F3
titleBar.inactiveForeground#CFD8DC
tree.indentGuidesStroke#B0BEC5
tree.tableColumnsBorder#B0BEC5
welcomePage.background#F3F3F3
welcomePage.progress.background#6182B8
welcomePage.progress.foreground#80CBC4
welcomePage.tileBackground#FAFAFA
welcomePage.tileBorder#B0BEC5
welcomePage.tileHoverBackground#E7EAEC
widget.shadow#90A4AE50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage, punctuation.definition.comment	#CCD7DA	italic
variable, variable.other, variable.parameter, variable.language, string constant.other.placeholder	#80CBC4	—
keyword, storage.type, storage.modifier, constant.language, support.type.primitive	#7C4DFF	—
storage.type, keyword.control	—	italic
keyword.operator, constant.other.color, punctuation, meta.tag, 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	#39ADB5	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#FF5370	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level	#6182B8	—
support.other.variable, string.other.link	#FF5370	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#F76D47	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#91B859	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFB62C	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#8796B0	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E53935	—
variable.language	#E53935	italic
entity.name.method.js	#6182B8	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#6182B8	—
entity.other.attribute-name	#7C4DFF	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFB62C	italic
entity.other.attribute-name.class	#FFB62C	—
source.sass keyword.control	#6182B8	—
markup.inserted	#91B859	—
markup.deleted	#E53935	—
markup.changed	#7C4DFF	—
string.regexp	#39ADB5	—
constant.character.escape	#39ADB5	—
url, link, uri	—	underline
invalid, invalid.illegal, invalid.broken	#FFFFFF	—
invalid.unimplemented	#FFFFFF	—
invalid.deprecated	#FFFFFF	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#6182B8	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E53935	italic
text.html.markdown, punctuation.definition.list_item.markdown	#80CBC4	—
text.html.markdown markup.raw.inline	#7C4DFF	—
text.html.markdown punctuation.definition.raw.markdown	#E7EAEC	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#91B859	—
markup.italic	#FF5370	italic
markup.bold, markup.bold string	#FF5370	bold
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	—	bold italic
markup.underline	#F76D47	underline
markup.quote punctuation.definition.blockquote.markdown	#E7EAEC	—
markup.quote	—	italic
string.other.link.title.markdown	#6182B8	—
string.other.link.description.title.markdown	#7C4DFF	—
constant.other.reference.link.markdown	#FFB62C	—
markup.raw.block	#7C4DFF	—
markup.raw.block.fenced.markdown	—	—
punctuation.definition.fenced.markdown	—	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#80CBC4	—
variable.language.fenced.markdown	#E7EAEC	—
text.html.markdown punctuation.definition	#CCD7DA	—
text.html.markdown meta.disable-markdown punctuation.definition	#39ADB5	—
meta.separator	#E7EAEC	bold
markup.table	#80CBC4	—
markup.ignored.git_gutter	#E7EAEC	—
markup.untracked.git_gutter	#E7EAEC	—
markup.inserted.git_gutter	#91B859	—
markup.changed.git_gutter	#FFB62C	—
markup.deleted.git_gutter	#E53935	—
brackethighlighter.default	#8796B0	—
brackethighlighter.quote	#91B859	—
brackethighlighter.unmatched	#E53935	—
constant.numeric.line-number.find-in-files - match	#C17E70	—
entity.name.filename.find-in-files	#91B859	—
constant.other.color	#FFFFFF	—

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