Niketa Theme Light Legacy
Publisher: selfrefactorThemes in package: 18
Large collection of handmade light themes
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#e4d9b5
- editor.background#fafafa
- editor.lineHighlightBackground#e4d9b555
- editor.selectionBackground#f6b3e0
- editorBracketMatch.background#0B766E
- editorBracketMatch.border#9C3212
- editorGroupHeader.tabsBackground#E8E8E8
- editorGutter.background#fafafa
- editorLineNumber.foreground#D4C38A
- scrollbarSlider.background#e4d9b5
- scrollbarSlider.hoverBackground#D4C38A
- sideBar.background#DCCE9F
- statusBar.background#CCB874
- tab.activeBackground#fafafa
- tab.activeForeground#394D5E
- tab.border#fafafa
- tab.inactiveBackground#CCB874
- tab.inactiveForeground#465F74
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.constant | #0696B2 | — |
| punctuation.definition.template-expression.begin.js | #07B9DC | — |
| punctuation.definition.template-expression.begin.jsx | #06a2c0 | — |
| punctuation.definition.template-expression.begin.ts | #06a2c0 | — |
| punctuation.definition.template-expression.begin.tsx | #0696B2 | — |
| punctuation.definition.template-expression.end.js | #06a2c0 | — |
| punctuation.definition.template-expression.end.jsx | #07B9DC | — |
| punctuation.definition.template-expression.end.ts | #06a2c0 | — |
| punctuation.definition.template-expression.end.tsx | #06a2c0 | — |
| entity.name.tag | #0696B2 | underline |
| punctuation.accessor.js | #06a2c0 | — |
| punctuation.accessor.jsx | #06AECE | — |
| punctuation.accessor.ts | #06a2c0 | — |
| punctuation.accessor.tsx | #07B9DC | — |
| source.js | #06a2c0 | — |
| source.jsx | #06a2c0 | — |
| source.ts | #06AECE | — |
| source.tsx | #06a2c0 | — |
| source.css | #06AECE | — |
| source.scss | #0696B2 | — |
| storage.modifier.js | #06a2c0 | — |
| storage.modifier.jsx | #06a2c0 | — |
| storage.modifier.ts | #0696B2 | — |
| storage.modifier.tsx | #07B9DC | — |
| string.quoted.single.js | #0696B2 | — |
| string.quoted.single.jsx | #0696B2 | — |
| string.quoted.single.ts | #058BA4 | — |
| string.quoted.single.tsx | #058BA4 | — |
| support.function.dom.js | #0696B2 | — |
| support.function.dom.jsx | #058BA4 | — |
| support.function.dom.ts | #06AECE | — |
| support.function.dom.tsx | #06a2c0 | — |
| support.variable.property.js | #06a2c0 | — |
| support.variable.property.jsx | #06AECE | — |
| support.variable.property.ts | #06a2c0 | — |
| support.variable.property.tsx | #0696B2 | — |
| variable.language.constructor | #06AECE | underline |
| variable.language.this | #058BA4 | — |
| meta.selector.css | #465F74 | — |
| constant.language.null.js | #394D5E | — |
| constant.language.null.jsx | #465F74 | — |
| constant.language.null.ts | #394D5E | — |
| constant.language.null.tsx | #465F74 | — |
| entity.name.class | #3d5365 | underline |
| entity.name.function | #344756 | underline |
| markup.heading.markdown | #394D5E | — |
| punctuation.separator.comma.js | #465F74 | — |
| punctuation.separator.comma.jsx | #41596C | — |
| punctuation.separator.comma.ts | #3d5365 | — |
| punctuation.separator.comma.tsx | #41596C | — |
| support.variable.property.js | #394D5E | — |
| support.variable.property.jsx | #41596C | — |
| support.variable.property.ts | #41596C | — |
| support.variable.property.tsx | #465F74 | — |
| support.type.primitive.js | #3d5365 | — |
| support.type.primitive.jsx | #3d5365 | — |
| support.type.primitive.ts | #41596C | — |
| support.type.primitive.tsx | #394D5E | — |
| meta.brace.square.js | #3d5365 | — |
| meta.brace.square.jsx | #41596C | — |
| meta.brace.square.ts | #3d5365 | — |
| meta.brace.square.tsx | #3d5365 | — |
| variable.other.class.js | #344756 | — |
| variable.other.class.jsx | #3d5365 | — |
| variable.other.class.ts | #41596C | — |
| variable.other.class.tsx | #3d5365 | — |
| constant.other.object.key.js | #394D5E | — |
| constant.other.object.key.jsx | #3d5365 | — |
| constant.other.object.key.ts | #3d5365 | — |
| constant.other.object.key.tsx | #465F74 | — |
| variable.language | #D66F67 | — |
| constant.language | #d15f56 | — |
| entity.name.type | #d15f56 | underline |
| variable.parameter | #d15f56 | — |
| support.function | #d15f56 | — |
| source.json | #DA7F77 | — |
| meta.object-literal.key.js | #CC4F45 | — |
| meta.object-literal.key.jsx | #DA7F77 | — |
| meta.object-literal.key.ts | #DA7F77 | — |
| meta.object-literal.key.tsx | #DA7F77 | — |
| variable.other.constant.js | #C64136 | — |
| variable.other.constant.jsx | #D66F67 | — |
| variable.other.constant.ts | #d15f56 | — |
| variable.other.constant.tsx | #d15f56 | — |
| meta.paragraph.markdown | #C64136 | — |
| entity.other.attribute-name.js | #D66F67 | — |
| entity.other.attribute-name.jsx | #d15f56 | — |
| entity.other.attribute-name.ts | #C64136 | — |
| entity.other.attribute-name.tsx | #C64136 | — |
| string.quoted.single.json | #d15f56 | — |
| support.class.promise.js | #d15f56 | — |
| support.class.promise.jsx | #C64136 | — |
| support.class.promise.ts | #d15f56 | — |
| support.class.promise.tsx | #d15f56 | — |
| support.type.object.console.js | #DA7F77 | — |
| support.type.object.console.jsx | #CC4F45 | — |
| support.type.object.console.ts | #D66F67 | — |
| support.type.object.console.tsx | #d15f56 | — |
| support.function.console.js | #d15f56 | — |
| support.function.console.jsx | #C64136 | — |
| support.function.console.ts | #D66F67 | — |
| support.function.console.tsx | #d15f56 | — |
| punctuation.definition.block.js | #d15f56 | — |
| punctuation.definition.block.jsx | #d15f56 | — |
| punctuation.definition.block.ts | #d15f56 | — |
| punctuation.definition.block.tsx | #C64136 | — |
| storage.type | #2a6b94 | — |
| constant.other | #276389 | — |
| variable.other.object.js | #245C7F | — |
| variable.other.object.jsx | #245C7F | — |
| variable.other.object.ts | #245C7F | — |
| variable.other.object.tsx | #2a6b94 | — |
| markup.quote | #2D739F | — |
| meta.import.js | #245C7F | — |
| meta.import.jsx | #2a6b94 | — |
| meta.import.ts | #2D739F | — |
| meta.import.tsx | #2a6b94 | — |
| meta.tag.js | #276389 | — |
| meta.tag.jsx | #2D739F | — |
| meta.tag.ts | #276389 | — |
| meta.tag.tsx | #2a6b94 | — |
| string.quoted.single.js | #2a6b94 | — |
| string.quoted.single.jsx | #307AA9 | — |
| string.quoted.single.ts | #2a6b94 | — |
| string.quoted.single.tsx | #245C7F | — |
| meta.object-literal.key.js | #2a6b94 | — |
| meta.object-literal.key.jsx | #307AA9 | — |
| meta.object-literal.key.ts | #2a6b94 | — |
| meta.object-literal.key.tsx | #2a6b94 | — |
| string.template | #2a6b94 | — |
| entity.name.function.method | #2a6b94 | — |
| support.type.property-name.json | #2a6b94 | — |
| variable.other.property.js | #2a6b94 | — |
| variable.other.property.jsx | #2a6b94 | — |
| variable.other.property.ts | #2a6b94 | — |
| variable.other.property.tsx | #307AA9 | — |
| markup.italic | #b63a15 | — |
| meta.template.expression.js | #b63a15 | — |
| meta.template.expression.jsx | #C33E17 | — |
| meta.template.expression.ts | #A93613 | — |
| meta.template.expression.tsx | #b63a15 | — |
| punctuation.separator.parameter.js | #b63a15 | — |
| punctuation.separator.parameter.jsx | #b63a15 | — |
| punctuation.separator.parameter.ts | #9C3212 | — |
| punctuation.separator.parameter.tsx | #b63a15 | — |
| meta.parameters.js | #C33E17 | — |
| meta.parameters.jsx | #C33E17 | — |
| meta.parameters.ts | #9C3212 | — |
| meta.parameters.tsx | #b63a15 | — |
| constant.character | #b63a15 | — |
| comment | #A93613 | — |
| keyword | #b63a15 | — |
| markup.italic | #9C3212 | — |
| comment.block.documentation | #b63a15 | — |
| comment.line.double-slash | #D04218 | — |
| punctuation.accessor.js | #A93613 | — |
| punctuation.accessor.jsx | #A93613 | — |
| punctuation.accessor.ts | #b63a15 | — |
| punctuation.accessor.tsx | #b63a15 | — |
| punctuation.definition.parameters.begin.js | #0d8a81 | — |
| punctuation.definition.parameters.begin.jsx | #0d8a81 | — |
| punctuation.definition.parameters.begin.ts | #0E948A | — |
| punctuation.definition.parameters.begin.tsx | #0E948A | — |
| punctuation.definition.parameters.end.js | #0F9E94 | — |
| punctuation.definition.parameters.end.jsx | #0d8a81 | — |
| punctuation.definition.parameters.end.ts | #0d8a81 | — |
| punctuation.definition.parameters.end.tsx | #0F9E94 | — |
| constant.language.boolean | #0d8a81 | — |
| punctuation.separator.key-value.js | #0d8a81 | — |
| punctuation.separator.key-value.jsx | #0d8a81 | — |
| punctuation.separator.key-value.ts | #0d8a81 | — |
| punctuation.separator.key-value.tsx | #0d8a81 | — |
| storage.modifier.async.js | #0d8a81 | — |
| storage.modifier.async.jsx | #0E948A | — |
| storage.modifier.async.ts | #0d8a81 | — |
| storage.modifier.async.tsx | #0C8078 | — |
| meta.brace.round.js | #0E948A | — |
| meta.brace.round.jsx | #0F9E94 | — |
| meta.brace.round.ts | #0B766E | — |
| meta.brace.round.tsx | #0C8078 | — |
| entity.other.inherited-class | #0d8a81 | — |
| support.class.builtin.js | #0F9E94 | — |
| support.class.builtin.jsx | #0d8a81 | — |
| support.class.builtin.ts | #0d8a81 | — |
| support.class.builtin.tsx | #0B766E | — |
| meta.tag.attributes.js | #0B766E | — |
| meta.tag.attributes.jsx | #0d8a81 | — |
| meta.tag.attributes.ts | #0C8078 | — |
| meta.tag.attributes.tsx | #0d8a81 | — |
| keyword.control.module.js | #0E948A | — |
| keyword.control.module.jsx | #0F9E94 | — |
| keyword.control.module.ts | #0C8078 | — |
| keyword.control.module.tsx | #0d8a81 | — |
| keyword.operator.accessor | #0E948A | — |
| invalid | #0d8a81 | underline |
| constant.numeric | #0d8a81 | — |
| meta.var.expr.js | #0F9E94 | — |
| meta.var.expr.jsx | #0F9E94 | — |
| meta.var.expr.ts | #0d8a81 | — |
| meta.var.expr.tsx | #0d8a81 | — |
| keyword.control.import.js | #0d8a81 | — |
| keyword.control.import.jsx | #0F9E94 | — |
| keyword.control.import.ts | #0C8078 | — |
| keyword.control.import.tsx | #0d8a81 | — |
| keyword.control.from.js | #0d8a81 | — |
| keyword.control.from.jsx | #0d8a81 | — |
| keyword.control.from.ts | #0d8a81 | — |
| keyword.control.from.tsx | #0d8a81 | — |
| keyword.control.export.js | #0d8a81 | — |
| keyword.control.export.jsx | #0F9E94 | — |
| keyword.control.export.ts | #0d8a81 | — |
| keyword.control.export.tsx | #0d8a81 | — |
| keyword.control.default.js | #0d8a81 | — |
| keyword.control.default.jsx | #0d8a81 | — |
| keyword.control.default.ts | #0d8a81 | — |
| keyword.control.default.tsx | #0d8a81 | — |
| support.type.object.module.js | #0d8a81 | — |
| support.type.object.module.jsx | #0F9E94 | — |
| support.type.object.module.ts | #0E948A | — |
| support.type.object.module.tsx | #0d8a81 | — |
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#8c9696
- editor.background#f7f2f2
- editor.lineHighlightBackground#aebabe39
- editor.selectionBackground#F8E2E2E0
- editorBracketMatch.background#00AFD6f3
- editorBracketMatch.border#314269
- editorGroupHeader.tabsBackground#EBDEDE
- editorGutter.background#f7f2f2
- editorLineNumber.foreground#788484
- scrollbarSlider.background#8c9696
- scrollbarSlider.hoverBackground#788484
- sideBar.background#cfd1bf
- statusBar.background#6F7A7A
- tab.activeBackground#f7f2f2
- tab.activeForeground#7B7324
- tab.border#f7f2f2
- tab.inactiveBackground#6F7A7A
- tab.inactiveForeground#f7f2f2
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| punctuation.definition.parameters.begin.js | #b68aa9 | — |
| punctuation.definition.parameters.begin.jsx | #b68aa9 | — |
| punctuation.definition.parameters.begin.ts | #b68aa9 | — |
| punctuation.definition.parameters.begin.tsx | #b68aa9 | — |
| punctuation.definition.parameters.end.js | #b68aa9 | — |
| punctuation.definition.parameters.end.jsx | #b68aa9 | — |
| punctuation.definition.parameters.end.ts | #b68aa9 | — |
| punctuation.definition.parameters.end.tsx | #9E648D | — |
| punctuation.definition.parameters.end.js | #b68aa9 | — |
| punctuation.definition.parameters.end.jsx | #b68aa9 | — |
| punctuation.definition.parameters.end.ts | #b68aa9 | — |
| punctuation.definition.parameters.end.tsx | #b68aa9 | — |
| markup.quote | #b68aa9 | — |
| meta.tag.js | #AE7DA0 | — |
| meta.tag.jsx | #b68aa9 | — |
| meta.tag.ts | #b68aa9 | — |
| meta.tag.tsx | #A67096 | — |
| meta.parameters.js | #AE7DA0 | — |
| meta.parameters.jsx | #BE97B2 | — |
| meta.parameters.ts | #b68aa9 | — |
| meta.parameters.tsx | #b68aa9 | — |
| meta.brace.square.js | #A67096 | — |
| meta.brace.square.jsx | #C6A4BC | — |
| meta.brace.square.ts | #BE97B2 | — |
| meta.brace.square.tsx | #BE97B2 | — |
| variable.other.class.js | #b68aa9 | — |
| variable.other.class.jsx | #b68aa9 | — |
| variable.other.class.ts | #AE7DA0 | — |
| variable.other.class.tsx | #BE97B2 | — |
| constant.other.object.key.js | #CEB0C5 | — |
| constant.other.object.key.jsx | #C6A4BC | — |
| constant.other.object.key.ts | #C6A4BC | — |
| constant.other.object.key.tsx | #b68aa9 | — |
| entity.name.function.method | #BE97B2 | — |
| string.template | #b68aa9 | — |
| support.type.property-name.json | #b68aa9 | — |
| variable.other.property.js | #b68aa9 | — |
| variable.other.property.jsx | #BE97B2 | — |
| variable.other.property.ts | #AE7DA0 | — |
| variable.other.property.tsx | #b68aa9 | — |
| punctuation.separator.key-value.js | #8D832A | — |
| punctuation.separator.key-value.jsx | #847b27 | — |
| punctuation.separator.key-value.ts | #847b27 | — |
| punctuation.separator.key-value.tsx | #7B7324 | — |
| storage.modifier.async.js | #847b27 | — |
| storage.modifier.async.jsx | #7B7324 | — |
| storage.modifier.async.ts | #847b27 | — |
| storage.modifier.async.tsx | #847b27 | — |
| meta.brace.round.js | #6A631F | — |
| meta.brace.round.jsx | #958B2C | — |
| meta.brace.round.ts | #7B7324 | — |
| meta.brace.round.tsx | #7B7324 | — |
| entity.other.inherited-class | #7B7324 | — |
| support.class.builtin.js | #847b27 | — |
| support.class.builtin.jsx | #7B7324 | — |
| support.class.builtin.ts | #847b27 | — |
| support.class.builtin.tsx | #847b27 | — |
| meta.tag.attributes.js | #847b27 | — |
| meta.tag.attributes.jsx | #8D832A | — |
| meta.tag.attributes.ts | #847b27 | — |
| meta.tag.attributes.tsx | #847b27 | — |
| keyword.control.module.js | #7B7324 | — |
| keyword.control.module.jsx | #736B22 | — |
| keyword.control.module.ts | #847b27 | — |
| keyword.control.module.tsx | #847b27 | — |
| keyword.operator.accessor | #847b27 | — |
| invalid | #847b27 | underline |
| constant.numeric | #7B7324 | — |
| keyword | #847b27 | — |
| meta.var.expr.js | #847b27 | — |
| meta.var.expr.jsx | #847b27 | — |
| meta.var.expr.ts | #7B7324 | — |
| meta.var.expr.tsx | #847b27 | — |
| keyword.control.import.js | #958B2C | — |
| keyword.control.import.jsx | #847b27 | — |
| keyword.control.import.ts | #847b27 | — |
| keyword.control.import.tsx | #847b27 | — |
| keyword.control.from.js | #847b27 | — |
| keyword.control.from.jsx | #6A631F | — |
| keyword.control.from.ts | #7B7324 | — |
| keyword.control.from.tsx | #847b27 | — |
| keyword.control.export.js | #7B7324 | — |
| keyword.control.export.jsx | #847b27 | — |
| keyword.control.export.ts | #847b27 | — |
| keyword.control.export.tsx | #847b27 | — |
| keyword.control.default.js | #7B7324 | — |
| keyword.control.default.jsx | #8D832A | — |
| keyword.control.default.ts | #847b27 | — |
| keyword.control.default.tsx | #847b27 | — |
| support.type.object.module.js | #9E932F | — |
| support.type.object.module.jsx | #847b27 | — |
| support.type.object.module.ts | #8D832A | — |
| support.type.object.module.tsx | #847b27 | — |
| entity.name.tag | #823326 | underline |
| markup.italic | #8b3729 | — |
| punctuation.accessor.js | #8b3729 | — |
| punctuation.accessor.jsx | #823326 | — |
| punctuation.accessor.ts | #702C21 | — |
| punctuation.accessor.tsx | #9D3E2E | — |
| source.js | #823326 | — |
| source.jsx | #8b3729 | — |
| source.ts | #823326 | — |
| source.tsx | #8b3729 | — |
| storage.modifier.js | #8b3729 | — |
| storage.modifier.jsx | #823326 | — |
| storage.modifier.ts | #8b3729 | — |
| storage.modifier.tsx | #823326 | — |
| storage.type | #943B2C | — |
| string.quoted.single.js | #8b3729 | — |
| string.quoted.single.jsx | #943B2C | — |
| string.quoted.single.ts | #823326 | — |
| string.quoted.single.tsx | #8b3729 | — |
| support.function.dom.js | #823326 | — |
| support.function.dom.jsx | #8b3729 | — |
| support.function.dom.ts | #A64231 | — |
| support.function.dom.tsx | #823326 | — |
| support.variable.property.js | #8b3729 | — |
| support.variable.property.jsx | #8b3729 | — |
| support.variable.property.ts | #702C21 | — |
| support.variable.property.tsx | #8b3729 | — |
| variable.language.constructor | #8b3729 | underline |
| variable.language.this | #8b3729 | — |
| support.constant | #d66d22 | — |
| punctuation.separator.parameter.js | #C86620 | — |
| punctuation.separator.parameter.jsx | #AC581B | — |
| punctuation.separator.parameter.ts | #d66d22 | — |
| punctuation.separator.parameter.tsx | #d66d22 | — |
| constant.character | #d66d22 | — |
| constant.language | #d66d22 | — |
| constant.other | #d66d22 | — |
| comment | #d66d22 | — |
| markup.italic | #d66d22 | — |
| meta.object-literal.key.js | #d66d22 | — |
| meta.object-literal.key.jsx | #C86620 | — |
| meta.object-literal.key.ts | #d66d22 | — |
| meta.object-literal.key.tsx | #d66d22 | — |
| comment.block.documentation | #C86620 | — |
| comment.line.double-slash | #d66d22 | — |
| punctuation.accessor.js | #AC581B | — |
| punctuation.accessor.jsx | #C86620 | — |
| punctuation.accessor.ts | #d66d22 | — |
| punctuation.accessor.tsx | #AC581B | — |
| variable.language | #d66d22 | — |
| variable.other.object.js | #E07E39 | — |
| variable.other.object.jsx | #d66d22 | — |
| variable.other.object.ts | #E07E39 | — |
| variable.other.object.tsx | #d66d22 | — |
| variable.other.readwrite | #C86620 | — |
| variable.other.readwrite.js | #d66d22 | — |
| variable.other.readwrite.jsx | #C86620 | — |
| variable.other.readwrite.ts | #d66d22 | — |
| variable.other.readwrite.tsx | #C86620 | — |
| variable.parameter | #384c79 | — |
| support.function | #3C5181 | — |
| meta.import.js | #384c79 | — |
| meta.import.jsx | #3F5689 | — |
| meta.import.ts | #344771 | — |
| meta.import.tsx | #2D3D61 | — |
| meta.paragraph.markdown | #384c79 | — |
| entity.other.attribute-name.js | #435B91 | — |
| entity.other.attribute-name.jsx | #384c79 | — |
| entity.other.attribute-name.ts | #3C5181 | — |
| entity.other.attribute-name.tsx | #384c79 | — |
| string.quoted.single.js | #2D3D61 | — |
| string.quoted.single.jsx | #344771 | — |
| string.quoted.single.ts | #384c79 | — |
| string.quoted.single.tsx | #314269 | — |
| string.quoted.single.json | #435B91 | — |
| support.class.promise.js | #384c79 | — |
| support.class.promise.jsx | #435B91 | — |
| support.class.promise.ts | #314269 | — |
| support.class.promise.tsx | #3C5181 | — |
| support.type.object.console.js | #384c79 | — |
| support.type.object.console.jsx | #3C5181 | — |
| support.type.object.console.ts | #384c79 | — |
| support.type.object.console.tsx | #384c79 | — |
| support.function.console.js | #384c79 | — |
| support.function.console.jsx | #435B91 | — |
| support.function.console.ts | #2D3D61 | — |
| support.function.console.tsx | #435B91 | — |
| punctuation.definition.block.js | #384c79 | — |
| punctuation.definition.block.jsx | #435B91 | — |
| punctuation.definition.block.ts | #314269 | — |
| punctuation.definition.block.tsx | #384c79 | — |
| constant.language.boolean | #00AFD6f3 | — |
| constant.language.null.js | #00AFD6F2 | — |
| constant.language.null.jsx | #00AFD6f3 | — |
| constant.language.null.ts | #00AFD6F2 | — |
| constant.language.null.tsx | #00AFD6F2 | — |
| entity.name.class | #00AFD6F2 | underline |
| entity.name.function | #00AFD6F2 | underline |
| entity.name.type | #00AFD6C0 | underline |
| markup.heading.markdown | #00AFD6AC | — |
| punctuation.separator.comma.js | #00AFD6F2 | — |
| punctuation.separator.comma.jsx | #00AFD6F2 | — |
| punctuation.separator.comma.ts | #00AFD6F2 | — |
| punctuation.separator.comma.tsx | #00AFD6F2 | — |
| support.variable.property.js | #00AFD6f3 | — |
| support.variable.property.jsx | #00AFD6D4 | — |
| support.variable.property.ts | #00AFD6F2 | — |
| support.variable.property.tsx | #00AFD6D4 | — |
| support.type.primitive.js | #00AFD6F2 | — |
| support.type.primitive.jsx | #00AFD6F2 | — |
| support.type.primitive.ts | #00AFD6f3 | — |
| support.type.primitive.tsx | #00AFD6F2 | — |
| variable | #00AFD6f3 | — |
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#e2e2e0
- editor.background#f1f1f1
- editor.lineHighlightBackground#e2e2e09a
- editor.selectionBackground#abe5d6
- editorBracketMatch.background#D85B0C
- editorBracketMatch.border#3C6534
- editorGroupHeader.tabsBackground#E0E0E0
- editorGutter.background#f1f1f1
- editorLineNumber.foreground#C4C4BF
- scrollbarSlider.background#e2e2e0
- scrollbarSlider.hoverBackground#C4C4BF
- sideBar.background#D3D3D0
- statusBar.background#B4B4AF
- tab.activeBackground#f1f1f1
- tab.activeForeground#954B29
- tab.border#f1f1f1
- tab.inactiveBackground#B4B4AF
- tab.inactiveForeground#B65C32
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.constant | #2b8fb3 | — |
| entity.name.tag | #2E99C0 | underline |
| punctuation.accessor.js | #2b8fb3 | — |
| punctuation.accessor.jsx | #2b8fb3 | — |
| punctuation.accessor.ts | #2885A6 | — |
| punctuation.accessor.tsx | #2885A6 | — |
| source.js | #2885A6 | — |
| source.jsx | #2885A6 | — |
| source.ts | #2885A6 | — |
| source.tsx | #2E99C0 | — |
| source.css | #2b8fb3 | — |
| source.scss | #2b8fb3 | — |
| storage.modifier.js | #2E99C0 | — |
| storage.modifier.jsx | #31A3CC | — |
| storage.modifier.ts | #2b8fb3 | — |
| storage.modifier.tsx | #2b8fb3 | — |
| string.quoted.single.js | #2E99C0 | — |
| string.quoted.single.jsx | #2885A6 | — |
| string.quoted.single.ts | #2b8fb3 | — |
| string.quoted.single.tsx | #2b8fb3 | — |
| variable.other.readwrite.js | #2b8fb3 | — |
| variable.other.readwrite.jsx | #257B9A | — |
| variable.other.readwrite.ts | #2b8fb3 | — |
| variable.other.readwrite.tsx | #2885A6 | — |
| support.function.dom.js | #31A3CC | — |
| support.function.dom.jsx | #31A3CC | — |
| support.function.dom.ts | #2b8fb3 | — |
| support.function.dom.tsx | #2b8fb3 | — |
| support.variable.property.js | #257B9A | — |
| support.variable.property.jsx | #2885A6 | — |
| support.variable.property.ts | #2b8fb3 | — |
| support.variable.property.tsx | #2E99C0 | — |
| variable.language.constructor | #2E99C0 | underline |
| variable.language.this | #31A3CC | — |
| meta.selector.css | #a0512c | — |
| variable.other.readwrite | #AB572F | — |
| constant.language.null.js | #a0512c | — |
| constant.language.null.jsx | #a0512c | — |
| constant.language.null.ts | #a0512c | — |
| constant.language.null.tsx | #8A4626 | — |
| entity.name.class | #a0512c | underline |
| entity.name.function | #a0512c | underline |
| markup.heading.markdown | #a0512c | — |
| punctuation.separator.comma.js | #B65C32 | — |
| punctuation.separator.comma.jsx | #a0512c | — |
| punctuation.separator.comma.ts | #a0512c | — |
| punctuation.separator.comma.tsx | #a0512c | — |
| support.variable.property.js | #AB572F | — |
| support.variable.property.jsx | #AB572F | — |
| support.variable.property.ts | #a0512c | — |
| support.variable.property.tsx | #B65C32 | — |
| support.type.primitive.js | #8A4626 | — |
| support.type.primitive.jsx | #a0512c | — |
| support.type.primitive.ts | #a0512c | — |
| support.type.primitive.tsx | #a0512c | — |
| meta.brace.square.js | #AB572F | — |
| meta.brace.square.jsx | #B65C32 | — |
| meta.brace.square.ts | #a0512c | — |
| meta.brace.square.tsx | #a0512c | — |
| variable.other.class.js | #a0512c | — |
| variable.other.class.jsx | #954B29 | — |
| variable.other.class.ts | #954B29 | — |
| variable.other.class.tsx | #AB572F | — |
| constant.other.object.key.js | #954B29 | — |
| constant.other.object.key.jsx | #8A4626 | — |
| constant.other.object.key.ts | #B65C32 | — |
| constant.other.object.key.tsx | #a0512c | — |
| variable | #B65C32 | — |
| variable.language | #d14076 | — |
| entity.name.type | #d14076 | underline |
| variable.parameter | #BD2E63 | — |
| support.function | #D85F8C | — |
| source.json | #d14076 | — |
| meta.object-literal.key.js | #D85F8C | — |
| meta.object-literal.key.jsx | #BD2E63 | — |
| meta.object-literal.key.ts | #d14076 | — |
| meta.object-literal.key.tsx | #d14076 | — |
| meta.paragraph.markdown | #d14076 | — |
| entity.other.attribute-name.js | #d14076 | — |
| entity.other.attribute-name.jsx | #d14076 | — |
| entity.other.attribute-name.ts | #d14076 | — |
| entity.other.attribute-name.tsx | #CD316B | — |
| string.quoted.single.json | #BD2E63 | — |
| support.class.promise.js | #d14076 | — |
| support.class.promise.jsx | #d14076 | — |
| support.class.promise.ts | #BD2E63 | — |
| support.class.promise.tsx | #d14076 | — |
| support.type.object.console.js | #CD316B | — |
| support.type.object.console.jsx | #d14076 | — |
| support.type.object.console.ts | #BD2E63 | — |
| support.type.object.console.tsx | #d14076 | — |
| support.function.console.js | #D54F81 | — |
| support.function.console.jsx | #D85F8C | — |
| support.function.console.ts | #BD2E63 | — |
| support.function.console.tsx | #CD316B | — |
| punctuation.definition.block.js | #d14076 | — |
| punctuation.definition.block.jsx | #CD316B | — |
| punctuation.definition.block.ts | #D85F8C | — |
| punctuation.definition.block.tsx | #D54F81 | — |
| storage.type | #880e4f | — |
| variable.other.object.js | #880e4f | — |
| variable.other.object.jsx | #9B105A | — |
| variable.other.object.ts | #9B105A | — |
| variable.other.object.tsx | #880e4f | — |
| markup.quote | #9B105A | — |
| meta.import.js | #880e4f | — |
| meta.import.jsx | #880e4f | — |
| meta.import.ts | #880e4f | — |
| meta.import.tsx | #880e4f | — |
| meta.tag.js | #9B105A | — |
| meta.tag.jsx | #880e4f | — |
| meta.tag.ts | #920F55 | — |
| meta.tag.tsx | #880e4f | — |
| meta.parameters.js | #880e4f | — |
| meta.parameters.jsx | #7E0D49 | — |
| meta.parameters.ts | #880e4f | — |
| meta.parameters.tsx | #880e4f | — |
| string.quoted.single.js | #920F55 | — |
| string.quoted.single.jsx | #7E0D49 | — |
| string.quoted.single.ts | #880e4f | — |
| string.quoted.single.tsx | #880e4f | — |
| meta.object-literal.key.js | #880e4f | — |
| meta.object-literal.key.jsx | #9B105A | — |
| meta.object-literal.key.ts | #880e4f | — |
| meta.object-literal.key.tsx | #750C44 | — |
| string.template | #9B105A | — |
| entity.name.function.method | #880e4f | — |
| support.type.property-name.json | #880e4f | — |
| variable.other.property.js | #750C44 | — |
| variable.other.property.jsx | #880e4f | — |
| variable.other.property.ts | #880e4f | — |
| variable.other.property.tsx | #880e4f | — |
| markup.italic | #46753d | — |
| punctuation.separator.parameter.js | #46753d | — |
| punctuation.separator.parameter.jsx | #508546 | — |
| punctuation.separator.parameter.ts | #46753d | — |
| punctuation.separator.parameter.tsx | #3C6534 | — |
| constant.character | #3C6534 | — |
| constant.other | #416D39 | — |
| comment | #46753d | — |
| markup.italic | #416D39 | — |
| comment.block.documentation | #46753d | — |
| comment.line.double-slash | #3C6534 | — |
| punctuation.accessor.js | #4B7D41 | — |
| punctuation.accessor.jsx | #46753d | — |
| punctuation.accessor.ts | #46753d | — |
| punctuation.accessor.tsx | #4B7D41 | — |
| constant.language | #E9630D | — |
| constant.language.boolean | #f26c17 | — |
| punctuation.separator.key-value.js | #E9630D | — |
| punctuation.separator.key-value.jsx | #f26c17 | — |
| punctuation.separator.key-value.ts | #D85B0C | — |
| punctuation.separator.key-value.tsx | #f26c17 | — |
| storage.modifier.async.js | #f26c17 | — |
| storage.modifier.async.jsx | #f26c17 | — |
| storage.modifier.async.ts | #f26c17 | — |
| storage.modifier.async.tsx | #F4823A | — |
| meta.brace.round.js | #F37729 | — |
| meta.brace.round.jsx | #f26c17 | — |
| meta.brace.round.ts | #D85B0C | — |
| meta.brace.round.tsx | #F37729 | — |
| entity.other.inherited-class | #D85B0C | — |
| support.class.builtin.js | #F4823A | — |
| support.class.builtin.jsx | #F37729 | — |
| support.class.builtin.ts | #f26c17 | — |
| support.class.builtin.tsx | #E9630D | — |
| meta.tag.attributes.js | #D85B0C | — |
| meta.tag.attributes.jsx | #D85B0C | — |
| meta.tag.attributes.ts | #f26c17 | — |
| meta.tag.attributes.tsx | #f26c17 | — |
| keyword.control.module.js | #D85B0C | — |
| keyword.control.module.jsx | #f26c17 | — |
| keyword.control.module.ts | #f26c17 | — |
| keyword.control.module.tsx | #F37729 | — |
| keyword.operator.accessor | #F4823A | — |
| invalid | #E9630D | underline |
| constant.numeric | #F37729 | — |
| keyword | #f26c17 | — |
| meta.var.expr.js | #f26c17 | — |
| meta.var.expr.jsx | #F37729 | — |
| meta.var.expr.ts | #f26c17 | — |
| meta.var.expr.tsx | #F37729 | — |
| keyword.control.import.js | #F4823A | — |
| keyword.control.import.jsx | #f26c17 | — |
| keyword.control.import.ts | #f26c17 | — |
| keyword.control.import.tsx | #f26c17 | — |
| keyword.control.from.js | #F4823A | — |
| keyword.control.from.jsx | #f26c17 | — |
| keyword.control.from.ts | #f26c17 | — |
| keyword.control.from.tsx | #f26c17 | — |
| keyword.control.export.js | #E9630D | — |
| keyword.control.export.jsx | #E9630D | — |
| keyword.control.export.ts | #D85B0C | — |
| keyword.control.export.tsx | #D85B0C | — |
| keyword.control.default.js | #D85B0C | — |
| keyword.control.default.jsx | #f26c17 | — |
| keyword.control.default.ts | #f26c17 | — |
| keyword.control.default.tsx | #f26c17 | — |
| support.type.object.module.js | #f26c17 | — |
| support.type.object.module.jsx | #E9630D | — |
| support.type.object.module.ts | #D85B0C | — |
| support.type.object.module.tsx | #E9630D | — |
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#e6ddc3
- editor.background#f9f6f1
- editor.lineHighlightBackground#e6ddc359
- editor.selectionBackground#ffcae0
- editorBracketMatch.background#3DAAA5
- editorBracketMatch.border#5E2D53
- editorGroupHeader.tabsBackground#F2EBE0
- editorGutter.background#f9f6f1
- editorLineNumber.foreground#DACCA5
- scrollbarSlider.background#e6ddc3
- scrollbarSlider.hoverBackground#DACCA5
- sideBar.background#E0D4B4
- statusBar.background#E0D4B4
- tab.activeBackground#f9f6f1
- tab.activeForeground#C67990
- tab.border#f9f6f1
- tab.inactiveBackground#c2aa4d
- tab.inactiveForeground#5E2D53
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| constant.language, support.constant, variable.language | #68325c | bold |
| storage.type | #6a3951 | — |
| entity.name.function.method | #3b6160 | — |
| entity.name.function,support.function.dom.js | #C67990 | underline |
| constant.numeric | #4EBFBB | — |
| constant.language | #3b6160 | bold |
| variable.parameter | #65364D | bold |
| support.function | #68325c | — |
| variable | #3b6160 | — |
| keyword | #c16e87 | bold |
| constant.character, constant.other | #3b6160 | — |
| invalid | #45bcb7 | — |
| variable.other.readwrite,variable.other.readwrite.js,variable.other.readwrite.ts,variable.other.readwrite.tsx,variable.other.object.js,punctuation.accessor.js | #d7884f | — |
| variable.other.property.js | #D27837 | — |
| keyword.control.at-rule.import.scss,keyword.control.module.js,keyword.operator.accessor | #45bcb7 | — |
| keyword.control.import.js,keyword.control.from.js,keyword.control.export.js,keyword.control.default.js,support.type.object.module.ts | #45bcb7 | — |
| string.template | #416B6A | — |
| string.quoted.single.js,string.quoted.single.scss,string.quoted.single.attribute-value.scss,string.quoted.single.json,string.quoted.single.ts | #416B6A | — |
| string.quoted.double.js,string.quoted.double.scss,string.quoted.double.attribute-value.scss,string.quoted.double.json,string.quoted.double.ts | #416B6A | — |
| constant.other.object.key.js,meta.object-literal.key.js,support.type.property-name.json,meta.object-literal.key.ts,variable.other.property.ts | #5E2D53 | — |
| support.class.builtin.js | #385C5B | — |
| comment | #3DAAA5 | — |
| comment.block.documentation | #4EBFBB | — |
| comment.line.double-slash,punctuation.definition.comment.scss,comment.line.scss | #3DAAA5 | — |
| punctuation.definition.comment.html | #d7884f | — |
| comment.block.html | #DACCA5 | — |
| variable.language.this,storage.type.function.js,keyword.control.flow.js,support.variable.dom.js,support.variable.property.dom.js,support.function.promise.ts,keyword.control.flow.ts | #3b6160 | — |
| constant.language.null.js | #385C5B | bold |
| constant.language.boolean,constant.language.boolean.false.ts,constant.language.boolean.true.ts | #5F3349 | bold |
| support.type.object.console.js | #d33682 | — |
| support.function.console.js | #d33682 | — |
| variable.other.class.js | #385C5B | — |
| entity.other.attribute-name,entity.other.attribute-name.class.css | #268bd2 | — |
| support.type.property-name.scss,support.type.property-name.css | #3b6160 | italic |
| support.constant.property-value.scss,support.constant.property-value.css | #3C8F93 | — |
| entity.name.tag.scss,support.constant.tag.css | — | underline |
| support.function.misc.scss | #2c91af | — |
| variable.scss | #00AFD6 | — |
| variable.language.constructor | #355756 | — |
| — | #6688cc | — |
| storage | #D27837 | — |
| storage.type.let | #d33682 | — |
| entity.name.class, entity.name.type | #633057 | undereline |
| entity.other.inherited-class | #723765 | underline |
| entity.name.tag | #D27837 | — |
| meta.diff, meta.diff.header | #E0EDDD | italic |
| markup.deleted | #dc322f | — |
| markup.changed | #cb4b16 | — |
| markup.inserted | #219186 | — |
| markup.quote | #22aa44 | — |
| markup.italic | #22aa44 | — |
| markup.inline.raw | #9966b8 | — |
| markup.heading.setext | #ddbb88 | — |