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#35333170
  • activityBar.activeBorder#FF6965
  • activityBar.background#322F2F
  • activityBar.foreground#E0DCDC
  • activityBar.inactiveForeground#687053
  • activityBarBadge.background#B49797
  • activityBarBadge.foreground#2E2E2E
  • activityBarTop.foreground#E0DCDC
  • badge.background#B49797
  • badge.foreground#2E2E2E
  • breadcrumb.activeForeground#E0DCDC
  • breadcrumb.activeSelectionForeground#E0DCDC
  • breadcrumb.background#322F2F
  • breadcrumb.focusForeground#E0DCDC
  • breadcrumb.foreground#687053
  • breadcrumbPicker.background#322F2F
  • button.background#B49797db
  • button.foreground#2E2E2E
  • button.hoverBackground#B49797
  • button.secondaryBackground#FF6965db
  • button.secondaryForeground#2E2E2E
  • button.secondaryHoverBackground#FF6965
  • checkbox.background#313030
  • checkbox.foreground#E0DCDC
  • debugToolBar.background#98A6B3
  • debugToolBar.foreground#2E2E2E
  • descriptionForeground#C6BFBE
  • diffEditor.diagonalFill#98A6B3
  • diffEditor.insertedLineBackground#98A6B340
  • diffEditor.insertedTextBackground#98A6B350
  • diffEditor.insertedTextBorder#98A6B3
  • diffEditor.removedLineBackground#B6969640
  • diffEditor.removedTextBackground#B6969650
  • diffEditor.removedTextBorder#B69696
  • diffEditorGutter.insertedLineBackground#98A6B3
  • diffEditorGutter.removedLineBackground#B69696
  • disabledForeground#687053
  • dropdown.background#3F3B3B
  • dropdown.border#41423E
  • dropdown.foreground#E0DCDC
  • editor.background#313030
  • editor.findMatchBackground#5C615170
  • editor.findMatchForeground#E0DCDC
  • editor.findMatchHighlightBackground#35333170
  • editor.findMatchHighlightForeground#E0DCDC
  • editor.findRangeHighlightBackground#514C4870
  • editor.foldBackground#35333170
  • editor.foldPlaceholderForeground#E0DCDC
  • editor.foreground#E0DCDC
  • editor.hoverHighlightBackground#35333170
  • editor.inactiveSelectionBackground#514C4870
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#C6BFBE
  • editor.rangeHighlightBackground#35333170
  • editor.selectionBackground#514C4870
  • editor.selectionForeground#E0DCDC
  • editor.selectionHighlightBackground#514C4870
  • editor.snippetFinalTabstopHighlightBackground#35333170
  • editor.snippetTabstopHighlightBackground#35333170
  • editor.symbolHighlightBackground#35333170
  • editor.wordHighlightBackground#35333170
  • editor.wordHighlightStrongBackground#35333150
  • editor.wordHighlightTextBackground#35333170
  • editorCodeLens.foreground#687053
  • editorCursor.background#35333170
  • editorCursor.foreground#FF6965
  • editorError.foreground#B69696
  • editorGroup.border#41423E
  • editorGroup.dropBackground#3F3B3B
  • editorGroup.emptyBackground#313030
  • editorGroupHeader.border#41423E
  • editorGroupHeader.tabsBackground#313030
  • editorGutter.addedBackground#0CB70C
  • editorGutter.background#313030
  • editorGutter.commentRangeForeground#687053
  • editorGutter.deletedBackground#B69696
  • editorGutter.modifiedBackground#98A6B3
  • editorHint.foreground#0CB70C
  • editorHoverWidget.background#313030
  • editorHoverWidget.border#41423E
  • editorHoverWidget.foreground#E0DCDC
  • editorHoverWidget.highlightForeground#E0DCDC
  • editorHoverWidget.statusBarBackground#313030
  • editorIndentGuide.activeBackground1#FF6965
  • editorIndentGuide.background1#35333170
  • editorInfo.foreground#98A6B3
  • editorLineNumber.activeForeground#FF6965
  • editorLineNumber.dimmedForeground#68705390
  • editorLineNumber.foreground#687053
  • editorLink.activeForeground#98A6B3
  • editorMarkerNavigation.background#322F2F
  • editorMarkerNavigationError.background#322F2F
  • editorMarkerNavigationWarning.background#322F2F
  • editorMultiCursor.primary.background#35333170
  • editorMultiCursor.primary.foreground#FF6965
  • editorMultiCursor.secondary.background#35333170
  • editorMultiCursor.secondary.foreground#E0DCDC
  • editorOverviewRuler.addedForeground#0CB70C
  • editorOverviewRuler.border#41423E
  • editorOverviewRuler.commentForeground#687053
  • editorOverviewRuler.commonContentForeground#E0DCDC
  • editorOverviewRuler.currentContentForeground#98A6B3
  • editorOverviewRuler.deletedForeground#B69696
  • editorOverviewRuler.errorForeground#B69696
  • editorOverviewRuler.findMatchForeground#E0DCDC
  • editorOverviewRuler.incomingContentForeground#0CB70C
  • editorOverviewRuler.infoForeground#98A6B3
  • editorOverviewRuler.modifiedForeground#98A6B3
  • editorOverviewRuler.rangeHighlightForeground#35333170
  • editorOverviewRuler.selectionHighlightForeground#514C4870
  • editorOverviewRuler.warningForeground#B4A697
  • editorOverviewRuler.wordHighlightForeground#35333170
  • editorOverviewRuler.wordHighlightStrongForeground#35333170
  • editorRuler.foreground#35333170
  • editorSuggestWidget.background#313030
  • editorSuggestWidget.border#41423E
  • editorSuggestWidget.focusHighlightForeground#E0DCDC
  • editorSuggestWidget.foreground#687053
  • editorSuggestWidget.highlightForeground#E0DCDC
  • editorSuggestWidget.selectedBackground#B4979780
  • editorSuggestWidget.selectedForeground#E0DCDC
  • editorUnicodeHighlight.background#35333170
  • editorWarning.foreground#B4A697
  • editorWhitespace.foreground#35333170
  • editorWidget.background#313030
  • editorWidget.border#41423E
  • editorWidget.foreground#E0DCDC
  • errorForeground#B69696
  • extensionButton.prominentBackground#B49797aa
  • extensionButton.prominentForeground#2E2E2E
  • extensionButton.prominentHoverBackground#B49797
  • focusBorder#41423E
  • foreground#E0DCDC
  • gitDecoration.addedResourceForeground#0CB70C
  • gitDecoration.conflictingResourceForeground#B4A697
  • gitDecoration.deletedResourceForeground#B69696
  • gitDecoration.ignoredResourceForeground#687053
  • gitDecoration.modifiedResourceForeground#98A6B3
  • gitDecoration.renamedResourceForeground#FF6965
  • gitDecoration.untrackedResourceForeground#C6BFBE
  • input.background#313030
  • input.border#687053
  • input.foreground#E0DCDC
  • input.placeholderForeground#687053
  • inputOption.activeBorder#FF6965
  • inputValidation.errorBorder#B69696
  • inputValidation.infoBorder#98A6B3
  • inputValidation.warningBorder#B4A697
  • list.activeSelectionBackground#B4979770
  • list.activeSelectionForeground#E0DCDC
  • list.dropBackground#3F3B3B
  • list.dropBetweenBackground#41423E
  • list.errorForeground#B69696
  • list.focusBackground#B4979750
  • list.focusForeground#E0DCDC
  • list.highlightForeground#FF6965
  • list.hoverBackground#B4979720
  • list.hoverForeground#E0DCDC
  • list.inactiveFocusBackground#322F2F
  • list.inactiveSelectionBackground#B4979760
  • list.inactiveSelectionForeground#C6BFBE
  • list.warningForeground#B4A697
  • listFilterWidget.background#3F3B3B
  • listFilterWidget.noMatchesOutline#B69696
  • listFilterWidget.outline#41423E
  • merge.border#41423E
  • merge.currentContentBackground#98A6B320
  • merge.currentHeaderBackground#98A6B340
  • merge.incomingContentBackground#0CB70C20
  • merge.incomingHeaderBackground#0CB70C40
  • mergeEditor.change.background#B4A697
  • notificationLink.foreground#98A6B3
  • notifications.background#322F2F
  • notifications.border#41423E
  • notifications.foreground#E0DCDC
  • notificationsErrorIcon.foreground#B69696
  • notificationsInfoIcon.foreground#98A6B3
  • notificationsWarningIcon.foreground#B4A697
  • panel.background#322F2F
  • panel.border#FF6965
  • panelInput.border#687053
  • panelTitle.activeBorder#FF6965
  • panelTitle.activeForeground#E0DCDC
  • panelTitle.inactiveForeground#687053
  • peekView.border#B49797
  • peekViewEditor.background#313030
  • peekViewEditor.matchHighlightBackground#5C615170
  • peekViewResult.background#313030
  • peekViewResult.fileForeground#E0DCDC
  • peekViewResult.lineForeground#E0DCDC
  • peekViewResult.matchHighlightBackground#35333170
  • peekViewResult.selectionBackground#322F2F
  • peekViewResult.selectionForeground#E0DCDC
  • peekViewTitle.background#313030
  • peekViewTitleDescription.foreground#C6BFBE
  • peekViewTitleLabel.foreground#E0DCDC
  • pickerGroup.border#B49797
  • pickerGroup.foreground#E8B6B5
  • progressBar.background#FF6965
  • selection.background#B4979750
  • settings.checkboxBackground#313030
  • settings.checkboxBorder#41423E
  • settings.checkboxForeground#E0DCDC
  • settings.dropdownBackground#313030
  • settings.dropdownBorder#41423E
  • settings.dropdownForeground#E0DCDC
  • settings.focusedRowBackground#35333170
  • settings.focusedRowBorder#687053
  • settings.headerBorder#41423E
  • settings.headerForeground#E0DCDC
  • settings.inactiveSelectedItemBorder#687053
  • settings.modifiedItemIndicator#B4A697
  • settings.numberInputBackground#313030
  • settings.numberInputBorder#687053
  • settings.numberInputForeground#E0DCDC
  • settings.rowHoverBackground#35333170
  • settings.settingsHeaderHoverForeground#E0DCDC
  • settings.textInputBackground#313030
  • settings.textInputBorder#687053
  • settings.textInputForeground#E0DCDC
  • sideBar.background#313030
  • sideBarActivityBarTop.border#41423E
  • sideBarSectionHeader.background#322F2F
  • sideBarSectionHeader.border#41423E
  • sideBarStickyScroll.background#313030
  • sideBarStickyScroll.border#41423E
  • sideBarStickyScroll.shadow#41423E
  • sideBarTitle.background#313030
  • sideBarTitle.foreground#E0DCDC
  • statusBar.background#B49797
  • statusBar.debuggingBackground#B4A697
  • statusBar.debuggingForeground#2E2E2E
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#C6BFBE
  • statusBar.noFolderForeground#2E2E2E
  • statusBarItem.activeBackground#B49797aa
  • statusBarItem.errorBackground#B69696
  • statusBarItem.errorForeground#2E2E2E
  • statusBarItem.errorHoverBackground#B69696aa
  • statusBarItem.hoverBackground#B49797aa
  • statusBarItem.prominentBackground#B49797aa
  • statusBarItem.prominentForeground#2E2E2E
  • statusBarItem.prominentHoverBackground#B49797aa
  • statusBarItem.prominentHoverForeground#2E2E2E
  • statusBarItem.remoteBackground#FF6965
  • statusBarItem.remoteForeground#2E2E2E
  • statusBarItem.remoteHoverBackground#FF6965aa
  • statusBarItem.warningBackground#B4A697
  • statusBarItem.warningForeground#2E2E2E
  • statusBarItem.warningHoverBackground#B4A697aa
  • tab.activeBackground#322F2F
  • tab.activeBorderTop#FF6965
  • tab.activeForeground#E0DCDC
  • tab.border#41423E
  • tab.hoverBackground#322F2F80
  • tab.hoverForeground#E0DCDC
  • tab.inactiveBackground#313030
  • tab.inactiveForeground#687053
  • tab.selectedBackground#35333170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9466FF
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#9C71FF
  • terminal.ansiBrightCyan#07EDC2
  • terminal.ansiBrightGreen#77FDB0
  • terminal.ansiBrightMagenta#EF7AFC
  • terminal.ansiBrightRed#FF5F9D
  • terminal.ansiBrightWhite#FAF9F8
  • terminal.ansiBrightYellow#BBE722
  • terminal.ansiCyan#00AE8C
  • terminal.ansiGreen#02B64E
  • terminal.ansiMagenta#F25CFF
  • terminal.ansiRed#FF67A3
  • terminal.ansiWhite#FFFFFE
  • terminal.ansiYellow#769800
  • terminal.background#313030
  • terminal.border#41423E
  • terminal.foreground#E0DCDC
  • terminal.inactiveSelectionBackground#514C4870
  • terminal.selectionBackground#514C4870
  • textBlockQuote.background#3F3B3B
  • textBlockQuote.border#41423E
  • textCodeBlock.background#3F3B3B
  • textLink.activeForeground#98A6B3
  • textLink.foreground#B49797
  • textPreformat.background#3F3B3B
  • textPreformat.foreground#E0DCDC
  • textSeparator.foreground#E0DCDC
  • titleBar.activeBackground#322F2F
  • titleBar.activeForeground#E0DCDC
  • titleBar.inactiveBackground#322F2F
  • titleBar.inactiveForeground#687053
  • widget.border#41423E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E0DCDC
meta.diff, meta.diff.header#687053
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E8B8B0
emphasisitalic
strongbold
invalid#B69696strikethrough
invalid.deprecated#E0DCDCunderline italic
header#E8B8B0
source.ini, source.ignore, source#C6BFBE
markup.inserted#E8B8B0
markup.deleted#B69696
markup.changed#98A6B3
markup.error#B69696
markup.underlineunderline
markup.bold#B4A697bold
markup.heading#FF6965bold
markup.italic#C6BFBEitalic
markup.inline.raw, markup.raw.restructuredtext#FF6965
markup.underline.link, markup.underline.link.image, markup.quote#98A6B3
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#B49797
meta.separator.markdown#FF6965
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EDCAC9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#B4A697
entity.name.class, entity.name.type.class, entity.other.inherited-class#B49797
entity.name.tag, entity.other.attribute-name.parent-selector#F1DED0
entity.other.attribute-name#B49797
entity.name.function, meta.function-call, meta.method-call, meta.method#FF6965
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#ECD1D0
support#E09894
entity.name, variable.other.key#FF6965
entity.name.type#E6B3B2
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E2C5AC
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#E2ECCB
entity.other.attribute-name.class.css#FF6965
storage.class, storage.type#B49797
storage.modifier#EAC3C3
comment, punctuation.definition.comment, unused.comment, wildcard.comment#687053
constant#E8B8B0
constant.other.color#E7B9B1
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E7C3A7
constant.other.date, constant.other.timestamp#E6B5B2
keyword.operator#F0E1E0
keyword.other.unit#E6B5AD
keyword.control, keyword.other.template, keyword.other.substitution#D7E8B0
keyword.other.this#E8B8B0
keyword.control.import, keyword.control.from#CBDEBA
keyword.control.new, keyword.operator.new, keyword.other.important.css#B49797
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#BBE2A1
meta.attribute-selector.scss#DAE8BA
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F1DED0
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E7DABB
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#B49797
support.constant.property-value.css, constant.numeric.css#C6BFBE
keyword.control.at-rule.apply.tailwind#CBDEBA
keyword.control.at-rule.tailwind.tailwind#D7E8B0
keyword.control.at-rule.layer.tailwind#BBE2A1
meta.selector#DAE8BA
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F5F1F0
punctuation.definition.constant.restructuredtext#E8B8B0
string.quoted.docstring.multi#FF6965
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#F5F1F0
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E7DABB
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#FFFFFE
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#E8E2DE
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#EFEAE6
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#EFE8E6
punctuation.definition.directive.restructuredtext#E8B8B0
variable#D7E3BA
variable.other.alias.yaml#D7E3BAunderline
variable.language, variable.parameter.function.language.special#E7C3A7
variable.other.constant#CEE9C4
support.variable#D7E3BA
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C4E5C2
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#B4A697
support.function, support.type.property-name#F4E9E1
storage#DEEBC2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#769800
punctuation.definition.group.capture.regexp#FF67A3
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF67A3
punctuation.definition.character-class.regexp#BBE722
punctuation.definition.group.regexp#9C71FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF67A3
meta.assertion.look-ahead.regexp#9C71FF
source.json meta.structure.dictionary.json support.type.property-name.json#FF6965
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B49797
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#98A6B3
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#B4A697
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#B69696
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#0CB70C
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#FF6965
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#B49797
token.info-token#98A6B3
token.warn-token#B4A697
token.error-token#B69696
token.debug-token#B4A697