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#F9F9FB
  • activityBar.border#F0F0F4
  • activityBar.dropBorder#0061E0
  • activityBar.foreground#15141A
  • activityBar.inactiveForeground#5B5B66
  • activityBarBadge.background#0061E0
  • activityBarBadge.foreground#FBFBFE
  • badge.background#0061E0
  • badge.foreground#FBFBFE
  • breadcrumb.activeSelectionForeground#0061E0
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#15141A
  • breadcrumb.foreground#5B5B66
  • breadcrumbPicker.background#FFFFFF
  • button.background#0061E0
  • button.foreground#FBFBFE
  • button.hoverBackground#0250BB
  • button.secondaryBackground#E0E0E6
  • button.secondaryForeground#15141A
  • button.secondaryHoverBackground#CFCFD8
  • commandCenter.activeBackground#F0F0F4
  • commandCenter.activeForeground#15141A
  • commandCenter.background#FFFFFF
  • commandCenter.border#F0F0F4
  • commandCenter.foreground#5B5B66
  • contrastBorder#F0F0F4
  • debugExceptionWidget.background#FDF2F5
  • debugExceptionWidget.border#A4000F
  • debugToolBar.background#F9F9FB
  • debugToolBar.border#CFCFD8
  • descriptionForeground#5B5B66
  • diffEditor.insertedTextBackground#2AC3A233
  • diffEditor.removedTextBackground#A4000F33
  • dropdown.background#FFFFFF
  • dropdown.border#CFCFD8
  • dropdown.foreground#15141A
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFA436AA
  • editor.findMatchBorder#FFA436
  • editor.findMatchHighlightBackground#FFA43666
  • editor.findMatchHighlightBorder#FFA436AA
  • editor.findRangeHighlightBackground#E0E0E699
  • editor.foreground#15141A
  • editor.hoverHighlightBackground#E0E0E6AA
  • editor.inactiveSelectionBackground#B9D7FD99
  • editor.lineHighlightBackground#E8F2FF
  • editor.lineHighlightBorder#E8F2FF
  • editor.rangeHighlightBackground#E0E0E699
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#B9D7FD
  • editor.selectionHighlightBackground#E0E0E699
  • editor.selectionHighlightBorder#CFCFD8
  • editor.wordHighlightBackground#B9D7FD77
  • editor.wordHighlightBorder#CFCFD8
  • editor.wordHighlightStrongBackground#B9D7FD99
  • editor.wordHighlightStrongBorder#CFCFD8
  • editorBracketHighlight.foreground1#0061E0
  • editorBracketHighlight.foreground2#DD00A9
  • editorBracketHighlight.foreground3#A47F00
  • editorBracketHighlight.foreground4#058B00
  • editorBracketHighlight.foreground5#8000D7
  • editorBracketHighlight.foreground6#0074E8
  • editorBracketMatch.background#B9D7FD
  • editorBracketMatch.border#0061E0
  • editorCodeLens.foreground#5B5B66
  • editorCursor.foreground#0061E0
  • editorError.foreground#A4000F
  • editorGroup.border#F0F0F4
  • editorGroup.dropBackground#B9D7FD99
  • editorGroup.emptyBackground#F9F9FB
  • editorGroup.focusedEmptyBorder#0061E0
  • editorGroupHeader.noTabsBackground#F9F9FB
  • editorGroupHeader.tabsBackground#F9F9FB
  • editorGroupHeader.tabsBorder#F0F0F4
  • editorGutter.addedBackground#2AC3A2
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#A4000F
  • editorGutter.modifiedBackground#0061E0
  • editorHint.foreground#058B00
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#CFCFD8
  • editorHoverWidget.foreground#15141A
  • editorIndentGuide.activeBackground1#CFCFD8
  • editorIndentGuide.background1#CFCFD855
  • editorInfo.foreground#0061E0
  • editorInlayHint.background#F0F0F499
  • editorInlayHint.foreground#5B5B66
  • editorLightBulb.foreground#FFA436
  • editorLightBulbAutoFix.foreground#FFA436
  • editorLineNumber.activeForeground#15141A
  • editorLineNumber.foreground#5B5B66
  • editorLink.activeForeground#0061E0
  • editorMarkerNavigation.background#F9F9FB
  • editorMarkerNavigationError.background#FDF2F5
  • editorMarkerNavigationInfo.background#DEEAFC
  • editorMarkerNavigationWarning.background#FFF89E
  • editorOverviewRuler.addedForeground#2AC3A2
  • editorOverviewRuler.border#F0F0F4
  • editorOverviewRuler.bracketMatchForeground#2AC3A2
  • editorOverviewRuler.commonContentForeground#E0E0E6
  • editorOverviewRuler.currentContentForeground#2AC3A2
  • editorOverviewRuler.deletedForeground#A4000F
  • editorOverviewRuler.errorForeground#A4000F
  • editorOverviewRuler.findMatchForeground#FFA436CC
  • editorOverviewRuler.incomingContentForeground#0061E0
  • editorOverviewRuler.infoForeground#0061E0
  • editorOverviewRuler.modifiedForeground#0061E0
  • editorOverviewRuler.rangeHighlightForeground#0061E0BB
  • editorOverviewRuler.selectionHighlightForeground#0061E0CC
  • editorOverviewRuler.warningForeground#FFA436
  • editorOverviewRuler.wordHighlightForeground#0061E0BB
  • editorOverviewRuler.wordHighlightStrongForeground#0061E0CC
  • editorRuler.foreground#CFCFD8
  • editorStickyScroll.background#FFFFFF
  • editorStickyScrollHover.background#F0F0F4
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#CFCFD8
  • editorSuggestWidget.focusHighlightForeground#0061E0
  • editorSuggestWidget.foreground#15141A
  • editorSuggestWidget.highlightForeground#0061E0
  • editorSuggestWidget.selectedBackground#B9D7FD
  • editorSuggestWidget.selectedForeground#15141A
  • editorWarning.foreground#FFA436
  • editorWhitespace.foreground#CFCFD8
  • editorWidget.background#F9F9FB
  • editorWidget.border#CFCFD8
  • editorWidget.foreground#15141A
  • editorWidget.resizeBorder#0061E0
  • errorForeground#A4000F
  • extensionButton.background#0061E0
  • extensionButton.foreground#FBFBFE
  • extensionButton.hoverBackground#0250BB
  • focusBorder#0061E0
  • foreground#15141A
  • gitDecoration.addedResourceForeground#058B00
  • gitDecoration.conflictingResourceForeground#8000D7
  • gitDecoration.deletedResourceForeground#A4000F
  • gitDecoration.ignoredResourceForeground#5C5C5F88
  • gitDecoration.modifiedResourceForeground#0061E0
  • gitDecoration.renamedResourceForeground#0074E8
  • gitDecoration.stageDeletedResourceForeground#A4000F
  • gitDecoration.stageModifiedResourceForeground#0061E0
  • gitDecoration.untrackedResourceForeground#A47F00
  • icon.foreground#5B5B66
  • input.background#FFFFFF
  • input.border#CFCFD8
  • input.foreground#15141A
  • input.placeholderForeground#5B5B66
  • inputOption.activeBackground#0061E033
  • inputOption.activeBorder#0061E0
  • inputOption.activeForeground#15141A
  • inputValidation.errorBackground#FDF2F5
  • inputValidation.errorBorder#A4000F
  • inputValidation.errorForeground#A4000F
  • inputValidation.infoBackground#DEEAFC
  • inputValidation.infoBorder#0061E0
  • inputValidation.infoForeground#15141A
  • inputValidation.warningBackground#FFF89E
  • inputValidation.warningBorder#FFA436
  • inputValidation.warningForeground#15141A
  • list.activeSelectionBackground#B9D7FD
  • list.activeSelectionForeground#15141A
  • list.dropBackground#B9D7FD99
  • list.errorForeground#A4000F
  • list.focusBackground#B9D7FD
  • list.focusForeground#15141A
  • list.focusHighlightForeground#0061E0
  • list.highlightForeground#0061E0
  • list.hoverBackground#E0E0E6
  • list.hoverForeground#15141A
  • list.inactiveFocusBackground#E0E0E6
  • list.inactiveSelectionBackground#E0E0E6
  • list.inactiveSelectionForeground#15141A
  • list.invalidItemForeground#A4000F
  • list.warningForeground#A47F00
  • menu.background#FFFFFF
  • menu.border#F0F0F4
  • menu.foreground#15141A
  • menu.selectionBackground#E0E0E6
  • menu.selectionForeground#15141A
  • menu.separatorBackground#CFCFD8
  • menubar.selectionBackground#E0E0E6
  • menubar.selectionForeground#15141A
  • merge.border#F0F0F4
  • merge.commonContentBackground#E0E0E633
  • merge.commonHeaderBackground#E0E0E6AA
  • merge.currentContentBackground#2AC3A233
  • merge.currentHeaderBackground#2AC3A266
  • merge.incomingContentBackground#0061E033
  • merge.incomingHeaderBackground#0061E066
  • minimap.errorHighlight#A4000F
  • minimap.findMatchHighlight#FFA436CC
  • minimap.selectionHighlight#B9D7FDBB
  • minimap.selectionOccurrenceHighlight#B9D7FD99
  • minimap.warningHighlight#FFA436
  • notificationCenter.border#CFCFD8
  • notificationCenterHeader.background#F0F0F4
  • notificationCenterHeader.foreground#15141A
  • notificationLink.foreground#0061E0
  • notifications.background#FFFFFF
  • notifications.border#CFCFD8
  • notifications.foreground#15141A
  • notificationToast.border#CFCFD8
  • panel.background#F9F9FB
  • panel.border#F0F0F4
  • panel.dropBorder#0061E0
  • panelTitle.activeBorder#0061E0
  • panelTitle.activeForeground#15141A
  • panelTitle.inactiveForeground#5B5B66
  • peekView.border#0061E0
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#FFA43666
  • peekViewEditorGutter.background#FFFFFF
  • peekViewResult.background#F9F9FB
  • peekViewResult.fileForeground#15141A
  • peekViewResult.lineForeground#5B5B66
  • peekViewResult.matchHighlightBackground#FFA43666
  • peekViewResult.selectionBackground#B9D7FD
  • peekViewResult.selectionForeground#15141A
  • peekViewTitle.background#F0F0F4
  • peekViewTitleDescription.foreground#5B5B66
  • peekViewTitleLabel.foreground#15141A
  • pickerGroup.border#F0F0F4
  • pickerGroup.foreground#0061E0
  • progressBar.background#0061E0
  • scrollbar.shadow#15141A1A
  • scrollbarSlider.activeBackground#0061E0
  • scrollbarSlider.background#CFCFD877
  • scrollbarSlider.hoverBackground#CFCFD8
  • selection.background#B9D7FD
  • settings.checkboxBackground#FFFFFF
  • settings.checkboxBorder#CFCFD8
  • settings.checkboxForeground#15141A
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownBorder#CFCFD8
  • settings.dropdownForeground#15141A
  • settings.focusedRowBackground#E0E0E655
  • settings.focusedRowBorder#0061E0
  • settings.headerForeground#15141A
  • settings.modifiedItemIndicator#0061E0
  • settings.numberInputBackground#FFFFFF
  • settings.numberInputBorder#CFCFD8
  • settings.numberInputForeground#15141A
  • settings.textInputBackground#FFFFFF
  • settings.textInputBorder#CFCFD8
  • settings.textInputForeground#15141A
  • sideBar.background#F9F9FB
  • sideBar.border#F0F0F4
  • sideBar.dropBackground#B9D7FD99
  • sideBar.foreground#15141A
  • sideBarSectionHeader.background#F0F0F4
  • sideBarSectionHeader.border#F0F0F4
  • sideBarSectionHeader.foreground#15141A
  • sideBarTitle.foreground#15141A
  • statusBar.background#F9F9FB
  • statusBar.border#F0F0F4
  • statusBar.debuggingBackground#0061E0
  • statusBar.debuggingBorder#0061E0
  • statusBar.debuggingForeground#FBFBFE
  • statusBar.foreground#15141A
  • statusBar.noFolderBackground#F9F9FB
  • statusBar.noFolderBorder#F0F0F4
  • statusBar.noFolderForeground#15141A
  • statusBarItem.activeBackground#B9D7FD
  • statusBarItem.hoverBackground#E0E0E6
  • statusBarItem.prominentBackground#E0E0E6
  • statusBarItem.prominentHoverBackground#CFCFD8
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#0061E0
  • tab.activeForeground#0061E0
  • tab.border#F0F0F4
  • tab.hoverBackground#FFFFFF
  • tab.hoverForeground#0061E0
  • tab.inactiveBackground#F9F9FB
  • tab.inactiveForeground#5B5B66
  • tab.lastPinnedBorder#F0F0F4
  • tab.unfocusedActiveBorderTop#CFCFD8
  • tab.unfocusedActiveForeground#0061E0
  • tab.unfocusedHoverBackground#FFFFFF
  • tab.unfocusedInactiveForeground#5B5B66
  • terminal.ansiBlack#15141A
  • terminal.ansiBlue#0061E0
  • terminal.ansiBrightBlack#5B5B66
  • terminal.ansiBrightBlue#0074E8
  • terminal.ansiBrightCyan#0074E8
  • terminal.ansiBrightGreen#058B00
  • terminal.ansiBrightMagenta#DD00A9
  • terminal.ansiBrightRed#A4000F
  • terminal.ansiBrightWhite#FBFBFE
  • terminal.ansiBrightYellow#A47F00
  • terminal.ansiCyan#0074E8
  • terminal.ansiGreen#058B00
  • terminal.ansiMagenta#8000D7
  • terminal.ansiRed#A4000F
  • terminal.ansiWhite#F9F9FA
  • terminal.ansiYellow#A47F00
  • terminal.background#FFFFFF
  • terminal.foreground#15141A
  • terminal.selectionBackground#B9D7FD77
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#0061E0
  • textBlockQuote.background#F0F0F4
  • textBlockQuote.border#0061E0
  • textCodeBlock.background#F0F0F4
  • textLink.activeForeground#0250BB
  • textLink.foreground#0061E0
  • textPreformat.foreground#15141A
  • textSeparator.foreground#F0F0F4
  • titleBar.activeBackground#F9F9FB
  • titleBar.activeForeground#15141A
  • titleBar.border#F0F0F4
  • titleBar.inactiveBackground#F0F0F4
  • titleBar.inactiveForeground#5B5B66
  • walkThrough.embeddedEditorBackground#F9F9FB
  • welcomePage.background#FFFFFF
  • welcomePage.progress.foreground#0061E0
  • welcomePage.tileBackground#F9F9FB
  • welcomePage.tileHoverBackground#F0F0F4
  • widget.shadow#15141A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#38383D
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#38383D
comment, punctuation.definition.comment#5C5C5F88italic
comment markup.link#0060DF
string#003EAA
string.regexp, constant.character.escape.backslash.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp#003EAA
string.quoted, string.quoted.single, string.quoted.double#003EAA
string.template#003EAA
meta.template.expression#38383D
string.other.link#0060DF
string > source, string embedded#38383D
constant.numeric, constant.character.numeric#003EAA
meta.preprocessor#5C5C5F
meta.preprocessor.string#003EAA
meta.preprocessor.numeric#003EAA
constant.language.null, constant.language.undefined#DD00A9
constant.language.boolean, constant.language.boolean.true, constant.language.boolean.false#DD00A9
constant.language, support.constant, support.constant.math, support.constant.meta.property-value, support.constant.vendor.property-value#DD00A9
constant, constant.character, constant.other, constant.other.symbol#8000D7
constant.other.color, constant.other.color.rgb-value.hex.css#003EAA
constant.character.escape#0074E8
constant.regexp#003EAA
variable, variable.language, variable.interpolation#8000D7
variable.other.constant, variable.other.enummember, constant.variable#8000D7
variable.other.readwrite, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance#8000D7
variable.other.object, entity.name.type.module#8000D7
variable.parameter, variable.parameter.function, meta.definition.variable#0074E8
keyword, keyword.other.new, keyword.other.debugger, keyword.other.special-method#DD00A9
keyword.operator, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.relational, keyword.operator.ternary, keyword.control.operator#38383D
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.expression.in, keyword.operator.type#DD00A9
keyword.control, keyword.control.flow, keyword.control.at-rule.media.css#DD00A9
keyword.type#0074E8
storage#DD00A9
storage.type, storage.modifier.import, storage.modifier.package, storage.type.annotation, storage.type.primitive#DD00A9
storage.type.function.arrow#38383D
entity.name.class, entity.name.type#0074E8
entity.name.type.class, support.class#0074E8
entity.other.inherited-class#0074E8underline
entity.name.function#058B00italic bold
meta.function-call, meta.method-call, meta.method, variable.function#8000D7
meta.definition.function#0074E8
support.function, support.function.any-method#058B00
support.constant#DD00A9
support.type, support.class#0074E8
support.other.variable, support.variable, support.variable.dom#DD00A9
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property, support.variable.property.dom, support.type.property-name, meta.property-name#058B00
variable.other.constant.property#058B00
meta.structure.dictionary.key.python#058B00
meta.object.member#8000D7
meta.class#0074E8
meta.class.body#38383D
meta.require#0074E8
meta.separator#38383D
meta.tag#38383D
punctuation, meta.delimiter.period, meta.brace.round, meta.brace.square, meta.brace, meta.array, punctuation.accessor, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.block, punctuation.definition.function-parameters, punctuation.definition.method-parameters, punctuation.definition.parameters, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.separator, punctuation.separator.comma, punctuation.separator.arguments, punctuation.separator.key-value, punctuation.separator.continuation, punctuation.section.array, punctuation.terminator.expression, punctuation.terminator.statement#38383D
punctuation.definition.heading, punctuation.definition.identity#0074E8
punctuation.definition.bold#0074E8bold
punctuation.definition.italic#0074E8italic
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#38383D
punctuation.section.embedded.begin, punctuation.section.embedded.end#5C5C5F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#DD00A9
variable.language.this#DD00A9italic
variable.language.super#DD00A9italic
meta.decorator, entity.name.function.decorator, punctuation.decorator#DD00A9
entity.name.tag, entity.name.tag.custom#0074E8
punctuation.definition.tag#38383D
entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html, meta.tag.sgml.doctype.html#5C5C5Fitalic
meta.tag.structure.any.html#38383D
entity.other.attribute-name, entity.other.attribute-name.id, entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.localname.xml, entity.other.attribute-name.js#DD00A9
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.scss#0074E8
comment.block.html#5C5C5F88
punctuation.definition.string, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#003EAA
string.quoted.single.html, string.quoted.double.html, string.quoted.single.xml, string.quoted.double.xml#003EAA
meta.selector, meta.selector.css, entity.name.selector, entity.name.tag.css, entity.name.tag.scss#0074E8
meta.function.url.css, meta.property-value.css, support.constant.property-value.css, variable.parameter.url.css, keyword.other.unit, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.percentage.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.ch.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.s.css, keyword.other.unit.deg.css, keyword.other.unit.scss, keyword.other.unit.dppx.css, support.constant.media.css, constant.numeric.css, string.quoted.single.css, string.quoted.double.css#003EAA
constant.other.color.rgb-value.hex.css, constant.other.color, variable.parameter.url.css#003EAA
support.function.url.css, support.function.misc.css, support.function.transform.css, support.function.calc.css, meta.function.gradient.css, support.function.gradient.css#058B00
punctuation.terminator.rule.css, punctuation.separator.key-value.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.separator.list.comma.css, keyword.operator.pattern.css#38383D
support.type.vendor.property-name, support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name.media.css#058B00
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#DD00A9
keyword.operator.combinator.css#38383D
variable.css, variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#8000D7
support.type.property-name.json#058B00
string.quoted.double.json#003EAA
constant.numeric.json#003EAA
constant.language.json#DD00A9
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#38383D
markup.heading, markup.heading.setext, entity.name.section, entity.name.section.markdown#0074E8bold
markup.underline#0074E8underline
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted, markup.inserted.diff#058B00
markup.deleted, markup.deleted.diff#A4000F
markup.changed#0074E8
meta.link, meta.link.inline.markdown, markup.link, markup.underline.link, markup.underline.link.image#0060DF
meta.diff.header, meta.diff.header.from-file, meta.diff.header.to-file, meta.diff.header.git#5C5C5F
support.function.git-rebase#058B00
constant.sha.git-rebase#003EAA
markup.quote, markup.quote.markdown#DD00A9italic
markup.raw, markup.raw.block.markdown#003EAA
markup.inline.raw, markup.inline.raw.markdown, markup.inline.raw.string.markdown#003EAA
punctuation.definition.quote.begin.markdown#DD00A9
punctuation.definition.list, punctuation.definition.list.begin, punctuation.definition.list.begin.markdown, punctuation.definition.list.end#38383D
meta.paragraph.markdown#38383D
string.other.link.title.markdown, string.other.link.description.markdown#003EAA
markup.underline.link.markdown, markup.underline.link.image.markdown#0060DFitalic
punctuation.definition.heading.markdown#0074E8bold
invalid.deprecated#FFA436
invalid, invalid.illegal, invalid.broken, invalid.unimplemented#A4000F
entity.name.label#38383D
source.env, constant.numeric.env#38383D
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#38383D