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#1d1f21
  • activityBarBadge.background#16825d
  • checkbox.border#6b6b6b
  • editor.background#1d1f21
  • 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#1d1f21
  • sideBarSectionHeader.background#1d1f21
  • sideBarSectionHeader.border#1d1f21
  • sideBarTitle.foreground#5c605c
  • 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#c56c86
entity.name.function.preprocessor, entity.name.function.preprocessor.c, meta.preprocessor, meta.preprocessor.macro.c#aa8d80
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#609bbf
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#609bbf
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#a8b499
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#878787
variable.other.enummember, variable.enum.jai, meta.property-value.css, support.constant.property-value.css, support.constant.font-name.css, support.constant.constant.prisma#c48b4e
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#b5647d
comment, punctuation.definition.comment, punctuation.definition.heading.markdown, meta.paragraph.markdown, text.html.markdown#5c605c
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#656f6b
emphasisitalic
strongbold
header#000080
invalid#f44747
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#b5647d
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6a9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#b5647d
meta.diff.header#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
variable.parameter.jai#b3a178

Shiki preview

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

Loading...

Core - Coding Theme