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#232F2D70
  • activityBar.activeBorder#5DD5C3
  • activityBar.background#241F23
  • activityBar.foreground#DDE3E9
  • activityBar.inactiveForeground#53706B
  • activityBarBadge.background#D676C4
  • activityBarBadge.foreground#232425
  • activityBarTop.foreground#DDE3E9
  • badge.background#D676C4
  • badge.foreground#232425
  • breadcrumb.activeForeground#DDE3E9
  • breadcrumb.activeSelectionForeground#DDE3E9
  • breadcrumb.background#241F23
  • breadcrumb.focusForeground#DDE3E9
  • breadcrumb.foreground#53706B
  • breadcrumbPicker.background#241F23
  • button.background#D676C4db
  • button.foreground#232425
  • button.hoverBackground#D676C4
  • button.secondaryBackground#5DD5C3db
  • button.secondaryForeground#232425
  • button.secondaryHoverBackground#5DD5C3
  • checkbox.background#212023
  • checkbox.foreground#DDE3E9
  • debugToolBar.background#7AA6D1
  • debugToolBar.foreground#232425
  • descriptionForeground#CDD0DF
  • diffEditor.diagonalFill#7AA6D1
  • diffEditor.insertedLineBackground#7AA6D140
  • diffEditor.insertedTextBackground#7AA6D150
  • diffEditor.insertedTextBorder#7AA6D1
  • diffEditor.removedLineBackground#DA717140
  • diffEditor.removedTextBackground#DA717150
  • diffEditor.removedTextBorder#DA7171
  • diffEditorGutter.insertedLineBackground#7AA6D1
  • diffEditorGutter.removedLineBackground#DA7171
  • disabledForeground#53706B
  • dropdown.background#3B3540
  • dropdown.border#30353B
  • dropdown.foreground#DDE3E9
  • editor.background#212023
  • editor.findMatchBackground#66385E70
  • editor.findMatchForeground#DDE3E9
  • editor.findMatchHighlightBackground#232F2D70
  • editor.findMatchHighlightForeground#DDE3E9
  • editor.findRangeHighlightBackground#43354F70
  • editor.foldBackground#232F2D70
  • editor.foldPlaceholderForeground#DDE3E9
  • editor.foreground#DDE3E9
  • editor.hoverHighlightBackground#232F2D70
  • editor.inactiveSelectionBackground#43354F70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CDD0DF
  • editor.rangeHighlightBackground#232F2D70
  • editor.selectionBackground#43354F70
  • editor.selectionForeground#DDE3E9
  • editor.selectionHighlightBackground#43354F70
  • editor.snippetFinalTabstopHighlightBackground#232F2D70
  • editor.snippetTabstopHighlightBackground#232F2D70
  • editor.symbolHighlightBackground#232F2D70
  • editor.wordHighlightBackground#232F2D70
  • editor.wordHighlightStrongBackground#232F2D50
  • editor.wordHighlightTextBackground#232F2D70
  • editorCodeLens.foreground#53706B
  • editorCursor.background#232F2D70
  • editorCursor.foreground#5DD5C3
  • editorError.foreground#DA7171
  • editorGroup.border#30353B
  • editorGroup.dropBackground#3B3540
  • editorGroup.emptyBackground#212023
  • editorGroupHeader.border#30353B
  • editorGroupHeader.tabsBackground#212023
  • editorGutter.addedBackground#399D39
  • editorGutter.background#212023
  • editorGutter.commentRangeForeground#53706B
  • editorGutter.deletedBackground#DA7171
  • editorGutter.modifiedBackground#7AA6D1
  • editorHint.foreground#399D39
  • editorHoverWidget.background#212023
  • editorHoverWidget.border#30353B
  • editorHoverWidget.foreground#DDE3E9
  • editorHoverWidget.highlightForeground#DDE3E9
  • editorHoverWidget.statusBarBackground#212023
  • editorIndentGuide.activeBackground1#5DD5C3
  • editorIndentGuide.background1#232F2D70
  • editorInfo.foreground#7AA6D1
  • editorLineNumber.activeForeground#5DD5C3
  • editorLineNumber.dimmedForeground#53706B90
  • editorLineNumber.foreground#53706B
  • editorLink.activeForeground#7AA6D1
  • editorMarkerNavigation.background#241F23
  • editorMarkerNavigationError.background#241F23
  • editorMarkerNavigationWarning.background#241F23
  • editorMultiCursor.primary.background#232F2D70
  • editorMultiCursor.primary.foreground#5DD5C3
  • editorMultiCursor.secondary.background#232F2D70
  • editorMultiCursor.secondary.foreground#DDE3E9
  • editorOverviewRuler.addedForeground#399D39
  • editorOverviewRuler.border#30353B
  • editorOverviewRuler.commentForeground#53706B
  • editorOverviewRuler.commonContentForeground#DDE3E9
  • editorOverviewRuler.currentContentForeground#7AA6D1
  • editorOverviewRuler.deletedForeground#DA7171
  • editorOverviewRuler.errorForeground#DA7171
  • editorOverviewRuler.findMatchForeground#DDE3E9
  • editorOverviewRuler.incomingContentForeground#399D39
  • editorOverviewRuler.infoForeground#7AA6D1
  • editorOverviewRuler.modifiedForeground#7AA6D1
  • editorOverviewRuler.rangeHighlightForeground#232F2D70
  • editorOverviewRuler.selectionHighlightForeground#43354F70
  • editorOverviewRuler.warningForeground#D6A676
  • editorOverviewRuler.wordHighlightForeground#232F2D70
  • editorOverviewRuler.wordHighlightStrongForeground#232F2D70
  • editorRuler.foreground#232F2D70
  • editorSuggestWidget.background#212023
  • editorSuggestWidget.border#30353B
  • editorSuggestWidget.focusHighlightForeground#DDE3E9
  • editorSuggestWidget.foreground#53706B
  • editorSuggestWidget.highlightForeground#DDE3E9
  • editorSuggestWidget.selectedBackground#D676C480
  • editorSuggestWidget.selectedForeground#DDE3E9
  • editorUnicodeHighlight.background#232F2D70
  • editorWarning.foreground#D6A676
  • editorWhitespace.foreground#232F2D70
  • editorWidget.background#212023
  • editorWidget.border#30353B
  • editorWidget.foreground#DDE3E9
  • errorForeground#DA7171
  • extensionButton.prominentBackground#D676C4aa
  • extensionButton.prominentForeground#232425
  • extensionButton.prominentHoverBackground#D676C4
  • focusBorder#30353B
  • foreground#DDE3E9
  • gitDecoration.addedResourceForeground#399D39
  • gitDecoration.conflictingResourceForeground#D6A676
  • gitDecoration.deletedResourceForeground#DA7171
  • gitDecoration.ignoredResourceForeground#53706B
  • gitDecoration.modifiedResourceForeground#7AA6D1
  • gitDecoration.renamedResourceForeground#5DD5C3
  • gitDecoration.untrackedResourceForeground#CDD0DF
  • input.background#212023
  • input.border#53706B
  • input.foreground#DDE3E9
  • input.placeholderForeground#53706B
  • inputOption.activeBorder#5DD5C3
  • inputValidation.errorBorder#DA7171
  • inputValidation.infoBorder#7AA6D1
  • inputValidation.warningBorder#D6A676
  • list.activeSelectionBackground#D676C470
  • list.activeSelectionForeground#DDE3E9
  • list.dropBackground#3B3540
  • list.dropBetweenBackground#30353B
  • list.errorForeground#DA7171
  • list.focusBackground#D676C450
  • list.focusForeground#DDE3E9
  • list.highlightForeground#5DD5C3
  • list.hoverBackground#D676C420
  • list.hoverForeground#DDE3E9
  • list.inactiveFocusBackground#241F23
  • list.inactiveSelectionBackground#D676C460
  • list.inactiveSelectionForeground#CDD0DF
  • list.warningForeground#D6A676
  • listFilterWidget.background#3B3540
  • listFilterWidget.noMatchesOutline#DA7171
  • listFilterWidget.outline#30353B
  • merge.border#30353B
  • merge.currentContentBackground#7AA6D120
  • merge.currentHeaderBackground#7AA6D140
  • merge.incomingContentBackground#399D3920
  • merge.incomingHeaderBackground#399D3940
  • mergeEditor.change.background#D6A676
  • notificationLink.foreground#7AA6D1
  • notifications.background#241F23
  • notifications.border#30353B
  • notifications.foreground#DDE3E9
  • notificationsErrorIcon.foreground#DA7171
  • notificationsInfoIcon.foreground#7AA6D1
  • notificationsWarningIcon.foreground#D6A676
  • panel.background#241F23
  • panel.border#5DD5C3
  • panelInput.border#53706B
  • panelTitle.activeBorder#5DD5C3
  • panelTitle.activeForeground#DDE3E9
  • panelTitle.inactiveForeground#53706B
  • peekView.border#D676C4
  • peekViewEditor.background#212023
  • peekViewEditor.matchHighlightBackground#66385E70
  • peekViewResult.background#212023
  • peekViewResult.fileForeground#DDE3E9
  • peekViewResult.lineForeground#DDE3E9
  • peekViewResult.matchHighlightBackground#232F2D70
  • peekViewResult.selectionBackground#241F23
  • peekViewResult.selectionForeground#DDE3E9
  • peekViewTitle.background#212023
  • peekViewTitleDescription.foreground#CDD0DF
  • peekViewTitleLabel.foreground#DDE3E9
  • pickerGroup.border#D676C4
  • pickerGroup.foreground#B8EAD2
  • progressBar.background#5DD5C3
  • selection.background#D676C450
  • settings.checkboxBackground#212023
  • settings.checkboxBorder#30353B
  • settings.checkboxForeground#DDE3E9
  • settings.dropdownBackground#212023
  • settings.dropdownBorder#30353B
  • settings.dropdownForeground#DDE3E9
  • settings.focusedRowBackground#232F2D70
  • settings.focusedRowBorder#53706B
  • settings.headerBorder#30353B
  • settings.headerForeground#DDE3E9
  • settings.inactiveSelectedItemBorder#53706B
  • settings.modifiedItemIndicator#D6A676
  • settings.numberInputBackground#212023
  • settings.numberInputBorder#53706B
  • settings.numberInputForeground#DDE3E9
  • settings.rowHoverBackground#232F2D70
  • settings.settingsHeaderHoverForeground#DDE3E9
  • settings.textInputBackground#212023
  • settings.textInputBorder#53706B
  • settings.textInputForeground#DDE3E9
  • sideBar.background#212023
  • sideBarActivityBarTop.border#30353B
  • sideBarSectionHeader.background#241F23
  • sideBarSectionHeader.border#30353B
  • sideBarStickyScroll.background#212023
  • sideBarStickyScroll.border#30353B
  • sideBarStickyScroll.shadow#30353B
  • sideBarTitle.background#212023
  • sideBarTitle.foreground#DDE3E9
  • statusBar.background#D676C4
  • statusBar.debuggingBackground#D6A676
  • statusBar.debuggingForeground#232425
  • statusBar.foreground#232425
  • statusBar.noFolderBackground#CDD0DF
  • statusBar.noFolderForeground#232425
  • statusBarItem.activeBackground#D676C4aa
  • statusBarItem.errorBackground#DA7171
  • statusBarItem.errorForeground#232425
  • statusBarItem.errorHoverBackground#DA7171aa
  • statusBarItem.hoverBackground#D676C4aa
  • statusBarItem.prominentBackground#D676C4aa
  • statusBarItem.prominentForeground#232425
  • statusBarItem.prominentHoverBackground#D676C4aa
  • statusBarItem.prominentHoverForeground#232425
  • statusBarItem.remoteBackground#5DD5C3
  • statusBarItem.remoteForeground#232425
  • statusBarItem.remoteHoverBackground#5DD5C3aa
  • statusBarItem.warningBackground#D6A676
  • statusBarItem.warningForeground#232425
  • statusBarItem.warningHoverBackground#D6A676aa
  • tab.activeBackground#241F23
  • tab.activeBorderTop#5DD5C3
  • tab.activeForeground#DDE3E9
  • tab.border#30353B
  • tab.hoverBackground#241F2380
  • tab.hoverForeground#DDE3E9
  • tab.inactiveBackground#212023
  • tab.inactiveForeground#53706B
  • tab.selectedBackground#232F2D70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3986FF
  • terminal.ansiBrightBlack#464646
  • terminal.ansiBrightBlue#619EFF
  • terminal.ansiBrightCyan#6CFFB8
  • terminal.ansiBrightGreen#45E56A
  • terminal.ansiBrightMagenta#ED60B3
  • terminal.ansiBrightRed#E9882E
  • terminal.ansiBrightWhite#FDFDFD
  • terminal.ansiBrightYellow#F79674
  • terminal.ansiCyan#149C5B
  • terminal.ansiGreen#1A9F38
  • terminal.ansiMagenta#F534A6
  • terminal.ansiRed#CC7524
  • terminal.ansiWhite#F4F3ED
  • terminal.ansiYellow#E16236
  • terminal.background#212023
  • terminal.border#30353B
  • terminal.foreground#DDE3E9
  • terminal.inactiveSelectionBackground#43354F70
  • terminal.selectionBackground#43354F70
  • textBlockQuote.background#3B3540
  • textBlockQuote.border#30353B
  • textCodeBlock.background#3B3540
  • textLink.activeForeground#7AA6D1
  • textLink.foreground#D676C4
  • textPreformat.background#3B3540
  • textPreformat.foreground#DDE3E9
  • textSeparator.foreground#DDE3E9
  • titleBar.activeBackground#241F23
  • titleBar.activeForeground#DDE3E9
  • titleBar.inactiveBackground#241F23
  • titleBar.inactiveForeground#53706B
  • widget.border#30353B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#DDE3E9
meta.diff, meta.diff.header#53706B
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#C0B7EB
emphasisitalic
strongbold
invalid#DA7171strikethrough
invalid.deprecated#DDE3E9underline italic
header#C0B7EB
source.ini, source.ignore, source#CDD0DF
markup.inserted#C0B7EB
markup.deleted#DA7171
markup.changed#7AA6D1
markup.error#DA7171
markup.underlineunderline
markup.bold#D6A676bold
markup.heading#5DD5C3bold
markup.italic#CDD0DFitalic
markup.inline.raw, markup.raw.restructuredtext#5DD5C3
markup.underline.link, markup.underline.link.image, markup.quote#7AA6D1
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D676C4
meta.separator.markdown#5DD5C3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E7C5ED
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D6A676
entity.name.class, entity.name.type.class, entity.other.inherited-class#D676C4
entity.name.tag, entity.other.attribute-name.parent-selector#C8C0ED
entity.other.attribute-name#D676C4
entity.name.function, meta.function-call, meta.method-call, meta.method#5DD5C3
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#C4BCE6
support#A7E7DD
entity.name, variable.other.key#5DD5C3
entity.name.type#EABDD3
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E2A7B0
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D9F2E6
entity.other.attribute-name.class.css#5DD5C3
storage.class, storage.type#D676C4
storage.modifier#BCB3E6
comment, punctuation.definition.comment, unused.comment, wildcard.comment#53706B
constant#C0B7EB
constant.other.color#A99CE2
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E8A1C3
constant.other.date, constant.other.timestamp#C1ECE5
keyword.operator#D7D2E9
keyword.other.unit#B0E8CD
keyword.control, keyword.other.template, keyword.other.substitution#97BBE3
keyword.other.this#C0B7EB
keyword.control.import, keyword.control.from#B9C1DF
keyword.control.new, keyword.operator.new, keyword.other.important.css#D676C4
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#A0A5E3
meta.attribute-selector.scss#C1ECD7
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#C8C0ED
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#C4B3E6
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#D676C4
support.constant.property-value.css, constant.numeric.css#CDD0DF
keyword.control.at-rule.apply.tailwind#B9C1DF
keyword.control.at-rule.tailwind.tailwind#97BBE3
keyword.control.at-rule.layer.tailwind#A0A5E3
meta.selector#C1ECD7
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F0F5F4
punctuation.definition.constant.restructuredtext#C0B7EB
string.quoted.docstring.multi#5DD5C3
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#F0F5F4
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#C4B3E6
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#F4F3ED
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#F3F7F7
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#D0DFE1
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#D3E3E1
punctuation.definition.directive.restructuredtext#C0B7EB
variable#B5E3CD
variable.other.alias.yaml#B5E3CDunderline
variable.language, variable.parameter.function.language.special#E8A1C3
variable.other.constant#CAECE6
support.variable#B5E3CD
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C8E9E6
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D6A676
support.function, support.type.property-name#EECDE8
storage#D9C5ED
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E16236
punctuation.definition.group.capture.regexp#CC7524
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CC7524
punctuation.definition.character-class.regexp#F79674
punctuation.definition.group.regexp#619EFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CC7524
meta.assertion.look-ahead.regexp#619EFF
source.json meta.structure.dictionary.json support.type.property-name.json#5DD5C3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D676C4
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#7AA6D1
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#D6A676
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#DA7171
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#399D39
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#5DD5C3
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#D676C4
token.info-token#7AA6D1
token.warn-token#D6A676
token.error-token#DA7171
token.debug-token#D6A676