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.activeBackground#FF6AC115
  • activityBar.activeBorder#FF6AC1
  • activityBar.background#0C0B12
  • activityBar.foreground#FF6AC1
  • activityBar.inactiveForeground#676E95
  • activityBarBadge.background#FF6AC1
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6AC1
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF6AC1
  • breadcrumb.background#0C0B12
  • breadcrumb.focusForeground#E4F0FB
  • breadcrumb.foreground#676E95
  • breadcrumbPicker.background#1A1826
  • button.background#FF6AC1
  • button.foreground#FFFFFF
  • button.hoverBackground#FF9AC1
  • button.secondaryBackground#1A1826
  • button.secondaryForeground#E4F0FB
  • button.secondaryHoverBackground#2D2B3D
  • diffEditor.insertedLineBackground#A6E3A115
  • diffEditor.insertedTextBackground#A6E3A120
  • diffEditor.removedLineBackground#FF537015
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#1A1826
  • dropdown.border#2D2B3D
  • dropdown.foreground#E4F0FB
  • editor.background#0C0B12
  • editor.findMatchBackground#FFCB6B50
  • editor.findMatchHighlightBackground#FFCB6B30
  • editor.findRangeHighlightBackground#FF6AC120
  • editor.foldBackground#1A182650
  • editor.foreground#E4F0FB
  • editor.hoverHighlightBackground#FF6AC120
  • editor.lineHighlightBackground#1A182650
  • editor.lineHighlightBorder#1A182600
  • editor.rangeHighlightBackground#FF6AC115
  • editor.selectionBackground#FF6AC140
  • editor.selectionHighlightBackground#FF6AC125
  • editor.wordHighlightBackground#C792EA30
  • editor.wordHighlightStrongBackground#C792EA50
  • editorBracketHighlight.foreground1#FF6AC1
  • editorBracketHighlight.foreground2#82AAFF
  • editorBracketHighlight.foreground3#FFCB6B
  • editorBracketHighlight.foreground4#72F1B8
  • editorBracketHighlight.foreground5#C792EA
  • editorBracketHighlight.foreground6#89DDFF
  • editorBracketHighlight.unexpectedBracket.foreground#FF5370
  • editorCursor.foreground#FF6AC1
  • editorError.foreground#FF5370
  • editorGroup.border#2D2B3D
  • editorGroup.dropBackground#FF6AC130
  • editorGroupHeader.tabsBackground#080710
  • editorGutter.addedBackground#A6E3A1
  • editorGutter.deletedBackground#FF5370
  • editorGutter.modifiedBackground#82AAFF
  • editorHoverWidget.background#1A1826
  • editorHoverWidget.border#2D2B3D
  • editorInfo.foreground#82AAFF
  • editorLineNumber.activeForeground#FF6AC1
  • editorLineNumber.foreground#2D2B3D
  • editorLink.activeForeground#82AAFF
  • editorOverviewRuler.addedForeground#A6E3A180
  • editorOverviewRuler.border#0C0B12
  • editorOverviewRuler.deletedForeground#FF537080
  • editorOverviewRuler.errorForeground#FF5370
  • editorOverviewRuler.infoForeground#82AAFF
  • editorOverviewRuler.modifiedForeground#82AAFF80
  • editorOverviewRuler.selectionHighlightForeground#FF6AC180
  • editorOverviewRuler.warningForeground#FAB387
  • editorOverviewRuler.wordHighlightForeground#C792EA80
  • editorOverviewRuler.wordHighlightStrongForeground#C792EAA0
  • editorSuggestWidget.background#1A1826
  • editorSuggestWidget.foreground#E4F0FB
  • editorSuggestWidget.highlightForeground#FF6AC1
  • editorSuggestWidget.selectedBackground#FF6AC140
  • editorWarning.foreground#FAB387
  • editorWhitespace.foreground#2D2B3D80
  • editorWidget.background#1A1826
  • editorWidget.border#2D2B3D
  • errorForeground#FF5370
  • focusBorder#FF6AC180
  • foreground#E4F0FB
  • gitDecoration.conflictingResourceForeground#FAB387
  • gitDecoration.deletedResourceForeground#FF5370
  • gitDecoration.ignoredResourceForeground#2D2B3D
  • gitDecoration.modifiedResourceForeground#82AAFF
  • gitDecoration.stageModifiedResourceForeground#C792EA
  • gitDecoration.untrackedResourceForeground#A6E3A1
  • input.background#1A1826
  • input.border#2D2B3D
  • input.foreground#E4F0FB
  • input.placeholderForeground#676E95
  • inputOption.activeBorder#FF6AC1
  • inputValidation.errorBorder#FF5370
  • inputValidation.infoBorder#82AAFF
  • inputValidation.warningBorder#FAB387
  • list.activeSelectionBackground#FF6AC150
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#FF6AC130
  • list.errorForeground#FF5370
  • list.focusBackground#FF6AC140
  • list.highlightForeground#FF9AC1
  • list.hoverBackground#1A182680
  • list.inactiveSelectionBackground#2D2B3D50
  • list.warningForeground#FAB387
  • minimap.errorHighlight#FF537080
  • minimap.findMatchHighlight#FFCB6B80
  • minimap.selectionHighlight#FF6AC180
  • minimap.warningHighlight#FAB38780
  • notificationCenter.border#2D2B3D
  • notificationCenterHeader.background#1A1826
  • notificationCenterHeader.foreground#E4F0FB
  • notificationLink.foreground#82AAFF
  • notifications.background#1A1826
  • notifications.border#2D2B3D
  • notifications.foreground#E4F0FB
  • panel.background#080710
  • panel.border#2D2B3D
  • panelTitle.activeBorder#FF6AC1
  • panelTitle.activeForeground#E4F0FB
  • panelTitle.inactiveForeground#676E95
  • peekView.border#FF6AC1
  • peekViewEditor.background#0C0B12
  • peekViewEditor.matchHighlightBackground#FFCB6B50
  • peekViewResult.background#080710
  • peekViewResult.fileForeground#E4F0FB
  • peekViewResult.lineForeground#A6ACCD
  • peekViewResult.matchHighlightBackground#FFCB6B50
  • peekViewResult.selectionBackground#FF6AC140
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1A1826
  • peekViewTitleDescription.foreground#676E95
  • peekViewTitleLabel.foreground#E4F0FB
  • progressBar.background#FF6AC1
  • quickInput.background#1A1826
  • quickInput.foreground#E4F0FB
  • quickInputList.focusBackground#FF6AC140
  • quickInputTitle.background#0C0B12
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#FF6AC180
  • scrollbarSlider.background#2D2B3D50
  • scrollbarSlider.hoverBackground#2D2B3D80
  • selection.background#FF6AC140
  • settings.checkboxBackground#1A1826
  • settings.checkboxBorder#2D2B3D
  • settings.checkboxForeground#E4F0FB
  • settings.dropdownBackground#1A1826
  • settings.dropdownBorder#2D2B3D
  • settings.dropdownForeground#E4F0FB
  • settings.headerForeground#E4F0FB
  • settings.modifiedItemIndicator#FF6AC1
  • settings.numberInputBackground#1A1826
  • settings.numberInputBorder#2D2B3D
  • settings.numberInputForeground#E4F0FB
  • settings.textInputBackground#1A1826
  • settings.textInputBorder#2D2B3D
  • settings.textInputForeground#E4F0FB
  • sideBar.background#080710
  • sideBar.foreground#A6ACCD
  • sideBarSectionHeader.background#1A1826
  • sideBarSectionHeader.border#2D2B3D
  • sideBarTitle.foreground#E4F0FB
  • statusBar.background#080710
  • statusBar.debuggingBackground#FF6AC1
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#A6ACCD
  • statusBar.noFolderBackground#1A1826
  • statusBar.noFolderForeground#A6ACCD
  • statusBarItem.hoverBackground#2D2B3D
  • statusBarItem.prominentBackground#FF6AC1
  • statusBarItem.prominentHoverBackground#FF9AC1
  • statusBarItem.remoteBackground#FF6AC1
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#0C0B12
  • tab.activeBorderTop#FF6AC1
  • tab.activeForeground#E4F0FB
  • tab.border#080710
  • tab.hoverBackground#1A1826
  • tab.inactiveBackground#080710
  • tab.inactiveForeground#676E95
  • terminal.ansiBlack#1A1826
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#2D2B3D
  • terminal.ansiBrightBlue#9AC1FF
  • terminal.ansiBrightCyan#9AE5FF
  • terminal.ansiBrightGreen#72F1B8
  • terminal.ansiBrightMagenta#D4A0EA
  • terminal.ansiBrightRed#FF6AC1
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#A6E3A1
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#E4F0FB
  • terminal.ansiYellow#FAB387
  • terminal.background#0C0B12
  • terminal.foreground#E4F0FB
  • titleBar.activeBackground#080710
  • titleBar.activeForeground#E4F0FB
  • titleBar.inactiveBackground#080710
  • titleBar.inactiveForeground#676E95

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#FF6AC1—
comment, punctuation.definition.comment#676E95italic
comment keyword.codetag.notation, comment.block.documentation keyword, storage.type.class.jsdoc#C792EA—
comment.block.documentation variable.other, comment.block.documentation entity.name.type#89DDFFitalic
string#72F1B8—
punctuation.definition.string.begin, punctuation.definition.string.end#4CD4A0—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF6AC1—
meta.template.expression#E4F0FB—
constant, variable.other.constant#FFCB6B—
constant.numeric#C792EA—
constant.language.boolean#FF9AC1—
constant.language.null, constant.language.undefined#FF9AC1italic
keyword#FF6AC1—
storage.type, storage.modifier#FF6AC1italic
keyword.control#FF6AC1—
keyword.control.import, keyword.control.export, keyword.control.from#FF6AC1italic
entity.name.function, meta.function-call#82AAFF—
variable.parameter#FFCB6Bitalic
storage.type.function.arrow#FF6AC1—
entity.name.type.class, entity.name.class#89DDFFbold
entity.name.type.interface#89DDFFitalic
entity.name.type, support.type#89DDFFitalic
entity.name.type.parameter#FFCB6B—
variable#E4F0FB—
variable.language#FF9AC1italic
variable.other.property, meta.object-literal.key#A6ACCD—
entity.name.tag#FF6AC1—
entity.other.attribute-name#FFCB6Bitalic
string.quoted.double.html, string.quoted.single.html#72F1B8—
meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#89DDFF—
support.type.property-name.css#82AAFF—
support.constant.property-value.css, meta.property-value.css#FFCB6B—
keyword.other.unit.css#C792EA—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF6AC1—
keyword.operator#FF6AC1—
keyword.operator.comparison, keyword.operator.relational#89DDFF—
keyword.operator.logical#FF6AC1—
punctuation#A6ACCD—
punctuation.definition.block, meta.brace#A6ACCD—
string.regexp#FF9AC1—
punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#C792EA—
meta.decorator, punctuation.decorator#C792EA—
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown#FF6AC1bold
markup.bold#FFCB6Bbold
markup.italic#C792EAitalic
markup.underline.link, string.other.link#82AAFF—
markup.inline.raw, markup.fenced_code.block#72F1B8—
markup.quote#676E95italic
punctuation.definition.list.begin.markdown#FF6AC1—
support.type.property-name.json#FF6AC1—
string.quoted.double.json#72F1B8—
entity.name.tag.yaml#FF6AC1—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python#FF9AC1italic
support.function.builtin.python, support.type.python#82AAFF—
support.function.magic.python#C792EAitalic
entity.name.function.decorator.python, meta.function.decorator.python#C792EA—
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#676E95italic
constant.character.format.placeholder.other.python#FF6AC1—
punctuation.definition.lifetime.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust#FF9AC1italic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#C792EA—
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#89DDFF—
keyword.other.unsafe.rust#FF9AC1bold
storage.modifier.mut.rust#FF6AC1italic
entity.name.type.rust, entity.name.type.primitive.rust, support.type.primitive.rust#89DDFF—
entity.name.type.trait.rust#89DDFFitalic
keyword.other.impl.rust#FF6AC1italic
variable.language.self.rust#FF9AC1italic
entity.name.module.rust, entity.name.namespace.rust#89DDFF—
variable.language.this#FF9AC1italic
support.type.primitive.ts, support.type.builtin.ts#89DDFF—
entity.name.package.go#89DDFF—
support.function.builtin.go#82AAFF—
keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.conditional, meta.preprocessor#C792EA—
support.type.sys-types.c, support.type.sys-types.cpp, storage.type.built-in.c, storage.type.built-in.cpp#89DDFF—
invalid#FF9AC1underline
invalid.deprecated#676E95strikethrough
support.function#82AAFF—
support.class#89DDFF—
support.constant#FFCB6B—
entity.name#89DDFF—
entity.name.namespace, entity.name.module#89DDFF—