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
emphasisitalic
strongbold
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.underlineunderline
markup.boldbold
markup.heading#ffffff
markup.italicitalic
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
Raiden Mei Theme by cryoimpact7 - VS Code Theme