Trae Theme
Publisher: neoThemes in package: 1
A dark theme inspired by Trae, featuring a cold and elegant atmosphere
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.activeBorder#323336
- activityBar.background#222427
- descriptionForeground#ccced6
- editor.background#1a1b1d
- editor.selectionBackground#323336
- editorCursor.foreground#FFFFFF
- editorGroup.background#1a1b1d
- editorGroup.border#2a2c2f
- editorGroupHeader.border#232528
- editorGroupHeader.tabsBackground#1a1b1d
- editorGroupHeader.tabsBorder#232528
- editorHoverWidget.background#242628
- editorHoverWidget.border#323336
- editorHoverWidget.foreground#FFFFFF
- editorLineNumber.activeForeground#ccced6
- editorLineNumber.foreground#5c5e61
- focusBorder#323336
- foreground#ffffff
- list.activeSelectionBackground#323336
- list.activeSelectionForeground#FFFFFF
- list.focusForeground#ffffff
- list.hoverBackground#242628
- list.hoverForeground#FFFFFF
- list.inactiveSelectionForeground#ffffff
- panel.background#1a1b1d
- sideBar.background#1a1b1d
- sideBar.border#232528
- sideBar.foreground#ccced6
- statusBar.background#323336
- tab.activeBackground#1a1b1d
- tab.inactiveBackground#222427
- terminalCursor.foreground#FFFFFF
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| entity.name.tag.custom.vue, entity.name.tag.component.vue, text.html.vue-html entity.name.tag.custom.vue | #80eaff | — |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other | #b38cff | — |
| keyword.control.import, keyword.control.export, meta.import keyword.control | #b38cff | — |
| variable.other.readwrite.alias, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, meta.import variable, meta.import variable.other.readwrite, variable.import | #ded47e | — |
| support.class.builtin, support.class.builtin.js, support.class.builtin.ts, support.class.js, support.class.ts, support.class, support.type, support.type.primitive, entity.name.type, entity.name.type.class, entity.name.type.object, entity.name.type.primitive, storage.type.cs, storage.type.annotation, meta.type, meta.type.annotation | #80eaff | — |
| variable.language | #ded47e | — |
| variable.parameter, meta.parameter | #ded47e | — |
| punctuation, punctuation.definition, punctuation.separator, punctuation.section, punctuation.terminator, punctuation.accessor | #ccced6 | — |
| entity.name.function, support.function, meta.function-call, variable.function, meta.function.method, support.method, meta.method-call, support.function.misc.css | #f29d79 | — |
| string, string.quoted, string.template, string.regexp, string.interpolated, constant.other.symbol | #82d99f | — |
| variable.other.constant, variable.constant, support.constant | #80bbff | — |
| meta.object-literal.key, meta.object.member, support.type.property-name, support.type.property-name.json | #ffffff | — |
| variable.other.readwrite, variable.other.readwrite.js, variable.other.readwrite.ts, text.html.vue-html variable, text.html.vue-html variable.other.readwrite, text.html.vue-html meta.embedded.expression variable, text.html.vue-html meta.attribute.directive variable, meta.directive.vue variable, source.vue meta.directive variable, variable.other.object | #ded47e | — |
| meta.var.expr.jsx variable.other.readwrite:first-child, meta.var.expr.tsx variable.other.readwrite:first-child, meta.definition.variable.jsx variable.other.readwrite:first-child, meta.definition.variable.tsx variable.other.readwrite:first-child | #80bbff | — |
| variable.other.property, variable.other.member, meta.property.object | #ffffff | — |
| entity.name.tag.html, entity.name.tag.vue, entity.name.tag.css | #f2858c | — |
| entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, entity.name.tag.template, entity.name.tag.script, entity.name.tag.style | #66e6ac | — |
| entity.name.tag.custom, entity.name.tag.custom.html, entity.name.tag.custom.vue, entity.name.tag.component.vue, entity.name.tag.other.html.vue, entity.name.tag.other, support.class.component, support.class.component.vue, support.class.component.html, meta.tag.custom entity.name.tag, text.html.vue-html entity.name.tag.other.html.vue, entity.name.tag.script.html.vue entity.name.tag | #80eaff | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.vue, entity.other.attribute-name.jsx, entity.other.attribute-name.directive.vue, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #ded47e | — |
| meta.jsx.children, meta.jsx.children.tsx, meta.jsx.children.jsx, text.html.vue-html | #e0e0e0 | — |
| entity.name.class, meta.class, entity.other.inherited-class, storage.type.class | #b38cff | — |
| comment, comment.block.documentation, punctuation.definition.comment | #737780 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.ternary, punctuation.separator.key-value | #ffffff | — |
| support.type.property-name.css, meta.property-name.css | #ffffff | — |
| support.constant.property-value.css, meta.property-value.css support.constant, support.constant.color.w3c-standard-color.css | #82d99f | — |
| constant.numeric.css, keyword.other.unit.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css | #f48cca | — |
| variable.argument.css, variable.css, variable.other.custom-property.css | #ded47e | — |
| constant.numeric, constant.numeric.decimal, constant.numeric.float, constant.numeric.hex, constant.numeric.html | #f48cca | — |
| constant.language.boolean, constant.language.true, constant.language.false, constant.language.null, constant.language.nan, constant.language.undefined, constant.language.infinity | #80bbff | — |
| markup.warning, constant.warning, variable.parameter.warning | #cca700 | — |
| invalid, markup.error, message.error, keyword.error | #ff6464 | — |
| source, text | #e0e0e0 | — |