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.

  • breadcrumb.activeSelectionForeground#d2cdf2
  • breadcrumb.background#404040
  • breadcrumb.foreground#d1ccf1
  • editor.background#2f2f2f
  • editor.foreground#d1ccf1
  • editor.lineHighlightBackground#3b3b3b
  • editor.selectionBackground#4b4b4b
  • editorCursor.background#404040
  • editorCursor.foreground#d1ccf1
  • editorIndentGuide.activeBackground#d1ccf1
  • editorLineNumber.activeForeground#d2cdf2
  • notifications.border#404040
  • notificationToast.border#404040
  • panel.border#404040
  • panelTitle.activeBorder#d1ccf1
  • sideBar.background#282828
  • sideBar.border#404040
  • sideBarSectionHeader.border#404040
  • statusBar.background#333333
  • statusBar.border#404040
  • tab.activeBackground#4b4b4b
  • tab.activeBorder#d1ccf1
  • tab.activeForeground#d2cdf2
  • tab.border#404040
  • terminal.background#2a2a2a
  • terminal.border#404040
  • titleBar.border#404040

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.object.property, 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#d1ccf1—
punctuation.definition.comment, comment#bea17fitalic
comment.line.keyword.yard, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard#f1cb9fitalic 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#dd5555—
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#ff9a3bitalic
punctuation.definition.string.begin, punctuation.definition.string.end, string#5ac16c—
meta.embedded.line—
string.regexp, punctuation.section.regexp#a6cc5f
constant.numeric, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css#eee385—
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#4b82e9
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, constant.other.symbol.hashkey.parameter.function.rbs#7dcfcf
variable.other.readwrite.class, variable.other.readwrite.instance, punctuation.definition.variable, variable.other.readwrite.global, variable.other.property#eee0e0
constant.language, variable.language.this#ed2a88bold
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#18b5e4
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, support.type.builtin.rbs#dd5555bold
meta.definition.method, meta.function.method.with-arguments.ruby, meta.function.method.without-arguments.ruby#d464eb—
meta.function-call#d1ccf1—
meta.attribute.rust#ce74f8italic
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff#18B5E4italic
markup.deleted, punctuation.definition.deleted.diff#DD5555
markup.changed#FF9A3B
markup.inserted, punctuation.definition.inserted.diff#5AC16C—
ThemeDatabase All Themes by enes ozturk - VS Code Theme