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

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#ceb3f7
constant.numeric#ceb3f7
constant.numeric.line-number#ffffff33
constant.numeric.line-number.match#ffedcb
constant.language#cbb1f3
constant.character, constant.other#cbb1f3
variable.member#a188f1
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#a188f1
variable.function, meta.selectionset.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql variable.graphql#d7e2ff
variable.annotation#ffedcb
keyword, keyword.operator.word#8d9ad1
keyword.operator#ffedcb
storage#8d9ad1
storage.type, storage.type.type#8d9ad1
storage.type.java, storage.type.object.array.java#a188f1
storage.type.primitive#ceb3f7
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#ffedcb
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#ffedcb
entity.name.function, meta.type.parameters entity.name.type#d7e2ff
entity.name.type#a188f1
entity.name.label#d7e2ff
entity.other.inherited-class#d7e2ff
entity.name.tag, support.class.component#8d9ad1
entity.name.tag support.class.component, meta.tag.custom entity.name.tag#a188f1
entity.other.attribute-name#ffedcb
support.variable#A7A7EE
support.variable.property.dom#d4d4d4
support.function#d7e2ff
support.macro#8d9ad1
support.constant#cbb1f3
support.type#8d9ad1
support.type.primitive, support.type.builtin.graphql, support.type.builtin#cbb1f3
support.class#a188f1
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#ffedcb
invalid#f1888e
invalid.deprecated#faae85
markup.error, message.error#a188f1
markup.warning#ffedcb
markup.info#8d9ad1
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#ffedcb
markup.underline.link, string.other.link#8d9ad1
string.other.link.description#cbb1f3
markup.list.numbered.bullet#cbb1f3
markup.quote#d7e2ff
markup.raw
markup.raw.inline
meta.table.header.markdown, meta.table.header-separator.markdown, meta.table.markdown
support.type.property-name#A7A7EE
support.type.custom-property.name#8d9ad1
entity.other.attribute-name.class.css#a188f1
punctuation.definition.entity#ffedcb
entity.other.attribute-name.id.css#ffedcb
keyword.other.important#A7A7EE
support.type.vendor-prefix#ffedcb
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#8d9ad1
keyword.control.default, storage.modifier.async#cbb1f3
storage.modifier#8d9ad1
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#A7A7EE
meta.brace.round, punctuation.definition, keyword.operator.ternary, meta.brace.curly.graphql, meta.brace.square, punctuation.operation.graphql, punctuation.colon.graphql#8892aa
markup.inserted#7ebbbb
markup.deleted#a188f1
markup.changed#8d9ad1
constant.numeric.line-number.find-in-files - match#A7A7EE
entity.name.filename.find-in-files#cbb1f3
token.info-token#8d9ad1
token.warn-token#ffedcb
token.error-token#a188f1
token.debug-token#0E4FFF
meta.template.expression#d4d4d4
meta.class.identifier storage.modifier#8d9ad1
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#ffedcb
keyword.control.loop#ffedcb
keyword.control.flow#cbb1f3
constant.language.import-export-all#d7e2ff
punctuation.decorator#d7e2ff
source.json meta.structure.dictionary.json string.json support.type.property-name.json#8d9ad1
meta.selectionset.graphql meta.selectionset.graphql variable.graphql#8d9ad1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json#A7A7EE
meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#A7A7EE
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#ffedcb
keyword.other.unit#ffedcb
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...

Raijū by Tobias Timm - VS Code Theme