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#0A101E
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#a188f1
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • breadcrumb.activeSelectionForeground#a188f1
  • breadcrumb.focusForeground#dfe1e8
  • breadcrumb.foreground#e6e6e6
  • breadcrumbPicker.background#0A101E
  • button.background#a188f1
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#17f9d750
  • diffEditor.removedTextBackground#FF75B550
  • dropdown.background#0A101E
  • dropdown.border#171D2B
  • editor.background#171D2B
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#e6e6e6
  • editor.lineHighlightBackground#67769630
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.wordHighlightBackground#314365
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#b6bcc4
  • editorError.foreground#FF75B5
  • editorGroup.background#161922
  • editorGroup.border#161922
  • editorGroup.dropBackground#0A101E
  • editorGroupHeader.tabsBackground#0A101E
  • editorGroupHeader.tabsBorder#171D2B
  • editorGutter.addedBackground#17f9d7
  • editorGutter.background#171D2B
  • editorGutter.deletedBackground#FF75B5
  • editorGutter.modifiedBackground#a188f1
  • editorHoverWidget.background#1b2432
  • editorHoverWidget.border#161922
  • editorIndentGuide.background#67769640
  • editorLineNumber.foreground#67769660
  • editorLink.activeForeground#a188f1
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedForeground#17f9d7
  • editorOverviewRuler.deletedForeground#6F7899
  • editorOverviewRuler.errorForeground#FF75B5
  • editorOverviewRuler.infoForeground#6f7899
  • editorOverviewRuler.modifiedForeground#a188f1
  • editorOverviewRuler.warningForeground#ffedbb
  • editorRuler.foreground#67769630
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#161922
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessary.foreground#6F7899
  • editorWarning.foreground#ffedbb
  • editorWhitespace.foreground#67769640
  • editorWidget.background#21252B
  • extensionButton.prominentBackground#343d64
  • extensionButton.prominentForeground#e6e6e6
  • extensionButton.prominentHoverBackground#a188f1
  • focusBorder#a188f1
  • gitDecoration.addedResourceForeground#17f9d7
  • gitDecoration.conflictingResourceForeground#FF75B5
  • gitDecoration.deletedResourceForeground#6F7899
  • gitDecoration.ignoredResourceForeground#64727f
  • gitDecoration.modifiedResourceForeground#a188f1
  • gitDecoration.untrackedResourceForeground#FF75B5
  • input.background#0A101E
  • input.border#343d64
  • list.activeSelectionBackground#67769640
  • list.activeSelectionForeground#dfe1e8
  • list.focusBackground#67769640
  • list.focusForeground#dfe1e8
  • list.highlightForeground#a188f1
  • list.hoverBackground#0A101E
  • list.hoverForeground#c0c5cd
  • list.inactiveSelectionBackground#67769635
  • list.inactiveSelectionForeground#dfe1e8
  • listWarning.foreground#ffedbb
  • notificationCenterHeader.foreground#e6e6e6
  • notifications.background#0A101E
  • notifications.foreground#e6e6e6
  • panel.background#0F1523
  • panel.border#1b2432
  • peekView.border#314365
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewEditor.matchHighlightBorder#a188f1
  • peekViewTitle.background#0A101E
  • peekViewTitleDescription.foreground#e6e6e6
  • peekViewTitleLabel.foreground#e6e6e6
  • pickerGroup.border#a188f1
  • pickerGroup.foreground#a188f1
  • progressBar.background#a188f1
  • scrollbar.shadow#171D2B
  • scrollbarSlider.activeBackground#6d87b860
  • scrollbarSlider.background#6d87b830
  • scrollbarSlider.hoverBackground#6d87b830
  • selection.background#a188f1
  • settings.dropdownBackground#0A101E
  • settings.dropdownBorder#171D2B
  • settings.headerForeground#c0c5cd
  • settings.modifiedItemIndicator#a188f1
  • sideBar.background#0A101E
  • sideBar.border#1b2432
  • sideBar.foreground#7E8C99
  • sideBarSectionHeader.background#0A101E
  • sideBarSectionHeader.foreground#c0c5cd
  • statusBar.background#0A101E
  • statusBar.border#1b2432
  • statusBar.debuggingBackground#a188f1
  • statusBar.debuggingBorder#1b2432
  • statusBar.debuggingForeground#e6e6e6
  • statusBar.foreground#64727f
  • statusBar.noFolderBackground#0A101E
  • statusBarItem.hoverBackground#1b2432
  • tab.activeBackground#171D2B
  • tab.border#0A101E
  • tab.inactiveBackground#0A101E
  • terminal.ansiBlack#6F7899
  • terminal.ansiBlue#a188f1
  • terminal.ansiBrightBlack#6F7899
  • terminal.ansiBrightBlue#a188f1
  • terminal.ansiBrightCyan#f7b773
  • terminal.ansiBrightGreen#17f9d7
  • terminal.ansiBrightMagenta#FF75B5
  • terminal.ansiBrightRed#f4326d
  • terminal.ansiBrightWhite#d7e2ff
  • terminal.ansiBrightYellow#ffedbb
  • terminal.ansiCyan#f7b773
  • terminal.ansiGreen#17f9d7
  • terminal.ansiMagenta#FF75B5
  • terminal.ansiRed#f4326d
  • terminal.ansiWhite#d7e2ff
  • terminal.ansiYellow#ffedbb
  • terminal.foreground#e6e6e6
  • terminal.selectionBackground#a188f140
  • terminalCursor.background#d7e2ff
  • terminalCursor.foreground#a188f1
  • textLink.foreground#a188f1
  • titleBar.activeBackground#0A101E
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#0A101E
  • titleBar.inactiveForeground#6B717D
  • widget.shadow#171D2B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F7899
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#8892aa
punctuation.definition.blockquote#ffffff13
meta.separator.thematic-break
string, markup.inline.raw.string#17f9d7
constant.numeric#17f9d7
constant.numeric.line-number#ffffff33
constant.numeric.line-number.match#ffedbb
constant.language#FF75B5
constant.character, constant.other#f4326d
variable.member#FF75B5
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#d7e2ff
variable.language#FF75B5
variable.function, meta.selectionset.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql variable.graphql#d7e2ff
variable.annotation#ffedbb
keyword, keyword.operator.word#a188f1
keyword.operator#ffedbb
storage#a188f1
storage.type, storage.type.type#a188f1
storage.type.java, storage.type.object.array.java#FF75B5
storage.type.primitive#17f9d7
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, punctuation.accessor, punctuation.separator.period#ffedbb
entity.name.variable#e6e6e6
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#ffedbb
entity.name.function, meta.type.parameters entity.name.type#d7e2ff
entity.name.type#FF75B5
entity.name.label#d7e2ff
entity.other.inherited-class#d7e2ff
entity.name.tag, support.class.component#a188f1
entity.name.tag support.class.component, meta.tag.custom entity.name.tag#FF75B5
entity.other.attribute-name#ffedbb
support.variable#f7b773
support.variable.property.dom#e6e6e6
support.function#d7e2ff
support.macro#a188f1
support.constant#f4326d
support.type#a188f1
support.type.primitive, support.type.builtin.graphql, support.type.builtin#f4326d
support.class#FF75B5
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#ffedbb
invalid#f1888e
invalid.deprecated#faae85
markup.error, message.error#FF75B5
markup.warning#ffedbb
markup.info#a188f1
markup.ignored#6F7899
markup.untracked#6F7899
markup.boldbold
markup.italicitalic
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.heading, entity.name.section.markdown#ffedbb
markup.underline.link, string.other.link#a188f1
string.other.link.description#17f9d7
markup.list.numbered.bullet#f4326d
markup.quote#d7e2ff
markup.raw
markup.raw.inline
meta.table.header.markdown, meta.table.header-separator.markdown, meta.table.markdown
support.type.property-name#f7b773
support.type.custom-property.name#a188f1
entity.other.attribute-name.class.css#FF75B5
punctuation.definition.entity#ffedbb
entity.other.attribute-name.id.css#ffedbb
keyword.other.important#f7b773
support.type.vendor-prefix#ffedbb
entity.other.pseudo-class, entity.other.pseudo-element#d7e2ff
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#d7e2ff
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#a188f1
keyword.control.default, storage.modifier.async#f4326d
storage.modifier#a188f1
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#f7b773
meta.brace.round, punctuation.definition, keyword.operator.ternary, meta.brace.curly.graphql, meta.brace.square, punctuation.operation.graphql, punctuation.colon.graphql#8892aa
markup.inserted#17f9d7
markup.deleted#FF75B5
markup.changed#a188f1
constant.numeric.line-number.find-in-files - match#f7b773
entity.name.filename.find-in-files#f4326d
token.info-token#a188f1
token.warn-token#ffedbb
token.error-token#FF75B5
token.debug-token#0E4FFF
meta.template.expression#e6e6e6
meta.class.identifier storage.modifier#a188f1
storage.type.generic#d7e2ff
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#ffedbb
keyword.control.loop#ffedbb
keyword.control.flow#f4326d
constant.language.import-export-all#d7e2ff
punctuation.decorator#d7e2ff
source.json meta.structure.dictionary.json string.json support.type.property-name.json#a188f1
meta.selectionset.graphql meta.selectionset.graphql variable.graphql#a188f1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json#f7b773
meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#f7b773
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#d7e2ff
meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#d7e2ff
meta.tag meta.tag.attributes keyword.operator.assignment#d7e2ff
entity.name.function.directive.graphql#ffedbb
keyword.other.unit#ffedbb
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...

Pandju by Tobias Timm - VS Code Theme