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#E0EDFF
  • activityBar.activeBorder#4B5098
  • activityBar.background#C4D3FF
  • activityBar.border#C4D3FF
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#4B5098
  • activityBarBadge.background#D93A78
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D93A78
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#4B5098
  • breadcrumb.focusForeground#002E5C
  • breadcrumb.foreground#777DC4
  • breadcrumbPicker.background#D6E2FF
  • button.background#C4D3FF
  • button.border#C4D3FF
  • button.foreground#002E5C
  • button.hoverBackground#D6E2FF
  • button.secondaryBackground#F5FAFF
  • button.secondaryForeground#002E5C
  • button.secondaryHoverBackground#D6E2FF
  • checkbox.background#C4D3FF
  • checkbox.border#C4D3FF
  • checkbox.foreground#4B5098
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugExceptionWidget.background#D6E2FF
  • debugExceptionWidget.border#4B5098
  • debugIcon.continueForeground#D93A78
  • debugIcon.disconnectForeground#D93A78
  • debugIcon.pauseForeground#D93A78
  • debugIcon.restartForeground#009467
  • debugIcon.startForeground#D93A78
  • debugIcon.stepBackForeground#D93A78
  • debugIcon.stepIntoForeground#D93A78
  • debugIcon.stepOutForeground#D93A78
  • debugIcon.stepOverForeground#D93A78
  • debugIcon.stopForeground#D93A78F5
  • debugToolBar.background#D6E2FF
  • descriptionForeground#4B5098
  • diffEditor.insertedTextBackground#00ff000e
  • diffEditor.insertedTextBorder#00ff009a
  • diffEditor.removedTextBackground#ff000d1a
  • diffEditor.removedTextBorder#ff000d81
  • disabledForeground#878DD4
  • dropdown.background#D6E2FF
  • dropdown.border#C4D3FF
  • dropdown.foreground#4B5098
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFA146
  • editor.findMatchHighlightBackground#CF4F0044
  • editor.findRangeHighlightBackground#CF4F0044
  • editor.foreground#4B5098
  • editor.hoverHighlightBackground#ff730000
  • editor.inactiveSelectionBackground#D6E2FF88
  • editor.lineHighlightBackground#EBF3FF
  • editor.lineHighlightBorder#EBF3FF
  • editor.linkedEditingBackground#007D99
  • editor.rangeHighlightBackground#C4D3FF77
  • editor.selectionBackground#C4D3FF
  • editor.selectionHighlightBackground#C4D3FF77
  • editor.snippetFinalTabstopHighlightBackground#3300ff62
  • editor.snippetFinalTabstopHighlightBorder#6943ff62
  • editor.snippetTabstopHighlightBackground#6943ff62
  • editor.snippetTabstopHighlightBorder#6943ff62
  • editor.wordHighlightBackground#C4D3FF55
  • editor.wordHighlightStrongBackground#FFFFFF55
  • editorBracketMatch.background#ad70fc46
  • editorBracketMatch.border#ad70fc46
  • editorCodeLens.foreground#4B5098
  • editorCursor.foreground#4B5098
  • editorError.foreground#ec3a37f5
  • editorGroup.border#C4D3FF
  • editorGroup.dropBackground#C4D3FFd0
  • editorGroupHeader.noTabsBackground#E0EDFF
  • editorGroupHeader.tabsBackground#E0EDFF
  • editorGroupHeader.tabsBorder#E0EDFF
  • editorGutter.addedBackground#35ad68
  • editorGutter.background#F5FAFF
  • editorGutter.deletedBackground#C4D3FF
  • editorGutter.modifiedBackground#D6E2FF
  • editorHoverWidget.background#F5FAFF
  • editorHoverWidget.border#C4D3FF
  • editorHoverWidget.foreground#4B5098
  • editorHoverWidget.statusBarBackground#E0EDFF
  • editorIndentGuide.activeBackground1#E0EDFF
  • editorIndentGuide.background1#E0EDFF
  • editorLineNumber.activeForeground#3088DF
  • editorLineNumber.foreground#777DC4
  • editorLink.activeForeground#4B5098
  • editorMarkerNavigation.background#3b536433
  • editorMarkerNavigationError.background#ec3a37f5
  • editorMarkerNavigationWarning.background#D93A78
  • editorOverviewRuler.border#4B50981c
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#00946c55
  • editorRuler.foreground#4B50981c
  • editorSuggestWidget.background#EBF3FF
  • editorSuggestWidget.border#C4D3FF
  • editorSuggestWidget.focusHighlightForeground#00C7D1
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#0092B3
  • editorSuggestWidget.selectedBackground#FFFFFF
  • editorSuggestWidget.selectedForeground#000000
  • editorUnnecessaryCode.border#C4D3FF
  • editorUnnecessaryCode.opacity#FFFFFF99
  • editorWarning.border#D93A78
  • editorWarning.foreground#D93A78
  • editorWhitespace.foreground#4B509844
  • editorWidget.background#C4D3FF
  • editorWidget.border#C4D3FF
  • editorWidget.foreground#000000
  • errorForeground#D93A78
  • extensionButton.background#C4D3FF
  • extensionButton.foreground#4B5098
  • extensionButton.prominentBackground#C4D3FF
  • extensionButton.prominentForeground#4B5098
  • extensionButton.prominentHoverBackground#ED7728
  • focusBorder#C4D3FF
  • foreground#4B5098
  • gitDecoration.conflictingResourceForeground#F08C30
  • gitDecoration.deletedResourceForeground#D93A78
  • gitDecoration.ignoredResourceForeground#4B509888
  • gitDecoration.modifiedResourceForeground#ED7728
  • gitDecoration.untrackedResourceForeground#009467
  • icon.foreground#4B5098
  • input.background#F5FAFF
  • input.border#F5FAFF
  • input.foreground#4B5098
  • input.placeholderForeground#4B5098
  • inputOption.activeBackground#D93A78
  • inputOption.activeBorder#ff000000
  • inputOption.activeForeground#000000
  • inputOption.hoverBackground#ED7728
  • inputValidation.errorBackground#F5FAFF
  • inputValidation.errorBorder#D93A78
  • inputValidation.infoBackground#F5FAFF
  • inputValidation.infoBorder#F5FAFF
  • inputValidation.warningBackground#F5FAFF
  • inputValidation.warningBorder#D93A78
  • keybindingLabel.background#F5FAFF
  • keybindingLabel.border#F5FAFF
  • keybindingLabel.bottomBorder#F5FAFF
  • keybindingLabel.foreground#4B5098
  • list.activeSelectionBackground#D6E2FF
  • list.activeSelectionForeground#4B5098
  • list.dropBackground#F5FAFF
  • list.errorForeground#D93A78
  • list.focusBackground#EBF3FF
  • list.focusForeground#4B5098
  • list.highlightForeground#007D99
  • list.hoverBackground#EBF3FF
  • list.hoverForeground#4B5098
  • list.inactiveSelectionBackground#D6E2FF
  • list.inactiveSelectionForeground#4B5098
  • list.warningForeground#D93A78
  • listFilterWidget.background#F5FAFF
  • listFilterWidget.noMatchesOutline#ED7728
  • listFilterWidget.outline#F5FAFF
  • menu.background#EBF3FF
  • menu.foreground#4B5098
  • menu.selectionBackground#D6E2FF
  • menu.selectionForeground#4B5098
  • menu.separatorBackground#C4D3FF
  • merge.border#FFFFFF
  • merge.commonContentBackground#C4D3FF77
  • merge.commonHeaderBackground#C4D3FF77
  • merge.currentContentBackground#007D9977
  • merge.currentHeaderBackground#007D9977
  • merge.incomingContentBackground#ED772855
  • merge.incomingHeaderBackground#ED772855
  • notificationCenter.border#C4D3FF
  • notificationCenterHeader.background#E0EDFF
  • notificationCenterHeader.foreground#4B5098
  • notificationLink.foreground#007D99
  • notifications.background#FFFFFF
  • notifications.border#C4D3FF
  • notifications.foreground#4B5098
  • notificationsInfoIcon.foreground#4B5098
  • notificationToast.border#D6E2FF
  • panel.background#C4D3FF
  • panel.border#C4D3FF
  • panelTitle.activeBorder#006CD1
  • panelTitle.activeForeground#006CD1
  • panelTitle.inactiveForeground#4B5098
  • peekView.border#C4D3FF
  • peekViewEditor.background#C4D3FF
  • peekViewEditor.matchHighlightBackground#ED7728
  • peekViewEditorGutter.background#F5FAFF
  • peekViewResult.background#FFFFFF
  • peekViewResult.fileForeground#4B5098
  • peekViewResult.lineForeground#4B5098
  • peekViewResult.matchHighlightBackground#ED7728
  • peekViewResult.selectionBackground#C4D3FF
  • peekViewResult.selectionForeground#4B5098
  • peekViewTitle.background#C4D3FF
  • peekViewTitleDescription.foreground#4B5098
  • peekViewTitleLabel.foreground#D93A78
  • pickerGroup.border#D6E2FF
  • pickerGroup.foreground#4B5098
  • progressBar.background#D93A78
  • quickInput.background#C4D3FF
  • quickInput.foreground#4B5098
  • quickInputList.focusBackground#E0EDFF
  • quickInputList.focusForeground#4B5098
  • quickInputList.focusIconForeground#4B5098
  • sash.hoverBorder#00F7FF
  • scrollbar.shadow#C4D3FF
  • scrollbarSlider.activeBackground#777DC4
  • scrollbarSlider.background#C4D3FF
  • scrollbarSlider.hoverBackground#4B5098
  • selection.background#C4D3FF
  • settings.checkboxBackground#F5FAFF
  • settings.checkboxBorder#C4D3FF
  • settings.checkboxForeground#4B5098
  • settings.dropdownBackground#F5FAFF
  • settings.dropdownBorder#C4D3FF
  • settings.dropdownForeground#4B5098
  • settings.dropdownListBorder#C4D3FF
  • settings.headerForeground#4B5098
  • settings.modifiedItemIndicator#ED7728
  • settings.numberInputBackground#F5FAFF
  • settings.numberInputBorder#C4D3FF
  • settings.numberInputForeground#4B5098
  • settings.textInputBackground#F5FAFF
  • settings.textInputBorder#C4D3FF
  • settings.textInputForeground#4B5098
  • sideBar.background#E0EDFF
  • sideBar.border#E0EDFF
  • sideBar.foreground#4B5098
  • sideBarSectionHeader.background#C4D3FF
  • sideBarSectionHeader.border#C4D3FF
  • sideBarSectionHeader.foreground#4B5098
  • sideBarTitle.foreground#4B5098
  • statusBar.background#C4D3FF
  • statusBar.border#C4D3FF
  • statusBar.debuggingBackground#00F7FF
  • statusBar.debuggingForeground#002E5C
  • statusBar.foreground#4B5098
  • statusBar.noFolderBackground#C4D3FF
  • statusBar.noFolderForeground#4B5098
  • statusBarItem.activeBackground#C4D3FF
  • statusBarItem.hoverBackground#E0EDFF
  • statusBarItem.prominentBackground#D6E2FF
  • statusBarItem.prominentHoverBackground#E0EDFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#4B5098
  • tab.activeModifiedBorder#4B5098
  • tab.border#C4D3FF
  • tab.hoverBackground#F5FAFF
  • tab.inactiveBackground#E0EDFF
  • tab.inactiveForeground#4B5098
  • tab.inactiveModifiedBorder#C4D3FF
  • tab.unfocusedActiveForeground#4B5098
  • tab.unfocusedActiveModifiedBorder#C4D3FF
  • tab.unfocusedInactiveForeground#4B5098
  • tab.unfocusedInactiveModifiedBorder#C4D3FF
  • terminal.ansiBlack#4B5098
  • terminal.ansiBlue#3088DF
  • terminal.ansiBrightBlack#878DD4
  • terminal.ansiBrightBlue#48CEFF
  • terminal.ansiBrightCyan#00C7D1
  • terminal.ansiBrightGreen#00C78A
  • terminal.ansiBrightMagenta#FC5CA6
  • terminal.ansiBrightRed#FF6581
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFA146
  • terminal.ansiCyan#0092B3
  • terminal.ansiGreen#009467
  • terminal.ansiMagenta#D93A78
  • terminal.ansiRed#DB4350
  • terminal.ansiWhite#ACACAC
  • terminal.ansiYellow#ED7728
  • terminal.background#EBF3FF
  • terminal.foreground#FFFFFF
  • terminal.inactiveSelectionBackground#C4D3FF
  • terminal.selectionBackground#C4D3FF
  • terminalCursor.background#4B5098
  • terminalCursor.foreground#4B5098
  • textBlockQuote.background#D6E2FF
  • textBlockQuote.border#3088DF
  • textCodeBlock.background#D6E2FF
  • textLink.activeForeground#007D99
  • textLink.foreground#007D99
  • textPreformat.foreground#3088DF
  • textSeparator.foreground#C4D3FF
  • titleBar.activeBackground#C4D3FF
  • titleBar.activeForeground#4B5098
  • titleBar.inactiveBackground#D6E2FF
  • titleBar.inactiveForeground#777DC4
  • walkThrough.embeddedEditorBackground#D6E2FF
  • welcomePage.tileBackground#E0EDFF
  • widget.shadow#C4D3FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#878DD4
entity#3088DF
constant#ED7728bold
constant.numeric, constant.language.python#D93A78
keyword, storage.type.class.js#ED7728
meta#3088DF
invalid#D93A78
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#878DD4
punctuation#878DD4
punctuation.definition.template-expression#ED7728
storage#878DD4
storage.type.function.arrow#878DD4
string, punctuation.definition.string#009467italic
string.template, punctuation.definition.string.template#009467
support#FFA146
support.function#ED7728
support.variable.property.dom#3088DF
variable#878DD4
source.ini entity, meta.embedded.block.ini, source.ini#4B5098
source.ini keyword, keyword.other.definition.ini#878DD4
source.ini punctuation.definition#ED7728
source.ini punctuation.separator, punctuation.separator.key-value.ini#ED7728
source.css entity, source.stylus entity#009467
entity.other.attribute-name.class.css#3088DF
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#ED7728
entity.name.tag#3088DF
source.css support, entity.name.tag.css, source.stylus support#009467
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#ED7728
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#ED7728
source.css variable, source.stylus variable#3088DF
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#3088DF
meta.toc-list.id.html#009467
text.html.basic entity.other#878DD4
meta.tag.metadata.script.html entity.name.tag.html#878DD4
punctuation.definition.string.begin, punctuation.definition.string.end#009467
meta.tag.inline.any.html, meta.tag.other#ED7728
source.json support#878DD4
source.json string, source.json punctuation.definition.string#009467
source.js storage.type.function#878DD4
variable.language, entity.name.type.class.js#878DD4
entity.other.inherited-class#ED7728
storage.type.extends.js, storage.type.class.jsdoc#ED7728
punctuation.definition.block.tag.jsdoc#ED7728
variable.other.jsdoc, entity.name.type.instance.jsdoc#3088DF
variable.other.constant#3088DF
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#3088DF
meta.jsx.children.js#4B5098
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#878DD4italic bold
punctuation.definition.bracket.curly#878DD4
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#ED7728
keyword.operator.assignment#878DD4
meta.jsx.children.tsx#4B5098
meta.object-literal.key.js#009467
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#3088DF
variable.other.property, variable.other.object.property#ED7728
JSXNested#4B5098
variable.parameter, vairable.parameter.function.language.python#009467italic
variable.parameter.function.language.special.self.python#007D99
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#878DD4
punctuation.definition.decorator.python#FC5CA6bold
entity.name.function.decorator.python#FC5CA6bold
source.ts entity.name.type#00C78A
source.ts keyword#878DD4
source.ts punctuation.definition.parameters#4B5098
meta.arrow.ts punctuation.definition.parameters#ED7728
source.ts storage#3088DF
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#878DD4bold
markup.inserted.diff, punctuation.definition.inserted.diff#009467
markup.deleted.diff, punctuation.definition.deleted.diff#D93A78
meta.embedded.block.diff#4B5098
meta.paragraph.markdown#4B5098
punctuation.definition.from-file.diff, meta.diff.header.from-file#878DD4
markup.inline.raw.string.markdown#878DD4
beginning.punctuation.definition.quote.markdown#878DD4
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#878DD4
meta.separator.markdown#878DD4
markup.bold.markdownbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#878DD4
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#009467
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#878DD4underline
markup.underline.link.markdown, string.other.link.description.title.markdown#878DD4
fenced_code.block.language, markup.inline.raw.markdown#3088DF
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#878DD4
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#878DD4
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#ED7728
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#878DD4
text.jade entity.name#3088DF
storage.type.function.pug#ED7728
variable.parameter.function.js#3088DF
variable.control.import.include.pug#009467
text.jade string.interpolated#ED7728
storage.type.cs#3088DF
entity.name.variable.property.cs#3088DF
storage.modifier.cs#009467
source.php entity, variable.other.class.php#3088DF
keyword.other.phpdoc.php#ED7728
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#878DD4
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#3088DF
storage.modifier.php, keyword.other.namespace.php#ED7728
entity.name.tag.yaml#878DD4
punctuation.definition.block.sequence.item.yaml#4B5098
storage.type.function.php, meta.function.parameters.php#878DD4
keyword.blade#ED7728
begin.bracket.round.blade.php, end.bracket.round.blade.php#4B5098
support.function.construct.begin.blade, support.function.construct.end.blade#ED7728
keyword.package.go, keyword.import.go#ED7728
keyword.function.go#878DD4
variable.other.assignment.go#3088DF
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#878DD4
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#ED7728
variable.other.constant.ruby#00C78A
entity.name.type.class.ruby#878DD4
variable.other.block.ruby, variable.other.ruby#3088DF
punctuation.separator.other.ruby#ED7728
keyword.other.special-method.ruby#ED7728
storage.type.function.shell#878DD4
variable.other.special.shell, punctuation.definition.variable.shell#ED7728
variable.graphql#ED7728
keyword.operation.graphql#878DD4
source.sql#4B5098
source.sql keyword.other, support.function.mysqli.php#ED7728
support.function.mysqli.php, source.sql support.function#878DD4
string.regexp, string.regexp keyword.other#4B5098
keyword.other.DML.sql#ED7728
punctuation.definition.table.array.toml#4B5098
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#ED7728
keyword.key.toml#878DD4
keyword.other.special-method.dockerfile#878DD4
keyword.other.rust#ED7728
keyword.other.fn.rust#878DD4
keyword.other.env#ED7728
variable.other.env#878DD4
source.env#4B5098
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#ED7728
variable.object.property#3088DF
string.regexp.js#878DD4
keyword.rainbow2#ED7728
keyword.other.nim, keyword.other#ED7728
keyword.boolean#D93A78
punctuation.pragma.start.nim, punctuation.pragma.end.nim, entity.name.function.nim#878DD4
markup.deleted#D93A78
markup.inserted#009467
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#878DD4
token.warn-token#ED7728
token.error-token#D93A78
token.debug-token#FC5CA6