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#1A1730
  • activityBar.foreground#C0A9FF
  • activityBar.inactiveForeground#5E3B51
  • activityBarBadge.background#D07CFF
  • activityBarBadge.foreground#1E1B2E
  • badge.background#D07CFF
  • badge.foreground#1E1B2E
  • button.background#D07CFF
  • button.foreground#1E1B2E
  • button.hoverBackground#C0A9FF
  • dropdown.background#231F3A
  • dropdown.border#3B9DBF44
  • dropdown.foreground#C0A9FF
  • editor.background#1E1B2E
  • editor.findMatchBackground#3B9DBF44
  • editor.findMatchHighlightBackground#3B9DBF22
  • editor.foreground#C0A9FF
  • editor.selectionBackground#3B9DBF33
  • editor.selectionHighlightBackground#3B9DBF22
  • editorBracketMatch.background#7E57C266
  • editorBracketMatch.border#D07CFF
  • editorCursor.foreground#D07CFF
  • editorError.foreground#D07CFF
  • editorGutter.addedBackground#3B9DBF
  • editorGutter.deletedBackground#D07CFF
  • editorGutter.modifiedBackground#C0A9FF
  • editorHoverWidget.background#1A1730
  • editorHoverWidget.border#3B9DBF44
  • editorIndentGuide.activeBackground#7E57C2
  • editorIndentGuide.background#3B9DBF22
  • editorInfo.foreground#3B9DBF
  • editorLineNumber.activeForeground#C0A9FF
  • editorLineNumber.foreground#5E3B51
  • editorRuler.foreground#3B9DBF22
  • editorSuggestWidget.background#1A1730
  • editorSuggestWidget.border#3B9DBF44
  • editorSuggestWidget.highlightForeground#D07CFF
  • editorSuggestWidget.selectedBackground#3B9DBF33
  • editorSuggestWidget.selectedForeground#D07CFF
  • editorWarning.foreground#C0A9FF
  • editorWidget.background#1A1730
  • editorWidget.border#3B9DBF44
  • gitDecoration.addedResourceForeground#3B9DBF
  • gitDecoration.conflictingResourceForeground#D07CFF
  • gitDecoration.deletedResourceForeground#D07CFF
  • gitDecoration.modifiedResourceForeground#C0A9FF
  • gitDecoration.renamedResourceForeground#7E57C2
  • input.background#231F3A
  • input.border#3B9DBF44
  • input.foreground#C0A9FF
  • input.placeholderForeground#5E3B51
  • list.activeSelectionBackground#3B9DBF44
  • list.activeSelectionForeground#D07CFF
  • list.focusBackground#3B9DBF33
  • list.focusForeground#D07CFF
  • list.highlightForeground#D07CFF
  • list.hoverBackground#3B9DBF22
  • list.hoverForeground#D07CFF
  • list.inactiveFocusBackground#3B9DBF22
  • list.inactiveSelectionBackground#7E57C233
  • list.inactiveSelectionForeground#C0A9FF
  • menu.background#1A1730
  • menu.foreground#C0A9FF
  • menu.selectionBackground#3B9DBF33
  • menu.selectionForeground#D07CFF
  • minimap.findMatchHighlight#D07CFF22
  • minimap.selectionHighlight#D07CFF33
  • panel.background#231F3A
  • panel.border#1A1730
  • panelTitle.activeForeground#D07CFF
  • panelTitle.inactiveForeground#5E3B51
  • quickInputList.focusBackground#3B9DBF44
  • quickInputList.focusForeground#D07CFF
  • scrollbarSlider.activeBackground#D07CFF
  • scrollbarSlider.background#3B9DBF33
  • scrollbarSlider.hoverBackground#7E57C266
  • settings.headerForeground#C0A9FF
  • settings.modifiedItemIndicator#D07CFF
  • sideBar.background#1A1730
  • sideBar.foreground#C0A9FF
  • sideBarSectionHeader.background#231F3A
  • sideBarSectionHeader.foreground#C0A9FF
  • sideBarTitle.foreground#D07CFF
  • statusBar.background#150F26
  • statusBar.debuggingBackground#150F26
  • statusBar.foreground#C0A9FF
  • statusBar.noFolderBackground#150F26
  • tab.activeBackground#2A2545
  • tab.activeForeground#D07CFF
  • tab.border#231F3A
  • tab.inactiveBackground#1A1730
  • tab.inactiveForeground#5E3B51
  • tab.unfocusedActiveBackground#2A2545
  • tab.unfocusedInactiveBackground#1A1730
  • terminal.ansiBlack#1A1730
  • terminal.ansiBlue#7E57C2
  • terminal.ansiBrightBlack#5E3B51
  • terminal.ansiBrightBlue#7E57C2
  • terminal.ansiBrightCyan#3B9DBF
  • terminal.ansiBrightGreen#3B9DBF
  • terminal.ansiBrightMagenta#D07CFF
  • terminal.ansiBrightRed#D07CFF
  • terminal.ansiBrightWhite#C0A9FF
  • terminal.ansiBrightYellow#C0A9FF
  • terminal.ansiCyan#3B9DBF
  • terminal.ansiGreen#3B9DBF
  • terminal.ansiMagenta#D07CFF
  • terminal.ansiRed#D07CFF
  • terminal.ansiWhite#C0A9FF
  • terminal.ansiYellow#C0A9FF
  • terminal.background#1E1B2E
  • terminal.foreground#C0A9FF
  • titleBar.activeBackground#150F26
  • titleBar.activeForeground#C0A9FF
  • titleBar.inactiveBackground#150F26
  • titleBar.inactiveForeground#5E3B51

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#5E3B51italic
keyword, keyword.control, keyword.other, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface, storage.type.type, storage.type.namespace, storage.type.enum, storage.type.struct#D07CFF
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, punctuation, punctuation.definition.tag, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.parameters, keyword.other.template, keyword.other.substitution#3B9DBF
variable, variable.other, variable.other.readwrite, variable.other.property, variable.other.object.property, string constant.other.placeholder, support.other.variable#C0A9FF
variable.language, variable.other.self, variable.other.this#D07CFFitalic
variable.parameter, meta.parameter#C0A9FFitalic
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method, meta.method, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor#3B9DBF
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.type.primitive, support.type.builtin, entity.name.type.class, entity.name.type.module, entity.name.type.alias, entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7E57C2
entity.name.type.interface, support.interface#3B9DBF
entity.name.type.enum, entity.name.variable.enum-member, support.enum#C0A9FF
string, string.quoted, string.template, constant.other.symbol, constant.other.key, entity.other.inherited-class#C0A9FF
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit#7E57C2
constant, support.constant#7E57C2
entity.name.tag, meta.tag, meta.tag.sgml#D07CFF
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.class, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#7E57C2
meta.annotation, meta.decorator, entity.name.type.annotation, punctuation.decorator, entity.name.function.decorator, meta.attribute.rust, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3B9DBFitalic
string.regexp, constant.character.escape#3B9DBF
support.type.property-name.json, entity.name.tag.yaml, source.json meta.structure.dictionary.json support.type.property-name.json#D07CFF
text.html.markdown, punctuation.definition.list_item.markdown, markup.table#C0A9FF
markdown.heading, markup.heading, markup.heading entity.name, text.html.markdown markup.inline.raw.markdown, markup.raw.block, markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown#D07CFF
markup.italic, markup.bold, markup.bold markup.italic#D07CFFbold
markup.inserted, markup.inserted.git_gutter#3B9DBF
markup.deleted, markup.deleted.git_gutter#D07CFF
markup.changed, markup.changed.git_gutter#7E57C2
meta.function.decorator.python, entity.name.function.magic.python, support.function.magic.python, variable.parameter.function.language.special.self.python#3B9DBFitalic
support.type.python, support.function.builtin.python#3B9DBF
source.go storage.type.package.go, meta.import.go, keyword.package.go, keyword.import.go#D07CFF
source.go entity.name.type.go, source.go storage.type#7E57C2
entity.name.type.lifetime.rust, meta.macro.rust, entity.name.function.macro.rust, support.macro.rust#3B9DBF
meta.attribute.rust, storage.modifier.lifetime.rust#3B9DBFitalic
keyword.other.DDL.sql, keyword.other.DML.sql, keyword.other.DML.returning.sql, keyword.other.data-integrity.sql, support.function.sql#D07CFF
meta.annotation.java, meta.import.java, storage.modifier.import.java, storage.type.java#3B9DBF
meta.attribute.cs, keyword.other.modifier.cs, entity.name.type.namespace.cs, storage.type.cs#D07CFF
keyword.control.directive, keyword.control.directive.include, keyword.control.directive.define, entity.name.function.preprocessor, storage.type.built-in.primitive, storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp#D07CFF
keyword.other.dart, support.type.dart, storage.type.primitive.dart#D07CFF
entity.name.class.widget.dart, support.type.widget.dart#7E57C2
keyword.other.swift, support.type.swift, storage.type.swift, keyword.operator.function.infix.swift#D07CFF
keyword.other.kotlin, storage.type.kotlin, support.type.kotlin, entity.name.type.kotlin#D07CFF
keyword.other.php, support.type.php, storage.type.php, variable.other.php, support.other.namespace.php, support.other.namespace.use.php, meta.use.php#D07CFF
keyword.other.ruby, constant.other.symbol.ruby, variable.other.constant.ruby, entity.name.type.class.ruby#D07CFF
support.function.builtin.shell, variable.other.normal.shell, variable.other.special.shell, string.interpolated.dollar.shell#3B9DBF
keyword.key.toml, entity.name.section.group-title.ini, keyword.other.definition.ini#D07CFF
entity.name.type.graphql, entity.name.fragment.graphql, keyword.operation.graphql, variable.graphql#7E57C2
entity.name.tag.vue, entity.name.tag.svelte, support.function.svelte, meta.directive.vue#D07CFF
invalid, invalid.illegal#D07CFF
Lavender Purple Theme by hoshiko - VS Code Theme