Skip to main content
Coding Theme

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.

  • actionBar.toggledBackground#383a49
  • activityBar.background#1b1c1d
  • activityBarBadge.background#16825d
  • checkbox.border#6b6b6b
  • editor.background#1b1c1d
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#1f2f2ca0
  • editor.selectionBackground#1f2f2c
  • editor.selectionHighlightBackground#add6ff26
  • editorCursor.foreground#a0d0b0
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • input.placeholderForeground#a6a6a6
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383B3d
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#16825d
  • menu.separatorBackground#454545
  • ports.iconRunningProcessForeground#369432
  • sideBar.background#1b1c1d
  • sideBarSectionHeader.background#1b1c1d
  • sideBarSectionHeader.border#1b1c1d
  • sideBarTitle.foreground#626762
  • statusBar.background#2f2f2f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.lastPinnedBorder#cccccc
  • tab.selectedBackground#222222
  • tab.selectedForeground#ffffffa0
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.type, keyword.type.zig, keyword.control, keyword.operator.delete, keyword - keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.sizeof.cpp, keyword.operator.sizeof.c, keyword.operator.noexcept, keyword.operator.expression, keyword.operator.expression.typeof, keyword.operation.graphql, keyword.operator.new.ts, keyword.operator.new.tsx, keyword.on.graphql, keyword.directive.preprocessor.glsl, keyword.fragment.graphql, keyword.other.important.css, keyword.other.new.cs, keyword.other.typedef.c, keyword.other.using, keyword.other.directive.using, keyword.other.operator, variable.language, variable.language.wildcard.java, variable.language.this.ts, variable.language.this.tsx, storage, storage.type, storage.modifier, storage.modifier.glsl, storage.modifier.c, storage.modifier.import.java, storage.modifier.package.java, entity.name.operator, support.variable.property.importmeta.tsx, support.variable.jai, this.self#6e9ac0
entity.name.function.preprocessor, entity.name.function.preprocessor.c, meta.preprocessor, meta.preprocessor.macro.c#cc7b6f
entity.name.tag, entity.name.tag.css, entity.name.tag.less, entity.name.section.markdown, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.scss, source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.pseudo-class, source.css.less entity.other.attribute-name.id, meta.selector.css, keyword.operator.expression.void, variable.language.relations.prisma#8ab35c
entity.name.type, entity.name.class, entity.name.namespace, entity.name.enum.jai, entity.name.struct.jai, entity.other.attribute, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class, support.constant.math, support.constant.dom, support.constant.json, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.jai, storage.type.struct.jai, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, meta.type.cast.expr, meta.type.new.expr#8ab35c
entity.name.function, entity.name.function.c, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, keyword.other.main.jai#a2b197
variable, variable.css, variable.other.constant, entity.name.variable, entity.other.attribute-name, entity.name.fragment.graphql, entity.name.label, source.glsl, source.css variable, source.coffee.embedded, meta.function.c, meta.object-literal.key, meta.definition.variable.name, meta.structure.dictionary.key.python, support.type.property-name, support.type.vendored.property-name, support.variable, support.variable.property.ts, support.variable.glsl, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, support.constant.color, constant.other.color.rgb-value, constant.other.rgb-value, constant.character.escape, constant.character, constant.other.option#92928d
variable.other.enummember, variable.enum.jai, meta.property-value.css, support.constant.property-value.css, support.constant.font-name.css, support.constant.constant.prisma#d09663
string, string.tag, string.value, constant.numeric, constant.language, constant.language.null, constant.language.undefined, constant.language.boolean, constant.language.json, constant.language.json.comments, constant.regexp, meta.jsx.children.tsx, meta.embedded.assembly, meta.preprocessor.string, meta.preprocessor.numeric, punctuation.definition.constant.css, keyword.other.unit, punctuation.definition.string.import.begin.jai#cc865b
comment, punctuation.definition.comment, punctuation.definition.heading.markdown, meta.paragraph.markdown, text.html.markdown#626762
punctuation, punctuation.section.embedded, punctuation.accessor.optional, punctuation.definition.parameters, punctuation.definition.binding-pattern, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.tag, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.parens.block, meta.brace.round, meta.brace.square, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator, keyword.operator.comparison, keyword.operator.logical, keyword.operator.increment, keyword.operator.assignment, keyword.operator.jai, keyword.declaration.jai, storage.modifier.array.bracket.square, storage.type.function.arrow, constant.other.placeholder, constant.language.import-export-all, source.zig, source.prisma.array, source.prisma.attribute.with_arguments, punctuation.section.braces.start.jai, punctuation.section.braces.end.jai#7e8378
emphasisitalic
strongbold
header#000080
invalid#f44747
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#cc865b
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6a9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#cc865b
meta.diff.header#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
variable.parameter.jai#9fb6d1

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...