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#ff0000
  • activityBar.activeBorder#ffffff
  • activityBar.background#000000
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#e70000
  • activityBarTop.inactiveForeground#ffffff
  • badge.background#d807b5
  • badge.foreground#ffffff
  • banner.background#000000
  • banner.foreground#ffffff
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • button.background#000000
  • button.border#ffffff
  • button.foreground#ee008b
  • button.separator#ffffff
  • commandCenter.activeBackground#000000
  • commandCenter.activeForeground#ffffff
  • commandCenter.background#000000
  • commandCenter.foreground#ffffff
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#88fabb
  • debugToolBar.background#00212B
  • diffEditor.border#ffffff
  • diffEditor.insertedLineBackground#7e077e9f
  • diffEditor.insertedTextBackground#ff00004b
  • diffEditor.removedLineBackground#ff000060
  • diffEditor.removedTextBackground#d1078eb2
  • dropdown.background#9804d3
  • dropdown.border#ffffff
  • editor.background#08000a
  • editor.findMatchBackground#2c0a1f
  • editor.findMatchForeground#ffffff
  • editor.findMatchHighlightBackground#c41064
  • editor.findMatchHighlightBorder#ffffff
  • editor.findMatchHighlightForeground#fa97fd
  • editor.foreground#e58bf7
  • editor.lineHighlightBackground#49002b
  • editor.lineHighlightBorder#ffffff
  • editor.selectionBackground#650072
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#b30fc99f
  • editor.wordHighlightBackground#4f1b53
  • editor.wordHighlightStrongBackground#e741d9be
  • editorBracketHighlight.foreground1#fd00c6
  • editorBracketHighlight.foreground2#df0016
  • editorBracketHighlight.foreground3#f30317
  • editorBracketHighlight.foreground4#ffed46
  • editorCursor.foreground#ff0000
  • editorGroup.border#f0f1f1
  • editorGroup.dropBackground#00000080
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#282038
  • editorInfo.foreground#ffffff
  • editorLineNumber.activeForeground#ce0172
  • editorLineNumber.dimmedForeground#3d343c
  • editorLineNumber.foreground#661053
  • editorOverviewRuler.background#ff0000
  • editorOverviewRuler.modifiedForeground#ffffff
  • editorWarning.foreground#ffb9e2
  • editorWidget.background#000000
  • editorWidget.border#ffffff
  • errorForeground#ff0000
  • extensionButton.background#000000
  • extensionButton.foreground#ca147e
  • extensionButton.prominentBackgrounddefault
  • extensionButton.prominentForeground#ff00bf
  • extensionButton.separator#ffffff
  • extensionIcon.starForeground#e9f729
  • extensionIcon.verifiedForeground#f30c8b
  • focusBorder#ff0000
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#ffffff
  • gitDecoration.conflictingResourceForeground#ff0008
  • gitDecoration.deletedResourceForeground#ff00006b
  • gitDecoration.modifiedResourceForeground#f75aa3
  • gitDecoration.stageModifiedResourceForeground#ffffff
  • gitDecoration.untrackedResourceForeground#f300fc
  • icon.foreground#ffffff
  • input.background#1a0025
  • input.foreground#fca9e0
  • input.placeholderForeground#ff0000
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#ffffff
  • inputOption.activeForeground#ff00aa
  • list.activeSelectionBackground#00000080
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#ff0000
  • list.dropBackground#b9258880
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#ff0000
  • list.highlightForeground#ffffff
  • list.hoverBackground#f106061a
  • list.inactiveSelectionBackground#1d1d1d
  • menu.border#14011a
  • menu.foreground#ffffff
  • menu.selectionBackground#000000
  • menu.selectionBorder#b90202
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#ffffff
  • menubar.selectionBackground#000000
  • notificationCenter.border#ffffff
  • notifications.border#000000
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#f800e3
  • notificationsWarningIcon.foreground#f3ef1d
  • notificationToast.border#ffffff
  • panel.background#000000
  • panel.border#ffffff
  • panelSection.dropBackground#000000
  • panelSectionHeader.background#ffffff
  • panelTitle.activeBorder#99031780
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#fa0000
  • 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.shadow#f805d0
  • scrollbarSlider.activeBackground#f3fd5e
  • scrollbarSlider.background#cfcfcf
  • scrollbarSlider.hoverBackground#f3fd5e
  • selection.background#3d016e
  • settings.modifiedItemIndicator#e91fb6
  • settings.textInputBackground#1a0025
  • settings.textInputForeground#ee66cc
  • sideBar.background#0c0311
  • sideBar.border#ffffff
  • sideBar.foreground#f7a9f7
  • sideBarSectionHeader.background#0e000c
  • sideBarSectionHeader.border#ffffff
  • sideBarSectionHeader.foreground#f363cf
  • sideBarTitle.background#000000
  • sideBarTitle.foreground#f577e0
  • statusBar.background#ff0000
  • statusBar.border#f8fafa
  • statusBar.debuggingBackground#d80707
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#010102
  • statusBarItem.activeBackground#f302d3
  • statusBarItem.hoverBackground#f501011a
  • statusBarItem.remoteBackground#c01d6f
  • statusBarItem.remoteForeground#ececec
  • tab.activeBackground#300202
  • tab.activeBorderTop#410449
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#db6693
  • tab.border#000000f3
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#b0b1b0
  • tab.selectedBackground#000000
  • tab.selectedForeground#ffffff
  • tab.unfocusedActiveBackground#2c0130
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#88444f
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#ffffff
  • tab.unfocusedInactiveModifiedBorder#5e0202
  • terminal.ansiBlack#fcfcfc
  • terminal.ansiBlue#ec0eec
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#f80000
  • terminal.ansiBrightCyan#ff37c3
  • terminal.ansiBrightGreen#fafafa
  • terminal.ansiBrightWhite#e60b0b
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#f703ae
  • terminal.ansiGreen#ffffff
  • terminal.ansiWhite#f70707
  • terminal.ansiYellow#ff0000
  • terminal.background#000000
  • terminal.findMatchBackground#f3fd5e
  • terminal.findMatchBorder#f3fd5e
  • terminal.findMatchHighlightBorder#f3fd5e
  • terminal.foreground#c212da
  • terminalCursor.foreground#d60404
  • textLink.activeForeground#d82fe7
  • textLink.foreground#f5f5f5
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.border#ffffff
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#ffffff
  • welcomePage.background#12021a
  • 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#c21cd1
storage.type#ffffff
storage.modifier#e408e4e5
string#e877ff
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#a00505
keyword.control#e2357d
keyword.operator#c22626
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#f30000
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#f7066a
entity.name.function, support.function, support.constant.handlebars#fff346
entity.name.function.python#ee04bbbold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#b40557
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#ce00bd
keyword.control#e900d5
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#a429f7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fa6bff
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#ff0000
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#fa6bff
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#a20ec7
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#ffee59
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #ff95fa
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#ff5faa
meta.function-call.generic.python#c300ff
support.type#eb5299
constant.character.escape#f3cce9
variable.language#a12f68italic
string.quoted.single, string.quoted.triple#861e8abold
support.variable, constant.numeric, support.constant#ffffffbold
variable, meta.definition.variable.name, support.variable#fa5eb9
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