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.background#1c1f26
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#3B4048
  • activityBarBadge.foreground#D7DAE0
  • badge.background#282c34
  • breadcrumb.activeSelectionForeground#ffe2a9
  • breadcrumb.focusForeground#dfe1e8
  • breadcrumb.foreground#d4d4d4
  • breadcrumbPicker.background#1c1f26
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809B33
  • diffEditor.removedTextBackground#E15A6033
  • dropdown.background#1c1f26
  • dropdown.border#282c35
  • editor.background#2a2d37
  • editor.findMatchHighlightBackground#fbdd8390
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#65737e30
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.wordHighlightBackground#ffffff40
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#b6bcc4
  • editorError.foreground#E15A60
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroup.dropBackground#1c1f26
  • editorGroupHeader.tabsBackground#1c1f26
  • editorGroupHeader.tabsBorder#282c35
  • editorGutter.addedBackground#99C794
  • editorGutter.background#282c35
  • editorGutter.deletedBackground#E15A60
  • editorGutter.modifiedBackground#6699CC
  • editorHoverWidget.background#232830
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorLink.activeForeground#64727f
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedForeground#99C794
  • editorOverviewRuler.bracketMatchForeground#343d46
  • editorOverviewRuler.deletedForeground#E15A60
  • editorOverviewRuler.errorForeground#E15A60
  • editorOverviewRuler.infoForeground#6796e6
  • editorOverviewRuler.modifiedForeground#6699CC
  • editorOverviewRuler.warningForeground#cd9731
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessary.foreground#7F7F7F
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#21252B
  • extensionButton.prominentBackground#343d46
  • extensionButton.prominentForeground#d4d4d4
  • extensionButton.prominentHoverBackground#64727f
  • focusBorder#343d46
  • gitDecoration.addedResourceForgeround#99C794
  • gitDecoration.conflictingResourceForeground#E15A60
  • gitDecoration.deletedResourceForeground#E15A60
  • gitDecoration.ignoredResourceForeground#64727f
  • gitDecoration.modifiedResourceForeground#6699CC
  • gitDecoration.untrackedResourceForeground#7F7F7F
  • input.background#1c1f26
  • input.border#2c313a
  • list.activeSelectionBackground#343d46
  • list.activeSelectionForeground#dfe1e8
  • list.focusBackground#343d46
  • list.focusForeground#dfe1e8
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#343d46
  • list.hoverForeground#c0c5cd
  • list.inactiveSelectionBackground#343d46
  • list.inactiveSelectionForeground#dfe1e8
  • notificationCenterHeader.foreground#d4d4d4
  • notifications.background#282c35
  • notifications.foreground#d4d4d4
  • panel.background#232830
  • panel.border#232830
  • peekView.border#343d46
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewEditor.matchHighlightBorder#343d46
  • peekViewTitle.background#1c1f26
  • peekViewTitleDescription.foreground#d4d4d4
  • peekViewTitleLabel.foreground#d4d4d4
  • pickerGroup.border#343d46
  • pickerGroup.foreground#c0c5cd
  • progressBar.background#343d46
  • scrollbar.shadow#282c35
  • scrollbarSlider.activeBackground#343d4690
  • scrollbarSlider.background#343d4640
  • scrollbarSlider.hoverBackground#343d4690
  • selection.background#ffe2a9
  • settings.dropdownBackground#1c1f26
  • settings.dropdownBorder#181A1F
  • settings.headerForeground#C5C5C5
  • settings.modifiedItemIndicator#6699CC
  • sideBar.background#1c1f26
  • sideBar.border#232830
  • sideBar.foreground#64727f
  • sideBarSectionHeader.background#1c1f26
  • sideBarSectionHeader.foreground#c0c5cd
  • statusBar.background#1c1f26
  • statusBar.border#1b2432
  • statusBar.debuggingBackground#6B717D
  • statusBar.debuggingBorder#282c35
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2a2d37
  • tab.border#1c1f26
  • tab.inactiveBackground#1c1f26
  • terminal.ansiBlack#7F7F7F
  • terminal.ansiBlue#6699CC
  • terminal.ansiBrightBlack#7F7F7F
  • terminal.ansiBrightBlue#6699CC
  • terminal.ansiBrightCyan#5FB3B3
  • terminal.ansiBrightGreen#99C794
  • terminal.ansiBrightMagenta#C594C5
  • terminal.ansiBrightRed#E15A60
  • terminal.ansiBrightWhite#D4D4D4
  • terminal.ansiBrightYellow#ffe2a9
  • terminal.ansiCyan#5FB3B3
  • terminal.ansiGreen#99C794
  • terminal.ansiMagenta#C594C5
  • terminal.ansiRed#E15A60
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#ffe2a9
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#67769640
  • terminalCursor.background#d4d4d4
  • terminalCursor.foreground#d4d4d4
  • textLink.foreground#ffe2a9
  • titleBar.activeBackground#1c1f26
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1c1f26
  • titleBar.inactiveForeground#6B717D
  • widget.shadow#282c35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F7F7F
punctuation.definition, punctuation.definition.annotation, punctuation.definition.heading, punctuation.definition.list_item, punctuation.definition.thematic-break, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#9DA3AB
punctuation.definition.blockquote#ffffff13
meta.separator.thematic-break
string#a9cfa4
constant.numeric#91c5d3
constant.numeric.line-number#ffffff33
constant.numeric.line-number.match#ffe2a9
constant.language#91c5d3
constant.character, constant.other#91c5d3
variable.member#91c5d3
meta.selectionset.graphql meta.arguments.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql support.type.graphql, entity.name.type.module, meta.variables.graphql meta.type.list.graphql support.type.graphql#ffe2a9
variable.language#91c5d3
variable.function, meta.selectionset.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql variable.graphql#ffe2a9
variable.annotation#f1a5ab
keyword, keyword.operator.word#7F7F7F
keyword.operator#ffe2a9
storage#7F7F7F
storage.type, storage.type.type#7F7F7F
storage.type.java, storage.type.object.array.java#ffe2a9
storage.type.primitive#a9cfa4
storage.type.function.arrow, keyword.operator.type.annotation, meta.interface meta.field.declaration meta.type.annotation keyword.operator.type.annotation, meta.type.declaration meta.object.type meta.field.declaration meta.type.annotation keyword.operator.type.annotation, meta.interface meta.method.declaration meta.return.type keyword.operator.type.annotation, meta.type.declaration meta.object.type meta.method.declaration meta.return.type keyword.operator.type.annotation#f1a5ab
entity.name, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, meta.type.interface.graphql support.type.graphql, meta.enum.graphql support.type.enum.graphql#f1a5ab
entity.name.function, meta.type.parameters entity.name.type#f1a5ab
meta.function-call entity.name.function#ffe2a9
entity.name.type#f1a5ab
entity.name.label#ffe2a9
entity.other.inherited-class#ffe2a9
entity.name.tag, support.class.component#ffe2a9
entity.name.tag support.class.component, meta.tag.custom entity.name.tag#f1a5ab
entity.other.attribute-name
support.variable#f1a5ab
support.variable.property.dom#d4d4d4
support.function#ffe2a9
support.macro#7F7F7F
support.constant#91c5d3
support.type#7F7F7F
support.type.primitive, support.type.builtin.graphql, support.type.builtin#a9cfa4
support.class
meta.var.expr punctuation.definition.string.template.begin string.template, meta.var.expr punctuation.definition.string.template.end string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ffe2a9
invalid#f1888e
invalid.deprecated#faae85
markup.error, message.error#f1888e
markup.warning#ffe2a9
markup.info#7F7F7F
markup.ignored#7F7F7F
markup.untracked#7F7F7F
markup.boldbold
markup.italicitalic
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.heading, entity.name.section.markdown#ffe2a9
markup.underline.link, string.other.link#7F7F7F
string.other.link.description#91c5d3
markup.list.numbered.bullet#91c5d3
markup.quote#ffe2a9
markup.raw
markup.raw.inline
meta.table.header.markdown, meta.table.header-separator.markdown, meta.table.markdown
support.type.property-name#ffe2a9
support.type.custom-property.name#7F7F7F
entity.other.attribute-name.class.css#ffe2a9
punctuation.definition.entity#ffe2a9
entity.other.attribute-name.id.css#ffe2a9
keyword.other.important#f1a5ab
support.type.vendor-prefix#ffe2a9
entity.other.pseudo-class, entity.other.pseudo-element#ffe2a9
meta.interface meta.method.declaration meta.definition.method entity.name.function, meta.type.declaration meta.object.type meta.method.declaration meta.definition.method entity.name.function, meta.interface meta.field.declaration meta.definition.property entity.name.function, meta.type.declaration meta.object.type meta.field.declaration meta.definition.property entity.name.function, storage.modifier.import#f1a5ab
entity.name.variable#d4d4d4
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as, constant.language.import-export-all, keyword.control.new, variable.language.wildcard, keyword.other.import#7F7F7F
keyword.control.default, storage.modifier.async#f1a5ab
storage.modifier#7F7F7F
meta.object-literal.key, meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql, meta.type.interface.graphql meta.type.object.graphql meta.variables.graphql variable.parameter.graphql, meta.enum.graphql meta.type.object.graphql constant.character.enum.graphql#ffe2a9
meta.brace.round, punctuation.definition, meta.brace.curly.graphql, meta.brace.square, punctuation.operation.graphql, punctuation.colon.graphql#8892aa
markup.inserted#7ebbbb
markup.deleted#f1a5ab
markup.changed#7F7F7F
constant.numeric.line-number.find-in-files - match#f1a5ab
entity.name.filename.find-in-files#91c5d3
token.info-token#7F7F7F
token.warn-token#ffe2a9
token.error-token#f1a5ab
token.debug-token#0E4FFF
meta.template.expression#d4d4d4
meta.class.identifier storage.modifier#7F7F7F
storage.type.generic#ffe2a9
meta.group.braces.curly keyword.control.loop, keyword.control.loop, keyword.operator.ternary, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, keyword.control.java#ffe2a9
keyword.control.loop#f1a5ab
keyword.control.flow#f1a5ab
constant.language.import-export-all#ffe2a9
punctuation.decorator#ffe2a9
source.json meta.structure.dictionary.json string.json support.type.property-name.json#d4d4d4
meta.selectionset.graphql meta.selectionset.graphql variable.graphql#d4d4d4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json#ffe2a9
meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#ffe2a9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.array.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json#f1a5ab
meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#f1a5ab
meta.tag meta.tag.attributes keyword.operator.assignment#ffe2a9
entity.name.function.directive.graphql#ffe2a9
keyword.other.unit#ffe2a9
entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.sgml.doctype.html, markup.italic.markdown, markup.quote.markdown, entity.other.attribute-name, entity.name.tag.custom, source.js entity.other.attribute-name.js, source.js.jsx entity.other.attribute-name.js, ext.html.basic entity.other.attribute-name.html, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.type.annotation, assignment.coffee, italic, quote, type .function, type.function, storage.modifier, storage.type.class, modifier, keyword.control.flow, source.shell keyword.control.shell, keyword.control.default, keyword.control.switch, this, variable.language.this.php, keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as, keyword.control, keyword.other.import, comment, punctuation.definition.comment, constant.language, variable.language, entity.other.attribute-name, support.macro, support.constant, keyword.control.default, storage.modifier.async, storage.modifier, meta.class.identifier storage.modifier, keyword.operator.expression, storage.type, storage.type.typeitalic
meta.interface.ts variable.object.property, meta.interface.tsx variable.object.property, meta.type.declaration.ts variable.object.property, meta.type.declaration.tsx variable.object.property, meta.function.parameter.typehinted.php storage.type.php, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, source.js meta.group.braces.curly.js keyword.other.substitution, source.js.jsx meta.group.braces.curly.js.jsx keyword.other.substitution, keyword.operator.type.annotation, keyword.operator.type, keyword.operator.logical, source.php keyword.operator, variable.object.property.ts, variable.object.property.tsx, keyword.operator.class.php, support.function.basic_functions.php, keyword.operator.flowtype.other.js, keyword.operator.flowtype.other.js.jsx, source.shell keyword.operator, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, source.js meta.group.regexp keyword.operator, source.js.jsx meta.group.regexp keyword.operator, source.ts meta.group.regexp keyword.operator, source.tsx meta.group.regexp keyword.operator, string.regexp.js keyword.control.anchor.regexp, string.regexp.js.jsx keyword.control.anchor.regexp, string.regexp.ts keyword.control.anchor.regexp, string.regexp.tsx keyword.control.anchor.regexp, keyword.operator.other.elixir, keyword.operator.assignment.go, support.type.builtin, support.class.component, meta.type.interface.graphql support.type.graphql, meta.type.interface.graphql meta.type.object.graphql support.type.graphql, meta.enum.graphql support.type.enum.graphql, support.variable.property.dom, storage.type.primitive.java, storage.type.object.java, storage.type.object.array.java, storage.type.java, storage.type.generic.java, storage.modifier.import.java, meta.variables.graphql meta.type.list.graphql support.type.graphql, entity.other.attribute-name.class, entity.other.attribute-name.id, storage.type.cs, storage.type.type.cs, punctuation.definition.entitynormal

Shiki preview

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

Loading...