Skip to main content
Coding Theme

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#292e38
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4280fe
  • activityBarBadge.foreground#ffffff
  • badge.background#4280fe
  • badge.foreground#ffffff
  • button.background#4d78cc
  • button.foreground#ffffff
  • button.hoverBackground#6087cf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#353b45
  • dropdown.border#27292e
  • editor.background#191d25
  • editor.findMatchHighlightBackground#4280fe4d
  • editor.foreground#ccd3e0
  • editor.lineHighlightBackground#4d78cc1a
  • editor.selectionBackground#4280fe3d
  • editorBracketHighlight.foreground1#ff995a
  • editorBracketHighlight.foreground2#de77ff
  • editorBracketHighlight.foreground3#1ebcfc
  • editorBracketHighlight.foreground4#ff5e92
  • editorBracketHighlight.foreground5#fedc71
  • editorBracketHighlight.foreground6#6ee5ff
  • editorBracketMatch.background#353b45
  • editorBracketMatch.border#5a6375
  • editorCursor.foreground#4280fe
  • editorGroup.background#1d222a
  • editorGroup.border#27292e
  • editorGroupHeader.tabsBackground#1d222a
  • editorGutter.addedBackground#37af4e
  • editorGutter.modifiedBackground#1ebcfc
  • editorHoverWidget.background#1d222a
  • editorHoverWidget.border#6087cf
  • editorIndentGuide.activeBackground#1ebcfcaa
  • editorIndentGuide.background#ccd3e020
  • editorInlayHint.background#2c313a
  • editorInlayHint.foreground#636d83
  • editorLineNumber.activeForeground#ccd3e0
  • editorLineNumber.foreground#636d83
  • editorLink.activeForeground#ffffff
  • editorRuler.foreground#ccd3e026
  • editorSuggestWidget.background#1d222a
  • editorSuggestWidget.border#27292e
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#ccd3e026
  • editorWidget.background#1d222a
  • editorWidget.border#1ebcfc
  • errorForeground#ff4974
  • extensionButton.prominentBackground#2ba143
  • extensionButton.prominentHoverBackground#37af4e
  • focusBorder#4280fe
  • gitDecoration.ignoredResourceForeground#4e5666
  • gitDecoration.modifiedResourceForeground#e3e2a2
  • gitDecoration.untrackedResourceForeground#3db571
  • gitlens.trailingLineForegroundColor#9da5b4
  • input.background#1b1d23
  • input.border#27292e
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.errorForeground#ff5e92
  • list.focusBackground#2c313a
  • list.highlightForeground#d7dae0
  • list.hoverBackground#353b4566
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#f29140
  • notebook.cellEditorBackground#2c313a
  • notification.background#1d222a
  • peekView.border#4280fe
  • peekViewEditor.background#1b1d23
  • peekViewResult.background#1d222a
  • peekViewResult.selectionBackground#2c313a
  • peekViewTitle.background#1b1d23
  • pickerGroup.border#4280fe
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#1d222a
  • sideBar.foreground#aaaaad
  • sideBarSectionHeader.background#292e38
  • statusBar.background#1d222a
  • statusBar.border#4e5666
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1d222a
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#191d25
  • tab.activeBorder#4280fe
  • tab.activeForeground#d7dae0
  • tab.border#27292e
  • tab.inactiveBackground#1d222a
  • terminal.ansiBlue#4d78cc
  • terminal.ansiBrightBlue#4280fe
  • terminal.ansiBrightCyan#6ee5ff
  • terminal.ansiBrightGreen#7aec7b
  • terminal.ansiBrightMagenta#ff85ea
  • terminal.ansiBrightRed#ff5e92
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3e2a2
  • terminal.ansiCyan#1ebcfc
  • terminal.ansiGreen#3db571
  • terminal.ansiMagenta#de77ff
  • terminal.ansiRed#ff4974
  • terminal.ansiWhite#ccd3e0
  • terminal.ansiYellow#fedc71
  • terminal.foreground#d7dae0
  • textLink.foreground#4280fe
  • titleBar.activeBackground#1d222a
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1d222a
  • titleBar.inactiveForeground#9da5b4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, markup.quote.markdown#828996italic
comment markup.link, punctuation.definition.comment, source.css property-name, source.css property-value, source.elixir array, source.elixir scope, source.elixir section#828996—
entity.name.type, entity.other.inherited-class, string.regexp source.ruby.embedded, support.class, entity.name.class, entity.name.type.class, meta.class, source.elixir variable.constant, source.java storage.modifier.import, source.java storage.type, ng.attribute-with-value attribute-name, meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable, storage.type.cs, storage.type.primitive.array.java#fedc71—
keyword, keyword.control, keyword.operator, storage, storage.type.annotation, storage.type.primitive, meta.selector, markup.changed, source.c keyword.operator, source.cpp keyword.operator, source.elixir variable.definition, source.elixir variable.anonymous, source.go storage.type.string, source.java keyword.operator.instanceof, 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, ng.attribute-with-value string, source.python keyword.operator.logical.python, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx, keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx, keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx, keyword.other.unsafe.rust, punctuation.definition.metadata.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown, source.tsx meta.tag.tsx keyword.operator.ternary, source.tsx meta.tag.tsx keyword.operator.logical#de77ff—
keyword.other.special-method, punctuation.definition.heading, punctuation.definition.identity, support.function.any-method, entity.name.function, entity.name.section, entity.other.attribute-name.id, meta.require, markup.heading punctuation.definition.heading, source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition, source.gfm link entity, ng.interpolation.begin, ng.interpolation.end, ng.interpolation function.begin, ng.interpolation function.end, entity.name.variable.property.cs, string.other.link.title.markdown, string.other.link.description.markdown#1ebcfc—
keyword.other.unit, constant, constant.variable, constant.numeric, entity.other.attribute-name, meta.link, markup.quote, source.elixir separator, source.elixir keyword.operator, ng.interpolation bool, source.python variable.parameter, support.constant, 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, variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx, variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx, source.python constant, constant.character.format.placeholder.other.python storage, meta.function.parameters.python, entity.name.lifetime.rust, meta.attribute.rust, punctuation.definition.constant.css, punctuation.definition.constant.scss, punctuation.definition.bold.markdown, variable.other.constant.ruby#ff995a—
storage.modifier.package, storage.modifier.import, variable.parameter, string > source, string embedded, punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array, punctuation.section.method, punctuation.section.class, punctuation.section.inner-class, meta.class.body, meta.method-call, meta.method, meta.separator, meta.tag, none, source.cs keyword.operator, source.css property-name.support, source.css property-value.support, source.elixir source.embedded.source, source.java-properties meta.key-pair > punctuation, ng.interpolation bracket, ng.pipe, ng.operator, ng.attribute-with-value string.begin, ng.attribute-with-value string.end, source.php class.bracket, customrule, support.type.property-name, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx, source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters, source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block, source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma, 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, source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor, punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx, punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx , keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx, 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, meta.class.js, meta.class.ts, meta.class.jsx, meta.class.tsx, meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable, meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type, 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, meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded, variable.other.object.js, variable.other.object.ts, source.python constant.other, punctuation.separator.annotation.python, punctuation.separator.parameters.python, variable.other.readwrite.cs, variable.other.object.cs, variable.other.object.property.cs, storage.modifier.lifetime.rust, markup.raw.block.markdown, support.constant.property-value.css, meta.property-list.scss punctuation.separator.key-value.scss, markup.heading.setext, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.class.php#ccd3e0—
constant.character.escape, constant.other.color, constant.other.symbol, string.regexp, support.type, support.function, markup.link, source.js keyword.operator, source.ts keyword.operator, source.flow keyword.operator, source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json, ng.tag, punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx, source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator, source.tsx keyword.operator, constant.language.import-export-all.jsx, constant.language.import-export-all.tsx, constant.language.json, storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx, entity.name.type.rust, storage.type.core.rust, storage.class.std.rust#6ee5ff—
variable, string.other.link, entity.name.tag, meta.definition.variable, markup.deleted, markup.heading, source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty, source.elixir readwrite.module punctuation, source.ini keyword.other.definition.ini, source.java-properties meta.key-pair, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string, ng.interpolation, ng.interpolation function, support.type.property-name.json, support.type.property-name.json punctuation, support.variable.dom.js, support.variable.dom.ts, support.variable.property.dom.js, support.variable.property.dom.ts, support.variable.property.js, support.variable.property.ts, support.variable.property.tsx, keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx, source.js support.variable, source.ts support.variable, source.tsx support.variable, constant.language.import-export-all.js, constant.language.import-export-all.ts, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx, meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts, support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx, meta.object-literal.key.js, meta.object-literal.key.ts, support.variable.magic.python, entity.name.variable.field.cs, punctuation.definition.variable.shell, punctuation.separator.key-value.scss, entity.name.section.markdown, punctuation.definition.heading.markdown, beginning.punctuation.definition.list.markdown, punctuation.separator.variable.ruby, punctuation.definition.variable.php#ff5e92—
variable.interpolation, punctuation.section.embedded, source.elixir regexp.section, source.elixir regexp.string, meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#28a8c3—
string, markup.inserted, markup.raw, source.elixir quoted, 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, string.quoted.double punctuation, source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor, entity.name.type.module.js, entity.name.type.module.ts, entity.name.type.module.jsx, entity.name.type.module.tsx, 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, 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, markup.inline.raw.markdown, keyword.operator.other.ruby#75de7e—
punctuation.definition.bold#fedc71bold
punctuation.definition.italic, markup.italic#de77ffitalic
underline——
invalid.deprecated#614c23—
invalid.illegal#ffffff—
markup.bold#ff995abold
source.elixir parameter.variable.function#ff995aitalic
source.gfm markup——
source.ruby constant.other.symbol > punctuation—
Ultra Atom Dark by Rene Limon Chacon - VS Code Theme