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#111111
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#d9c2a7ef
  • activityBarBadge.foreground#111111
  • badge.background#d9c2a7ef
  • badge.foreground#111111
  • button.background#d9c2a7ef
  • button.foreground#111111
  • button.hoverBackground#d9c2a7a0
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#111111
  • dropdown.border#111111
  • editor.background#111111
  • editor.findMatchBorder#e0e0e042
  • editor.findMatchHighlightBackground#9CB7CE
  • editor.foreground#ABB2BF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#333333
  • editorCursor.foreground#D9C2A7
  • editorGroup.border#232323
  • editorGroupHeader.tabsBackground#111111
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#ABB2BF26
  • editorInlayHint.background#111111
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#bbbbbb
  • editorLineNumber.foreground#595959
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#111111
  • editorSuggestWidget.selectedBackground#111111
  • editorWhitespace.foreground#ABB2BF26
  • editorWidget.background#111111
  • editorWidget.border#686d79
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#d9c2a724
  • input.background#2c2c2c
  • input.border#111111
  • input.foreground#e0e0e0
  • input.placeholderForeground#e0e0e070
  • list.activeSelectionBackground#111111
  • list.activeSelectionForeground#e0e0e0
  • list.focusBackground#111111
  • list.focusForeground#e0e0e0
  • list.highlightForeground#e0e0e0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#e0e0e0
  • menu.selectionBackground#333333
  • menubar.selectionBackground#333333
  • minimap.findMatchHighlight#D9C2A7
  • notebook.cellEditorBackground#2C313A
  • panel.background#111111
  • panel.border#323232
  • panelTitle.activeBorder#e0e0e0
  • peekView.border#D9C2A7
  • peekViewEditor.background#111111
  • peekViewResult.background#111111
  • peekViewResult.selectionBackground#111111
  • peekViewTitle.background#111111
  • pickerGroup.border#D9C2A7
  • quickInput.background#111111
  • quickInput.foreground#e0e0e0
  • quickInputList.focusBackground#585d665f
  • quickInputList.focusForeground#e0e0e0
  • scrollbar.shadow#3d4149
  • scrollbarSlider.activeBackground#44495485
  • scrollbarSlider.background#40465055
  • scrollbarSlider.hoverBackground#44495485
  • selection.background#585d6699
  • sideBar.background#111111
  • sideBar.border#111111
  • sideBarSectionHeader.background#111111
  • statusBar.background#111111
  • statusBar.debuggingBackground#111111
  • statusBar.debuggingForeground#8a8a8a
  • statusBar.foreground#8a8a8a
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2C313A
  • statusBarItem.remoteBackground#111111
  • statusBarItem.remoteForeground#D9C2A7
  • tab.activeBackground#111111
  • tab.activeBorder#e0e0e0
  • tab.activeForeground#e0e0e0
  • tab.border#111111
  • tab.inactiveBackground#111111
  • terminal.background#111111
  • terminal.border#383d4822
  • terminal.findMatchBackground#D9C2A7
  • terminal.foreground#bbbbbb
  • terminal.selectionBackground#333333
  • terminalCursor.background#D9C2A7
  • terminalCursor.foreground#D9C2A7
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#9DA5B4
  • widget.shadow#292c3283

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
comment markup.link#5C6370
entity.name.type#E5C07B
entity.other.inherited-class#E5C07B
keyword#C678DD
keyword.control#C678DD
keyword.operator#C678DD
keyword.other.special-method#61AFEF
keyword.other.unit#D19A66
storage#C678DD
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#D19A66
constant.other.color#56B6C2
constant.other.symbol#56B6C2
variable#E3C1A6
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#98C379
string > source, string embedded#ABB2BF
string.regexp#56B6C2
string.regexp source.ruby.embedded#E5C07B
string.other.link#E3C1A6
punctuation.definition.comment#5C6370
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#ABB2BF
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#E5C07B
support.type#56B6C2
support.function#56B6C2
support.function.any-method#61AFEF
entity.name.function#61AFEF
entity.name.class, entity.name.type.class#E5C07B
entity.name.section#61AFEF
entity.name.tag#E3C1A6
entity.other.attribute-name#D19A66
entity.other.attribute-name.id#61AFEF
meta.class#E5C07B
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#E3C1A6
meta.link#D19A66
meta.require#61AFEF
meta.selector#C678DD
meta.separator#ABB2BF
meta.tag#ABB2BF
none#ABB2BF
markup.bold#D19A66bold
markup.changed#C678DD
markup.deleted#E3C1A6
markup.italic#C678DDitalic
markup.heading#E3C1A6
markup.heading punctuation.definition.heading#61AFEF
markup.link#56B6C2
markup.inserted#98C379
markup.quote#D19A66
markup.raw#98C379
source.c keyword.operator#C678DD
source.cpp keyword.operator#C678DD
source.cs keyword.operator#C678DD
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#E3C1A6
source.elixir readwrite.module punctuation#E3C1A6
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#E3C1A6
source.java storage.modifier.import#E5C07B
source.java storage.type#E5C07B
source.java keyword.operator.instanceof#C678DD
source.java-properties meta.key-pair#E3C1A6
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#56B6C2
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#C678DD
source.ts keyword.operator#56B6C2
source.flow keyword.operator#56B6C2
source.json meta.structure.dictionary.json > string.quoted.json#E3C1A6
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E3C1A6
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#E3C1A6
ng.interpolation.begin, ng.interpolation.end#61AFEF
ng.interpolation function#E3C1A6
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#ABB2BF
string.quoted.double punctuation#98C379
support.constant#D19A66
support.type.property-name.json#E3C1A6
support.type.property-name.json punctuation#E3C1A6
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#56B6C2
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#ABB2BF
support.variable.dom.js, support.variable.dom.ts#E3C1A6
support.variable.property.dom.js, support.variable.property.dom.ts#E3C1A6
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#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#E3C1A6
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E3C1A6
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.array-binding-pattern-variable.tsx, meta.brace.square.tsx#fcfcfc
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#E3C1A6
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#56B6C2
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#E3C1A6
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#ABB2BF
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#E3C1A6
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#D19A66
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#E3C1A6
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#98C379
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#E3C1A6
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#56B6C2
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#ABB2BF
meta.object-literal.key.js, meta.object-literal.key.ts#E3C1A6
source.python constant.other#ABB2BF
source.python constant#D19A66
constant.character.format.placeholder.other.python storage#D19A66
support.variable.magic.python#E3C1A6
meta.function.parameters.python#D19A66
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#E3C1A6
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#E3C1A6
support.constant.property-value.css#ABB2BF
punctuation.definition.constant.css#D19A66
punctuation.separator.key-value.scss#E3C1A6
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#E3C1A6
punctuation.definition.heading.markdown#E3C1A6
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
beginning.punctuation.definition.list.markdown#E3C1A6
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#E3C1A6
variable.other.constant.ruby#D19A66
keyword.operator.other.ruby#98C379
punctuation.definition.variable.php#E3C1A6
meta.class.php#ABB2BF
Waterbyte Theme by Michael Ungar - VS Code Theme