Skip to main content
CodingTheme

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#122142
  • activityBar.activeBorder#142f60
  • activityBar.background#131722
  • activityBar.border#2a2e39
  • activityBar.foreground#1f53e4
  • activityBar.inactiveForeground#7A7A7A
  • activityBarBadge.background#1e53e5
  • activityBarBadge.foreground#D1D4DC
  • badge.background#1e53e5
  • badge.foreground#D1D4DC
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#131722
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#d1d4d2
  • breadcrumbPicker.background#191d2e
  • button.background#1E263AFF
  • button.border#424751
  • button.foreground#D1D4DC
  • button.hoverBackground#122142
  • button.secondaryBackground#1E263AFF
  • button.secondaryForeground#D1D4DC
  • button.secondaryHoverBackground#122142
  • checkbox.background#1e222d
  • checkbox.border#2a2e39
  • checkbox.foreground#d1d4dc
  • checkbox.selectBackground#2962ff
  • commandCenter.activeBackground#1e222d
  • commandCenter.activeBorder#0b0d13
  • commandCenter.activeForeground#d1d4d2
  • commandCenter.border#0b0d13
  • commandCenter.foreground#d1d4d2
  • commandCenter.inactiveBorder#0b0d13
  • commandCenter.inactiveForeground#d1d4d2
  • debugExceptionWidget.background#131722
  • debugExceptionWidget.border#2a2e39
  • debugToolBar.background#131722
  • diffEditor.insertedTextBackground#44ff4417
  • diffEditor.insertedTextBorder#3b471b00
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef535000
  • dropdown.background#131722
  • dropdown.border#2a2e39
  • dropdown.foreground#D1D4DC
  • dropdown.listBackground#1e222d
  • editor.background#131722
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#444548a4
  • editor.findRangeHighlightBackground#444548a4
  • editor.foreground#ffffffd5
  • editor.hoverHighlightBackground#182537
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#132042
  • editor.rangeHighlightBackground#1c202b
  • editor.selectionBackground#444548d3
  • editor.selectionHighlightBackground#4f5051
  • editor.wordHighlightBackground#444548a4
  • editor.wordHighlightStrongBackground#444548
  • editor.wordHighlightStrongBorder#142e61
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#aeafad
  • editorError.background#0a22ff00
  • editorError.border#72747700
  • editorError.foreground#704040
  • editorGhostText.background#00000000
  • editorGhostText.border#027f8300
  • editorGhostText.foreground#A3A5A796
  • editorGroup.border#2a2e39
  • editorGroup.dropBackground#1e53e552
  • editorGroup.emptyBackground#131623
  • editorGroup.focusedEmptyBorder#1e53e5
  • editorGroupHeader.border#2a2e39
  • editorGroupHeader.noTabsBackground#191d2e
  • editorGroupHeader.tabsBackground#131722
  • editorGroupHeader.tabsBorder#72747700
  • editorGutter.addedBackground#089950
  • editorGutter.background#191d2e00
  • editorGutter.deletedBackground#f23645
  • editorGutter.modifiedBackground#1e53e5
  • editorHoverWidget.background#1e232c
  • editorHoverWidget.border#3b4048
  • editorHoverWidget.foreground#dedededf
  • editorHoverWidget.highlightForeground#42bda8
  • editorHoverWidget.statusBarBackground#01fdba00
  • editorIndentGuide.activeBackground1#7C899C
  • editorIndentGuide.background1#3b4048
  • editorInlayHint.background#272c36
  • editorInlayHint.foreground#d1d4d2
  • editorLightBulb.foreground#1e53e5
  • editorLightBulbAi.foreground#5de700
  • editorLightBulbAutoFix.foreground#1e53e5
  • editorLineNumber.activeForeground#b3b5bf
  • editorLineNumber.foreground#787b86
  • editorLink.activeForeground#D1D4DC
  • editorMarkerNavigation.background#1e2227
  • editorMarkerNavigationError.background#ef5350
  • editorMarkerNavigationWarning.background#ffca28
  • editorOverviewRuler.bracketMatchForeground#d1d4d2
  • editorOverviewRuler.commonContentForeground#00574d
  • editorOverviewRuler.currentContentForeground#00574d
  • editorOverviewRuler.findMatchForeground#d1d4d279
  • editorOverviewRuler.incomingContentForeground#00574d
  • editorOverviewRuler.wordHighlightTextForeground#FFFF3253
  • editorRuler.foreground#d1d4d226
  • editorStickyScroll.background#303851
  • editorSuggestWidget.background#20242EF5
  • editorSuggestWidget.border#2a2e39
  • editorSuggestWidget.focusHighlightForeground#077bff
  • editorSuggestWidget.foreground#AEAEAE
  • editorSuggestWidget.highlightForeground#077bff
  • editorSuggestWidget.selectedBackground#13335CC0
  • editorSuggestWidget.selectedForeground#ffffff
  • editorSuggestWidget.selectedIconForeground#ffffff
  • editorSuggestWidgetStatus.foreground#1e53e5
  • editorWarning.border#ffe92700
  • editorWarning.foreground#407040
  • editorWhitespace.foreground#33333300
  • editorWidget.background#1e222d
  • editorWidget.border#0d1017
  • editorWidget.foreground#c1c4cd
  • errorForeground#f33645
  • extensionButton.prominentBackground#252831
  • extensionButton.prominentForeground#D1D4DC
  • extensionButton.prominentHoverBackground#D1D4DC
  • focusBorder#a3a5a75b
  • foreground#d1d4d2
  • input.background#1e222d
  • input.border#50535e
  • input.foreground#d1d4d2
  • input.placeholderForeground#757575
  • inputOption.activeBorder#2962ff
  • inputValidation.errorBackground#ab0300f2
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#00589ef2
  • inputValidation.infoBorder#64b5f6
  • inputValidation.warningBackground#675700f2
  • inputValidation.warningBorder#ffca28
  • list.activeSelectionBackground#2a2e39
  • list.activeSelectionForeground#d1d4d2
  • list.focusBackground#0d3780
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2a2e39
  • list.hoverForeground#d1d4d2
  • list.inactiveSelectionBackground#2a2e39
  • list.inactiveSelectionForeground#d1d4d2
  • list.warningForeground#e17518
  • listFilterWidget.shadow#0d1017
  • menu.background#1e222d
  • menu.border#10131d
  • menu.foreground#d1d4d2
  • menu.separatorBackground#343a45
  • merge.border#3a3a3a
  • merge.commonContentBackground#00c0aa1f
  • merge.commonHeaderBackground#00ad9949
  • merge.currentContentBackground#ffd5182a
  • merge.currentHeaderBackground#ffd5183b
  • merge.incomingContentBackground#2962ff27
  • merge.incomingHeaderBackground#2962ff42
  • minimap.background#131623
  • minimap.findMatchHighlight#ab7a31
  • minimap.selectionHighlight#3c5671
  • minimapSlider.activeBackground#747d9180
  • minimapSlider.background#4e566660
  • minimapSlider.hoverBackground#5a637580
  • panel.background#131722
  • panel.border#2a2e39
  • panelInput.border#2962ff
  • panelSectionHeader.background#2a2e39
  • panelTitle.activeBorder#2a2e39
  • panelTitle.activeForeground#D1D4DC
  • panelTitle.inactiveForeground#d1d4d280
  • peekView.border#2a2e39
  • peekViewEditor.background#30343b
  • peekViewEditor.matchHighlightBackground#222a2e
  • peekViewResult.background#191d2e
  • peekViewResult.fileForeground#6b6d70c9
  • peekViewResult.lineForeground#727477b9
  • peekViewResult.matchHighlightBackground#adff2fcc
  • peekViewResult.selectionBackground#2c346e
  • peekViewResult.selectionForeground#5b9cf6
  • peekViewTitle.background#191d2e
  • peekViewTitleDescription.foreground#5b9cf6
  • peekViewTitleLabel.foreground#535e7200
  • pickerGroup.border#2a2e39
  • pickerGroup.foreground#79b5e0
  • quickInputTitle.background#1149e5
  • scrollbar.shadow#0b0d13
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • searchEditor.findMatchBackground#002fff3d
  • selection.background#4373c2
  • settings.numberInputBorder#2962ff
  • settings.textInputBorder#2962ff
  • sideBar.background#131722
  • sideBar.border#2a2e39
  • sideBar.dropBackground#191d2e
  • sideBar.foreground#d1d4d2
  • sideBarSectionHeader.background#131722
  • sideBarSectionHeader.border#2a2e39
  • sideBarSectionHeader.foreground#d1d4d2
  • sideBarTitle.foreground#d1d4d2
  • statusBar.background#131722
  • statusBar.border#2a2e39
  • statusBar.debuggingBackground#122142
  • statusBar.debuggingBorder#2a2e39
  • statusBar.debuggingForeground#d1d4d2
  • statusBar.foreground#d1d4d2
  • statusBar.noFolderBackground#191d2e
  • statusBar.noFolderBorder#2a2e39
  • statusBar.noFolderForeground#d1d4d2
  • statusBarItem.hoverBackground#142f60
  • statusBarItem.remoteBackground#122142
  • statusBarItem.remoteForeground#f8fafd
  • symbolIcon.snippetForeground#1e2227
  • tab.activeBackground#0C0F1836
  • tab.activeForeground#d1d4d2
  • tab.hoverBackground#323842
  • tab.inactiveBackground#191d2e
  • tab.inactiveForeground#6b717d
  • tab.unfocusedActiveBorder#2a2e39
  • tab.unfocusedActiveForeground#d1d4d260
  • tab.unfocusedHoverBackground#2e62ca98
  • terminal.ansiBlack#131722
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightWhite#e17518
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ef5350
  • terminal.ansiWhite#e17518
  • terminal.ansiYellow#c5e478
  • terminal.foreground#d1d4d2
  • terminal.selectionBackground#1b90dd4d
  • terminalCursor.background#234d70
  • terminalCursor.foreground#d1d4d2
  • textCodeBlock.background#6e6e6e
  • titleBar.activeBackground#131722
  • titleBar.activeForeground#d1d4d2
  • titleBar.border#2a2e39
  • titleBar.inactiveBackground#131722
  • titleBar.inactiveForeground#d1d4d2af
  • walkThrough.embeddedEditorBackground#191d2e
  • widget.border#0d1017
  • widget.shadow#0d1017

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bbbbbbff
comment, string.comment#5c6370italic
string#e5c07b
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#c678dd
string.template.js#e5c07b
meta.template.expression.js#abb2bf
constant.numeric#c678dd
string.embedded.begin, string.embedded.end#c678dd
string.embedded#98c379
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#e06c75
variable.readwrite, variable.readwrite.other.block#61afef
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#56b6c2
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object#61afef
variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#98c379
entity.name.function, support.function#98c379
variable.parameter#d19a66italic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#98c379
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#e06c75
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#98c379
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#56b6c2
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#c678dd
markup.inserted#e5c07b
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969none
markup.underline.link.markdown#61afef
markup.bold.markdownbold
punctuation.definition.bold.markdown#696969none
markup.heading.markdown#e06c75bold
punctuation.definition.heading.markdown#696969none
markup.quote.markdown#98c379
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.definition.string.begin.ps, punctuation.definition.string.end.ps, constant.character.escaped.ps, string.quoted.double.ps, string.quoted.single.ps#388e3c
meta.other.ps#787b86bold
keyword.control.import.ps, keyword.control.export.ps, keyword.control.as.ps#42bba6
punctuation.separator.ps, entity.name.type.class.ps, constant.numeric.ps#5b9cf6
support.type.primitive.entity.ps, punctuation.accessor.entity.ps, entity.name.function.ps#3178f4
keyword.operator.new.ps#3178f4
variable.other.readwrite.ps, punctuation.accessor.ps#d1d4dc
support.constant.ps, support.constant.property.ps, constant.language.boolean.true.ps, constant.language.boolean.false.ps, constant.numeric.decimal.hex.ps, punctuation.accessor.constant.ps#f57b7f
support.function.ps, support.function.property.ps, punctuation.accessor.function.ps, keyword.operator.new.support.ps#5b9cf6
constant.numeric.decimal.ps#f57f17
storage.type.class.ps#5b9cf6
support.type.primitive.ps#42bba6bold
storage.type.function.ps, storage.type.type.ps, storage.type.ps#42bba6
keyword.operator.word.ps, keyword.control.conditional.ps, keyword.control.switch.ps, keyword.control.loop.ps, storage.type.function.arrow.ps, keyword.operator.ternary.ps#42bba6
punctuation.separator.comma.ps#42bba6
meta.brace.round.ps, meta.brace.square.ps#d1d4dc
constant.character.format.placeholder.other.ps, punctuation.separator.comma.placeholder.ps, constant.numeric.decimal.placeholder.ps, variable.parameter.placeholder.ps#388e3c
keyword.operator.assignment.ps#42bba6
keyword.operator.assignment.compound.ps, keyword.operator.arithmetic.ps, keyword.operator.relational.ps, keyword.operator.comparison.ps#42bba6
punctuation.definition.generic.begin.ps, punctuation.definition.generic.end.ps#d1d4dc
punctuation.definition.annotation.ps#787b86
variable.parameter.ps#d1d4dc
support.type.primitive.import.ps, punctuation.accessor.import.ps, keyword.operator.new.import.ps, entity.name.namespace.ps#b968c7
comment.line.double-slash.ps, meta.annotation.ps, meta.numeric.ps, meta.assignment.ps, meta.section.embedded.other.ps#787b86
meta.annotation.identifier.ps#787b86bold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...