SLab Theme
Publisher: Hasibur RahmanThemes in package: 708
All themes in one place
All themes in one place
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 |
|---|---|---|
| punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.keyword, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.definition.class.begin.bracket.curly.php, punctuation.definition.class.end.bracket.curly.php, punctuation.definition.binding-pattern.object | #FF9912 | bold |
| punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block, invalid.illegal.expected-dictionary-separator.json, punctuation.section.supports.begin.bracket.curly.css, punctuation.section.supports.end.bracket.curly.css, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly | #da70d6 | bold |
| punctuation.terminator.statement, punctuation.separator.comma.js, punctuation.separator.parameter, punctuation.definition.block.tag.jsdoc, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.terminator.rule, punctuation.separator.list.comma.css, punctuation.separator.key-value.html, keyword.operator.assignment.dart, punctuation.terminator.dart, punctuation.comma.dart, punctuation.separator.element.python, invalid.deprecated.semicolon.python, punctuation.definition.decorator.python, punctuation.definition.parameters.begin.python, punctuation.decorator.js.jsx, punctuation.definition.heading.markdown, markup.heading.setext.1.markdown, fenced_code.block.language.markdown, punctuation.separator.delimiter.php, punctuation.terminator.expression.php, punctuation.terminator.java, punctuation.separator.delimiter.java, punctuation.separator.parameters.python, punctuation.separator.comma.cs | #daa520 | bold |
| punctuation.definition.italic.markdown, markup.italic.markdown, punctuation.definition.markdown | #f88379 | italic |
| string.other.link.description.markdown | #ff4500 | italic |
| punctuation.definition.bold.markdown, markup.bold.markdown, punctuation.definition.constant | #ff9933 | bold |
| punctuation.definition.raw.markdown, markup.inline.raw.string.markdown | #d2691e | — |
| string.other.link.title.markdown | #F08080FF | — |
| keyword.other.important.css, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator.colon.python, punctuation.section.function.begin.python, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.definition.quote.begin.markdown, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, keyword.operator.class.php, punctuation.section.media.begin.bracket.curly, punctuation.section.media.end.bracket.curly, punctuation.definition.metadata.markdown, keyword.operator.rest | #007fff | bold |
| markup.underline.link.image.markdown, markup.underline.link.markdown | #409efb | — |
| keyword.operator.assignment, keyword.operator.comparison, meta.brace.round, keyword.operator.logical.js, punctuation.separator.label.js, keyword.operator.increment, punctuation.separator.dictionary.key-value.json, punctuation.separator.key-value, keyword.operator.ternary.dart, keyword.operator.closure.dart, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.section.class.begin.python, keyword.operator.python, keyword.operator.type.annotation.ts, keyword.operator.type.ts, punctuation.definition.variable, keyword.operator.bitwise, punctuation.definition.section.case-statement, keyword.operator.combinator, meta.type_params.rust, keyword.operator.arrow.cs | #0892d0 | bold |
| meta.method.body.java | #ff9933 | — |
| variable.parameter.dart, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js | #cb4154 | italic |
| punctuation.definition.string.begin.json, punctuation.definition.string.end.json | #FF6103 | bold |
| meta.brace.square, storage.type.function.arrow, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.bracket.square.java, punctuation.section.array.begin.php, punctuation.section.array.end.php, keyword.operator.bitwise.shift, punctuation.definition.entity.begin.bracket.square, punctuation.definition.entity.end.bracket.square, punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs | #00ffff | bold |
| punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, punctuation.definition.list.begin.markdown | #FF7F50 | bold |
| keyword.operator.ternary, constant.language.import-export-all, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #ff4500 | bold |
| punctuation.accessor, keyword.operator.relational, keyword.operator.arithmetic, punctuation.definition.entity.css, punctuation.dot.dart, punctuation.separator.period.python, punctuation.other.period.go | #00C957 | bold |
| keyword.other.DML.sql | #ee6767 | bold |
| source.sql | #8470FF | — |
| keyword.other.var.cs | #FF4500 | italic |
| support.function.security.sql | #817f7f | — |
| constant.numeric.decimal, constant.numeric.json.comments, constant.numeric, constant.numeric.dec.python, constant.numeric.float.python, constant.numeric.integer.go, constant.numeric.floating-point.go, entity.other.keyframe-offset.percentage, constant.other.rgb-value.css, constant.numeric.integer.ruby | #9e9e9e | — |
| meta.delimiter.decimal.period.js, keyword.other.unit.s.css, keyword.other.unit.px.css, keyword.other.unit.ms.css | #9e9e9e | italic bold |
| punctuation.definition.comment, comment.line.double-slash.dart | #696f5e | — |
| comment.line.double-slash, comment.line.double-dash.sql, comment.line.number-sign.python, comment.line.scss, comment.block, comment.line.number-sign.ruby, comment.block.documentation.js | #787c70 | italic |
| storage.type.class.jsdoc | #757575 | italic |
| variable.other.jsdoc | #ff9933 | italic |
| entity.name.type.instance.jsdoc | #6495ED | italic |
| constant.language, constant.language.boolean.true | #00C957 | italic |
| constant.language.boolean.false, variable.other.less | #00b294 | italic |
| keyword.control.anchor.regexp | #e32636 | — |
| punctuation.definition.group.regexp | #faa61a | — |
| keyword.operator.or.regexp, constant.other.character-class.set.regexp | #0892d0 | — |
| punctuation.definition.character-class.regexp | #00ffff | — |
| constant.other.character-class.range.regexp | #9e9e9e | — |
| constant.character.escape.backslash.regexp | #24bfa5 | — |
| meta.group.regexp | #8470FF | — |
| keyword.operator.quantifier.regexp | #ff4500 | — |
| string.regexp.js | #ED9121 | — |
| string.interpolated.double.dart, string.interpolated.single.dart | #FF9912 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #f14856 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, variable.css, variable.language.arguments.js, support.variable.object.node.js | #60a7aa | italic |
| string.quoted.double.json | #e6a666 | — |
| string.quoted.double.html, string.quoted.single.html | #9180ff | — |
| string.unquoted.html | #ff9933 | italic |
| text.html.derivative | #b6b3b0 | italic |
| storage.type.function | #8470FF | italic |
| keyword.operator.new, keyword.other.new | #00C957 | — |
| variable.parameter, keyword.control.from | #daa520 | italic |
| support.function | #0892d0 | italic |
| string.quoted.double, string.quoted.single | #b9b7b7 | italic |
| entity.name.function, source.python | #fd7937 | italic |
| keyword.control.flow | #e9485d | italic |
| variable.other.constant, keyword.operator.expression.typeof.js | #379ffb | italic |
| variable.other.readwrite, entity.name.type | #a598ff | italic |
| variable.other.property, meta.function-call.generic.python | #00C78C | italic |
| variable.other.object.property, keyword.control.trycatch, meta.function-call.arguments.python | #6495EDFF | italic |
| variable.other.object, keyword.type.go | #DA70D6FF | italic |
| variable.language.this, keyword.struct.go | #00ffff | italic |
| keyword.control.import, storage.modifier, keyword.import.go, keyword.other.import.dart | #e32636 | italic |
| keyword.control.as, support.type.python, entity.name.import.go | #daa520 | italic |
| keyword.control.conditional, keyword.function.go, keyword.control.java, keyword.control.dart | #ff4500 | italic |
| storage.type, keyword.interface.go | #20B2AAFF | italic |
| keyword.operator.expression.void | #4d4dff | bold |
| support.variable.property | #BDFCC9 | italic |
| keyword.control.loop | #ff4500 | italic |
| keyword.control.switch, keyword.control.go | #daa500 | italic |
| keyword.control.export | #ff2c2c | italic |
| support.type.object.module, keyword.control.default, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.control.def.ruby | #ffce2c | italic |
| meta.object-binding-pattern-variable | #fd7139 | italic |
| entity.other.attribute-name.class | #FF9912 | italic |
| support.type.property-name, entity.other.attribute-name, source.ruby | #0090c9 | italic |
| support.constant.property-value, string.unquoted.attribute-value, variable.other.definition.java | #E6A666 | italic |
| constant.other.color.rgb-value.hex, support.constant.color.w3c-extended-color-name | #9ca19e | italic |
| support.type.vendored.property-name | #ff4500 | italic |
| entity.other.attribute-name.pseudo-class | #f6dc57 | italic |
| meta.property-value | #f65c57 | italic |
| keyword.control.at-rule.keyframes, keyword.control.at-rule.supports, keyword.control.at-rule.media, keyword.control.at-rule.import.less | #FF8C00 | italic |
| keyword.operator.logical.and.media | #00C957 | italic |
| entity.name.tag, meta.at-rule.media.header | #00b294 | italic |
| variable.scss | #a598ff | italic |
| keyword.other.using.cs, keyword.package.go, keyword.other.fn.rust | #FF4500 | italic |
| keyword.other.namespace.cs, keyword.other.class.cs | #ff8800 | italic |
| keyword.type.cs | #0892d0 | italic |
| entity.name.variable.field.cs, entity.name.variable.property.cs | #5F9EA0 | italic |
| entity.name.variable.local.cs | #4d4dff | italic |
| keyword.other.get.cs, keyword.other.set.cs | #DA70D6 | italic |
| support.class.dart, entity.name.variable.parameter.cs, keyword.operator.expression.in.js, keyword.operator.expression.of.js | #FF6347 | italic |
| entity.name.function.dart, entity.name.function.member | #007fff | — |
| source.dart | #5F9EA0FF | italic |
| entity.name.package.go | #00C957 | italic |
| entity.other.inherited-class.js.jsx | #007fff | italic |
| support.type.builtin.ts | #FF4500 | italic |
| support.type.primitive.ts | #FF6347 | italic |
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}!`;
}