Valley
Publisher: Tim GrochowskiThemes in package: 2
Valley is a simple theme for Visual Studio Code without visual noise. Created with handpicked and vivid colors, appropriate contrast and a lot of love to help you focus on your code.
Valley is a simple theme for Visual Studio Code without visual noise. Created with handpicked and vivid colors, appropriate contrast and a lot of love to help you focus on your code.
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, markup.italic, markup.quote | — | italic |
| strong, markup.heading | — | bold |
| comment, punctuation.definition.comment | #55708B | italic |
| meta.brace, meta.parameters, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly, punctuation.definition.class.begin.bracket.curly, punctuation.definition.class.end.bracket.curly, punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round, punctuation.definition.parameters.begin.bracket.round, punctuation.definition.parameters.end.bracket.round, punctuation.definition.arguments.begin.bracket.round, punctuation.definition.arguments.end.bracket.round, punctuation.accessor, punctuation.definition.dictionary, punctuation.definition.block, punctuation.definition.section, punctuation.section.array, punctuation.separator.comma, punctuation.separator, punctuation.terminator.expression, punctuation.terminator.statement | #8B949C | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag | #57B6CD | — |
| source.groovy.embedded | #BFC7CF | — |
| constant.language | #DF91CA | — |
| constant.numeric, entity.name.operator.custom-literal.number, keyword.operator.minus.exponent, keyword.operator.plus.exponent, variable.other.enummember | #5B89DB | — |
| constant.regexp | #9285CC | — |
| entity.name.tag | #57B6CD | — |
| entity.other.attribute-name | #9285CC | |
| invalid | #D66A81 | — |
| markup.underline | — | underline |
| markup.bold | #57B6CD | bold |
| markup.heading | #57B6CD | bold |
| markup.italic | — | italic |
| markup.inserted | #78B98A | — |
| markup.deleted | #D8C67E | — |
| markup.changed | #57B6CD | — |
| markup.inline.raw | #D8C67E | — |
| entity.name.function.preprocessor, meta.preprocessor | #57B6CD | — |
| meta.preprocessor.string | #CD926D | — |
| meta.preprocessor.numeric | #78B98A | — |
| meta.structure.dictionary.key.python | #57B6CD | — |
| meta.diff.header | #57B6CD | — |
| storage | #57B6CD | — |
| storage.type | #9285CC | — |
| keyword.operator.noexcept, storage.modifier | #57B6CD | |
| entity.name.operator.custom-literal.string, meta.embedded.assembly, string | #CD926D | — |
| string.tag | #CD926D | — |
| string.value | #CD926D | — |
| string.regexp | #D66A81 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #D66A81 | — |
| meta.template.expression | #D66A81 | — |
| support.type.property-name, support.type.vendored.property-name | #BFC7CF | — |
| keyword | #57B6CD | |
| keyword.control | #57B6CD | |
| keyword.operator, keyword.operator.assignment.compound | #D66A81 | |
| keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike | #9285CC | — |
| keyword.other.unit | #D8C67E | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #57B6CD | — |
| support.function.git-rebase | #57B6CD | — |
| constant.sha.git-rebase | #78B98A | — |
| storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java | #BFC7CF | — |
| variable.language | #D8C67E | — |
| entity.name.function | #78B98A | |
| entity.name.operator.custom-literal, source.powershell variable.other.member, support.constant.handlebars, support.function | #78B98A | — |
| entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.type, entity.other.attribute, meta.return-type, storage.type.annotation.groovy, storage.type.annotation.java, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, support.class, support.type | #D8C67E | — |
| entity.other.inherited-class, meta.type.cast.expr, meta.type.new.expr, support.constant.dom, support.constant.json, support.constant.math | #78B98A | — |
| entity.name.operator, keyword.control, keyword.operator.delete, keyword.other.operator, keyword.other.using, source.cpp keyword.operator.new | #9285CC | — |
| keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python | — | |
| entity.name.variable, meta.definition.variable.name, support.variable, variable | #57B6CD | — |
| variable.other.constant | — | |
| keyword.operator.negation.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.group.regexp, support.other.parenthesis.regexp | #D8C67E | — |
| constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp | #D66A81 | — |
| keyword.control.anchor.regexp, keyword.operator.or.regexp | #CD926D | — |
| keyword.operator.quantifier.regexp | #CD926D | — |
| constant.character | #57B6CD | — |
| constant.character.escape | #CD926D | — |
| entity.name.label | #BFC7CF | — |
| source.coffee.embedded, variable.css, variable.other.less, variable.scss | #57B6CD | — |
| source.css punctuation.definition.interpolation.begin.bracket.curly, source.css punctuation.definition.interpolation.end.bracket.curly | #D66A81 | — |
| source.css.scss, source.css.scss meta.property-list.scss meta.property-value.scss, source.css.scss meta.property-list.scss meta.at-rule.each.scss, source.css.scss meta.property-list.scss meta.at-rule.return.scss, source.css.scss meta.property-list.scss constant.other.scss | #8B949C | — |
| source.css.scss meta.property-list.scss, source.css.scss meta.property-name.scss support.type.property-name.css, source.css.scss meta.property-name.scss support.type.vendored.property-name.css, source.css.scss meta.property-list.scss meta.at-rule.keyframes.scss entity.other.attribute-name.scss | #BFC7CF | — |
| source.css meta.at-rule.include.scss, source.css meta.at-rule.mixin.scss, source.css meta.definition.variable.map, source.css punctuation.definition.attribute-selector.begin.bracket.square, source.css punctuation.definition.attribute-selector.end.bracket.square, source.css punctuation.definition.begin.bracket.round, source.css punctuation.definition.condition.begin.bracket.round, source.css punctuation.definition.condition.end.bracket.round, source.css punctuation.definition.end.bracket.round, source.css punctuation.definition.entity.begin.bracket.square, source.css punctuation.definition.entity.end.bracket.square, source.css punctuation.definition.map.begin.bracket.round, source.css punctuation.definition.map.end.bracket.round, source.css punctuation.definition.parameters.begin.bracket.round, source.css punctuation.definition.parameters.end.bracket.round, source.css punctuation.definition.pseudo-class.begin.bracket.round, source.css punctuation.definition.pseudo-class.end.bracket.round, source.css punctuation.section, source.css punctuation.separator, source.css punctuation.terminator | #8B949C | — |
| support.type.property-name.css, support.type.vendored.property-name.css | #BFC7CF | — |
| meta.attribute-selector.scss | #CD926D | — |
| entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css punctuation, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css punctuation, entity.other.attribute-name.pseudo-element.css | #D8C67E | — |
| entity.name.tag.css | #57B6CD | — |
| entity.other.attribute-name.id.css punctuation, entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id | #D66A81 | — |
| entity.other.attribute-name.class.css punctuation, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css | #78B98A | — |
| source.css keyword.other.unit, source.scss keyword.other.unit | #DF91CA | — |
| support.constant.font-name, support.constant.font-name.css, support.constant.vendored.property-value.css | #8B949C | — |
| constant.other.color.rgb-value, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css, constant.other.rgb-value, support.constant.color, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css | #9285CC | — |
| source.css keyword.other, source.scss keyword.other | #D66A81 | — |
| support.constant.media, support.constant.media-type, support.constant.property-value | #57B6CD | — |
| punctuation.definition.block.tag.sassdoc | #9285CC | — |
| meta.function.block.end.handlebars support.constant.handlebars, meta.function.block.start.handlebars support.constant.handlebars, meta.function.inline.else.handlebars support.constant.handlebars, meta.function.inline.other.handlebars support.constant.handlebars | #5B89DB | — |
| variable.parameter.handlebars | #D66A81 | — |
| entity.name.tag.doctype.html, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag.begin.html, meta.tag.metadata.doctype.html punctuation.definition.tag.end.html, meta.tag.sgml.doctype.html, meta.tag.sgml.html punctuation.definition.tag.html | #D8C67E | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html | #57B6CD | — |
| meta.attribute-with-value.class.html string, meta.attribute.class.html string | #78B98A | — |
| meta.attribute-with-value.id.html string, meta.attribute.id.html string | #D66A81 | — |
| punctuation.definition.binding-pattern.object.js | #8B949C | — |
| punctuation.definition.block.tag.jsdoc | #9285CC | — |
| source.js.jsx entity.name.tag.js.jsx support.class | #57B6CD | — |
| punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, support.type.property-name.json | #57B6CD | — |
| punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.json | #CD926D | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json | #8B949C | — |
| markup.heading.markdown | #57B6CD | — |
| markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, punctuation.definition.heading.markdown | #57B6CD99 | — |
| markup.quote.markdown | #9285CC | — |
| punctuation.definition.quote.begin.markdown | #9285CC99 | |
| markup.list.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown | #D66A81 | — |
| punctuation.definition.list.begin.markdown | #D66A8199 | — |
| markup.bold.markdown | #D8C67E | — |
| punctuation.definition.bold.markdown | #D8C67E99 | — |
| markup.italic.markdown | #CD926D | — |
| punctuation.definition.italic.markdown | #CD926D99 | |
| string.other.link.title.markdown, string.other.link.description.markdown | #D66A81 | — |
| meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, meta.image.reference.markdown punctuation.definition.string.begin.markdown, meta.image.reference.markdown punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown | #D66A8199 | — |
| string.other.link.description.title.markdown | #CD926D | — |
| string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, string.other.link.description.title.markdown punctuation.definition.string.markdown | #CD926D99 | — |
| constant.other.reference.link.markdown | #9285CC | — |
| meta.link.reference.def.markdown punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown | #9285CC99 | — |
| markup.underline.link.image.markdown, markup.underline.link.markdown | #57B6CD | — |
| meta.image.inline.markdown punctuation.definition.metadata.markdown, meta.link.inline.markdown punctuation.definition.metadata.markdown | #57B6CD99 | — |
| markup.inline.raw.string.markdown | #78B98A | — |
| punctuation.definition.raw.markdown | #78B98A99 | — |
| markup.fenced_code.block.markdown, markup.raw.block.markdown | #78B98A | — |
| fenced_code.block.language.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown | #78B98A99 | — |
| meta.separator.markdown | #D66A81 | — |
| entity.tag.tagbraces.nunjucks | #5B89DB | — |
| punctuation.section.tag.twig | #5B89DB | — |
| variable.other.property.twig, variable.other.twig | #D66A81 | — |
| — | #9285CC | — |
| punctuation.definition.tag.xml | #57B6CD | — |
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}!`;
}