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#231F35
  • activityBar.foreground#F2ECFF
  • activityBar.inactiveForeground#8F84B5
  • activityBarBadge.background#C792EA
  • activityBarBadge.foreground#1E1B2E
  • badge.background#C792EA
  • badge.foreground#1E1B2E
  • button.background#C792EA
  • button.foreground#1E1B2E
  • button.hoverBackground#D8B4FE
  • dropdown.background#26213A
  • dropdown.border#322B4D
  • dropdown.foreground#F2ECFF
  • editor.background#1E1B2E
  • editor.findMatchBackground#463A6D
  • editor.findMatchHighlightBackground#463A6D55
  • editor.foreground#F2ECFF
  • editor.selectionBackground#463A6D
  • editor.selectionHighlightBackground#463A6D55
  • editorBracketMatch.background#322B4D
  • editorBracketMatch.border#C084FC
  • editorCursor.foreground#C792EA
  • editorError.foreground#FB7185
  • editorGutter.addedBackground#A7F3D0
  • editorGutter.deletedBackground#FB7185
  • editorGutter.modifiedBackground#C4B5FD
  • editorHoverWidget.background#231F35
  • editorHoverWidget.border#322B4D
  • editorIndentGuide.activeBackground#8F84B5
  • editorIndentGuide.background#4B3F72
  • editorInfo.foreground#A78BFA
  • editorLineNumber.activeForeground#F2ECFF
  • editorLineNumber.foreground#8F84B5
  • editorRuler.foreground#4B3F72
  • editorSuggestWidget.background#231F35
  • editorSuggestWidget.border#322B4D
  • editorSuggestWidget.highlightForeground#C792EA
  • editorSuggestWidget.selectedBackground#463A6D
  • editorSuggestWidget.selectedForeground#F2ECFF
  • editorWarning.foreground#FBBF24
  • editorWidget.background#231F35
  • editorWidget.border#322B4D
  • gitDecoration.addedResourceForeground#A7F3D0
  • gitDecoration.conflictingResourceForeground#F87171
  • gitDecoration.deletedResourceForeground#FB7185
  • gitDecoration.modifiedResourceForeground#C4B5FD
  • gitDecoration.renamedResourceForeground#F9A8D4
  • input.background#26213A
  • input.border#322B4D
  • input.foreground#F2ECFF
  • input.placeholderForeground#8F84B5
  • list.activeSelectionBackground#463A6D
  • list.activeSelectionForeground#F2ECFF
  • list.focusBackground#463A6D
  • list.focusForeground#F2ECFF
  • list.highlightForeground#C792EA
  • list.hoverBackground#26213A
  • list.hoverForeground#F2ECFF
  • list.inactiveFocusBackground#463A6D33
  • list.inactiveSelectionBackground#322B4D
  • list.inactiveSelectionForeground#F2ECFF
  • menu.background#231F35
  • menu.foreground#F2ECFF
  • menu.selectionBackground#463A6D
  • menu.selectionForeground#F2ECFF
  • minimap.findMatchHighlight#C792EA55
  • minimap.selectionHighlight#C792EA55
  • panel.background#2C2742
  • panel.border#26213A
  • panelTitle.activeForeground#F2ECFF
  • panelTitle.inactiveForeground#8F84B5
  • quickInputList.focusBackground#463A6D
  • quickInputList.focusForeground#F2ECFF
  • scrollbarSlider.activeBackground#C792EA
  • scrollbarSlider.background#5B4A89
  • scrollbarSlider.hoverBackground#8F84B5
  • settings.headerForeground#F2ECFF
  • settings.modifiedItemIndicator#C792EA
  • sideBar.background#231F35
  • sideBar.foreground#F2ECFF
  • sideBarSectionHeader.background#26213A
  • sideBarSectionHeader.foreground#F2ECFF
  • sideBarTitle.foreground#F2ECFF
  • statusBar.background#2B2542
  • statusBar.debuggingBackground#2B2542
  • statusBar.foreground#F2ECFF
  • statusBar.noFolderBackground#2B2542
  • tab.activeBackground#322B4D
  • tab.activeForeground#F2ECFF
  • tab.border#26213A
  • tab.inactiveBackground#231F35
  • tab.inactiveForeground#8F84B5
  • tab.unfocusedActiveBackground#322B4D
  • tab.unfocusedInactiveBackground#231F35
  • terminal.ansiBlack#231F35
  • terminal.ansiBlue#C4B5FD
  • terminal.ansiBrightBlack#8F84B5
  • terminal.ansiBrightBlue#A78BFA
  • terminal.ansiBrightCyan#C4B5FD
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#D8B4FE
  • terminal.ansiBrightRed#FB7185
  • terminal.ansiBrightWhite#F2ECFF
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#A78BFA
  • terminal.ansiGreen#A7F3D0
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FB7185
  • terminal.ansiWhite#F2ECFF
  • terminal.ansiYellow#FBBF24
  • terminal.background#1E1B2E
  • terminal.foreground#F2ECFF
  • titleBar.activeBackground#1B172A
  • titleBar.activeForeground#F2ECFF
  • titleBar.inactiveBackground#1B172A
  • titleBar.inactiveForeground#8F84B5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#8F84B5italic
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#C792EA
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#B794F4
variable, variable.other, variable.other.readwrite, variable.other.property, variable.other.object.property, string constant.other.placeholder, support.other.variable#F2ECFF
variable.language, variable.other.self, variable.other.this#C792EAitalic
variable.parameter, meta.parameter#E9DDFFitalic
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#A78BFA
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#E879F9
entity.name.type.interface, support.interface#DDD6FE
entity.name.type.enum, entity.name.variable.enum-member, support.enum#F0ABFC
string, string.quoted, string.template, constant.other.symbol, constant.other.key, entity.other.inherited-class#D8B4FE
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit#F9A8D4
constant, support.constant#F5B5D5
entity.name.tag, meta.tag, meta.tag.sgml#D946EF
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#A78BFAitalic
string.regexp, constant.character.escape#A78BFA
support.type.property-name.json, entity.name.tag.yaml, source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
text.html.markdown, punctuation.definition.list_item.markdown, markup.table#F2ECFF
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#C792EA
markup.italic, markup.bold, markup.bold markup.italic#D946EFbold
markup.inserted, markup.inserted.git_gutter#A78BFA
markup.deleted, markup.deleted.git_gutter#FB7185
markup.changed, markup.changed.git_gutter#E879F9
meta.function.decorator.python, entity.name.function.magic.python, support.function.magic.python, variable.parameter.function.language.special.self.python#A78BFAitalic
support.type.python, support.function.builtin.python#A78BFA
source.go storage.type.package.go, meta.import.go, keyword.package.go, keyword.import.go#C792EA
source.go entity.name.type.go, source.go storage.type#E879F9
entity.name.type.lifetime.rust, meta.macro.rust, entity.name.function.macro.rust, support.macro.rust#A78BFA
meta.attribute.rust, storage.modifier.lifetime.rust#A78BFAitalic
keyword.other.DDL.sql, keyword.other.DML.sql, keyword.other.DML.returning.sql, keyword.other.data-integrity.sql, support.function.sql#C792EA
meta.annotation.java, meta.import.java, storage.modifier.import.java, storage.type.java#A78BFA
meta.attribute.cs, keyword.other.modifier.cs, entity.name.type.namespace.cs, storage.type.cs#C792EA
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#C792EA
keyword.other.dart, support.type.dart, storage.type.primitive.dart#C792EA
entity.name.class.widget.dart, support.type.widget.dart#E879F9
keyword.other.swift, support.type.swift, storage.type.swift, keyword.operator.function.infix.swift#C792EA
keyword.other.kotlin, storage.type.kotlin, support.type.kotlin, entity.name.type.kotlin#C792EA
keyword.other.php, support.type.php, storage.type.php, variable.other.php, support.other.namespace.php, support.other.namespace.use.php, meta.use.php#C792EA
keyword.other.ruby, constant.other.symbol.ruby, variable.other.constant.ruby, entity.name.type.class.ruby#C792EA
support.function.builtin.shell, variable.other.normal.shell, variable.other.special.shell, string.interpolated.dollar.shell#A78BFA
keyword.key.toml, entity.name.section.group-title.ini, keyword.other.definition.ini#C792EA
entity.name.type.graphql, entity.name.fragment.graphql, keyword.operation.graphql, variable.graphql#E879F9
entity.name.tag.vue, entity.name.tag.svelte, support.function.svelte, meta.directive.vue#D946EF
invalid, invalid.illegal#FB7185
Lavender Purple Theme by hoshiko - VS Code Theme