Monokai Rainstorm
Publisher: Michelle MoundeThemes in package: 11
A collection of light and dark themes with grey-blue backgrounds, water highlights, and Sweet Dracula Monokai syntax highlighting.
A collection of light and dark themes with grey-blue backgrounds, water highlights, and Sweet Dracula Monokai syntax highlighting.
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 |
|---|---|---|
| emphasis | — | italic |
| strong | — | bold |
| header | #7b3aa0 | — |
| source | #22313f | — |
| entity.name.type.class, entity.name.type.cpp | #5a8c1f | underline bold |
| entity.name.namespace | — | italic |
| storage.type | #2b7fa6 | italic bold |
| keyword.other.this, variable.language, variable.parameter.function.language.special | #b85c0f | bold |
| entity.other.inherited-class | #5a8c1f | italic underline |
| support.class.builtin | #5a8c1f | bold |
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #6272A4 | — |
| comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class | #2b7fa6 | bold |
| comment.block.documentation variable | #b85c0f | — |
| constant | #7b3aa0 | — |
| variable.other.constant | #7b3aa0 | — |
| constant.character.escape, constant.character.string.escape, constant.regexp | #7b3aa0 | — |
| constant.other.date, constant.other.timestamp | #b85c0f | — |
| support.variable, variable.other.predefined | #7b3aa0 | — |
| meta.definition.function, meta.definition.method | #5a8c1f | — |
| entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter | #b85c0f | italic bold |
| entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix, support.function.gradient.css, support.function.misc.css, support.function.url.css, support.function.timing-function.css, support.function.transform.css | #5a8c1f | bold |
| meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object | #5a8c1f | — |
| support.function.magic | #2b7fa6 | — |
| keyword, punctuation.definition.keyword | #b5216c | bold |
| keyword.control.new, keyword.operator.new | — | bold |
| entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.definition.entity.other.inherited-class, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, punctuation.separator.annotation, punctuation.accessor | #b5216c | — |
| meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end | #b5216c | — |
| string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.end source.js-ignored-vscode, punctuation.definition.string.end source.css-ignored-vscode, meta.embedded.line.css source.css | #9a9328 | — |
| support.type.property-name, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end | #2b7fa6 | bold |
| storage | #b5216c | — |
| entity.name.type | #2b7fa6 | bold |
| entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type | #b85c0f | bold |
| storage.modifier | #b5216c | — |
| variable, support.variable.property | #22313f | — |
| meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property | #b85c0f | — |
| meta.import variable.other.readwrite.alias | #22313f | — |
| storage.type.c | #2b7fa6 | bold |
| punctuation.section.embedded.coffee | #b5216c | — |
| meta.variable.assignment.destructured.object.coffee variable | #b85c0f | — |
| meta.variable.assignment.destructured.object.coffee variable variable | #F8F8F2 | — |
| punctuation.definition.tag.cs | #22313f | — |
| keyword.type.cs, storage.type.cs | #2b7fa6 | bold |
| meta.diff, meta.diff.header | #6272A4 | — |
| markup.inserted | #5a8c1f | — |
| markup.deleted | #F44747 | — |
| markup.changed | #b85c0f | — |
| invalid | #F44747 | underline italic |
| invalid.deprecated | #22313f | underline italic |
| entity.name.filename | #9a9328 | — |
| markup.error | #F44747 | — |
| entity.name.function.elixir | #5a8c1f | bold |
| constant.other.symbol.elixir, constant.language.symbol.elixir | #2b7fa6 | bold |
| entity.name.type.module.elixir | #5a8c1f | bold |
| variable.other.readwrite.module.elixir, variable.other.readwrite.module.elixir punctuation.definition.variable.elixir | #b85c0f | — |
| punctuation.separator.method.elixir | #b5216c | — |
| punctuation.section.embedded.elixir | #b5216c | — |
| variable.other.anonymous.elixir punctuation.definition.variable.elixir | #b5216c | — |
| punctuation.other.period.go, punctuation.other.colon.go | #b5216c | — |
| source.go storage.type | #2b7fa6 | bold |
| entity.name.type.go | #7b3aa0 | bold |
| entity.name.function.go | #5a8c1f | bold |
| support.function.go | #2b7fa6 | — |
| punctuation.colon.graphql | #b5216c | — |
| variable.graphql, variable.arguments.graphql | #9a9328 | — |
| support.type.graphql, support.type.builtin.graphql, support.type.enum.graphql, entity.scalar.graphql | #2b7fa6 | bold |
| entity.name.function.graphql | #5a8c1f | bold |
| meta.selectionset.graphql variable.graphql, variable.parameter.graphql | #b85c0f | bold |
| source.groovy storage.type.def | #b5216c | bold |
| source.groovy storage.type, storage.type.groovy | #2b7fa6 | bold |
| keyword.operator.navigation.groovy | #F8F8F2 | bold |
| storage.type.haskell | #2b7fa6 | bold |
| meta.preprocessor.haskell | #6272A4 | — |
| constant.language.empty-list.haskell | #22313f | bold |
| punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx | #b5216c | — |
| entity.name.tag | #b5216c | — |
| text.html.derivative | #22313f | — |
| punctuation.definition.tag | #6272A4 | — |
| entity.name.tag support.class.component.js, entity.name.tag support.class.component.tsx | #22313f | bold |
| meta.selector | #b5216c | — |
| entity.other.attribute-name.parent-selector | #b5216c | — |
| meta.attribute-selector.scss | #9a9328 | — |
| punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss | #F8F8F2 | — |
| entity.other.attribute-name | #5a8c1f | — |
| punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css | #22313f | — |
| support.constant.property-value.css | #2b7fa6 | — |
| keyword.control.at-rule.media.scss, keyword.control.at-rule.media.scss punctuation.definition.keyword.scss | #5a8c1f | bold |
| storage.type.generic.java | #22313f | bold |
| source.java storage.type | #2b7fa6 | bold |
| keyword.operator.dereference.java, storage.modifier.import | #22313f | bold |
| support.variable.property.js | #7b3aa0 | — |
| variable.other.constant.js | #2b7fa6 | — |
| support.class.console.js, support.type.object.module.js, support.class.promise.js, support.constant.json.js | #5a8c1f | bold |
| support.class.js | #5a8c1f | bold |
| meta.object-literal.key.js entity.name.function.js, meta.var.expr.js meta.definition.variable.js entity.name.function.js, meta.definition.property.js entity.name.function.js | #5a8c1f | bold |
| meta.function-call.js | #2b7fa6 | — |
| punctuation.definition.variable.makefile | #b5216c | — |
| entity.name.function.target.makefile | #2b7fa6 | bold |
| meta.scope.prerequisites.makefile | #9a9328 | — |
| markup.underline | — | underline |
| markup.bold | #b85c0f | bold |
| markup.heading | #7b3aa0 | bold |
| markup.italic | #9a9328 | italic bold |
| beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext | #2b7fa6 | — |
| markup.inline.raw, markup.raw.restructuredtext | #5a8c1f | — |
| markup.underline.link, markup.underline.link.image | #2b7fa6 | — |
| meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title | #b5216c | — |
| entity.name.directive.restructuredtext, markup.quote | #9a9328 | italic |
| meta.separator.markdown | #6272A4 | — |
| fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown | #5a8c1f | — |
| punctuation.definition.constant.restructuredtext | #7b3aa0 | — |
| markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end | #7b3aa0 | bold |
| meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end | #22313f | — |
| markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end | #9a9328 | — |
| meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc | #b5216c | bold |
| meta.protocol-list.objc, meta.return-type.objc, storage.type.objc | #2b7fa6 | bold |
| storage.type.ocaml | #2b7fa6 | bold |
| constant.other.key.perl | #22313f | — |
| variable.language punctuation.definition.variable.php | #7b3aa0 | — |
| meta.function.arguments variable.other.php | #5a8c1f | — |
| punctuation.section.embedded.end source.php | #b5216c | — |
| storage.type.php | #2b7fa6 | bold |
| keyword.operator.other.powershell, keyword.other.statement-separator.powershell | #22313f | bold |
| source.powershell entity.other.attribute-name | #2b7fa6 | — |
| support.constant | #7b3aa0 | — |
| source.python storage.type | #2b7fa6 | bold |
| support.type.python | #2b7fa6 | italic bold |
| meta.function-call.python support.type.python, meta.function-call.python support.function.builtin.python | #2b7fa6 | bold |
| punctuation.separator.period.python, punctuation.separator.colon.python, punctuation.separator.dict.python, punctuation.section.function.begin.python | #b5216c | — |
| string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp | #9a9328 | — |
| support.other.parenthesis.regexp, support.other.escape.special.regexp | #2b7fa6 | — |
| keyword.operator.lookahead, keyword.operator.lookbehind | #F44747 | bold |
| punctuation.definition.group.capture.regexp | #b5216c | — |
| string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end | #2b7fa6 | italic |
| punctuation.definition.character-class.regexp | #2b7fa6 | — |
| punctuation.definition.group.regexp | #b85c0f | — |
| punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp | #F44747 | bold |
| meta.assertion.look-ahead.regexp | #5a8c1f | — |
| variable.other.readwrite.instance.ruby, variable.other.readwrite.instance.ruby punctuation.definition.variable.ruby | #b85c0f | — |
| variable.other.readwrite.class.ruby, variable.other.readwrite.class.ruby punctuation.definition.variable.ruby | #b85c0f | — |
| variable.other.constant.ruby | #7b3aa0 | — |
| entity.name.type.module.ruby | #5a8c1f | bold |
| entity.name.type.class.ruby | #5a8c1f | bold |
| entity.other.inherited-class.ruby | #7b3aa0 | — |
| support.class.ruby | #7b3aa0 | bold |
| meta.function.method.with-arguments.ruby entity.name.function.ruby, meta.function.method.without-arguments.ruby entity.name.function.ruby | #5a8c1f | bold |
| variable.parameter.function.ruby | #22313f | bold |
| variable.other.block.ruby | #22313f | — |
| meta.function-call.ruby entity.name.function.ruby, support.function.kernel.ruby | #22313f | bold |
| punctuation.separator.method.ruby | #b5216c | — |
| punctuation.section.embedded.end source.ruby | #b5216c | — |
| constant.language.symbol.hashkey.ruby, constant.language.symbol.hashkey.parameter.function.ruby, constant.language.symbol.ruby, constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby, punctuation.definition.constant.hashkey.ruby | #2b7fa6 | bold |
| storage.class.std.rust, storage.type.core.rust | #2b7fa6 | bold |
| source.shell variable.other | #7b3aa0 | — |
| keyword.expressions-and-types.swift | #7b3aa0 | bold |
| punctuation.function.swift | #b5216c | — |
| keyword.primitive-datatypes.swift, storage.type.attribute.swift | #2b7fa6 | bold |
| meta.group.double.toml, meta.group.toml | #b5216c | — |
| entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml | #2b7fa6 | — |
| support.variable.property.ts, support.variable.property.tsx | #7b3aa0 | — |
| variable.other.constant.ts, variable.other.constant.tsx | #2b7fa6 | — |
| support.class.console.ts, support.type.object.module.ts, support.class.promise.ts, support.constant.json.ts, support.class.console.tsx, support.type.object.module.tsx, support.class.promise.tsx, support.constant.json.tsx | #5a8c1f | bold |
| support.class.ts, support.class.tsx | #5a8c1f | bold |
| meta.object-literal.key.ts entity.name.function.ts, meta.var.expr.ts meta.definition.variable.ts entity.name.function.ts, meta.definition.property.ts entity.name.function.ts, meta.object-literal.key.tsx entity.name.function.tsx, meta.var.expr.tsx meta.definition.variable.tsx entity.name.function.tsx, meta.definition.property.tsx entity.name.function.tsx | #5a8c1f | bold |
| meta.function-call.ts, meta.function-call.tsx | #2b7fa6 | — |
| entity.name.type.alias.ts, entity.name.type.interface.ts, entity.name.type.enum.ts, entity.name.type.alias.tsx, entity.name.type.interface.tsx, entity.name.type.enum.tsx | #5a8c1f | bold |
| support.type.primitive.ts, support.type.builtin.ts, entity.name.type.ts, support.type.primitive.tsx, support.type.builtin.tsx, entity.name.type.tsx | #2b7fa6 | bold |
| meta.type.parameters.ts support.type.primitive.ts, meta.type.parameters.ts entity.name.type.ts, meta.type.parameters.tsx support.type.primitive.tsx, meta.type.parameters.tsx entity.name.type.tsx | #b85c0f | bold |
| punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx | #b5216c | — |
| punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator.key-value.mapping.yaml, support.other.chomping-indicator.yaml | #b5216c | — |
| entity.name.tag.yaml | #2b7fa6 | — |
| variable.other.alias.yaml | #5a8c1f | underline |
| support.function | #2b7fa6 | — |
| entity.name.function.preprocessor | #2b7fa6 | bold |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
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}!`;
}