Expo Theme
Publisher: ExpoThemes in package: 2
Expo-inspired editor and syntax theme.
Expo-inspired editor and syntax theme.
Full workbench mockup using this variant's colors and tokenColors.
Loading...
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment.line | #777b84 | — |
| comment.block | #777b84 | — |
| constant.numeric | #ffca16 | — |
| constant.language | #de51a8 | — |
| constant.other.variable | #3dd68c | — |
| editorBracketMatch.border | #696e77 | — |
| entity.name.tag | #f76b15 | — |
| entity.name.type | #3dd68c | — |
| entity.name.type.class | #3b9eff | — |
| entity.name.type.module | #3b9eff | — |
| entity.other | #3b9eff | — |
| entity.other.attribute-name | #e5484d | — |
| entity.scope.name | #0090ff | — |
| keyword.control | #9a5cd0 | — |
| keyword.control.flow | #de51a8 | — |
| keyword.control.new | #e5484d | — |
| keyword.other | #de51a8 | — |
| keyword.operator | #777b84 | — |
| keyword.operator.assignment | #696e77 | — |
| keyword.operator.expression | #f76b15 | — |
| keyword.operator.logical | #777b84 | — |
| keyword.operator.rest | #696e77 | — |
| keyword.operator.spread | #696e77 | — |
| keyword.operator.type.annotation | #696e77 | — |
| keyword.operator.ternary | #777b84 | — |
| keyword.operator.new | #e5484d | — |
| meta.brace | #696e77 | — |
| meta.definition.variable | #edeef0 | — |
| meta.definition.function | #3b9eff | — |
| meta.definition.method | #3b9eff | — |
| meta.definition.property | #3b9eff | — |
| meta.function-call | #9a5cd0 | — |
| meta.import | #edeef0 | — |
| meta.object-literal.key | #edeef0 | — |
| punctuation.accessor | #696e77 | — |
| punctuation.bracket | #696e77 | — |
| punctuation.definition | #696e77 | — |
| punctuation.definition.annotation | #ffca16 | — |
| punctuation.definition.block | #696e77 | — |
| punctuation.definition.parameters | #696e77 | — |
| punctuation.definition.string | #696e77 | — |
| punctuation.section | #696e77 | — |
| punctuation.separator | #696e77 | — |
| punctuation.separator.dot-access | #696e77 | — |
| punctuation.terminator.statement | #696e77 | — |
| storage.modifier | #e5484d | — |
| storage.modifier.import | #b0b4ba | — |
| storage.type | #de51a8 | — |
| storage.type.annotation | #ffca16 | — |
| storage.type.generic | #0090ff | — |
| storage.type.function.arrow | #696e77 | — |
| string.quoted | #ffca16 | — |
| string.template | #ffca16 | — |
| support.type.primitive | #f76b15 | — |
| support.type.property-name | #f76b15 | — |
| support.type.builtin | #de51a8 | — |
| variable.object.property | #edeef0 | — |
| variable.other | #edeef0 | — |
| variable.other.constant | #3b9eff | — |
| variable.other.macro.argument | #de51a8 | — |
| variable.parameter.probably | #3b9eff | — |
| variable.language | #de51a8 | — |
| source.java entity.name.function | #3b9eff | — |
| source.java keyword.control.new | #e5484d | — |
| source.java storage.modifier | #f76b15 | — |
| source.java storage.modifier.extends | #de51a8 | — |
| source.java storage.modifier.implements | #de51a8 | — |
| source.java storage.type | #3dd68c | — |
| source.java storage.type.primitive | #de51a8 | — |
| source.java storage.type.generic | #3dd68c | — |
| source.java punctuation.terminator | #777b84 | — |
| source.kotlin keyword.control.new | #e5484d | — |
| source.kotlin storage.modifier | #f76b15 | — |
| source.kotlin variable.parameter.function | #ffca16 | — |
| source.kotlin entity.other.inherited-class | #9a5cd0 | — |
| source.kotlin punctuation.seperator | #777b84 | — |
| text.html.markdown fenced_code.block.language | #9a5cd0 | — |
| text.html.markdown markup.bold | #de51a8 | — |
| text.html.markdown markup.italic | #3dd68c | — |
| text.html.markdown markup.strikethrough | #e5484d | — |
| text.html.markdown markup.inline.raw.string | #ffca16 | — |
| text.html.markdown markup.underline.link | #3b9eff | — |
| text.html.markdown meta.paragraph | #edeef0 | — |
| text.html.markdown punctuation.definition.heading | #0090ff | — |
| text.html.markdown string.other.link.title | #3dd68c | — |
| text.html.markdown meta.separator | #777b84 | — |
| source.mdx meta.paragraph | #edeef0 | — |
| source.mdx punctuation.definition.heading | #0090ff | — |
| source.mdx string.other.begin.code.fenced | #777b84 | — |
| source.mdx string.other.end.code.fenced | #777b84 | — |
| source.mdx variable.ordered.list | #777b84 | — |
| source.mdx variable.unordered.list | #777b84 | — |
| source.mdx markup.code | #9a5cd0 | — |
| source.mdx string.other.number | #777b84 | — |
| source.mdx meta.separator | #777b84 | — |
| source.mdx support.class.component | #f76b15 | — |
| source.objc entity.name.function | #3b9eff | — |
| source.objc entity.name.function.preprocessor | #f76b15 | — |
| source.objc keyword.other.property.attribute | #f76b15 | — |
| source.objc meta.bracketed | #de51a8 | — |
| source.objc meta.function-call | #edeef0 | — |
| source.objc storage.type | #e5484d | — |
| source.objc support.class.cocoa | #3dd68c | — |
| source.objc support.other.protocol | #f76b15 | — |
| source.ruby constant.other.symbol.hashkey | #3dd68c | — |
| source.ruby entity.name.function | #3b9eff | — |
| source.ruby support.class | #f76b15 | — |
| source.ruby variable.parameter.function | #3dd68c | — |
| source.shell entity.name.command | #3b9eff | — |
| source.shell support.function.builtin | #de51a8 | — |
| source.swift entity.name.type | #3b9eff | — |
| source.swift support.function.any-method | #3b9eff | — |
| source.swift keyword.control.new | #e5484d | — |
| source.swift meta.parameter-clause | #3dd68c | — |
| source.swift meta.function-call | #edeef0 | — |
| source.swift entity.name.function | #3b9eff | — |
| source.swift meta.definition.function.body | #edeef0 | — |
| source.swift meta.definition.type.body | #edeef0 | — |
| source.swift meta.inheritance-clause | #f76b15 | — |
| source.swift punctuation.definition.attribute | #f76b15 | — |
| source.swift storage.modifier | #f76b15 | — |
| source.swift support.type | #3dd68c | — |
| source.swift support.function | #9a5cd0 | — |
| source.swift variable.parameter.function | #ffca16 | — |
| source.swift meta.function-result | #3dd68c | — |
| source.swift variable.language.generic-parameter | #3dd68c | — |
| source.ts punctuation.definition.block.tag.jsdoc | #f76b15 | — |
| source.ts storage.type.class.jsdoc | #f76b15 | — |
| source.tsx punctuation.definition.block.tag.jsdoc | #f76b15 | — |
| source.tsx storage.type.class.jsdoc | #f76b15 | — |
| text.xml entity.other.attribute-name.localname | #3b9eff | — |
| source.gdscript constant.language | #f76b15 | — |
| source.gdscript entity.name.function | #3b9eff | — |
| source.gdscript entity.name.type.class | #e5484d | — |
| source.gdscript entity.other.inherited-class | #e5484d | — |
| source.gdscript keyword.language | #de51a8 | — |
| source.gdscript keyword.control | #de51a8 | — |
| source.gdscript support.function | #3b9eff | — |
| source.gdscript variable.parameter.function | #3dd68c | — |
| source.dart entity.name.function | #3b9eff | — |
| source.dart keyword.declaration | #de51a8 | — |
| source.dart punctuation | #777b84 | — |
| source.dart other.source | #777b84 | — |
| source.dart string.interpolated | #ffca16 | — |
| source.dart string.quoted | #ffca16 | — |
| source.dart string.template | #ffca16 | — |
| source.dart support.class | #f76b15 | — |
| source.dart variable.parameter | #f76b15 | — |
| source.dart storage.modifier | #de51a8 | — |
| source.dart storage.type.annotation | #e5484d | — |
| source.dart meta.embedded.expression | #f76b15 | — |
| source.cs keyword.type | #f76b15 | — |
| source.cs keyword.type.void | #de51a8 | — |
| source.cs entity.name.function | #3b9eff | — |
| source.cs variable.other.object.property | #9a5cd0 | — |
| source.cs punctuation | #777b84 | — |
| source.diff meta.diff.header | #3b9eff | — |
| source.diff meta.diff.header.from-file | #ec5d5e | — |
| source.diff meta.diff.header.from-file punctuation.definition | #8c333a | — |
| source.diff meta.diff.header.to-file | #3dd68c | — |
| source.diff meta.diff.header.to-file punctuation.definition | #28684a | — |
| source.diff meta.diff.range | #9a5cd0 | — |
| source.diff markup.inserted.diff | #3dd68c | — |
| source.diff markup.deleted.diff | #ec5d5e | — |
| source.diff punctuation.definition.inserted.diff | #28684a | — |
| source.diff punctuation.definition.deleted.diff | #8c333a | — |
| source.diff punctuation.definition.range.diff | #8457aa | — |
| source.rust entity.name.function | #3b9eff | — |
| source.rust keyword.control.flow | #de51a8 | — |
| source.rust entity.name.namespace | #ff801f | — |
| source.rust meta.attribute.rust | #e5484d | — |
| source.rust punctuation | #777b84 | — |
| source.zig entity.name.function | #3b9eff | — |
| source.zig keyword.control.flow | #de51a8 | — |
| source.zig keyword.default | #de51a8 | — |
| source.zig keyword.structure | #de51a8 | — |
| source.zig keyword.storage | #9a5cd0 | — |
| source.zig keyword.type | #9a5cd0 | — |
| source.zig keyword.type.c | #3dd68c | — |
| source.zig support.function.builtin.zig | #ff801f | — |
| source.zig punctuation | #777b84 | — |
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...
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}!`;
}
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}!`;
}