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.

  • activityBar.background#252a32
  • activityBar.border#1a1d23
  • badge.background#2b313b
  • badge.foreground#c5c8c6
  • editor.background#2b313b
  • editor.foreground#c5c8c6
  • editor.lineHighlightBorder#2b313b
  • editorError.foreground#cc6666
  • editorGroup.border#1a1d23
  • editorGroupHeader.tabsBackground#252a32
  • editorGutter.addedBackground#acc697
  • editorGutter.deletedBackground#cc6666
  • editorGutter.modifiedBackground#de935f
  • editorInfo.foreground#5786B8
  • editorLineNumber.foreground#65737E
  • editorOverviewRuler.errorForeground#cc6666
  • editorOverviewRuler.infoForeground#5786B8
  • editorOverviewRuler.warningForeground#de935f
  • editorWarning.foreground#de935f
  • gitDecoration.conflictingResourceForeground#e2c08d
  • gitDecoration.deletedResourceForeground#9B4444
  • gitDecoration.ignoredResourceForeground#484F5A
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.untrackedResourceForeground#5786B8
  • input.background#1C1F26
  • input.foreground#dfe1e8
  • input.placeholderForeground#484F5A
  • list.activeSelectionBackground#3D7BD1
  • list.hoverBackground#252a32
  • list.inactiveSelectionBackground#3A4454
  • list.inactiveSelectionForeground#DFE1E8
  • sideBar.background#252a32
  • sideBar.border#1a1d23
  • sideBar.foreground#9ba5b6
  • sideBarSectionHeader.background#252a32
  • sideBarSectionHeader.foreground#c5c8c6
  • statusBar.background#252a32
  • statusBar.border#1a1d23
  • statusBar.foreground#9ba5b6
  • tab.border#1a1d23
  • tab.inactiveBackground#252a32
  • titleBar.activeBackground#2b313b
  • titleBar.border#1a1d23
  • titleBar.inactiveBackground#252a32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#65737E
comment markup.link#65737E
entity.name.type#EBCB8B
entity.other.inherited-class#acc697
keyword#B48EAD
keyword.control#B48EAD
keyword.operator#c5c8c6
keyword.other.special-method#81a2be
keyword.other.unit#de935f
storage#B48EAD
storage.type.annotation, storage.type.primitive#B48EAD
storage.modifier.package, storage.modifier.import#c5c8c6
constant#de935f
constant.variable#de935f
constant.character.escape#8abeb7
constant.numeric#de935f
constant.other#EBCB8B
constant.other.symbol#acc697
variable#cc6666
variable.interpolation#bf4040
variable.parameter#c5c8c6
string#acc697
string.regexp#8abeb7
string.regexp source.ruby.embedded#de935f
string.other.link#cc6666
punctuation.definition.comment#65737E
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#c5c8c6
punctuation.definition.heading, punctuation.definition.identity#81a2be
punctuation.definition.bold#EBCB8Bbold
punctuation.definition.italic#B48EADitalic
punctuation.section.embedded#bf4040
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#c5c8c6
support.class#EBCB8B
support.type#8abeb7
support.function#8abeb7
support.function.any-method#81a2be
entity.name.function#81a2be
entity.name.class, entity.name.type.class#EBCB8B
entity.name.section#81a2be
entity.name.tag#cc6666
entity.other.attribute-name#de935f
entity.other.attribute-name.id#81a2be
meta.class#EBCB8B
meta.class.body#c5c8c6
meta.method-call, meta.method#c5c8c6
meta.definition.variable#cc6666
meta.link#de935f
meta.require#81a2be
meta.selector#B48EAD
meta.separator#c5c8c6
meta.tag#c5c8c6
none#c5c8c6
invalid.deprecated#523D14
invalid.illegal#fff
markup.bold#de935fbold
markup.changed#B48EAD
markup.deleted#cc6666
markup.italic#B48EADitalic
markup.heading#cc6666
markup.heading punctuation.definition.heading#81a2be
markup.link#B48EAD
markup.inserted#acc697
markup.quote#de935f
markup.raw#acc697
source.c keyword.operator#B48EAD
source.cpp keyword.operator#B48EAD
source.cs keyword.operator#B48EAD
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#c5c8c6
source.gfm link entity#81a2be
source.go storage.type.string#B48EAD
source.ini keyword.other.definition.ini#cc6666
source.java storage.modifier.import#EBCB8B
source.java storage.type#EBCB8B
source.java keyword.operator.instanceof#B48EAD
source.java-properties meta.key-pair#cc6666
source.java-properties meta.key-pair > punctuation#c5c8c6
source.js keyword.operator#8abeb7
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#B48EAD
source.json meta.structure.dictionary.json > string.quoted.json#cc6666
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#cc6666
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#acc697
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#8abeb7
source.python keyword.operator.logical.python#B48EAD
source.python variable.parameter#de935f
meta.attribute.rust#BCC199
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC
keyword.unsafe.rust#CC6B73
customrule#c5c8c6
support.type.property-name#c5c8c6
string.quoted.double punctuation#acc697
support.constant#de935f
support.type.property-name.json#cc6666
support.type.property-name.json punctuation#cc6666
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#c5c8c6
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#8abeb7
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#c5c8c6
support.variable.dom.js, support.variable.dom.ts#cc6666
support.variable.property.dom.js, support.variable.property.dom.ts#cc6666
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#bf4040
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#c5c8c6
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#c5c8c6
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#c5c8c6
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#cc6666
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#cc6666
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#B48EAD
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#B48EAD
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#c5c8c6
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#c5c8c6
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#c5c8c6
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#de935f
source.js support.variable, source.ts support.variable, source.tsx support.variable#cc6666
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#de935f
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#B48EAD
source.ts keyword.operator, source.tsx keyword.operator#8abeb7
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #c5c8c6
constant.language.import-export-all.js, constant.language.import-export-all.ts, constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#8abeb7
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#c5c8c6
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#cc6666
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#de935f
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#cc6666
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#acc697
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#c5c8c6
source.python constant#c5c8c6
support.constant.property-value.css#c5c8c6
punctuation.definition.constant.css#de935f
punctuation.separator.key-value.scss#cc6666
punctuation.definition.constant.scss#de935f
meta.property-list.scss punctuation.separator.key-value.scss#c5c8c6
storage.type.primitive.array.java#EBCB8B
entity.name.section.markdown#cc6666
punctuation.definition.heading.markdown#cc6666
markup.heading.setext#c5c8c6
punctuation.definition.bold.markdown#de935f
markup.inline.raw.markdown#acc697
beginning.punctuation.definition.list.markdown#cc6666
markup.quote.markdown#65737Eitalic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#c5c8c6
punctuation.definition.metadata.markdown#B48EAD
markup.underline.link.markdown, markup.underline.link.image.markdown#B48EAD
string.other.link.title.markdown, string.other.link.description.markdown#81a2be
punctuation.separator.variable.ruby#cc6666
variable.other.constant.ruby#de935f
keyword.operator.other.ruby#acc697
punctuation.definition.variable.php#cc6666
keyword.operator.accessor.ts, keyword.operator.accessor.js, keyword.operator.accessor.tsx, keyword.operator.accessor.jsx#c5c8c6
variable.language.this.ts, variable.language.this.js, variable.language.this.tsx, variable.language.this.jsx#de935f
entity.name.class.ts, entity.name.class.js, entity.name.class.tsx, entity.name.class.jsx#fff9a3
source.js string.unquoted#c5c8c6
support.type.object.console.ts, support.type.object.console.js, support.type.object.console.tsx, support.type.object.console.jsx#fff9a3
punctuation.quasi.element.begin.ts, punctuation.quasi.element.begin.js, punctuation.quasi.element.begin.tsx, punctuation.quasi.element.begin.jsx, punctuation.quasi.element.end.ts, punctuation.quasi.element.end.js, punctuation.quasi.element.end.tsx, punctuation.quasi.element.end.jsx#cc6666
support.type.property-name.css#8abeb7
text.html.basic#c5c8c6
ThemeDatabase All Themes by enes ozturk - VS Code Theme