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#E7E8E6
  • activityBar.foreground#2DAE58
  • activityBar.inactiveForeground#68696888
  • activityBarBadge.background#09A1ED
  • badge.background#09A1ED
  • badge.foreground#ffffff
  • button.background#2DAE58
  • debugExceptionWidget.background#FFAEAC33
  • debugExceptionWidget.border#FF5C57
  • debugToolBar.border#E9EAEB
  • diffEditor.insertedTextBackground#2DAE5824
  • diffEditor.removedTextBackground#FFAEAC44
  • dropdown.border#E9EAEB
  • editor.background#FAFBFC
  • editor.findMatchBackground#00E6E06A
  • editor.findMatchHighlightBackground#00E6E02A
  • editor.findRangeHighlightBackground#F5B90011
  • editor.focusedStackFrameHighlightBackground#2DAE5822
  • editor.foreground#565869
  • editor.hoverHighlightBackground#00E6E018
  • editor.rangeHighlightBackground#F5B90033
  • editor.selectionBackground#2DAE5822
  • editor.snippetTabstopHighlightBackground#ADB1C23A
  • editor.stackFrameHighlightBackground#F5B90033
  • editor.wordHighlightBackground#ADB1C23A
  • editorError.foreground#FF5C56
  • editorGroup.emptyBackground#F3F4F5
  • editorGutter.addedBackground#2DAE58
  • editorGutter.deletedBackground#FF5C57
  • editorGutter.modifiedBackground#00A39FAA
  • editorInlayHint.background#E9EAEB
  • editorInlayHint.foreground#565869
  • editorLineNumber.activeForeground#35CF68
  • editorLineNumber.foreground#9194A2aa
  • editorLink.activeForeground#35CF68
  • editorOverviewRuler.addedForeground#2DAE58
  • editorOverviewRuler.deletedForeground#FF5C57
  • editorOverviewRuler.errorForeground#FF5C56
  • editorOverviewRuler.findMatchForeground#13BBB7AA
  • editorOverviewRuler.modifiedForeground#00A39FAA
  • editorOverviewRuler.warningForeground#CF9C00
  • editorOverviewRuler.wordHighlightForeground#ADB1C288
  • editorOverviewRuler.wordHighlightStrongForeground#35CF68
  • editorWarning.foreground#CF9C00
  • editorWhitespace.foreground#ADB1C255
  • extensionButton.prominentBackground#2DAE58
  • extensionButton.prominentHoverBackground#238744
  • focusBorder#09A1ED
  • foreground#686968
  • gitDecoration.modifiedResourceForeground#00A39F
  • gitDecoration.untrackedResourceForeground#2DAE58
  • input.border#E9EAEB
  • list.activeSelectionBackground#09A1ED
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#FF5C56
  • list.focusBackground#BCE7FC99
  • list.focusForeground#11658F
  • list.hoverBackground#E9EAEB
  • list.inactiveSelectionBackground#89B5CB33
  • list.warningForeground#B38700
  • menu.background#FAFBFC
  • menu.selectionBackground#E9EAEB
  • menu.selectionForeground#686968
  • menubar.selectionBackground#E9EAEB
  • menubar.selectionForeground#686968
  • merge.currentContentBackground#35CF6833
  • merge.currentHeaderBackground#35CF6866
  • merge.incomingContentBackground#14B1FF33
  • merge.incomingHeaderBackground#14B1FF77
  • peekView.border#09A1ED
  • peekViewEditor.background#14B1FF08
  • peekViewEditor.matchHighlightBackground#F5B90088
  • peekViewEditor.matchHighlightBorder#F5B900
  • peekViewEditorStickyScroll.background#EDF4FB
  • peekViewResult.matchHighlightBackground#F5B90088
  • peekViewResult.selectionBackground#09A1ED
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#09A1ED11
  • selection.background#2DAE5844
  • settings.modifiedItemIndicator#13BBB7
  • sideBar.background#F3F4F5
  • sideBar.border#DEDFE0
  • sideBarSectionHeader.background#E9EAEB
  • sideBarSectionHeader.border#DEDFE0
  • statusBar.background#2DAE58
  • statusBar.debuggingBackground#13BBB7
  • statusBar.debuggingBorder#00A39F
  • statusBar.noFolderBackground#565869
  • statusBarItem.remoteBackground#238744
  • tab.activeBorderTop#2DAE58
  • terminal.ansiBlack#565869
  • terminal.ansiBlue#09A1ED
  • terminal.ansiBrightBlack#75798F
  • terminal.ansiBrightBlue#14B1FF
  • terminal.ansiBrightCyan#13BBB7
  • terminal.ansiBrightGreen#35CF68
  • terminal.ansiBrightMagenta#FF94D2
  • terminal.ansiBrightRed#FFAEAC
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F5B900
  • terminal.ansiCyan#13BBB7
  • terminal.ansiGreen#2DAE58
  • terminal.ansiMagenta#F767BB
  • terminal.ansiRed#FF5C57
  • terminal.ansiWhite#FAFBF9
  • terminal.ansiYellow#CF9C00
  • titleBar.activeBackground#F3F4F5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid.illegal#FF5C56—
meta.object-literal.key, meta.object-literal.key constant.character.escape, meta.object-literal string, meta.object-literal string constant.character.escape, support.type.property-name, support.type.property-name constant.character.escape#11658F—
keyword, storage, meta.class storage.type, keyword.operator.expression.import, keyword.operator.new, keyword.operator.expression.delete#F767BB—
support.type, meta.type.annotation entity.name.type, new.expr meta.type.parameters entity.name.type, storage.type.primitive, storage.type.built-in.primitive, meta.function.parameter storage.type#2DAE58—
storage.type.annotation#C25193—
keyword.other.unit#FF5C57CC—
constant.language, support.constant, variable.language#2DAE58—
variable, support.variable#565869—
variable.language.this#13BBB7—
entity.name.function, support.function#09A1ED—
entity.name.function.decorator#11658F—
meta.class entity.name.type, new.expr entity.name.type, entity.other.inherited-class, support.class#13BBB7—
keyword.preprocessor.pragma, keyword.control.directive.include, keyword.other.preprocessor#11658F—
entity.name.exception#FF5C56—
entity.name.section——
constant.numeric#FF5C57—
constant, constant.character#2DAE58—
string#CF9C00—
string#CF9C00—
constant.character.escape#F5B900—
string.regexp, string.regexp constant.character.escape#13BBB7—
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp, keyword.operator.or.regexp, string.regexp punctuation, string.regexp keyword, string.regexp keyword.control, string.regexp constant, variable.other.regexp#00A39F—
string.regexp keyword.other#00A39F88—
constant.other.symbol#CF9C00—
comment, punctuation.definition.comment#ADB1C2—
comment.block.preprocessor#9194A2
comment.block.documentation entity.name.type#2DAE58—
comment.block.documentation storage, comment.block.documentation keyword.other, meta.class comment.block.documentation storage.type#9194A2—
comment.block.documentation variable#C25193—
punctuation#ADB1C2—
keyword.operator, keyword.other.arrow, keyword.control.@#ADB1C2—
meta.tag.metadata.doctype.html entity.name.tag, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#9194A2—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ADB1C2—
entity.name.tag#13BBB7—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#FF8380—
constant.character.entity, punctuation.definition.entity#CF9C00—
source.css#ADB1C2—
meta.selector, meta.selector entity, meta.selector entity punctuation, source.css entity.name.tag#F767BB—
keyword.control.at-rule, keyword.control.at-rule punctuation.definition.keyword#C25193—
source.css variable#11658F—
source.css meta.property-name, source.css support.type.property-name#565869—
source.css support.type.vendored.property-name#565869AA—
meta.property-value, support.constant.property-value#13BBB7—
source.css support.constant#2DAE58—
punctuation.definition.entity.css, keyword.operator.combinator.css#FF82CBBB—
source.css support.function#09A1ED—
keyword.other.important#238744—
source.css.scss#F767BB—
source.css.scss entity.other.attribute-name.class.css, source.css.scss entity.other.attribute-name.id.css#F767BB—
entity.name.tag.reference.scss#C25193—
source.css.scss meta.at-rule keyword, source.css.scss meta.at-rule keyword punctuation, source.css.scss meta.at-rule operator.logical, keyword.control.content.scss, keyword.control.return.scss, keyword.control.return.scss punctuation.definition.keyword#C25193—
meta.at-rule.mixin.scss, meta.at-rule.include.scss, source.css.scss meta.at-rule.if, source.css.scss meta.at-rule.else, source.css.scss meta.at-rule.each, source.css.scss meta.at-rule variable.parameter#ADB1C2—
source.css.less entity.other.attribute-name.class.css#F767BB—
source.stylus meta.brace.curly.css#ADB1C2—
source.stylus entity.other.attribute-name.class, source.stylus entity.other.attribute-name.id, source.stylus entity.name.tag#F767BB—
source.stylus support.type.property-name#565869—
source.stylus variable#11658F—
markup.changed#888888—
markup.deleted#888888—
markup.italic—italic
markup.error#FF5C56—
markup.inserted#888888—
meta.link#CF9C00—
string.other.link.title.markdown#09A1ED—
markup.output, markup.raw#999999—
markup.prompt#999999—
markup.heading#2DAE58—
markup.bold—bold
markup.traceback#FF5C56—
markup.underline—underline
markup.quote#777985—
markup.bold, markup.italic#13BBB7—
markup.inline.raw#F767BB
meta.brace.round, meta.brace.square, storage.type.function.arrow#ADB1C2—
constant.language.import-export-all, meta.import keyword.control.default#C25193—
support.function.js#11658F—
string.regexp.js#13BBB7—
variable.language.super, support.type.object.module.js#F767BB—
meta.jsx.children#686968—
entity.name.tag.yaml#11658F—
variable.other.alias.yaml#2DAE58—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#75798F—
meta.use.php entity.other.alias.php#13BBB7—
source.php support.function.construct, source.php support.function.var#11658F—
storage.modifier.extends.php, source.php keyword.other, storage.modifier.php#F767BB—
meta.class.body.php storage.type.php#F767BB—
storage.type.php, meta.class.body.php meta.function-call.php storage.type.php, meta.class.body.php meta.function.php storage.type.php#2DAE58—
source.php keyword.other.DML#D94E4A—
source.sql.embedded.php keyword.operator#2DAE58—
source.ini keyword, source.toml keyword, source.env variable#11658F—
source.ini entity.name.section, source.toml entity.other.attribute-name#F767BB—
source.go storage.type#2DAE58—
keyword.import.go, keyword.package.go#FF5C56—
source.reason variable.language string#565869—
source.reason support.type, source.reason constant.language, source.reason constant.language constant.numeric, source.reason support.type string.regexp#2DAE58—
source.reason keyword.operator keyword.control, source.reason keyword.control.less, source.reason keyword.control.flow#ADB1C2—
source.reason string.regexp#CF9C00—
source.reason support.property-value#11658F—
source.rust support.function.core.rust#11658F—
source.rust storage.type.core.rust, source.rust storage.class.std#2DAE58—
source.rust entity.name.type.rust#13BBB7—
storage.type.function.coffee#ADB1C2—
keyword.type.cs, storage.type.cs#2DAE58—
entity.name.type.namespace.cs#13BBB7—
meta.diff.header#11658F—
markup.inserted.diff#2DAE58—
markup.deleted.diff#FF5C56—
meta.diff.range, meta.diff.index, meta.separator#09A1ED—
source.makefile variable#11658F—
keyword.control.protocol-specification.objc#F767BB—
meta.parens storage.type.objc, meta.return-type.objc support.class, meta.return-type.objc storage.type.objc#2DAE58—
source.sql keyword#11658F—
keyword.other.special-method.dockerfile#09A1ED—
constant.other.symbol.elixir#11658F—
storage.type.elm, support.module.elm#13BBB7—
source.elm keyword.other#ADB1C2—
source.erlang entity.name.type.class#13BBB7—
variable.other.field.erlang#11658F—
source.erlang constant.other.symbol#2DAE58—
storage.type.haskell#2DAE58—
meta.declaration.class.haskell storage.type.haskell, meta.declaration.instance.haskell storage.type.haskell#13BBB7—
meta.preprocessor.haskell#75798F—
source.haskell keyword.control#F767BB—
tag.end.latte, tag.begin.latte#ADB1C2—
source.po keyword.control#11658F—
source.po storage.type#9194A2—
constant.language.po#13BBB7—
meta.header.po string#FF8380—
source.po meta.header.po#ADB1C2—
source.ocaml markup.underline—
source.ocaml punctuation.definition.tag emphasis, source.ocaml entity.name.class constant.numeric, source.ocaml support.type#F767BB—
source.ocaml constant.numeric entity.other.attribute-name#13BBB7—
source.ocaml comment meta.separator#ADB1C2—
source.ocaml support.type strong, source.ocaml keyword.control strong#ADB1C2—
source.ocaml support.constant.property-value#11658F—
source.scala entity.name.class#13BBB7—
storage.type.scala#2DAE58—
variable.parameter.scala#11658F—
meta.bracket.scala, meta.colon.scala#ADB1C2—
meta.metadata.simple.clojure#ADB1C2—
meta.metadata.simple.clojure meta.symbol#13BBB7—
source.r keyword.other#ADB1C2—
source.svelte meta.block.ts entity.name.label#11658F—
keyword.operator.word.applescript#F767BB—
meta.function-call.livescript#09A1ED—
variable.language.self.lua#13BBB7—
entity.name.type.class.swift, meta.inheritance-clause.swift, meta.import.swift entity.name.type#13BBB7—
source.swift punctuation.section.embedded#B38700—
variable.parameter.function.swift entity.name.function.swift#565869—
meta.function-call.twig#565869—
string.unquoted.tag-string.django#565869—
entity.tag.tagbraces.django, entity.tag.filter-pipe.django#ADB1C2—
meta.section.attributes.haml constant.language, meta.section.attributes.plain.haml constant.other.symbol#FF8380—
meta.prolog.haml#9194A2—
support.constant.handlebars#ADB1C2—
text.log log.constant#C25193—
source.c string constant.other.placeholder, source.cpp string constant.other.placeholder#B38700—
constant.other.key.groovy#11658F—
storage.type.groovy#13BBB7—
meta.definition.variable.groovy storage.type.groovy#2DAE58—
storage.modifier.import.groovy#CF9C00—
entity.other.attribute-name.class.pug, entity.other.attribute-name.id.pug#13BBB7—
constant.name.attribute.tag.pug#ADB1C2—
entity.name.tag.style.html#13BBB7—
entity.name.type.wasm#2DAE58—