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#323438
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#232427
  • dropdown.border#181A1F
  • editor.background#323438
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#f0f0f0
  • editor.lineHighlightBackground#2324275e
  • editor.selectionBackground#535761
  • editorBracketHighlight.foreground1#ffe553
  • editorBracketHighlight.foreground2#ffe553
  • editorBracketHighlight.foreground3#ffe553
  • editorBracketHighlight.foreground4#ffe553
  • editorBracketHighlight.foreground5#ffe553
  • editorBracketHighlight.foreground6#ffe553
  • editorBracketHighlight.unexpectedBracket.foreground#ffe553
  • editorCursor.foreground#8eb4ff
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#232427
  • editorHoverWidget.background#232427
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground1#626772
  • editorIndentGuide.background1#f0f0f026
  • editorInlayHint.background#232427
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#f0f0f0
  • editorLineNumber.foreground#70747a
  • editorRuler.foreground#f0f0f026
  • editorSuggestWidget.background#232427
  • editorSuggestWidget.border#528cffc0
  • editorSuggestWidget.selectedBackground#528BFF3D
  • editorWarning.foreground#e6a0a0
  • editorWhitespace.foreground#f0f0f026
  • editorWidget.background#232427
  • editorWidget.border#232427
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#528BFF
  • input.background#0f0f0f
  • input.border#181A1F
  • list.activeSelectionBackground#323438
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#232427
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#232427
  • list.inactiveSelectionForeground#D7DAE0
  • notebook.cellEditorBackground#232427
  • peekView.border#528BFF
  • peekViewEditor.background#0f0f0f
  • peekViewResult.background#232427
  • peekViewResult.selectionBackground#232427
  • peekViewTitle.background#0f0f0f
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#5a5a5a91
  • scrollbarSlider.background#5a5a5a4b
  • scrollbarSlider.hoverBackground#5a5a5a91
  • sideBar.background#232427
  • sideBarSectionHeader.background#323438
  • statusBar.background#232427
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#d6dbe4
  • statusBar.noFolderBackground#232427
  • statusBarItem.hoverBackground#232427
  • tab.activeBackground#323438
  • tab.activeForeground#D7DAE0
  • tab.border#181A1F
  • tab.inactiveBackground#232427
  • titleBar.activeBackground#232427
  • titleBar.activeForeground#d6dbe4
  • titleBar.inactiveBackground#232427
  • titleBar.inactiveForeground#d6dbe4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#696F7395italic
comment markup.link#696F7395
entity.name.type#ffaa0d
entity.other.inherited-class#ffaa0d
keyword#c87edf
keyword.control#c87edf
keyword.operator#c87edf
keyword.other.special-method#00aeff
keyword.other.unit#ffaa0d
storage#c87edf
storage.type.annotation, storage.type.primitive#c87edf
storage.modifier.package, storage.modifier.import#dbdbdb
constant#ffaa0d
constant.variable#ffaa0d
constant.character.escape#dbdbdb
constant.numeric#ffaa0d
constant.other.color#dbdbdb
constant.other.symbol#dbdbdb
variable#eb3b49
variable.interpolation#eb3b49
variable.parameter#dbdbdb
string#61dd09
string > source, string embedded#dbdbdb
string.regexp#dbdbdb
string.regexp source.ruby.embedded#ffaa0d
string.other.link#eb3b49
punctuation.definition.comment#696F7395
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#dbdbdb
punctuation.definition.heading, punctuation.definition.identity#0099ff
punctuation.definition.bold#ffaa0dbold
punctuation.definition.italic#c87edfitalic
punctuation.section.embedded#eb3b49
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#dbdbdb
support.class#ffaa0d
support.type#dbdbdb
support.function#dbdbdb
support.function.any-method#00aeff
entity.name.function#00aeff
entity.name.class, entity.name.type.class#ffaa0d
entity.name.section#00aeff
entity.name.tag#eb3b49
entity.other.attribute-name#ffaa0d
entity.other.attribute-name.id#00aeff
meta.class#ffaa0d
meta.class.body#dbdbdb
meta.method-call, meta.method#dbdbdb
meta.definition.variable#eb3b49
meta.link#ffaa0d
meta.require#00aeff
meta.selector#c87edf
meta.separator#dbdbdb
meta.tag#dbdbdb
underline
none#dbdbdb
invalid.deprecated#523D14
invalid.illegal#ffffff
markup.bold#ffaa0dbold
markup.changed#c87edf
markup.deleted#eb3b49
markup.italic#c87edfitalic
markup.heading#eb3b49
markup.heading punctuation.definition.heading#00aeff
markup.link#dbdbdb
markup.inserted#09a1dd
markup.quote#ffaa0d
markup.raw#61dd09
source.c keyword.operator#c87edf
source.cpp keyword.operator#c87edf
source.cs keyword.operator#c87edf
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#dbdbdb
source.elixir source.embedded.source#dbdbdb
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#00aeff
source.elixir variable.definition, source.elixir variable.anonymous#c87edf
source.elixir parameter.variable.function#ffaa0ditalic
source.elixir quoted#61dd09
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#eb3b49
source.elixir readwrite.module punctuation#eb3b49
source.elixir regexp.section, source.elixir regexp.string#eb3b49
source.elixir separator, source.elixir keyword.operator#ffaa0d
source.elixir variable.constant#ffaa0d
source.elixir array, source.elixir scope, source.elixir section#828997
source.gfm markup
source.gfm link entity#00aeff
source.go storage.type.string#c87edf
source.ini keyword.other.definition.ini#eb3b49
source.java storage.modifier.import#ffaa0d
source.java storage.type#ffaa0d
source.java keyword.operator.instanceof#c87edf
source.java-properties meta.key-pair#eb3b49
source.java-properties meta.key-pair > punctuation#dbdbdb
source.js keyword.operator#dbdbdb
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#c87edf
source.ts keyword.operator#dbdbdb
source.flow keyword.operator#dbdbdb
source.json meta.structure.dictionary.json > string.quoted.json#eb3b49
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#eb3b49
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#61dd09
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#dbdbdb
ng.interpolation#eb3b49
ng.interpolation.begin, ng.interpolation.end#00aeff
ng.interpolation function#eb3b49
ng.interpolation function.begin, ng.interpolation function.end#00aeff
ng.interpolation bool#ffaa0d
ng.interpolation bracket#dbdbdb
ng.pipe, ng.operator#dbdbdb
ng.tag#dbdbdb
ng.attribute-with-value attribute-name#ffaa0d
ng.attribute-with-value string#c87edf
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#dbdbdb
source.ruby constant.other.symbol > punctuation
source.php class.bracket#dbdbdb
source.python keyword.operator.logical.python#c87edf
source.python variable.parameter#ffaa0d
customrule#dbdbdb
support.type.property-name#dbdbdb
string.quoted.double punctuation#61dd09
support.constant#ffaa0d
support.type.property-name.json#eb3b49
support.type.property-name.json punctuation#eb3b49
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#dbdbdb
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#dbdbdb
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#dbdbdb
support.variable.dom.js, support.variable.dom.ts#eb3b49
support.variable.property.dom.js, support.variable.property.dom.ts#eb3b49
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#eb3b49
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#dbdbdb
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#dbdbdb
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#dbdbdb
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#eb3b49
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#eb3b49
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#c87edf
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#c87edf
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#dbdbdb
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#dbdbdb
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#dbdbdb
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#ffaa0d
source.js support.variable, source.ts support.variable, source.tsx support.variable#eb3b49
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#ffaa0d
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#c87edf
source.ts keyword.operator, source.tsx keyword.operator#dbdbdb
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #dbdbdb
constant.language.import-export-all.js, constant.language.import-export-all.ts#eb3b49
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#dbdbdb
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#dbdbdb
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#eb3b49
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#ffaa0d
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#eb3b49
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#61dd09
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#dbdbdb
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#61dd09
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#dbdbdb
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#dbdbdb
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#dbdbdb
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#dbdbdb
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#dbdbdb
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#ffaa0d
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#eb3b49
constant.language.json#dbdbdb
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#ffaa0d
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#dbdbdb
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#61dd09
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#61dd09
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#c87edf
variable.other.object.js, variable.other.object.ts#dbdbdb
meta.object-literal.key.js, meta.object-literal.key.ts#eb3b49
source.python constant.other#dbdbdb
source.python constant#ffaa0d
constant.character.format.placeholder.other.python storage#ffaa0d
support.variable.magic.python#eb3b49
meta.function.parameters.python#ffaa0d
punctuation.separator.annotation.python#dbdbdb
punctuation.separator.parameters.python#dbdbdb
entity.name.variable.field.cs#eb3b49
source.cs keyword.operator#dbdbdb
variable.other.readwrite.cs#dbdbdb
variable.other.object.cs#dbdbdb
variable.other.object.property.cs#dbdbdb
entity.name.variable.property.cs#00aeff
storage.type.cs#ffaa0d
keyword.other.unsafe.rust#c87edf
entity.name.type.rust#dbdbdb
storage.modifier.lifetime.rust#dbdbdb
entity.name.lifetime.rust#ffaa0d
storage.type.core.rust#dbdbdb
meta.attribute.rust#ffaa0d
storage.class.std.rust#dbdbdb
markup.raw.block.markdown#dbdbdb
punctuation.definition.variable.shell#eb3b49
support.constant.property-value.css#dbdbdb
punctuation.definition.constant.css#ffaa0d
punctuation.separator.key-value.scss#eb3b49
punctuation.definition.constant.scss#ffaa0d
meta.property-list.scss punctuation.separator.key-value.scss#dbdbdb
storage.type.primitive.array.java#ffaa0d
entity.name.section.markdown#eb3b49
punctuation.definition.heading.markdown#eb3b49
markup.heading.setext#dbdbdb
punctuation.definition.bold.markdown#ffaa0d
markup.inline.raw.markdown#61dd09
beginning.punctuation.definition.list.markdown#eb3b49
markup.quote.markdown#7d8086italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#dbdbdb
punctuation.definition.metadata.markdown#c87edf
markup.underline.link.markdown, markup.underline.link.image.markdown#c87edf
string.other.link.title.markdown, string.other.link.description.markdown#00aeff
punctuation.separator.variable.ruby#eb3b49
variable.other.constant.ruby#ffaa0d
keyword.operator.other.ruby#61dd09
punctuation.definition.variable.php#eb3b49
meta.class.php#dbdbdb
Gary Code Themes by theprogrammergary - VS Code Theme