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#161A2370
  • activityBar.activeBorder#88A0D1
  • activityBar.background#0B0F13
  • activityBar.foreground#DAE1F1
  • activityBar.inactiveForeground#666769
  • activityBarBadge.background#7E96CD
  • activityBarBadge.foreground#0B111E
  • activityBarTop.foreground#DAE1F1
  • badge.background#7E96CD
  • badge.foreground#0B111E
  • breadcrumb.activeForeground#DAE1F1
  • breadcrumb.activeSelectionForeground#DAE1F1
  • breadcrumb.background#0B0F13
  • breadcrumb.focusForeground#DAE1F1
  • breadcrumb.foreground#666769
  • breadcrumbPicker.background#0B0F13
  • button.background#7E96CDdb
  • button.foreground#0B111E
  • button.hoverBackground#7E96CD
  • button.secondaryBackground#88A0D1db
  • button.secondaryForeground#0B111E
  • button.secondaryHoverBackground#88A0D1
  • checkbox.background#151923
  • checkbox.foreground#DAE1F1
  • debugToolBar.background#7EA6CD
  • debugToolBar.foreground#0B111E
  • descriptionForeground#B2C2E1
  • diffEditor.diagonalFill#7EA6CD
  • diffEditor.insertedLineBackground#7EA6CD40
  • diffEditor.insertedTextBackground#7EA6CD50
  • diffEditor.insertedTextBorder#7EA6CD
  • diffEditor.removedLineBackground#CD7F7F40
  • diffEditor.removedTextBackground#CD7F7F50
  • diffEditor.removedTextBorder#CD7F7F
  • diffEditorGutter.insertedLineBackground#7EA6CD
  • diffEditorGutter.removedLineBackground#CD7F7F
  • disabledForeground#666769
  • dropdown.background#101119
  • dropdown.border#17233A
  • dropdown.foreground#DAE1F1
  • editor.background#151923
  • editor.findMatchBackground#373E4E70
  • editor.findMatchForeground#DAE1F1
  • editor.findMatchHighlightBackground#161A2370
  • editor.findMatchHighlightForeground#DAE1F1
  • editor.findRangeHighlightBackground#28314370
  • editor.foldBackground#161A2370
  • editor.foldPlaceholderForeground#DAE1F1
  • editor.foreground#DAE1F1
  • editor.hoverHighlightBackground#161A2370
  • editor.inactiveSelectionBackground#28314370
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#B2C2E1
  • editor.rangeHighlightBackground#161A2370
  • editor.selectionBackground#28314370
  • editor.selectionForeground#DAE1F1
  • editor.selectionHighlightBackground#28314370
  • editor.snippetFinalTabstopHighlightBackground#161A2370
  • editor.snippetTabstopHighlightBackground#161A2370
  • editor.symbolHighlightBackground#161A2370
  • editor.wordHighlightBackground#161A2370
  • editor.wordHighlightStrongBackground#161A2350
  • editor.wordHighlightTextBackground#161A2370
  • editorCodeLens.foreground#666769
  • editorCursor.background#161A2370
  • editorCursor.foreground#88A0D1
  • editorError.foreground#CD7F7F
  • editorGroup.border#17233A
  • editorGroup.dropBackground#101119
  • editorGroup.emptyBackground#151923
  • editorGroupHeader.border#17233A
  • editorGroupHeader.tabsBackground#151923
  • editorGutter.addedBackground#3B983B
  • editorGutter.background#151923
  • editorGutter.commentRangeForeground#666769
  • editorGutter.deletedBackground#CD7F7F
  • editorGutter.modifiedBackground#7EA6CD
  • editorHint.foreground#3B983B
  • editorHoverWidget.background#151923
  • editorHoverWidget.border#17233A
  • editorHoverWidget.foreground#DAE1F1
  • editorHoverWidget.highlightForeground#DAE1F1
  • editorHoverWidget.statusBarBackground#151923
  • editorIndentGuide.activeBackground1#88A0D1
  • editorIndentGuide.background1#161A2370
  • editorInfo.foreground#7EA6CD
  • editorLineNumber.activeForeground#88A0D1
  • editorLineNumber.dimmedForeground#66676990
  • editorLineNumber.foreground#666769
  • editorLink.activeForeground#7EA6CD
  • editorMarkerNavigation.background#0B0F13
  • editorMarkerNavigationError.background#0B0F13
  • editorMarkerNavigationWarning.background#0B0F13
  • editorMultiCursor.primary.background#161A2370
  • editorMultiCursor.primary.foreground#88A0D1
  • editorMultiCursor.secondary.background#161A2370
  • editorMultiCursor.secondary.foreground#DAE1F1
  • editorOverviewRuler.addedForeground#3B983B
  • editorOverviewRuler.border#17233A
  • editorOverviewRuler.commentForeground#666769
  • editorOverviewRuler.commonContentForeground#DAE1F1
  • editorOverviewRuler.currentContentForeground#7EA6CD
  • editorOverviewRuler.deletedForeground#CD7F7F
  • editorOverviewRuler.errorForeground#CD7F7F
  • editorOverviewRuler.findMatchForeground#DAE1F1
  • editorOverviewRuler.incomingContentForeground#3B983B
  • editorOverviewRuler.infoForeground#7EA6CD
  • editorOverviewRuler.modifiedForeground#7EA6CD
  • editorOverviewRuler.rangeHighlightForeground#161A2370
  • editorOverviewRuler.selectionHighlightForeground#28314370
  • editorOverviewRuler.warningForeground#CDA67F
  • editorOverviewRuler.wordHighlightForeground#161A2370
  • editorOverviewRuler.wordHighlightStrongForeground#161A2370
  • editorRuler.foreground#161A2370
  • editorSuggestWidget.background#151923
  • editorSuggestWidget.border#17233A
  • editorSuggestWidget.focusHighlightForeground#DAE1F1
  • editorSuggestWidget.foreground#666769
  • editorSuggestWidget.highlightForeground#DAE1F1
  • editorSuggestWidget.selectedBackground#7E96CD80
  • editorSuggestWidget.selectedForeground#DAE1F1
  • editorUnicodeHighlight.background#161A2370
  • editorWarning.foreground#CDA67F
  • editorWhitespace.foreground#161A2370
  • editorWidget.background#151923
  • editorWidget.border#17233A
  • editorWidget.foreground#DAE1F1
  • errorForeground#CD7F7F
  • extensionButton.prominentBackground#7E96CDaa
  • extensionButton.prominentForeground#0B111E
  • extensionButton.prominentHoverBackground#7E96CD
  • focusBorder#17233A
  • foreground#DAE1F1
  • gitDecoration.addedResourceForeground#3B983B
  • gitDecoration.conflictingResourceForeground#CDA67F
  • gitDecoration.deletedResourceForeground#CD7F7F
  • gitDecoration.ignoredResourceForeground#666769
  • gitDecoration.modifiedResourceForeground#7EA6CD
  • gitDecoration.renamedResourceForeground#88A0D1
  • gitDecoration.untrackedResourceForeground#B2C2E1
  • input.background#151923
  • input.border#666769
  • input.foreground#DAE1F1
  • input.placeholderForeground#666769
  • inputOption.activeBorder#88A0D1
  • inputValidation.errorBorder#CD7F7F
  • inputValidation.infoBorder#7EA6CD
  • inputValidation.warningBorder#CDA67F
  • list.activeSelectionBackground#7E96CD70
  • list.activeSelectionForeground#DAE1F1
  • list.dropBackground#101119
  • list.dropBetweenBackground#17233A
  • list.errorForeground#CD7F7F
  • list.focusBackground#7E96CD50
  • list.focusForeground#DAE1F1
  • list.highlightForeground#88A0D1
  • list.hoverBackground#7E96CD20
  • list.hoverForeground#DAE1F1
  • list.inactiveFocusBackground#0B0F13
  • list.inactiveSelectionBackground#7E96CD60
  • list.inactiveSelectionForeground#B2C2E1
  • list.warningForeground#CDA67F
  • listFilterWidget.background#101119
  • listFilterWidget.noMatchesOutline#CD7F7F
  • listFilterWidget.outline#17233A
  • merge.border#17233A
  • merge.currentContentBackground#7EA6CD20
  • merge.currentHeaderBackground#7EA6CD40
  • merge.incomingContentBackground#3B983B20
  • merge.incomingHeaderBackground#3B983B40
  • mergeEditor.change.background#CDA67F
  • notificationLink.foreground#7EA6CD
  • notifications.background#0B0F13
  • notifications.border#17233A
  • notifications.foreground#DAE1F1
  • notificationsErrorIcon.foreground#CD7F7F
  • notificationsInfoIcon.foreground#7EA6CD
  • notificationsWarningIcon.foreground#CDA67F
  • panel.background#0B0F13
  • panel.border#88A0D1
  • panelInput.border#666769
  • panelTitle.activeBorder#88A0D1
  • panelTitle.activeForeground#DAE1F1
  • panelTitle.inactiveForeground#666769
  • peekView.border#7E96CD
  • peekViewEditor.background#151923
  • peekViewEditor.matchHighlightBackground#373E4E70
  • peekViewResult.background#151923
  • peekViewResult.fileForeground#DAE1F1
  • peekViewResult.lineForeground#DAE1F1
  • peekViewResult.matchHighlightBackground#161A2370
  • peekViewResult.selectionBackground#0B0F13
  • peekViewResult.selectionForeground#DAE1F1
  • peekViewTitle.background#151923
  • peekViewTitleDescription.foreground#B2C2E1
  • peekViewTitleLabel.foreground#DAE1F1
  • pickerGroup.border#7E96CD
  • pickerGroup.foreground#B4C7EE
  • progressBar.background#88A0D1
  • selection.background#7E96CD50
  • settings.checkboxBackground#151923
  • settings.checkboxBorder#17233A
  • settings.checkboxForeground#DAE1F1
  • settings.dropdownBackground#151923
  • settings.dropdownBorder#17233A
  • settings.dropdownForeground#DAE1F1
  • settings.focusedRowBackground#161A2370
  • settings.focusedRowBorder#666769
  • settings.headerBorder#17233A
  • settings.headerForeground#DAE1F1
  • settings.inactiveSelectedItemBorder#666769
  • settings.modifiedItemIndicator#CDA67F
  • settings.numberInputBackground#151923
  • settings.numberInputBorder#666769
  • settings.numberInputForeground#DAE1F1
  • settings.rowHoverBackground#161A2370
  • settings.settingsHeaderHoverForeground#DAE1F1
  • settings.textInputBackground#151923
  • settings.textInputBorder#666769
  • settings.textInputForeground#DAE1F1
  • sideBar.background#151923
  • sideBarActivityBarTop.border#17233A
  • sideBarSectionHeader.background#0B0F13
  • sideBarSectionHeader.border#17233A
  • sideBarStickyScroll.background#151923
  • sideBarStickyScroll.border#17233A
  • sideBarStickyScroll.shadow#17233A
  • sideBarTitle.background#151923
  • sideBarTitle.foreground#DAE1F1
  • statusBar.background#7E96CD
  • statusBar.debuggingBackground#CDA67F
  • statusBar.debuggingForeground#0B111E
  • statusBar.foreground#0B111E
  • statusBar.noFolderBackground#B2C2E1
  • statusBar.noFolderForeground#0B111E
  • statusBarItem.activeBackground#7E96CDaa
  • statusBarItem.errorBackground#CD7F7F
  • statusBarItem.errorForeground#0B111E
  • statusBarItem.errorHoverBackground#CD7F7Faa
  • statusBarItem.hoverBackground#7E96CDaa
  • statusBarItem.prominentBackground#7E96CDaa
  • statusBarItem.prominentForeground#0B111E
  • statusBarItem.prominentHoverBackground#7E96CDaa
  • statusBarItem.prominentHoverForeground#0B111E
  • statusBarItem.remoteBackground#88A0D1
  • statusBarItem.remoteForeground#0B111E
  • statusBarItem.remoteHoverBackground#88A0D1aa
  • statusBarItem.warningBackground#CDA67F
  • statusBarItem.warningForeground#0B111E
  • statusBarItem.warningHoverBackground#CDA67Faa
  • tab.activeBackground#0B0F13
  • tab.activeBorderTop#88A0D1
  • tab.activeForeground#DAE1F1
  • tab.border#17233A
  • tab.hoverBackground#0B0F1380
  • tab.hoverForeground#DAE1F1
  • tab.inactiveBackground#151923
  • tab.inactiveForeground#666769
  • tab.selectedBackground#161A2370
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6975FF
  • terminal.ansiBrightBlack#3B3B3B
  • terminal.ansiBrightBlue#6B77FF
  • terminal.ansiBrightCyan#96D8ED
  • terminal.ansiBrightGreen#F2FFE6
  • terminal.ansiBrightMagenta#FDCEE7
  • terminal.ansiBrightRed#F2A2A1
  • terminal.ansiBrightWhite#FCFCFB
  • terminal.ansiBrightYellow#F9EED7
  • terminal.ansiCyan#3B8CA7
  • terminal.ansiGreen#ADE17A
  • terminal.ansiMagenta#D8559A
  • terminal.ansiRed#D36664
  • terminal.ansiWhite#EFEDEA
  • terminal.ansiYellow#BF9B4D
  • terminal.background#151923
  • terminal.border#17233A
  • terminal.foreground#DAE1F1
  • terminal.inactiveSelectionBackground#28314370
  • terminal.selectionBackground#28314370
  • textBlockQuote.background#101119
  • textBlockQuote.border#17233A
  • textCodeBlock.background#101119
  • textLink.activeForeground#7EA6CD
  • textLink.foreground#7E96CD
  • textPreformat.background#101119
  • textPreformat.foreground#DAE1F1
  • textSeparator.foreground#DAE1F1
  • titleBar.activeBackground#0B0F13
  • titleBar.activeForeground#DAE1F1
  • titleBar.inactiveBackground#0B0F13
  • titleBar.inactiveForeground#666769
  • widget.border#17233A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#DAE1F1
meta.diff, meta.diff.header#666769
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#CDDAF4
emphasisitalic
strongbold
invalid#CD7F7Fstrikethrough
invalid.deprecated#DAE1F1underline italic
header#CDDAF4
source.ini, source.ignore, source#B2C2E1
markup.inserted#CDDAF4
markup.deleted#CD7F7F
markup.changed#7EA6CD
markup.error#CD7F7F
markup.underlineunderline
markup.bold#CDA67Fbold
markup.heading#88A0D1bold
markup.italic#B2C2E1italic
markup.inline.raw, markup.raw.restructuredtext#88A0D1
markup.underline.link, markup.underline.link.image, markup.quote#7EA6CD
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7E96CD
meta.separator.markdown#88A0D1
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#C0D0F1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CDA67F
entity.name.class, entity.name.type.class, entity.other.inherited-class#7E96CD
entity.name.tag, entity.other.attribute-name.parent-selector#CDDAF4
entity.other.attribute-name#7E96CD
entity.name.function, meta.function-call, meta.method-call, meta.method#88A0D1
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#BCCCF0
support#A3B9EA
entity.name, variable.other.key#88A0D1
entity.name.type#B4C7EE
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#A59CE8
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#ADBFEC
entity.other.attribute-name.class.css#88A0D1
storage.class, storage.type#7E96CD
storage.modifier#B4C6EE
comment, punctuation.definition.comment, unused.comment, wildcard.comment#666769
constant#CDDAF4
constant.other.color#A3BBEA
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#8FABE6
constant.other.date, constant.other.timestamp#C1D0F1
keyword.operator#B9C9EF
keyword.other.unit#9CB4E8
keyword.control, keyword.other.template, keyword.other.substitution#9CB4E8
keyword.other.this#CDDAF4
keyword.control.import, keyword.control.from#A8AEEB
keyword.control.new, keyword.operator.new, keyword.other.important.css#7E96CD
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#9C9CE8
meta.attribute-selector.scss#CAD6F3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#CDDAF4
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#B4BAEE
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#7E96CD
support.constant.property-value.css, constant.numeric.css#B2C2E1
keyword.control.at-rule.apply.tailwind#A8AEEB
keyword.control.at-rule.tailwind.tailwind#9CB4E8
keyword.control.at-rule.layer.tailwind#9C9CE8
meta.selector#CAD6F3
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#DCE4F4
punctuation.definition.constant.restructuredtext#CDDAF4
string.quoted.docstring.multi#88A0D1
punctuation.definition.keyword.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#DCE4F4
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#B4BAEE
entity.other.attribute-name punctuation, meta.brace.square, meta.group.toml, meta.group.double.toml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator#EFEDEA
meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end#D1D6F0
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.variable.makefile#E4E8F6
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css#E0E5F5
punctuation.definition.directive.restructuredtext#CDDAF4
variable#B5C7EE
variable.other.alias.yaml#B5C7EEunderline
variable.language, variable.parameter.function.language.special#8FABE6
variable.other.constant#C0C3F1
support.variable#B5C7EE
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#CDBCF0
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#CDA67F
support.function, support.type.property-name#C5C6F2
storage#B4C7EE
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#BF9B4D
punctuation.definition.group.capture.regexp#D36664
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#D36664
punctuation.definition.character-class.regexp#F9EED7
punctuation.definition.group.regexp#6B77FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#D36664
meta.assertion.look-ahead.regexp#6B77FF
source.json meta.structure.dictionary.json support.type.property-name.json#88A0D1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7E96CD
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#7EA6CD
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#CDA67F
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#CD7F7F
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#3B983B
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#88A0D1
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#7E96CD
token.info-token#7EA6CD
token.warn-token#CDA67F
token.error-token#CD7F7F
token.debug-token#CDA67F