Skip to main content
Coding Theme

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#f6f6f6
  • activityBar.background#f6f6f6
  • activityBar.border#dcdcdc
  • activityBar.foreground#4f4f4f
  • breadcrumb.activeSelectionForeground#cedcec
  • breadcrumb.background#f6f6f6
  • breadcrumb.foreground#4f4f4f
  • editor.background#f6f6f6
  • editor.foreground#4f4f4f
  • editor.lineHighlightBackground#dcdcdc
  • editor.selectionBackground#cedcec
  • editorCursor.background#f6f6f6
  • editorCursor.foreground#4f4f4f
  • editorIndentGuide.activeBackground1#cedcec
  • editorLineNumber.activeForeground#4f4f4f
  • editorLineNumber.foreground#b6b6b6
  • list.activeSelectionBackground#dcdcdc
  • list.activeSelectionForeground#4f4f4f
  • list.activeSelectionIconForeground#4f4f4f
  • list.focusAndSelectionOutline#4f4f4f
  • list.focusOutline#4f4f4f
  • notifications.border#dcdcdc
  • notificationToast.border#dcdcdc
  • panel.border#dcdcdc
  • panelTitle.activeBorder#cedcec
  • sideBar.background#f6f6f6
  • sideBar.border#dcdcdc
  • sideBar.foreground#4f4f4f
  • sideBarSectionHeader.border#f6f6f6
  • sideBarTitle.foreground#4f4f4f
  • statusBar.background#f6f6f6
  • statusBar.border#dcdcdc
  • statusBar.foreground#4f4f4f
  • tab.activeBackground#f6f6f6
  • tab.activeForeground#4f4f4f
  • tab.hoverBackground#dcdcdc
  • tab.hoverBorder#dcdcdc
  • tab.inactiveBackground#dcdcdc
  • terminal.background#f6f6f6
  • terminal.border#dcdcdc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, punctuation.section.embedded, meta.function-call, punctuation.definition.constant.hashkey, keyword.operator.assignment.ruby, entity.name.function.call.cpp, entity.name.function.member.cpp, variable.other.property, meta.brace.round.ts, meta.brace.square.ts, keyword.operator.type.ts, keyword.operator.type.annotation.ts, meta.function-call.ts, keyword.operator.assignment.ts, keyword.operator.relational.ts, keyword.operator.increment.ts, keyword.operator.bitwise.shift.ts, keyword.operator.bitwise.ts, punctuation.separator.key-value.ts, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.bitwise.shift.js, keyword.operator.bitwise.js, variable.other.object.property.js, support.variable.property.js, meta.brace.round.js, meta.brace.square.js, keyword.generator.asterisk.js, keyword.operator.combinator.css, meta.property-name.css, punctuation.definition.constant.css, punctuation.separator.key-value.mapping.yaml, string.unquoted.plain.out.yaml, source.sql, constant.other.table-name.sql, meta.function.call.rust#4f4f4f
punctuation.definition.comment, comment#ababafitalic
comment.line.keyword.yard, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard#d46900italic bold
support.function.kernel.ruby, keyword.other, keyword.operator, keyword.control, keyword.other.special-method, punctuation.separator.key-value, variable.language, storage.type.variable, storage.modifier, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.heading.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.enum.ts, support.constant.media.css, support.constant.property-value.css, support.constant.font-name.css, entity.name.type.primitive.rust, entity.name.type.numeric.rust#a91b1b
variable.parameter, constant.other.symbol.hashkey.parameter.function, variable.other, comment.line.parameter.yard, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, entity.other.attribute-name.html, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, constant.other.database-name.sql#d46900italic
punctuation.definition.string.begin, punctuation.definition.string.end, string#00a237
meta.embedded.line
string.regexp, punctuation.section.regexp#00a237
constant.numeric, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css#4f4f4f
support.class, meta.class, entity.name.type.class.ruby, entity.other.inherited-class.ruby, entity.name.type.module, meta.module.ruby, variable.other.constant, comment.line.type.yard, entity.name.scope-resolution.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.function.call.cpp, markup.heading, constant.other.reference.link.markdown, string.other.link.title.markdown, meta.selector.css, entity.name.namespace.rust, entity.name.type.enum.ts, variable.other.readwrite.alias.ts#00529bbold
constant.other.symbol.ruby, constant.language.symbol, constant.other.symbol.hashkey.ruby, markup.underline.link.markdown, meta.link.inline.markdown, support.type.property-name.json, meta.object-literal.key.ts, meta.object-literal.key.js, entity.name.tag.html, punctuation.separator.key-value.css, punctuation.terminator.rule.css, entity.name.tag.yaml#00529b
variable.other.readwrite.class, variable.other.readwrite.instance, punctuation.definition.variable, variable.other.readwrite.global, variable.other.property#d46900
constant.language, variable.language.this#a91b1bbold
variable, markup.bold, punctuation.definition.bold.markdown, variable.object.property.ts, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js#4f4f4f
storage.type.ts, support.type.primitive.ts, storage.type.class.ts, storage.type.class.js, storage.type.function.js, storage.type.js, storage.type.function.arrow.js, constant.language.null.js#5885bbbold
meta.definition.method, meta.function.method.with-arguments.ruby, meta.function.method.without-arguments.ruby#4f4f4f
meta.function-call#4f4f4f
meta.attribute.rust#5885bbitalic
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff#5885bbitalic
markup.deleted, punctuation.definition.deleted.diff#a91b1b
markup.changed#d46900
markup.inserted, punctuation.definition.inserted.diff#00a237
vpa-theme by vlasikhin - VS Code Theme