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#1D183D
  • activityBar.activeBorder#5EFBFD
  • activityBar.background#12112E
  • activityBar.border#12112E
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#8575D6
  • activityBarBadge.background#E6468B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E6468B
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#A7A4FF
  • breadcrumbPicker.background#1D183D
  • button.background#4C3F88
  • button.border#4C3F88
  • button.foreground#FFFFFF
  • button.hoverBackground#3A3271
  • button.secondaryBackground#2C2559
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#3A3271
  • checkbox.background#12112E
  • checkbox.foreground#FFEE80
  • contrastActiveBorder#FFFFFF00
  • contrastBorder#FFFFFF00
  • debugExceptionWidget.background#1D183D
  • debugExceptionWidget.border#A7A4FF
  • debugIcon.continueForeground#E6468B
  • debugIcon.disconnectForeground#E6468B
  • debugIcon.pauseForeground#E6468B
  • debugIcon.restartForeground#29E6A7
  • debugIcon.startForeground#E6468B
  • debugIcon.stepBackForeground#E6468B
  • debugIcon.stepIntoForeground#E6468B
  • debugIcon.stepOutForeground#E6468B
  • debugIcon.stepOverForeground#E6468B
  • debugIcon.stopForeground#E6468BF5
  • debugToolBar.background#1D183D
  • descriptionForeground#A7A4FF
  • diffEditor.insertedTextBackground#00ff000e
  • diffEditor.insertedTextBorder#29E6A79a
  • diffEditor.removedTextBackground#ff000d1a
  • diffEditor.removedTextBorder#ff000d81
  • dropdown.background#1D183D
  • dropdown.border#1D183D
  • dropdown.foreground#FFFFFF
  • editor.background#2C2559
  • editor.findMatchBackground#FFE15EAA
  • editor.findMatchHighlightBackground#F0922044
  • editor.findRangeHighlightBackground#F0922044
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#C9762D56
  • editor.inactiveSelectionBackground#8575D655
  • editor.lineHighlightBackground#241E49
  • editor.lineHighlightBorder#241E49
  • editor.linkedEditingBackground#7e46dfaa
  • editor.rangeHighlightBackground#4C3F8870
  • editor.selectionBackground#677ADA88
  • editor.selectionHighlightBackground#A7A4FF46
  • editor.snippetFinalTabstopHighlightBackground#3300ff62
  • editor.snippetFinalTabstopHighlightBorder#6943ff62
  • editor.snippetTabstopHighlightBackground#6943ff62
  • editor.snippetTabstopHighlightBorder#6943ff62
  • editor.wordHighlightBackground#ff00000d
  • editor.wordHighlightStrongBackground#FFFFFF0d
  • editorBracketMatch.background#ad70fc46
  • editorBracketMatch.border#ad70fc46
  • editorCodeLens.foreground#A7A4FF
  • editorCursor.foreground#FFFFFF
  • editorError.foreground#E6468Bf5
  • editorGroup.border#12112E
  • editorGroup.dropBackground#12112Ed0
  • editorGroupHeader.noTabsBackground#241E49
  • editorGroupHeader.tabsBackground#241E49
  • editorGroupHeader.tabsBorder#241E49
  • editorGutter.addedBackground#29E6A7
  • editorGutter.background#2C2559
  • editorGutter.deletedBackground#E6468Bf5
  • editorGutter.modifiedBackground#A7A4FF46
  • editorHoverWidget.background#161633
  • editorHoverWidget.border#161633
  • editorIndentGuide.activeBackground1#A7A4FF42
  • editorIndentGuide.background1#A7A4FF0f
  • editorLineNumber.activeForeground#A7A4FF
  • editorLineNumber.foreground#5F52A9
  • editorLink.activeForeground#A7A4FF
  • editorMarkerNavigation.background#3b536433
  • editorMarkerNavigationError.background#E6468Bf5
  • editorMarkerNavigationWarning.background#E6468B
  • editorOverviewRuler.border#A7A4FF1c
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#00946c55
  • editorRuler.foreground#A7A4FF1c
  • editorSuggestWidget.background#12112E
  • editorSuggestWidget.border#12112E
  • editorSuggestWidget.foreground#A7A4FF
  • editorSuggestWidget.highlightForeground#E6468B
  • editorSuggestWidget.selectedBackground#2C2559
  • editorUnnecessaryCode.border#7181D5
  • editorUnnecessaryCode.opacity#FFFFFFAA
  • editorWarning.border#FFFFFF00
  • editorWarning.foreground#E6468B
  • editorWhitespace.foreground#FFFFFF1a
  • editorWidget.background#12112E
  • editorWidget.border#12112E
  • errorForeground#E6468Bf5
  • extensionButton.border#A7A4FF
  • extensionButton.prominentBackground#4C3F88
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3A3271
  • focusBorder#1D183D
  • foreground#A7A4FF
  • gitDecoration.conflictingResourceForeground#C9762D
  • gitDecoration.deletedResourceForeground#E6468BF5
  • gitDecoration.ignoredResourceForeground#A7A4FF81
  • gitDecoration.modifiedResourceForeground#F09220
  • gitDecoration.untrackedResourceForeground#29E6A7
  • icon.foreground#A7A4FF
  • input.background#2C2559
  • input.border#1D183D
  • input.foreground#5EFBFD
  • input.placeholderForeground#A7A4FF
  • inputOption.activeBackground#5EFBFD
  • inputOption.activeBorder#5EFBFD
  • inputOption.activeForeground#000000
  • inputOption.hoverBackground#FFE15E
  • inputValidation.errorBackground#2C2559
  • inputValidation.errorBorder#E6468B
  • inputValidation.infoBackground#2C2559
  • inputValidation.infoBorder#2C2559
  • inputValidation.warningBackground#2C2559
  • inputValidation.warningBorder#E6468B
  • keybindingLabel.background#4C3F88
  • keybindingLabel.border#4C3F88
  • keybindingLabel.bottomBorder#4C3F88
  • keybindingLabel.foreground#FFFFFF
  • list.activeSelectionBackground#3A3271
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#2C2559
  • list.errorForeground#E6468B
  • list.focusBackground#2C2559
  • list.focusForeground#FFFFFF
  • list.highlightForeground#5EFBFD
  • list.hoverBackground#3A3271
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#3A3271
  • list.inactiveSelectionForeground#FFFFFF
  • list.warningForeground#C9762D
  • listFilterWidget.background#2C2559
  • listFilterWidget.noMatchesOutline#E6468BF5
  • listFilterWidget.outline#2C2559
  • menu.background#12112E
  • menu.foreground#FFFFFF
  • menu.selectionBackground#2C2559
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#4C3F88
  • merge.border#FFFFFF00
  • merge.commonContentBackground#A7A4FF81
  • merge.commonHeaderBackground#A7A4FF81
  • merge.currentContentBackground#29E6A793
  • merge.currentHeaderBackground#29E6A793
  • merge.incomingContentBackground#C9762D86
  • merge.incomingHeaderBackground#C9762D86
  • notificationCenter.border#1D183D
  • notificationCenterHeader.background#6943ff
  • notificationCenterHeader.foreground#FFFFFF
  • notificationLink.foreground#FFFFFF
  • notifications.background#1D183D
  • notifications.border#2C2559
  • notifications.foreground#cec5ff
  • notificationToast.border#4C3F88
  • panel.background#1D183D
  • panel.border#5EFBFD
  • panelTitle.activeBorder#5EFBFD
  • panelTitle.activeForeground#5EFBFD
  • panelTitle.inactiveForeground#8575D6
  • peekView.border#5EFBFD
  • peekViewEditor.background#1D183D
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#191935
  • peekViewResult.background#1D183D
  • peekViewResult.fileForeground#aaaaaa
  • peekViewResult.lineForeground#FFFFFF
  • peekViewResult.matchHighlightBackground#2C2559
  • peekViewResult.selectionBackground#2C2559
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#12112E
  • peekViewTitleDescription.foreground#aaaaaa
  • peekViewTitleLabel.foreground#5EFBFD
  • pickerGroup.border#1D183D
  • pickerGroup.foreground#A7A4FF
  • progressBar.background#5EFBFD
  • sash.hoverBorder#5EFBFD
  • scrollbar.shadow#A7A4FF81
  • scrollbarSlider.activeBackground#A7A4FF
  • scrollbarSlider.background#A7A4FF88
  • scrollbarSlider.hoverBackground#A7A4FFAA
  • selection.background#D18EFD
  • settings.checkboxBackground#1D183D
  • settings.checkboxBorder#1D183D
  • settings.checkboxForeground#e5e4fb
  • settings.dropdownBackground#1D183D
  • settings.dropdownBorder#1D183D
  • settings.dropdownForeground#e5e4fb
  • settings.dropdownListBorder#2C2559
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#5EFBFD
  • settings.numberInputBackground#1D183D
  • settings.numberInputBorder#1D183D
  • settings.numberInputForeground#e5e4fb
  • settings.textInputBackground#1D183D
  • settings.textInputBorder#1D183D
  • settings.textInputForeground#e5e4fb
  • sideBar.background#241E49
  • sideBar.border#241E49
  • sideBar.foreground#A7A4FF
  • sideBarSectionHeader.background#1D183D
  • sideBarSectionHeader.border#1D183D
  • sideBarSectionHeader.foreground#A7A4FF
  • sideBarTitle.foreground#A7A4FF
  • statusBar.background#12112E
  • statusBar.border#1D183D
  • statusBar.debuggingBackground#29E6A7
  • statusBar.debuggingForeground#1D183D
  • statusBar.foreground#A7A4FF
  • statusBar.noFolderBackground#1D183D
  • statusBar.noFolderForeground#A7A4FF
  • statusBarItem.activeBackground#4C3F88
  • statusBarItem.hoverBackground#4C3F88
  • statusBarItem.prominentBackground#1D183D
  • statusBarItem.prominentHoverBackground#2C2559
  • tab.activeBackground#2C2559
  • tab.activeBorder#5EFBFD
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#A7A4FF
  • tab.border#12112E
  • tab.inactiveBackground#241E49
  • tab.inactiveForeground#A7A4FF
  • tab.inactiveModifiedBorder#A7A4FF66
  • tab.unfocusedActiveForeground#8575D6
  • tab.unfocusedActiveModifiedBorder#8575D666
  • tab.unfocusedInactiveForeground#8575D6
  • tab.unfocusedInactiveModifiedBorder#8575D666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7181D5
  • terminal.ansiBrightBlack#5c5c61
  • terminal.ansiBrightBlue#B8D3FF
  • terminal.ansiBrightCyan#b0f4ff
  • terminal.ansiBrightGreen#29E6A7
  • terminal.ansiBrightMagenta#FF96F6
  • terminal.ansiBrightRed#FF6FAD
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE15E
  • terminal.ansiCyan#5EFBFD
  • terminal.ansiGreen#0FC49D
  • terminal.ansiMagenta#E75CC4
  • terminal.ansiRed#E6468B
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#F09220
  • terminal.background#1D183D
  • terminal.foreground#FFFFFF
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#FFFFFF
  • textBlockQuote.background#1D183D
  • textBlockQuote.border#5EFBFD
  • textCodeBlock.background#1D183D
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#29E6A7
  • textPreformat.foreground#5EFBFD
  • textSeparator.foreground#1D183D
  • titleBar.activeBackground#12112E
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#12112E
  • titleBar.inactiveForeground#A7A4FF
  • walkThrough.embeddedEditorBackground#1D183D
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7181D5
entity#B8D3FF
constant#FFEE80
constant.numeric, constant.language.python#E6468B
keyword, storage.type.class.js#FFEE80
meta#5EFBFD
invalid#E6468B
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#FFAAE1
punctuation#FFAAE1
punctuation.definition.template-expression#FFEE80
storage#FFAAE1
storage.type.function.arrow#FFAAE1
string, punctuation.definition.string#29E6A7
string.template, punctuation.definition.string.template#29E6A7
support#5EFBFD
support.function, support#FFEE80
support.variable.property.dom#5EFBFD
variable#FFFFFF
source.ini entity, meta.embedded.block.ini, source.ini#FFFFFF
source.ini keyword, keyword.other.definition.ini#FFAAE1
source.ini punctuation.definition#FFEE80
source.ini punctuation.separator, punctuation.separator.key-value.ini#FFEE80
source.css entity, source.stylus entity#29E6A7
entity.other.attribute-name.class.css#5EFBFD
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#FFEE80
entity.name.tag#5EFBFD
source.css support, entity.name.tag.css, source.stylus support#29E6A7
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#FFEE80
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#FFEE80
source.css variable, source.stylus variable#5EFBFD
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#5EFBFD
meta.toc-list.id.html#29E6A7
text.html.basic entity.other#FFAAE1
meta.tag.metadata.script.html entity.name.tag.html#FFAAE1
punctuation.definition.string.begin, punctuation.definition.string.end#29E6A7
meta.tag.inline.any.html, meta.tag.other#FFEE80
source.json support#B8D3FF
source.json string, source.json punctuation.definition.string#29E6A7
source.js storage.type.function#FFAAE1
variable.language, entity.name.type.class.js#FFAAE1
entity.other.inherited-class#FFEE80
storage.type.extends.js, storage.type.class.jsdoc#FFEE80
punctuation.definition.block.tag.jsdoc#FFEE80
variable.other.jsdoc, entity.name.type.instance.jsdoc#5EFBFD
variable.other.constant#5EFBFD
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#5EFBFD
meta.jsx.children.js#FFFFFF
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#7181D5italic bold
punctuation.definition.bracket.curly#7181D5
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#FFEE80
keyword.operator.assignment#FFAAE1
meta.jsx.children.tsx#FFFFFF
meta.object-literal.key.js#29E6A7
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js#5EFBFD
variable.other.property, variable.other.object.property#FFEE80
JSXNested#FFFFFF
variable.parameter#29E6A7
variable.parameter.function.language.special.self.python#5EFBFD
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#B8D3FF
punctuation.definition.decorator.python#FFAAE1bold
entity.name.function.decorator.python#FFAAE1bold
source.ts entity.name.type#80FFBB
source.ts keyword#FFAAE1
source.ts punctuation.definition.parameters#FFFFFF
meta.arrow.ts punctuation.definition.parameters#FFEE80
source.ts storage#5EFBFD
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FFAAE1bold
markup.inserted.diff, punctuation.definition.inserted.diff#29E6A7
markup.deleted.diff, punctuation.definition.deleted.diff#E6468B
meta.embedded.block.diff#FFFFFF
meta.paragraph.markdown#FFFFFF
punctuation.definition.from-file.diff, meta.diff.header.from-file#B8D3FF
markup.inline.raw.string.markdown#B8D3FF
beginning.punctuation.definition.quote.markdown#FFAAE1
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#B8D3FF
meta.separator.markdown#FFAAE1
markup.bold.markdownbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#FFAAE1
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown#29E6A7
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown#FFAAE1underline
markup.underline.link.markdown, string.other.link.description.title.markdown#B8D3FF
fenced_code.block.language, markup.inline.raw.markdown#5EFBFD
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#7181D5
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FFAAE1
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FFEE80
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#B8D3FF
text.jade entity.name#5EFBFD
storage.type.function.pug#FFEE80
variable.parameter.function.js#5EFBFD
variable.control.import.include.pug#29E6A7
text.jade string.interpolated#FFEE80
storage.type.cs#5EFBFD
entity.name.variable.property.cs#5EFBFD
storage.modifier.cs#29E6A7
source.php entity, variable.other.class.php#5EFBFD
keyword.other.phpdoc.php#FFEE80
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#FFAAE1
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#5EFBFD
storage.modifier.php, keyword.other.namespace.php#FFEE80
entity.name.tag.yaml#FFAAE1
punctuation.definition.block.sequence.item.yaml#FFFFFF
storage.type.function.php, meta.function.parameters.php#FFAAE1
keyword.blade#FFEE80
begin.bracket.round.blade.php, end.bracket.round.blade.php#FFFFFF
support.function.construct.begin.blade, support.function.construct.end.blade#FFEE80
keyword.package.go, keyword.import.go#FFEE80
keyword.function.go#FFAAE1
variable.other.assignment.go#5EFBFD
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#FFAAE1
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#FFEE80
variable.other.constant.ruby#80FFBB
entity.name.type.class.ruby#FFAAE1
variable.other.block.ruby, variable.other.ruby#5EFBFD
punctuation.separator.other.ruby#FFEE80
keyword.other.special-method.ruby#FFEE80
storage.type.function.shell#FFAAE1
variable.other.special.shell, punctuation.definition.variable.shell#FFEE80
variable.graphql#FFEE80
keyword.operation.graphql#FFAAE1
source.sql#FFFFFF
source.sql keyword.other, support.function.mysqli.php#FFEE80
support.function.mysqli.php, source.sql support.function#FFAAE1
string.regexp, string.regexp keyword.other#FFFFFF
keyword.other.DML.sql#FFEE80
punctuation.definition.table.array.toml#FFFFFF
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#FFEE80
keyword.key.toml#FFAAE1
keyword.other.special-method.dockerfile#FFAAE1
keyword.other.rust#FFEE80
keyword.other.fn.rust#FFAAE1
keyword.other.env#FFEE80
variable.other.env#FFAAE1
source.env#FFFFFF
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#FFEE80
variable.object.property#5EFBFD
string.regexp.js#FFAAE1
keyword.rainbow2#FFEE80
keyword.other.nim, keyword.other#FFEE80
keyword.boolean#E6468B
punctuation.pragma.start.nim, punctuation.pragma.end.nim, entity.name.function.nim#FFAAE1
markup.deleted#E6468B
markup.inserted#29E6A7
markup.underlineunderline
modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pugitalic bold
token.info-token#7181D5
token.warn-token#F09220
token.error-token#E6468B
token.debug-token#FF6FAD
omen by mikapika - VS Code Theme