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 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.activeBackground#37474F
activityBar.activeBorder#82AAFF
activityBar.background#252526
activityBar.foreground#eeffff
button.background#37474F
button.border#37474F
button.foreground#eeffff
button.hoverBackground#37474F
debugIcon.continueForeground#C3E88D
debugIcon.disconnectForeground#FFCB6B
debugIcon.pauseForeground#FFCB6B
debugIcon.restartForeground#C3E88D
debugIcon.startForeground#C3E88D
debugIcon.stepBackForeground#82AAFF
debugIcon.stepIntoForeground#82AAFF
debugIcon.stepOutForeground#82AAFF
debugIcon.stepOverForeground#82AAFF
debugIcon.stopForeground#FF5370
debugToolBar.background#252526
dropdown.background#252526
dropdown.border#37474F
dropdown.foreground#eeffff
editor.background#252526
editor.findMatchBackground#997974
editor.findMatchBorder#997974
editor.findMatchHighlightBackground#997974
editor.findMatchHighlightBorder#997974
editor.foreground#eeffff
editor.inactiveSelectionBackground#37474F80
editor.lineHighlightBackground#00000050
editor.selectionBackground#80CBC420
editor.wordHighlightBackground#80CBC470
editor.wordHighlightStrongBackground#FF5370
editorIndentGuide.activeBackground#546E7A
editorIndentGuide.background#37474F
editorLineNumber.activeForeground#546E7A
editorLineNumber.foreground#37474F
editorSuggestWidget.background#252526
editorSuggestWidget.border#37474F
editorSuggestWidget.highlightForeground#82AAFF
editorSuggestWidget.selectedBackground#80CBC420
editorWidget.background#252526
editorWidget.border#37474F
extensionButton.prominentBackground#82AAFF
extensionButton.prominentForeground#252526
extensionButton.prominentHoverBackground#89DDFF
gitDecoration.addedResourceForeground#C3E88D
gitDecoration.conflictingResourceForeground#FF5370
gitDecoration.deletedResourceForeground#FF5370
gitDecoration.ignoredResourceForeground#546E7A
gitDecoration.modifiedResourceForeground#FFCB6B
gitDecoration.renamedResourceForeground#82AAFF
gitDecoration.untrackedResourceForeground#C792EA
input.background#252526
input.border#37474F
input.foreground#eeffff
input.placeholderForeground#546E7A
list.activeSelectionBackground#80CBC420
list.activeSelectionForeground#eeffff
list.background#252526
list.focusBackground#80CBC420
list.focusForeground#eeffff
list.foreground#eeffff
list.hoverBackground#37474F
list.inactiveSelectionBackground#37474F
list.inactiveSelectionForeground#eeffff
notification.background#252526
notification.border#37474F
notification.foreground#eeffff
panel.background#252526
panel.border#37474F
peekView.border#82AAFF
peekViewEditor.background#252526
peekViewEditor.matchHighlightBackground#997974
peekViewResult.background#252526
peekViewResult.fileForeground#eeffff
peekViewResult.lineForeground#546E7A
peekViewResult.matchHighlightBackground#997974
peekViewTitle.background#37474F
peekViewTitleDescription.foreground#546E7A
peekViewTitleLabel.foreground#eeffff
progressBar.background#82AAFF
scrollbar.shadow#37474F
scrollbarSlider.activeBackground#80CBC4
scrollbarSlider.background#546E7A
scrollbarSlider.hoverBackground#65737e
sideBar.background#252526
sideBar.foreground#eeffff
sideBarTitle.foreground#eeffff
statusBar.background#252526
statusBar.debuggingBackground#FFCB6B
statusBar.debuggingForeground#252526
statusBar.foreground#eeffff
tab.activeBackground#37474F
tab.activeBorder#82AAFF
tab.activeBorderTop#82AAFF
tab.activeForeground#eeffff
tab.border#37474F
tab.inactiveBackground#252526
tab.inactiveForeground#546E7A
terminal.background#252526
terminal.foreground#eeffff
titleBar.activeBackground#252526
titleBar.activeForeground#eeffff
titleBar.inactiveBackground#252526
titleBar.inactiveForeground#546E7A
tree.indentGuidesStroke#37474F
tree.tableColumnsBorder#37474F
welcomePage.background#252526
welcomePage.progress.background#82AAFF
welcomePage.progress.foreground#eeffff
welcomePage.tileBackground#252526
welcomePage.tileBorder#37474F
welcomePage.tileHoverBackground#37474F
widget.shadow#37474F

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	#546E7A	italic
variable, variable.other, variable.parameter, variable.language, string constant.other.placeholder	#eeffff	—
constant.other.color	#ffffff	—
invalid, invalid.illegal, invalid.broken	#ffffff	—
invalid.unimplemented	#ffffff	—
invalid.deprecated	#ffffff	—
keyword, storage.type, storage.modifier	#C792EA	—
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	#89DDFF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level	#82AAFF	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#F78C6C	—
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	#C3E88D	normal
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	#FFCB6B	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#C17E70	—
entity.name.filename.find-in-files	#C3E88D	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C3E88D	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C792EA	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#f07178	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#82AAFF	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C17E70	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FF5370	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#F78C6C	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FFCB6B	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C792EA	—
text.html.markdown, punctuation.definition.list_item.markdown	#eeffff	—
text.html.markdown markup.raw.inline	#C792EA	—
text.html.markdown punctuation.definition.raw.markdown	#65737e	—
text.html.markdown meta.dummy.line-break		—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	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	#F78C6C	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#65737e	—
markup.quote		italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	—	—
punctuation.definition.fenced.markdown	—	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#eeffff	—
variable.language.fenced.markdown	#65737e
text.html.markdown punctuation.definition	#546E7A	—
text.html.markdown meta.disable-markdown punctuation.definition	#89DDFF	—
meta.separator	#65737e	bold
markup.table	#eeffff	—
acejump.label.blue	#ffffff	—
acejump.label.green	#ffffff	—
acejump.label.orange	#ffffff	—
acejump.label.purple	#ffffff	—
sublimelinter.mark.warning	#FFCB6B	—
sublimelinter.gutter-mark	#ffffff	—
sublimelinter.mark.error	#FF5370	—
sublimelinter.annotations	—	—
markup.ignored.git_gutter	#65737e	—
markup.untracked.git_gutter	#65737e	—
markup.inserted.git_gutter	#C3E88D	—
markup.changed.git_gutter	#FFCB6B	—
markup.deleted.git_gutter	#FF5370	—
brackethighlighter.default	#B2CCD6	—
brackethighlighter.quote	#C3E88D	—
brackethighlighter.unmatched	#FF5370	—

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