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#212836
  • activityBar.foreground#99a3b7
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#43484D
  • dropdown.border#181A1F
  • editor.background#212835
  • editor.lineHighlightBackground#2C313A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#528BFF
  • editorGroup.background#1b212c
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#1b212c
  • editorHoverWidget.background#1b212c
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3C4049
  • editorLineNumber.foreground#636D83
  • editorSuggestWidget.background#1b212c
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#3C4049
  • editorWidget.background#1b212c
  • focusBorder#528BFF
  • input.background#1B1D23
  • input.border#181A1F
  • list.activeSelectionBackground#252d3b
  • list.activeSelectionForeground#d1d5df
  • list.focusBackground#2C313A
  • list.focusForeground#99a3b7
  • list.highlightForeground#99a3b7
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#252d3b
  • list.inactiveSelectionForeground#d1d5df
  • notification.background21252B
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#1b212c
  • sideBarSectionHeader.background#1b212c
  • statusBar.background#1a202b
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#949db1
  • statusBar.noFolderBackground#1b212c
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#212835
  • tab.border#141820
  • tab.inactiveBackground#212835
  • tab.inactiveForeground#666f7e
  • titleBar.activeBackground#212835
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#1b212c
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#516785italic
comment markup.link#516785
entity.name.type#E5C07B
entity.other.inherited-class#70F49C
keyword#d49ff4
keyword.control#d49ff4
keyword.operator#a8b5d0
keyword.other.special-method#74b3fb
keyword.other.unit#e9b684
storage#d49ff4
storage.type.annotation, storage.type.primitive#d49ff4
storage.modifier.package, storage.modifier.import#a8b5d0
constant#e9b684
constant.variable#e9b684
constant.character.escape#59f2f7
constant.numeric#e9b684
constant.other.color#59f2f7
constant.other.symbol#59f2f7
variable#e56674
variable.interpolation#BE5046
variable.parameter#a8b5d0
string#70F49C
string.regexp#59f2f7
string.regexp source.ruby.embedded#E5C07B
string.other.link#e56674
punctuation.definition.comment#516785
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#a8b5d0
punctuation.definition.heading, punctuation.definition.identity#74b3fb
punctuation.definition.bold#E5C07Bbold
punctuation.definition.italic#d49ff4italic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#a8b5d0
support.class#E5C07B
support.type#59f2f7
support.function#59f2f7
support.function.any-method#74b3fb
entity.name.function#74b3fb
entity.name.class, entity.name.type.class#E5C07B
entity.name.section#74b3fb
entity.name.tag#e56674
entity.other.attribute-name#e9b684
entity.other.attribute-name.id#74b3fb
meta.class#E5C07B
meta.class.body#a8b5d0
meta.method-call, meta.method#a8b5d0
meta.definition.variable#e56674
meta.link#e9b684
meta.require#74b3fb
meta.selector#d49ff4
meta.separator#a8b5d0
meta.tag#a8b5d0
underline
none#a8b5d0
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#e9b684bold
markup.changed#d49ff4
markup.deleted#e56674
markup.italic#d49ff4italic
markup.heading#e56674
markup.heading punctuation.definition.heading#74b3fb
markup.link#d49ff4
markup.inserted#70F49C
markup.quote#e9b684
markup.raw#70F49C
source.c keyword.operator#d49ff4
source.cpp keyword.operator#d49ff4
source.cs keyword.operator#d49ff4
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#a8b5d0
source.gfm markup
source.gfm link entity#74b3fb
source.go storage.type.string#d49ff4
source.ini keyword.other.definition.ini#e56674
source.java storage.modifier.import#E5C07B
source.java storage.type#E5C07B
source.java keyword.operator.instanceof#d49ff4
source.java-properties meta.key-pair#e56674
source.java-properties meta.key-pair > punctuation#a8b5d0
source.js keyword.operator#59f2f7
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#d49ff4
source.json meta.structure.dictionary.json > string.quoted.json#e56674
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e56674
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#70F49C
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#59f2f7
source.ruby constant.other.symbol > punctuationinherit
source.python keyword.operator.logical.python#d49ff4
source.python variable.parameter#e9b684
meta.attribute.rust#BCC199
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC
keyword.unsafe.rust#CC6B73
customrule#a8b5d0
support.type.property-name#a8b5d0
string.quoted.double punctuation#70F49C
support.constant#e9b684
support.type.property-name.json#e56674
support.type.property-name.json punctuation#e56674
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#a8b5d0
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#59f2f7
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#a8b5d0
support.variable.dom.js, support.variable.dom.ts#e56674
support.variable.property.dom.js, support.variable.property.dom.ts#e56674
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#BE5046
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#a8b5d0
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#a8b5d0
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#a8b5d0
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#e56674
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#e56674
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#d49ff4
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#d49ff4
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#a8b5d0
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#a8b5d0
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#a8b5d0
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#e9b684
source.js support.variable, source.ts support.variable, source.tsx support.variable#e56674
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#e9b684
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#d49ff4
source.ts keyword.operator, source.tsx keyword.operator#59f2f7
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #a8b5d0
constant.language.import-export-all.js, constant.language.import-export-all.ts, constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#59f2f7
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#a8b5d0
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#e56674
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#e9b684
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#e56674
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#70F49C
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#a8b5d0
source.python constant#a8b5d0
support.constant.property-value.css#a8b5d0
punctuation.definition.constant.css#e9b684
punctuation.separator.key-value.scss#e56674
punctuation.definition.constant.scss#e9b684
meta.property-list.scss punctuation.separator.key-value.scss#a8b5d0
storage.type.primitive.array.java#E5C07B
entity.name.section.markdown#e56674
punctuation.definition.heading.markdown#e56674
markup.heading.setext#a8b5d0
punctuation.definition.bold.markdown#e9b684
markup.inline.raw.markdown#70F49C
beginning.punctuation.definition.list.markdown#e56674
markup.quote.markdown#516785italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#a8b5d0
punctuation.definition.metadata.markdown#d49ff4
markup.underline.link.markdown, markup.underline.link.image.markdown#d49ff4
string.other.link.title.markdown, string.other.link.description.markdown#74b3fb
punctuation.separator.variable.ruby#e56674
variable.other.constant.ruby#e9b684
keyword.operator.other.ruby#70F49C
punctuation.definition.variable.php#e56674
keyword.operator.accessor.ts, keyword.operator.accessor.js, keyword.operator.accessor.tsx, keyword.operator.accessor.jsx#a8b5d0
variable.language.this.ts, variable.language.this.js, variable.language.this.tsx, variable.language.this.jsx#e9b684
entity.name.class.ts, entity.name.class.js, entity.name.class.tsx, entity.name.class.jsx#fff9a3
source.js string.unquoted#a8b5d0
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#e56674
support.type.property-name.css#59f2f7
text.html.basic#a8b5d0