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#ff00ff
  • activityBar.activeBorder#ff00f2
  • activityBar.activeFocusBorder#00f7ff
  • activityBar.background#360069
  • activityBar.border#ffffff
  • activityBar.inactiveForeground#fff173
  • activityBarBadge.background#a300ee
  • activityBarBadge.foreground#fdff6f
  • activityBarTop.inactiveForeground#ffffff
  • badge.background#d807b5
  • badge.foreground#ffffff
  • banner.background#000000
  • banner.foreground#ffffff
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#ff97e5
  • breadcrumb.background#420b6e
  • breadcrumb.focusForeground#fcf48c
  • breadcrumb.foreground#fcf48c
  • button.background#38047c
  • button.border#f8a7f1
  • button.foreground#ea97ff
  • button.separator#f8f07a
  • commandCenter.activeBackground#360069
  • commandCenter.activeForeground#fff9a4
  • commandCenter.background#350e7e
  • commandCenter.foreground#fff9a4
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#88fabb
  • debugToolBar.background#00212B
  • diffEditor.border#ffffff
  • diffEditor.insertedLineBackground#ff00ff9f
  • diffEditor.insertedTextBackground#2513223a
  • diffEditor.removedLineBackground#ff00009d
  • diffEditor.removedTextBackground#d1078eb2
  • dropdown.background#9804d3
  • dropdown.border#ffffff
  • editor.background#1a083a
  • editor.findMatchBackground#331870
  • editor.findMatchForeground#ffffff
  • editor.findMatchHighlightBackground#8210c4
  • editor.findMatchHighlightBorder#ffffff
  • editor.findMatchHighlightForeground#fa97fd
  • editor.foreground#f7f58b
  • editor.lineHighlightBackground#450086be
  • editor.lineHighlightBorder#ffffff
  • editor.selectionBackground#3c1975
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#6f30d69f
  • editor.wordHighlightBackground#331870
  • editor.wordHighlightStrongBackground#e741d9be
  • editorBracketHighlight.foreground1#be0f99
  • editorBracketHighlight.foreground2#9800df
  • editorBracketHighlight.foreground3#7b74da
  • editorBracketHighlight.foreground4#ffed46
  • editorCursor.foreground#ff9af2
  • editorGroup.border#f0f1f1
  • editorGroup.dropBackground#00000080
  • editorGroupHeader.tabsBackground#150047
  • editorHoverWidget.background#282038
  • editorInfo.foreground#ffffff
  • editorLineNumber.activeForeground#fff67d
  • editorLineNumber.dimmedForeground#3d343c
  • editorLineNumber.foreground#db70c4c4
  • editorOverviewRuler.background#5b209f
  • editorOverviewRuler.modifiedForeground#b01dff
  • editorWarning.foreground#ffb9e2
  • editorWidget.background#14002e
  • editorWidget.border#e4f076
  • errorForeground#ff0000
  • extensionButton.background#250855
  • extensionButton.foreground#f9b3ff
  • extensionButton.prominentBackgrounddefault
  • extensionButton.prominentForeground#ff00bf
  • extensionButton.separator#ffffff
  • extensionIcon.starForeground#e9f729
  • extensionIcon.verifiedForeground#aa09ca
  • focusBorder#4d4b4b02
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#ffffff
  • gitDecoration.conflictingResourceForeground#ff0008
  • gitDecoration.deletedResourceForeground#ff00006b
  • gitDecoration.modifiedResourceForeground#f75aa3
  • gitDecoration.stageModifiedResourceForeground#ffffff
  • gitDecoration.untrackedResourceForeground#f300fc
  • icon.foreground#fbfd72
  • input.background#180644
  • input.foreground#e584fd
  • input.placeholderForeground#f8f79c
  • inputOption.activeBackground#64148a
  • inputOption.activeBorder#ffffff
  • inputOption.activeForeground#ffa7e2
  • list.activeSelectionBackground#7716d2
  • list.activeSelectionForeground#e4f167
  • list.activeSelectionIconForeground#e4f167
  • list.dropBackground#b9258880
  • list.focusForeground#f3beef
  • list.focusHighlightForeground#faf49b
  • list.highlightForeground#ffffff
  • list.hoverBackground#f106061a
  • list.inactiveSelectionBackground#240144
  • list.inactiveSelectionForeground#e4f167
  • menu.background#260161
  • menu.border#ffffff
  • menu.foreground#fdff91
  • menu.selectionBackground#3c066e
  • menu.selectionBorder#f353e6
  • menu.selectionForeground#981bc9
  • menu.separatorBackground#ffffff
  • menubar.selectionBackground#000000
  • notificationCenter.border#ff94f1
  • notifications.background#2d0c69
  • notifications.border#000000
  • notifications.foreground#ffc6ff
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#683abe
  • notificationsWarningIcon.foreground#f3ef1d
  • notificationToast.border#ffffff
  • panel.background#2f0c5c
  • panel.border#ffffff
  • panelSection.dropBackground#000000
  • panelSectionHeader.background#fdff90
  • panelTitle.activeBorder#ff1fda
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#e591ff
  • peekView.border#000000
  • peekViewEditor.background#1b1525
  • peekViewResult.background#282038
  • peekViewResult.matchHighlightBackground#0e0909
  • peekViewTitle.background#221b2f
  • pickerGroup.border#9505a81a
  • pickerGroup.foreground#c40bc499
  • profileBadge.foreground#ffffff
  • scm.historyItemAdditionsForeground#ffffff
  • scrollbar.background#c19bfd
  • scrollbar.shadow#f805d0
  • scrollbarSlider.activeBackground#fb00ff
  • scrollbarSlider.background#f3fd5e
  • scrollbarSlider.hoverBackground#f3fd5e
  • selection.background#3d016e
  • settings.modifiedItemIndicator#f700ff
  • settings.textInputBackground#4a0366
  • settings.textInputForeground#fdff91
  • sideBar.background#351569
  • sideBar.border#ffffff
  • sideBar.foreground#f7a0ff
  • sideBarSectionHeader.background#421d88
  • sideBarSectionHeader.border#ffffff
  • sideBarSectionHeader.foreground#f4ff96
  • sideBarTitle.background#7e12c7
  • sideBarTitle.foreground#fbfd8f
  • statusBar.background#200650
  • statusBar.border#f8fafa
  • statusBar.debuggingBackground#d80707
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffbceb
  • statusBar.noFolderBackground#010102
  • statusBarItem.activeBackground#f302d3
  • statusBarItem.hoverBackground#d24fecb0
  • statusBarItem.hoverForeground#c19bfd
  • statusBarItem.remoteBackground#412780
  • statusBarItem.remoteForeground#fb7aff
  • tab.activeBackground#2b026d
  • tab.activeBorderTop#410449
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#db6693
  • tab.border#000000f3
  • tab.inactiveBackground#12012e
  • tab.inactiveForeground#ffffff
  • tab.selectedBackground#000000
  • tab.selectedForeground#ffffff
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#88444f
  • tab.unfocusedInactiveForeground#ffffff
  • tab.unfocusedInactiveModifiedBorder#5e0202
  • terminal.ansiBlack#fcfcfc
  • terminal.ansiBlue#a8eeff
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#aaf8fd
  • terminal.ansiBrightCyan#ffffff
  • terminal.ansiBrightGreen#ff61dd
  • terminal.ansiBrightRed#ff00f2
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#6d03f7
  • terminal.ansiGreen#c7a3ff
  • terminal.ansiMagenta#f94cff
  • terminal.ansiRed#f800f8
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#9cc7f8
  • terminal.background#1a052e
  • terminal.findMatchBackground#f3fd5e
  • terminal.findMatchBorder#f3fd5e
  • terminal.findMatchHighlightBorder#f3fd5e
  • terminal.foreground#f0ff68
  • terminalCursor.foreground#fcf162
  • textLink.activeForeground#d82fe7
  • textLink.foreground#f5f5f5
  • titleBar.activeBackground#380e68
  • titleBar.activeForeground#f7f8ae
  • titleBar.border#f2ffb7
  • titleBar.inactiveBackground#300661
  • titleBar.inactiveForeground#ffffff
  • welcomePage.background#3c0752
  • welcomePage.tileBackground#000000
  • welcomePage.tileBorder#ffffff
  • welcomePage.tileHoverBackground#ff0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
meta.diff.header#df0c0c—
comment#868b96—
constant.regexp#8e09a8—
entity.name.tag#9649ee—
entity.name.tag.css#dab2f1—
entity.other.attribute-name#ff7df9—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#e60baf—
invalid#f50000—
markup.underline—underline
markup.bold—bold
markup.heading#ffffff—
markup.italic—italic
markup.inserted#ffffff—
markup.deleted#fd4040—
markup.changed#d8db17—
meta.selector#e92abf—
punctuation.definition.tag#e236f1—
meta.preprocessor#ad0057—
meta.preprocessor.string#d015ff—
meta.preprocessor.numeric#7700d8—
meta.structure.dictionary.key.python#cb19e2—
storage#8ce1f7—
storage.type#ffffff—
storage.modifier#a3d9fde5—
string#918ff0—
string.tag#803b86—
string.value#9c231f—
string.regexp#e205a0—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#ffffff—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#f54f8e—
keyword#ff00b3—
keyword.control#e2357d—
keyword.operator#ffed88—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#e100ff—
keyword.other.unit#9c187b—
support.function.git-rebase#e415c8—
constant.sha.git-rebase#581081—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#9478a1—
variable.language.this#6200ff—
entity.name.function, support.function, support.constant.handlebars#fdf8a9—
entity.name.function.python#eb10ffbold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#ee82fc—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#ce00bd—
keyword.control#86d9ff—
meta.object-literal.key, meta.object-literal.key entity.name.function#af3bb3—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#ffffff—
source.json meta.structure.dictionary.json support.type.property-name.json#e2f58e—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f3fa92—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d15dff—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b42478—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fbbbfd—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5d1c9b—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b42478—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f0e224—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b00ff0—
text.html.markdown, punctuation.definition.list_item.markdown, meta.paragraph.markdown#c300ff—
text.html.markdown markup.inline.raw.markdown#ffffff—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#b398f1—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#d40d99—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator.new.ts, meta.object-literal.key.ts#f79cff—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #ae6afc—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, variable.object.property.ts#f5ea8b—
meta.function-call.generic.python#f7f7f7—
support.type#f3fa8b—
constant.character.escape#f3cce9—
variable.language#f1c2ffitalic
string.quoted.single, string.quoted.triple#9ccefdbold
support.variable, constant.numeric, support.constant#f4ff90bold
variable, meta.definition.variable.name, support.variable#f01bf0—
support.type.exception#ff0000—
comment.line.double-slash.cs, comment.block.cs, punctuation.definition.comment.json.comments, comment.line.double-slash.js, meta.structure.array.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments, source.json.comments, comment.block.css, comment.block.html, meta.property-list.css, comment.line.number-sign.python, punctuation.definition.comment.cs, comment.block.documentation.cs, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.line.scss, comment.block.ts, comment.block.scss, comment.block.documentation.ts, comment.line.double-slash.tsx, comment.block.tsx#868b96—