Skip to main content
CodingTheme

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.activeBorder#76ecb785
  • activityBar.background#15191d
  • activityBar.border#1a1f24
  • activityBar.foreground#66707aab
  • activityBarBadge.background#76ECB7D5
  • activityBarBadge.foreground#000000
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#353b45
  • dropdown.border#181A1F
  • editor.background#191d22
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#ABB2BF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#76ECB7D5
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#191d22
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground1#414650
  • editorIndentGuide.background1#ABB2BF26
  • editorInlayHint.background#2C313A
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#ABB2BF26
  • editorWidget.background#21252B
  • editorWidget.border#3A3F4B
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#76ecb728
  • input.background#1B1D23
  • input.border#181A1F
  • list.activeSelectionBackground#76ecb728
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#76ecb728
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#76ecb728
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • menu.background#15191d
  • menu.foreground#a5b6cf
  • notebook.cellEditorBackground#2C313A
  • notificationCenter.border#11131c
  • notificationCenterHeader.background#0f111a
  • notificationCenterHeader.foreground#cbced3
  • notifications.background#0d0f18
  • notifications.border#11131c
  • notifications.foreground#a5b6cf
  • notificationsErrorIcon.foreground#dd6777
  • notificationsInfoIcon.foreground#86aaec
  • notificationsWarningIcon.foreground#e9a180
  • notificationToast.border#0f111a
  • peekView.border#528BFF
  • peekViewEditor.background#1B1D23
  • peekViewResult.background#21252B
  • peekViewResult.selectionBackground#2C313A
  • peekViewTitle.background#1B1D23
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#15191d
  • sideBar.foreground#66707a
  • sideBarSectionHeader.background#191d22
  • statusBar.background#191d22
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#848992
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#191d22
  • tab.activeBorderTop#76ECB7D5
  • tab.activeForeground#76ecb77c
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • tab.inactiveForeground#a8a8a8d5
  • terminal.ansiBlack#151720
  • terminal.ansiBlue#86aaec
  • terminal.ansiBrightBlack#1c1e27
  • terminal.ansiBrightBlue#86aaec
  • terminal.ansiBrightCyan#93cee9
  • terminal.ansiBrightGreen#76ECB7D5
  • terminal.ansiBrightMagenta#9D88D0
  • terminal.ansiBrightRed#dd6777
  • terminal.ansiBrightWhite#a5b6cf
  • terminal.ansiBrightYellow#DBD594
  • terminal.ansiCyan#93cee9
  • terminal.ansiGreen#76ECB7D5
  • terminal.ansiMagenta#9D88D0
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#cbced3
  • terminal.ansiYellow#F5B187
  • terminal.border#11131c
  • titleBar.activeBackground#15191d
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#1d2127
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
comment markup.link#5C6370
entity.name.type#DBD594
entity.other.inherited-class#F5B187
keyword#C678DD
keyword.control#9D88D0
keyword.operator#C678DD
storage.type.js.jsx#9D88D0
meta.jsx#959AA5
keyword.other.special-method#61AFEF
keyword.other.unit#9D88D0
keyword.other.unit#9D88D0
storage#9D88D0
storage.type.annotation, storage.type.primitive#C678DD
storage.modifier.package, storage.modifier.import#ABB2BF
constant#D19A66
constant.variable#D19A66
constant.character.escape#56B6C2
constant.numeric#76ecb7d5
constant.other.color#76ecb7d5
punctuation.separator.key-value.css#9D88D0
punctuation.definition.entity.css#c98a63
support.constant.font-name.css#9D88D0
punctuation.terminator.rule.css#959AA5
keyword.operator.assignment.tsx#ff70ac
constant.other.symbol#56B6C2
variable#E06C75
variable.interpolation#BE5046
variable.parameter#959AA5
string#76ecb7d5
string > source, string embedded#ABB2BF
string.regexp#56B6C2
string.regexp source.ruby.embedded#E5C07B
string.other.link#E06C75
punctuation.definition.comment#5C6370
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#9D88D0
punctuation.definition.heading, punctuation.definition.identity#61AFEF
punctuation.definition.bold#E5C07Bbold
punctuation.definition.italic#C678DDitalic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.class#9D88D0
support.type#56B6C2
support.function#DBD594
support.function.any-method#DBD594
entity.name.function#DBD594
entity.name.class, entity.name.type.class#DBD594
entity.name.tag.js.jsx#76ECB7D5
entity.name.type.module.js#5C6370
entity.name.section#61AFEF
entity.name.tag#E06C75
punctuation.section.embedded#959AA5
variable.language.this.js.jsx#959AA5
entity.other.attribute-name#f5b187
entity.other.attribute-name.id#f5b187
meta.class#E5C07B
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#E06C75
meta.link#D19A66
meta.require#61AFEF
meta.selector#C678DD
meta.separator#ABB2BF
meta.tag#4c5a68
none#ABB2BF
markup.bold#D19A66bold
markup.changed#C678DD
markup.deleted#E06C75
markup.italic#C678DDitalic
markup.heading#E06C75
markup.heading punctuation.definition.heading#61AFEF
markup.link#56B6C2
markup.inserted#98C379
markup.quote#D19A66
markup.raw#98C379
markup.raw#98C379
entity.other.keyframe-offset.css#76ECB7D5
variable.parameter.keyframe-list.css#76ECB7D5
meta.at-rule.media.header.css#76ECB7D5
source.cpp keyword.operator#959AA5
source.cs keyword.operator#959AA5
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#ABB2BF
source.elixir source.embedded.source#ABB2BF
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#61AFEF
source.elixir variable.definition, source.elixir variable.anonymous#C678DD
source.elixir parameter.variable.function#D19A66italic
source.elixir quoted#98C379
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#E06C75
source.elixir readwrite.module punctuation#E06C75
source.elixir regexp.section, source.elixir regexp.string#BE5046
source.elixir separator, source.elixir keyword.operator#D19A66
source.elixir variable.constant#E5C07B
source.elixir array, source.elixir scope, source.elixir section#828997
source.gfm link entity#61AFEF
source.go storage.type.string#C678DD
source.ini keyword.other.definition.ini#E06C75
source.java storage.modifier.import#E5C07B
source.java storage.type#E5C07B
source.java keyword.operator.instanceof#C678DD
source.java-properties meta.key-pair#E06C75
variable.argument.css#959AA5
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#DBD594
meta.jsx.children.js.jsx#959AA5
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#959AA5
source.ts keyword.operator#56B6C2
source.flow keyword.operator#56B6C2
source.json meta.structure.dictionary.json > string.quoted.json#E06C75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E06C75
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#98C379
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#56B6C2
ng.interpolation#E06C75
ng.interpolation.begin, ng.interpolation.end#61AFEF
ng.interpolation function#E06C75
ng.interpolation function.begin, ng.interpolation function.end#61AFEF
ng.interpolation bool#D19A66
ng.interpolation bracket#ABB2BF
ng.pipe, ng.operator#ABB2BF
ng.tag#56B6C2
ng.attribute-with-value attribute-name#E5C07B
ng.attribute-with-value string#C678DD
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#ABB2BF
source.php class.bracket#ABB2BF
source.python keyword.operator.logical.python#C678DD
source.python variable.parameter#D19A66
customrule#ABB2BF
support.type.property-name#959AA5
string.quoted.double punctuation#76ecb7d5
support.constant#9D88D0
support.type.property-name.json#9C89D0
support.type.property-name.json punctuation#9D88D890
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#959AA5
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#56B6C2
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#959AA5
constant.numeric.decimal.js#76ecb7d5
support.variable.dom.js, support.variable.dom.ts#E06C75
support.variable.property.dom.js, support.variable.property.dom.ts#E06C75
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#9D88D0
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#ABB2BF
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#ABB2BF
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#ABB2BF
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#E06C75
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#DBD594
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#C678DD
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#C678DD
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.brace.round.js, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#9D88D0
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#ABB2BF
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#ABB2BF
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#D19A66
source.js support.variable, source.ts support.variable, source.tsx support.variable#E06C75
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#D19A66
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#C678DD
source.ts keyword.operator, source.tsx keyword.operator#DBD594
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF
constant.language.import-export-all.js, constant.language.import-export-all.ts#E06C75
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#56B6C2
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#9D88D0
variable.css#959AA5
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.js.jsx, variable.other.readwrite.alias.tsx#DBD594
keyword.operator.increment.js, keyword.operator.relational.js, keyword.operator.decrement.js#DBD594
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#f5b187
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#959AA5
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#98C379
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#ABB2BF
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#76ECB7D5
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#ABB2BF
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#ABB2BF
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#ABB2BF
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#ABB2BF
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#ABB2BF
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#E5C07B
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E06C75
constant.language.json#56B6C2
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#D19A66
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#9D88D0
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#98C379
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#98C379
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#C678DD
variable.other.object.js, variable.other.object.ts#959AA5
meta.object-literal.key.js, meta.object-literal.key.ts#E06C75
source.python constant.other#ABB2BF
source.python constant#D19A66
constant.character.format.placeholder.other.python storage#D19A66
support.variable.magic.python#E06C75
meta.function.parameters.python#D19A66
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#E06C75
source.cs keyword.operator#ABB2BF
variable.other.readwrite.cs#ABB2BF
variable.other.object.cs#ABB2BF
variable.other.object.property.cs#ABB2BF
entity.name.variable.property.cs#61AFEF
storage.type.cs#E5C07B
keyword.other.unsafe.rust#C678DD
entity.name.type.rust#56B6C2
storage.modifier.lifetime.rust#ABB2BF
entity.name.lifetime.rust#D19A66
storage.type.core.rust#56B6C2
meta.attribute.rust#D19A66
storage.class.std.rust#56B6C2
markup.raw.block.markdown#ABB2BF
punctuation.definition.variable.shell#E06C75
support.constant.property-value.css#9D88D0
punctuation.definition.constant.css#ff70ac
punctuation.separator.key-value.scss#E06C75
punctuation.definition.constant.scss#D19A66
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#E5C07B
entity.name.section.markdown#E06C75
punctuation.definition.heading.markdown#E06C75
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
beginning.punctuation.definition.list.markdown#E06C75
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#C678DD
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD
string.other.link.title.markdown, string.other.link.description.markdown#61AFEF
punctuation.separator.variable.ruby#E06C75
variable.other.constant.ruby#D19A66
keyword.operator.other.ruby#98C379
punctuation.definition.variable.php#E06C75
meta.class.php#ABB2BF

Shiki preview

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

Loading...

Evro Dark by EvroHQ - VS Code Theme