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.activeBorder#ad366e
  • activityBar.background#01001f
  • activityBar.border#27266e
  • activityBar.foreground#f5f5ff
  • activityBar.inactiveForeground#c4c2fc
  • activityBarBadge.background#ad366e
  • activityBarBadge.foreground#ffffff
  • badge.background#ad366e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#f5f5ff
  • breadcrumb.focusForeground#ff87c0
  • breadcrumb.foreground#85beff
  • breadcrumbPicker.background#060530
  • button.background#1c1b75
  • button.border#01001f
  • button.foreground#ffffff
  • button.hoverBackground#ad366ecf
  • button.secondaryBackground#1c1b75
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#ad366ecf
  • commandCenter.activeBackground#ad366ecf
  • commandCenter.activeForeground#ffffff
  • commandCenter.background#060530
  • debugToolBar.background#01001f
  • diffEditor.insertedTextBackground#00900040
  • diffEditor.removedTextBackground#a0000040
  • disabledForeground#a1a1f7
  • dropdown.background#060530
  • dropdown.border#1c1b75
  • dropdown.foreground#f5f5ff
  • editor.background#01001f
  • editor.findMatchBackground#322ea670
  • editor.findMatchHighlightBackground#ad366e70
  • editor.findRangeHighlightBackground#322ea670
  • editor.foreground#f5f5ff
  • editor.inactiveSelectionBackground#121045
  • editor.lineHighlightBackground#1c1b75
  • editor.rangeHighlightBackground#ad366e88
  • editor.selectionBackground#1c1b75
  • editor.selectionHighlightBackground#322ea670
  • editor.wordHighlightBackground#ad366e60
  • editorBracketMatch.background#ad366e80
  • editorBracketMatch.border#ad366e
  • editorCodeLens.foreground#c4c2fc
  • editorCursor.foreground#ffffff
  • editorGroup.border#1c1b75
  • editorGroup.dropBackground#25375daa
  • editorGroup.emptyBackground#01001f
  • editorGroupHeader.tabsBackground#01001f
  • editorGroupHeader.tabsBorder#01001f
  • editorGutter.background#01001f
  • editorGutter.modifiedBackground#1c1b75
  • editorHoverWidget.background#01001f
  • editorHoverWidget.border#27266e
  • editorIndentGuide.background#1c1b54
  • editorLineNumber.activeForeground#c4c2fc
  • editorLineNumber.foreground#9b9bd4
  • editorLink.activeForeground#d3adff
  • editorOverviewRuler.border#27266e
  • editorOverviewRuler.bracketMatchForeground#ad366e
  • editorOverviewRuler.findMatchForeground#ad366e80
  • editorOverviewRuler.rangeHighlightForeground#322ea670
  • editorOverviewRuler.selectionHighlightForeground#322ea670
  • editorOverviewRuler.wordHighlightForeground#322ea670
  • editorOverviewRuler.wordHighlightStrongForeground#322ea670
  • editorRuler.foreground#ad366e70
  • editorWhitespace.foreground#1c1b54
  • editorWidget.background#060530
  • editorWidget.border#27266e
  • editorWidget.foreground#f5f5ff
  • editorWidget.resizeBorder#322ea6
  • errorForeground#ff6969
  • focusBorder#322ea6
  • foreground#f5f5ff
  • gitDecoration.addedResourceForeground#b0ffb0
  • gitDecoration.conflictingResourceForeground#ffd7b0
  • gitDecoration.deletedResourceForeground#ffd7b0
  • gitDecoration.ignoredResourceForeground#c0c0c0
  • gitDecoration.modifiedResourceForeground#ffffb0
  • gitDecoration.stageDeletedResourceForeground#ff9f9f
  • gitDecoration.stageModifiedResourceForeground#b0ffe5
  • gitDecoration.submoduleResourceForeground#b0d7ff
  • gitDecoration.untrackedResourceForeground#ffb1d8
  • icon.foreground#c4c2fc
  • input.background#060530
  • input.border#27266e
  • input.foreground#f5f5ff
  • input.placeholderForeground#a1a1f7
  • inputOption.activeBackground#1c1b75
  • inputOption.activeBorder#1c1b75
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#ad366ecf
  • keybindingLabel.background#01001f
  • keybindingLabel.border#01001f
  • keybindingLabel.bottomBorder#01001f
  • keybindingLabel.foreground#94fff6
  • list.activeSelectionBackground#322ea6
  • list.activeSelectionForeground#ffffff
  • list.deemphasizedForeground#c4c2fc
  • list.dropBackground#322ea6
  • list.errorForeground#ff9f9f
  • list.filterMatchBorder#ad366ecf
  • list.focusBackground#1c1b75
  • list.focusForeground#ffffff
  • list.highlightForeground#94fff6
  • list.hoverBackground#ad366ecf
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#1c1b75
  • list.inactiveSelectionBackground#1c1b75
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#ffa4a4
  • list.warningForeground#ffd7b0
  • listFilterWidget.background#ad366e
  • listFilterWidget.noMatchesOutline#ff0e13
  • listFilterWidget.outline#01001f
  • menu.background#121045
  • menu.border#27266e
  • menu.foreground#ffffff
  • menu.selectionBackground#ad366ecf
  • menu.selectionBorder#ad366e
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#01001f
  • menubar.selectionBackground#ad366ecf
  • menubar.selectionForeground#ffffff
  • merge.border#322ea6
  • minimap.findMatchHighlight#ad366ebb
  • minimap.selectionHighlight#ad366ebb
  • minimap.selectionOccurrenceHighlight#322ea6bb
  • notificationCenter.border#27266e
  • notifications.background#060530
  • notificationToast.border#121045
  • panel.background#060530
  • panel.border#27266e
  • panel.dropBorder#322ea6
  • panelSection.border#121045
  • panelTitle.activeBorder#ad366e
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#c4c2fc
  • peekView.border#27266e
  • peekViewEditor.background#060530
  • peekViewResult.background#060530
  • peekViewResult.fileForeground#f5f5ff
  • peekViewResult.lineForeground#f5f5ff
  • peekViewResult.selectionBackground#322ea6
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#01001f
  • peekViewTitleDescription.foreground#f5f5ff
  • peekViewTitleLabel.foreground#94fff6
  • pickerGroup.foreground#bbdaff
  • progressBar.background#ad366ebb
  • sash.hoverBorder#ad366ecf
  • scrollbar.shadow#27266e88
  • scrollbarSlider.activeBackground#322ea6
  • scrollbarSlider.background#322ea688
  • scrollbarSlider.hoverBackground#ad366ebb
  • searchEditor.findMatchBackground#ad366e70
  • searchEditor.findMatchBorder#ad366e16
  • selection.background#322ea6
  • settings.focusedRowBackground#1c1b75
  • settings.focusedRowBorder#322ea6
  • settings.headerForeground#f5f5ff
  • settings.rowHoverBackground#ad366ebb
  • sideBar.background#060530
  • sideBar.border#27266e
  • sideBar.foreground#f5f5ff
  • sideBarSectionHeader.background#01001f
  • sideBarSectionHeader.border#27266e
  • sideBarSectionHeader.foreground#94fff6
  • statusBar.background#121045
  • statusBar.border#27266e
  • statusBar.debuggingBackground#01001f
  • statusBar.focusBorder#322ea6
  • statusBar.foreground#f5f5ff
  • statusBar.noFolderBackground#01001f
  • statusBarItem.activeBackground#1c1b75
  • statusBarItem.hoverBackground#ad366ecf
  • tab.activeBackground#1c1b75
  • tab.activeBorder#ad366e
  • tab.activeBorderTop#1c1b75
  • tab.activeForeground#f5f5ff
  • tab.border#01001f
  • tab.hoverBackground#ad366ecf
  • tab.hoverBorder#ad366e
  • tab.hoverForeground#f5f5ff
  • tab.inactiveBackground#060530
  • tab.inactiveForeground#c4c2fc
  • tab.unfocusedActiveBorder#01001f
  • tab.unfocusedActiveForeground#c4c2fc
  • tab.unfocusedHoverBackground#ad366ecf
  • tab.unfocusedHoverForeground#f5f5ff
  • tab.unfocusedInactiveForeground#c4c2fc
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3e31f5
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#737cff
  • terminal.ansiBrightCyan#7fffff
  • terminal.ansiBrightGreen#6bff6b
  • terminal.ansiBrightMagenta#ff70ff
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff6b
  • terminal.ansiCyan#13d4d4
  • terminal.ansiGreen#21c221
  • terminal.ansiMagenta#d918b9
  • terminal.ansiRed#cc2929
  • terminal.ansiWhite#b2b2b2
  • terminal.ansiYellow#d6c315
  • terminal.background#01001f
  • terminal.foreground#ffffff
  • terminal.selectionBackground#322ea670
  • textBlockQuote.background#01001f
  • textBlockQuote.border#27266e
  • textCodeBlock.background#01001f
  • textLink.activeForeground#ff87c0
  • textLink.foreground#85beff
  • textPreformat.foreground#b3fa9d
  • textSeparator.foreground#27266e
  • titleBar.activeBackground#121045
  • titleBar.activeForeground#ffffff
  • titleBar.border#1c1b75
  • titleBar.inactiveBackground#060530
  • titleBar.inactiveForeground#c4c2fc
  • toolbar.activeBackground#ad366ecf
  • toolbar.hoverBackground#ad366ecf
  • tree.indentGuidesStroke#ad366ebb
  • tree.tableColumnsBorder#121045
  • tree.tableOddRowsBackground#060530
  • walkThrough.embeddedEditorBackground#01001f
  • widget.shadow#01001f
  • window.activeBorder#27266e
  • window.inactiveBorder#27266e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9b9bd4—
variable.parameter#f5f5ff—
entity.name.class, support.class#d3adff—
variable.language.this#8cc6ff—
entity.name.function.preprocessor, entity.name.other.preprocessor.macro.predefined#e5b2ff—
entity.name.function, keyword.other.special-method, support.function#94fff6—
variable.other.property.cpp, variable.other.property.js, variable.other.property.ts, support.type.property-name, variable.other.member#c0c0c0—
entity.name.type, support.type, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag#4DF0AF—
keyword.operator, keyword.operators, source.php.embedded.line#ff9cbe—
constant.character, constant.language, constant.other, support.constant#e5b2ff—
punctuation.definition.function.pointer.dereference, storage.modifier.pointer, punctuation.separator.pointer-access#ff9cbe—
constant.numeric, constant.other.color.rgb-value.hex#fff6a6—
string, constant.other.symbol#b3fa9d—
keyword#8cc6ff—
storage#8cc6ff—
meta.separator#f5f5ff—
punctuation.separator.comma, punctuation.other.comma, punctuation.other.period, punctuation.other.colon, punctuation.separator, punctuation.terminator#ffccb0—
punctuation.section.property-list.end.bracket.curly, punctuation.section.property-list.begin.bracket.curly#f5f5ff—
punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.arguments.begin.bracket.round, punctuation.section.arguments.end.bracket.round, punctuation.section.parens.begin.bracket.round, punctuation.section.parens.end.bracket.round, punctuation.definition.arguments.begin.bracket.round, punctuation.definition.arguments.end.bracket.round, meta.brace.round#f5f5ff—
punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.bracket.square, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, storage.modifier.array.bracket.square#ffccb0—
entity.other, meta.block#f5f5ff—
keyword.operators.immediate.ca65#e5b2ff—
constant.language.unnamed-label.ca65#FF9CBE—
keyword.mnemonic.general-purpose, keyword.core.masm#94fff6—
meta.function-call.c#f5f5ff—
support.type.sys-types.c, storage.type.c#8cc6ff—
punctuation.separator.dot-access.c#ff9cbe—
variable.other.macro.argument.cpp#f5f5ff—
meta.tail.enum.cpp, meta.tail.struct.cpp#4DF0AF—
entity.name.namespace.cpp, entity.name.scope-resolution.cpp#E5B2FF—
entity.name.function.operator.member, punctuation.separator.namespace.access.cpp, punctuation.separator.pointer-access.c#ff9cbe—
storage.modifier.reference.cpp#ff9cbe—
meta.template.definition.cpp#8cc6ff—
punctuation.section.angle-brackets.begin.template.call.cpp, punctuation.section.angle-brackets.end.template.call.cpp, punctuation.section.angle-brackets.begin.template.definition.cpp, punctuation.section.angle-brackets.end.template.definition.cpp#FF9CBE—
storage.source.cmake#e5b2ff—
constant.source.cmake#4DF0AF—
punctuation.definition.entity.css#FF9CBE—
support.constant.property-value.css#8cc6ff—
support.type.property-name.css#f5f5ff—
entity.name.tag.css#f5f5ff—
keyword.other.unit.percentage.css, keyword.other.unit.em.css, keyword.other.unit.ex.css, keyword.other.unit.cap.css, keyword.other.unit.ch.css, keyword.other.unit.ic.css, keyword.other.unit.rem.css, keyword.other.unit.lh.css, keyword.other.unit.rlh.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.vi.css, keyword.other.unit.vb.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css, keyword.other.unit.cm.css, keyword.other.unit.mm.css, keyword.other.unit.Q.css, keyword.other.unit.in.css, keyword.other.unit.pt.css, keyword.other.unit.pc.css, keyword.other.unit.px.css#FF9CBE—
variable.parameter.url.css#b3fa9d—
entity.name.tag.wildcard.css#FF9CBE—
punctuation.accessor.cs#ff9cbe—
constant.sha.git-rebase#e5b2ff—
entity.name.package.go#e5b2ff—
entity.other.attribute-name.html, entity.other.attribute-name.localname.html#8cc6ff—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html#ff9cbe—
meta.tag.any.html, meta.tag.inline.any.html, meta.tag.block.any.html, meta.tag.metadata.script.html, punctuation.separator.key-value.html#ff9cbe—
entity.name.section.group-title.ini#ff9cbe—
punctuation.separator.key-value.ini#ff9cbe—
punctuation.bracket.square.java#ffccb0—
punctuation.accessor.js#ff9cbe—
meta.brace.square.js, punctuation.separator.parameter.js#ffccb0—
support.type.property-name.json#f5f5ff—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#4DF0AF—
punctuation.separator.dictionary.key-value.json#ff9cbe—
punctuation.separator.dictionary.pair.json#ff9cbe—
punctuation.separator.array.json#ffccb0—
punctuation.separator.array.json#ffccb0—
log.date#94fff6—
log.debug#4DF0AF—
log.info#8cc6ff—
log.warning#ffccb0—
log.error#ff9cbe—
variable.other.makefile#f5f5ff—
punctuation.separator.key-value.makefile#ff9cbe—
markup.bold.markdown#e5b2ff—
punctuation.definition.raw.markdown#FF9CBE—
markup.inline.raw.string.markdown#4DF0AF—
markup.italic.markdown#fff6a6—
punctuation.definition.heading.markdown#8cc6ff—
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#8cc6ff—
punctuation.definition.quote.begin.markdown#8cc6ff—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ffccb0—
entity.name.section.markdown#94fff6—
meta.separator.markdown#ff9cbe—
punctuation.definition.variable.perl#ff9cbe—
source.powershell#f5f5ff—
punctuation.definition.variable.powershell#4DF0AF—
punctuation.section.bracket.begin.powershell, punctuation.section.bracket.end.powershell#ffccb0—
interpolated.simple.source.powershell#f5f5ff—
entity.other.attribute.parameter.powershell#ff9cbe—
keyword.other.statement-separator.powershell#ff9cbe—
support.constant.powershell, keyword.operator.math.powershell#fff6a6—
keyword.other.variable.definition.powershell#ff9cbe—
variable.other.normal.powershell#c0c0c0—
variable.other.powershell#e5b2ff—
variable.other.readwrite.powershell#f5f5ff—
keyword.other.powershell#ff9cbe—
storage.type.powershell#4DF0AF—
punctuation.definition.variable.php#f5f5ff—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#e5b2ff—
entity.name.type.namespace.php#f5f5ff—
storage.type.php#4DF0AF—
punctuation.definition.variable.php #ff9cbe—
variable.other.php#f5f5ff—
punctuation.separator.inheritance.php#ff9cbe—
support.class.php, support.other.namespace.php, support.class.builtin.php#4DF0AF—
punctuation.definition.list.begin.python, punctuation.definition.list.end.python#FFCCB0—
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.separator.period.python#ff9cbe—
meta.property-list.scss#FF9CBE—
variable.parameter.url.scss#b3fa9d—
punctuation.accessor.ts#ff9cbe—
meta.brace.square.ts, punctuation.separator.parameter.ts#ffccb0—
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#FF9CBE—
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#8cc6ff—
meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.tag.xml#ff9cbe—