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#F0EBFF
  • activityBar.foreground#4A3F6B
  • activityBar.inactiveForeground#C9BEE8
  • activityBarBadge.background#C792EA
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C792EA
  • badge.foreground#FFFFFF
  • button.background#C792EA
  • button.foreground#FFFFFF
  • button.hoverBackground#D8B4FE
  • dropdown.background#FFFFFF
  • dropdown.border#E8DEFF
  • dropdown.foreground#2D2A3E
  • editor.background#F8F5FF
  • editor.findMatchBackground#E8DEFF88
  • editor.findMatchHighlightBackground#E8DEFF44
  • editor.foreground#2D2A3E
  • editor.selectionBackground#E8DEFF
  • editor.selectionHighlightBackground#E8DEFF55
  • editorBracketMatch.background#E8DEFF66
  • editorBracketMatch.border#C792EA
  • editorCursor.foreground#C792EA
  • editorError.foreground#EF4444
  • editorGutter.addedBackground#7C6CF5
  • editorGutter.deletedBackground#EF4444
  • editorGutter.modifiedBackground#C792EA
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#E8DEFF
  • editorIndentGuide.activeBackground#C9BEE8
  • editorIndentGuide.background#E8DEFF44
  • editorInfo.foreground#7C6CF5
  • editorLineNumber.activeForeground#4A3F6B
  • editorLineNumber.foreground#C9BEE8
  • editorRuler.foreground#E8DEFF44
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#E8DEFF
  • editorSuggestWidget.highlightForeground#C792EA
  • editorSuggestWidget.selectedBackground#E8DEFF
  • editorSuggestWidget.selectedForeground#2D2A3E
  • editorWarning.foreground#F59EAE
  • editorWidget.background#FFFFFF
  • editorWidget.border#E8DEFF
  • gitDecoration.addedResourceForeground#7C6CF5
  • gitDecoration.conflictingResourceForeground#F59EAE
  • gitDecoration.deletedResourceForeground#EF4444
  • gitDecoration.modifiedResourceForeground#C792EA
  • gitDecoration.renamedResourceForeground#C084FC
  • input.background#FFFFFF
  • input.border#E8DEFF
  • input.foreground#2D2A3E
  • input.placeholderForeground#C9BEE8
  • list.activeSelectionBackground#E8DEFF
  • list.activeSelectionForeground#2D2A3E
  • list.focusBackground#E8DEFF88
  • list.focusForeground#2D2A3E
  • list.highlightForeground#C792EA
  • list.hoverBackground#F0EBFF
  • list.hoverForeground#2D2A3E
  • list.inactiveFocusBackground#E8DEFF44
  • list.inactiveSelectionBackground#E8DEFF66
  • list.inactiveSelectionForeground#2D2A3E
  • menu.background#FFFFFF
  • menu.foreground#2D2A3E
  • menu.selectionBackground#E8DEFF
  • menu.selectionForeground#2D2A3E
  • minimap.findMatchHighlight#C792EA22
  • minimap.selectionHighlight#C792EA33
  • panel.background#F5F0FF
  • panel.border#F0EBFF
  • panelTitle.activeForeground#4A3F6B
  • panelTitle.inactiveForeground#C9BEE8
  • quickInputList.focusBackground#E8DEFF
  • quickInputList.focusForeground#2D2A3E
  • scrollbarSlider.activeBackground#C792EA
  • scrollbarSlider.background#C9BEE866
  • scrollbarSlider.hoverBackground#C792EA88
  • settings.headerForeground#4A3F6B
  • settings.modifiedItemIndicator#C792EA
  • sideBar.background#F5F0FF
  • sideBar.foreground#2D2A3E
  • sideBarSectionHeader.background#F0EBFF
  • sideBarSectionHeader.foreground#4A3F6B
  • sideBarTitle.foreground#4A3F6B
  • statusBar.background#EDE6FF
  • statusBar.debuggingBackground#EDE6FF
  • statusBar.foreground#4A3F6B
  • statusBar.noFolderBackground#EDE6FF
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#4A3F6B
  • tab.border#F0EBFF
  • tab.inactiveBackground#F5F0FF
  • tab.inactiveForeground#C9BEE8
  • tab.unfocusedActiveBackground#FFFFFF
  • tab.unfocusedInactiveBackground#F5F0FF
  • terminal.ansiBlack#EDE6FF
  • terminal.ansiBlue#8B5CF6
  • terminal.ansiBrightBlack#C9BEE8
  • terminal.ansiBrightBlue#8B5CF6
  • terminal.ansiBrightCyan#7C6CF5
  • terminal.ansiBrightGreen#7C6CF5
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#EF4444
  • terminal.ansiBrightWhite#2D2A3E
  • terminal.ansiBrightYellow#C792EA
  • terminal.ansiCyan#7C6CF5
  • terminal.ansiGreen#7C6CF5
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#EF4444
  • terminal.ansiWhite#2D2A3E
  • terminal.ansiYellow#C792EA
  • terminal.background#F8F5FF
  • terminal.foreground#2D2A3E
  • titleBar.activeBackground#EDE6FF
  • titleBar.activeForeground#2D2A3E
  • titleBar.inactiveBackground#EDE6FF
  • titleBar.inactiveForeground#C9BEE8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#C9BEE8italic
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#8B5CF6
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#7C6CF5
variable, variable.other, variable.other.readwrite, variable.other.property, variable.other.object.property, string constant.other.placeholder, support.other.variable#2D2A3E
variable.language, variable.other.self, variable.other.this#8B5CF6italic
variable.parameter, meta.parameter#4A3F6Bitalic
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#7C6CF5
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#8B5CF6
entity.name.type.interface, support.interface#8B5CF6
entity.name.type.enum, entity.name.variable.enum-member, support.enum#C084FC
string, string.quoted, string.template, constant.other.symbol, constant.other.key, entity.other.inherited-class#C084FC
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit#F59EAE
constant, support.constant#4A3F6B
entity.name.tag, meta.tag, meta.tag.sgml#C084FC
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#C084FC
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#7C6CF5italic
string.regexp, constant.character.escape#7C6CF5
support.type.property-name.json, entity.name.tag.yaml, source.json meta.structure.dictionary.json support.type.property-name.json#8B5CF6
text.html.markdown, punctuation.definition.list_item.markdown, markup.table#2D2A3E
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#8B5CF6
markup.italic, markup.bold, markup.bold markup.italic#C084FCbold
markup.inserted, markup.inserted.git_gutter#7C6CF5
markup.deleted, markup.deleted.git_gutter#EF4444
markup.changed, markup.changed.git_gutter#8B5CF6
meta.function.decorator.python, entity.name.function.magic.python, support.function.magic.python, variable.parameter.function.language.special.self.python#7C6CF5italic
support.type.python, support.function.builtin.python#7C6CF5
source.go storage.type.package.go, meta.import.go, keyword.package.go, keyword.import.go#8B5CF6
source.go entity.name.type.go, source.go storage.type#8B5CF6
entity.name.type.lifetime.rust, meta.macro.rust, entity.name.function.macro.rust, support.macro.rust#7C6CF5
meta.attribute.rust, storage.modifier.lifetime.rust#7C6CF5italic
keyword.other.DDL.sql, keyword.other.DML.sql, keyword.other.DML.returning.sql, keyword.other.data-integrity.sql, support.function.sql#8B5CF6
meta.annotation.java, meta.import.java, storage.modifier.import.java, storage.type.java#7C6CF5
meta.attribute.cs, keyword.other.modifier.cs, entity.name.type.namespace.cs, storage.type.cs#8B5CF6
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#8B5CF6
keyword.other.dart, support.type.dart, storage.type.primitive.dart#8B5CF6
entity.name.class.widget.dart, support.type.widget.dart#8B5CF6
keyword.other.swift, support.type.swift, storage.type.swift, keyword.operator.function.infix.swift#8B5CF6
keyword.other.kotlin, storage.type.kotlin, support.type.kotlin, entity.name.type.kotlin#8B5CF6
keyword.other.php, support.type.php, storage.type.php, variable.other.php, support.other.namespace.php, support.other.namespace.use.php, meta.use.php#8B5CF6
keyword.other.ruby, constant.other.symbol.ruby, variable.other.constant.ruby, entity.name.type.class.ruby#8B5CF6
support.function.builtin.shell, variable.other.normal.shell, variable.other.special.shell, string.interpolated.dollar.shell#7C6CF5
keyword.key.toml, entity.name.section.group-title.ini, keyword.other.definition.ini#8B5CF6
entity.name.type.graphql, entity.name.fragment.graphql, keyword.operation.graphql, variable.graphql#8B5CF6
entity.name.tag.vue, entity.name.tag.svelte, support.function.svelte, meta.directive.vue#C084FC
invalid, invalid.illegal#EF4444