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#18141170
  • activityBar.activeBorder#BCA576
  • activityBar.background#0E0D0C
  • activityBar.foreground#E0E0D6
  • activityBar.inactiveForeground#6D5F51
  • activityBarBadge.background#C69186
  • activityBarBadge.foreground#121217
  • activityBarTop.foreground#E0E0D6
  • badge.background#C69186
  • badge.foreground#121217
  • breadcrumb.activeForeground#E0E0D6
  • breadcrumb.activeSelectionForeground#E0E0D6
  • breadcrumb.background#0E0D0C
  • breadcrumb.focusForeground#E0E0D6
  • breadcrumb.foreground#6D5F51
  • breadcrumbPicker.background#0E0D0C
  • button.background#C69186db
  • button.foreground#121217
  • button.hoverBackground#C69186
  • button.secondaryBackground#BCA576db
  • button.secondaryForeground#121217
  • button.secondaryHoverBackground#BCA576
  • checkbox.background#16120E
  • checkbox.foreground#E0E0D6
  • debugToolBar.background#8FA9BC
  • debugToolBar.foreground#121217
  • descriptionForeground#DBD0C2
  • diffEditor.diagonalFill#8FA9BC
  • diffEditor.insertedLineBackground#8FA9BC40
  • diffEditor.insertedTextBackground#8FA9BC50
  • diffEditor.insertedTextBorder#8FA9BC
  • diffEditor.removedLineBackground#C18A8A40
  • diffEditor.removedTextBackground#C18A8A50
  • diffEditor.removedTextBorder#C18A8A
  • diffEditorGutter.insertedLineBackground#8FA9BC
  • diffEditorGutter.removedLineBackground#C18A8A
  • disabledForeground#6D5F51
  • dropdown.background#131111
  • dropdown.border#1C2126
  • dropdown.foreground#E0E0D6
  • editor.background#16120E
  • editor.findMatchBackground#2A304C70
  • editor.findMatchForeground#E0E0D6
  • editor.findMatchHighlightBackground#18141170
  • editor.findMatchHighlightForeground#E0E0D6
  • editor.findRangeHighlightBackground#322B2A70
  • editor.foldBackground#18141170
  • editor.foldPlaceholderForeground#E0E0D6
  • editor.foreground#E0E0D6
  • editor.hoverHighlightBackground#18141170
  • editor.inactiveSelectionBackground#322B2A70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#DBD0C2
  • editor.rangeHighlightBackground#18141170
  • editor.selectionBackground#322B2A70
  • editor.selectionForeground#E0E0D6
  • editor.selectionHighlightBackground#322B2A70
  • editor.snippetFinalTabstopHighlightBackground#18141170
  • editor.snippetTabstopHighlightBackground#18141170
  • editor.symbolHighlightBackground#18141170
  • editor.wordHighlightBackground#18141170
  • editor.wordHighlightStrongBackground#18141150
  • editor.wordHighlightTextBackground#18141170
  • editorCodeLens.foreground#6D5F51
  • editorCursor.background#18141170
  • editorCursor.foreground#BCA576
  • editorError.foreground#C18A8A
  • editorGroup.border#1C2126
  • editorGroup.dropBackground#131111
  • editorGroup.emptyBackground#16120E
  • editorGroupHeader.border#1C2126
  • editorGroupHeader.tabsBackground#16120E
  • editorGutter.addedBackground#659365
  • editorGutter.background#16120E
  • editorGutter.commentRangeForeground#6D5F51
  • editorGutter.deletedBackground#C18A8A
  • editorGutter.modifiedBackground#8FA9BC
  • editorHint.foreground#659365
  • editorHoverWidget.background#16120E
  • editorHoverWidget.border#1C2126
  • editorHoverWidget.foreground#E0E0D6
  • editorHoverWidget.highlightForeground#E0E0D6
  • editorHoverWidget.statusBarBackground#16120E
  • editorIndentGuide.activeBackground1#BCA576
  • editorIndentGuide.background1#18141170
  • editorInfo.foreground#8FA9BC
  • editorLineNumber.activeForeground#BCA576
  • editorLineNumber.dimmedForeground#6D5F5190
  • editorLineNumber.foreground#6D5F51
  • editorLink.activeForeground#8FA9BC
  • editorMarkerNavigation.background#0E0D0C
  • editorMarkerNavigationError.background#0E0D0C
  • editorMarkerNavigationWarning.background#0E0D0C
  • editorMultiCursor.primary.background#18141170
  • editorMultiCursor.primary.foreground#BCA576
  • editorMultiCursor.secondary.background#18141170
  • editorMultiCursor.secondary.foreground#E0E0D6
  • editorOverviewRuler.addedForeground#659365
  • editorOverviewRuler.border#1C2126
  • editorOverviewRuler.commentForeground#6D5F51
  • editorOverviewRuler.commonContentForeground#E0E0D6
  • editorOverviewRuler.currentContentForeground#8FA9BC
  • editorOverviewRuler.deletedForeground#C18A8A
  • editorOverviewRuler.errorForeground#C18A8A
  • editorOverviewRuler.findMatchForeground#E0E0D6
  • editorOverviewRuler.incomingContentForeground#659365
  • editorOverviewRuler.infoForeground#8FA9BC
  • editorOverviewRuler.modifiedForeground#8FA9BC
  • editorOverviewRuler.rangeHighlightForeground#18141170
  • editorOverviewRuler.selectionHighlightForeground#322B2A70
  • editorOverviewRuler.warningForeground#CBA681
  • editorOverviewRuler.wordHighlightForeground#18141170
  • editorOverviewRuler.wordHighlightStrongForeground#18141170
  • editorRuler.foreground#18141170
  • editorSuggestWidget.background#16120E
  • editorSuggestWidget.border#1C2126
  • editorSuggestWidget.focusHighlightForeground#E0E0D6
  • editorSuggestWidget.foreground#6D5F51
  • editorSuggestWidget.highlightForeground#E0E0D6
  • editorSuggestWidget.selectedBackground#C6918680
  • editorSuggestWidget.selectedForeground#E0E0D6
  • editorUnicodeHighlight.background#18141170
  • editorWarning.foreground#CBA681
  • editorWhitespace.foreground#18141170
  • editorWidget.background#16120E
  • editorWidget.border#1C2126
  • editorWidget.foreground#E0E0D6
  • errorForeground#C18A8A
  • extensionButton.prominentBackground#C69186aa
  • extensionButton.prominentForeground#121217
  • extensionButton.prominentHoverBackground#C69186
  • focusBorder#1C2126
  • foreground#E0E0D6
  • gitDecoration.addedResourceForeground#659365
  • gitDecoration.conflictingResourceForeground#CBA681
  • gitDecoration.deletedResourceForeground#C18A8A
  • gitDecoration.ignoredResourceForeground#6D5F51
  • gitDecoration.modifiedResourceForeground#8FA9BC
  • gitDecoration.renamedResourceForeground#BCA576
  • gitDecoration.untrackedResourceForeground#DBD0C2
  • input.background#16120E
  • input.border#6D5F51
  • input.foreground#E0E0D6
  • input.placeholderForeground#6D5F51
  • inputOption.activeBorder#BCA576
  • inputValidation.errorBorder#C18A8A
  • inputValidation.infoBorder#8FA9BC
  • inputValidation.warningBorder#CBA681
  • list.activeSelectionBackground#C6918670
  • list.activeSelectionForeground#E0E0D6
  • list.dropBackground#131111
  • list.dropBetweenBackground#1C2126
  • list.errorForeground#C18A8A
  • list.focusBackground#C6918650
  • list.focusForeground#E0E0D6
  • list.highlightForeground#BCA576
  • list.hoverBackground#C6918620
  • list.hoverForeground#E0E0D6
  • list.inactiveFocusBackground#0E0D0C
  • list.inactiveSelectionBackground#C6918660
  • list.inactiveSelectionForeground#DBD0C2
  • list.warningForeground#CBA681
  • listFilterWidget.background#131111
  • listFilterWidget.noMatchesOutline#C18A8A
  • listFilterWidget.outline#1C2126
  • merge.border#1C2126
  • merge.currentContentBackground#8FA9BC20
  • merge.currentHeaderBackground#8FA9BC40
  • merge.incomingContentBackground#65936520
  • merge.incomingHeaderBackground#65936540
  • mergeEditor.change.background#CBA681
  • notificationLink.foreground#8FA9BC
  • notifications.background#0E0D0C
  • notifications.border#1C2126
  • notifications.foreground#E0E0D6
  • notificationsErrorIcon.foreground#C18A8A
  • notificationsInfoIcon.foreground#8FA9BC
  • notificationsWarningIcon.foreground#CBA681
  • panel.background#0E0D0C
  • panel.border#BCA576
  • panelInput.border#6D5F51
  • panelTitle.activeBorder#BCA576
  • panelTitle.activeForeground#E0E0D6
  • panelTitle.inactiveForeground#6D5F51
  • peekView.border#C69186
  • peekViewEditor.background#16120E
  • peekViewEditor.matchHighlightBackground#2A304C70
  • peekViewResult.background#16120E
  • peekViewResult.fileForeground#E0E0D6
  • peekViewResult.lineForeground#E0E0D6
  • peekViewResult.matchHighlightBackground#18141170
  • peekViewResult.selectionBackground#0E0D0C
  • peekViewResult.selectionForeground#E0E0D6
  • peekViewTitle.background#16120E
  • peekViewTitleDescription.foreground#DBD0C2
  • peekViewTitleLabel.foreground#E0E0D6
  • pickerGroup.border#C69186
  • pickerGroup.foreground#ECE1AC
  • progressBar.background#BCA576
  • selection.background#C6918650
  • settings.checkboxBackground#16120E
  • settings.checkboxBorder#1C2126
  • settings.checkboxForeground#E0E0D6
  • settings.dropdownBackground#16120E
  • settings.dropdownBorder#1C2126
  • settings.dropdownForeground#E0E0D6
  • settings.focusedRowBackground#18141170
  • settings.focusedRowBorder#6D5F51
  • settings.headerBorder#1C2126
  • settings.headerForeground#E0E0D6
  • settings.inactiveSelectedItemBorder#6D5F51
  • settings.modifiedItemIndicator#CBA681
  • settings.numberInputBackground#16120E
  • settings.numberInputBorder#6D5F51
  • settings.numberInputForeground#E0E0D6
  • settings.rowHoverBackground#18141170
  • settings.settingsHeaderHoverForeground#E0E0D6
  • settings.textInputBackground#16120E
  • settings.textInputBorder#6D5F51
  • settings.textInputForeground#E0E0D6
  • sideBar.background#16120E
  • sideBarActivityBarTop.border#1C2126
  • sideBarSectionHeader.background#0E0D0C
  • sideBarSectionHeader.border#1C2126
  • sideBarStickyScroll.background#16120E
  • sideBarStickyScroll.border#1C2126
  • sideBarStickyScroll.shadow#1C2126
  • sideBarTitle.background#16120E
  • sideBarTitle.foreground#E0E0D6
  • statusBar.background#C69186
  • statusBar.debuggingBackground#CBA681
  • statusBar.debuggingForeground#121217
  • statusBar.foreground#121217
  • statusBar.noFolderBackground#DBD0C2
  • statusBar.noFolderForeground#121217
  • statusBarItem.activeBackground#C69186aa
  • statusBarItem.errorBackground#C18A8A
  • statusBarItem.errorForeground#121217
  • statusBarItem.errorHoverBackground#C18A8Aaa
  • statusBarItem.hoverBackground#C69186aa
  • statusBarItem.prominentBackground#C69186aa
  • statusBarItem.prominentForeground#121217
  • statusBarItem.prominentHoverBackground#C69186aa
  • statusBarItem.prominentHoverForeground#121217
  • statusBarItem.remoteBackground#BCA576
  • statusBarItem.remoteForeground#121217
  • statusBarItem.remoteHoverBackground#BCA576aa
  • statusBarItem.warningBackground#CBA681
  • statusBarItem.warningForeground#121217
  • statusBarItem.warningHoverBackground#CBA681aa
  • tab.activeBackground#0E0D0C
  • tab.activeBorderTop#BCA576
  • tab.activeForeground#E0E0D6
  • tab.border#1C2126
  • tab.hoverBackground#0E0D0C80
  • tab.hoverForeground#E0E0D6
  • tab.inactiveBackground#16120E
  • tab.inactiveForeground#6D5F51
  • tab.selectedBackground#18141170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8F7AA7
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#E0D3EE
  • terminal.ansiBrightCyan#98E0C9
  • terminal.ansiBrightGreen#BCEDA0
  • terminal.ansiBrightMagenta#FAEAF7
  • terminal.ansiBrightRed#EEA6BD
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#E0D385
  • terminal.ansiCyan#4B8976
  • terminal.ansiGreen#77B553
  • terminal.ansiMagenta#BD82B2
  • terminal.ansiRed#C66383
  • terminal.ansiWhite#FCFBFA
  • terminal.ansiYellow#A2985B
  • terminal.background#16120E
  • terminal.border#1C2126
  • terminal.foreground#E0E0D6
  • terminal.inactiveSelectionBackground#322B2A70
  • terminal.selectionBackground#322B2A70
  • textBlockQuote.background#131111
  • textBlockQuote.border#1C2126
  • textCodeBlock.background#131111
  • textLink.activeForeground#8FA9BC
  • textLink.foreground#C69186
  • textPreformat.background#131111
  • textPreformat.foreground#E0E0D6
  • textSeparator.foreground#E0E0D6
  • titleBar.activeBackground#0E0D0C
  • titleBar.activeForeground#E0E0D6
  • titleBar.inactiveBackground#0E0D0C
  • titleBar.inactiveForeground#6D5F51
  • widget.border#1C2126

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E0E0D6
meta.diff, meta.diff.header#6D5F51
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F2EABF
emphasisitalic
strongbold
invalid#C18A8Astrikethrough
invalid.deprecated#E0E0D6underline italic
header#F2EABF
source.ini, source.ignore, source#DBD0C2
markup.inserted#F2EABF
markup.deleted#C18A8A
markup.changed#8FA9BC
markup.error#C18A8A
markup.underlineunderline
markup.bold#CBA681bold
markup.heading#BCA576bold
markup.italic#DBD0C2italic
markup.inline.raw, markup.raw.restructuredtext#BCA576
markup.underline.link, markup.underline.link.image, markup.quote#8FA9BC
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#C69186
meta.separator.markdown#BCA576
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EDBFB5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CBA681
entity.name.class, entity.name.type.class, entity.other.inherited-class#C69186
entity.name.tag, entity.other.attribute-name.parent-selector#F0CEBC
entity.other.attribute-name#C69186
entity.name.function, meta.function-call, meta.method-call, meta.method#BCA576
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E9C2B9
support#EAB499
entity.name, variable.other.key#BCA576
entity.name.type#B1BCEC
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#B9ABE8
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EFCEC8
entity.other.attribute-name.class.css#BCA576
storage.class, storage.type#C69186
storage.modifier#BFC8ED
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6D5F51
constant#F2EABF
constant.other.color#E9ABA0
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#8396E8
constant.other.date, constant.other.timestamp#B5C0ED
keyword.operator#E0BEB8
keyword.other.unit#EAD3A4
keyword.control, keyword.other.template, keyword.other.substitution#E3C077
keyword.other.this#F2EABF
keyword.control.import, keyword.control.from#E8DCA1
keyword.control.new, keyword.operator.new, keyword.other.important.css#C69186
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E8EAA4
meta.attribute-selector.scss#EDBFB5
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F0CEBC
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EDDCBF
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#C69186
support.constant.property-value.css, constant.numeric.css#DBD0C2
keyword.control.at-rule.apply.tailwind#E8DCA1
keyword.control.at-rule.tailwind.tailwind#E3C077
keyword.control.at-rule.layer.tailwind#E8EAA4
meta.selector#EDBFB5
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E3DBD3
punctuation.definition.constant.restructuredtext#F2EABF
string.quoted.docstring.multi#BCA576
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#E3DBD3
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EDDCBF
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#FCFBFA
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#F0ECE6
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#FFFFFF
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#F9F7F6
punctuation.definition.directive.restructuredtext#F2EABF
variable#B2BBE6
variable.other.alias.yaml#B2BBE6underline
variable.language, variable.parameter.function.language.special#8396E8
variable.other.constant#D4CBF0
support.variable#B2BBE6
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C1BBE7
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#CBA681
support.function, support.type.property-name#F2DCCE
storage#ADB8EB
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A2985B
punctuation.definition.group.capture.regexp#C66383
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C66383
punctuation.definition.character-class.regexp#E0D385
punctuation.definition.group.regexp#E0D3EE
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C66383
meta.assertion.look-ahead.regexp#E0D3EE
source.json meta.structure.dictionary.json support.type.property-name.json#BCA576
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C69186
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#8FA9BC
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#CBA681
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#C18A8A
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#659365
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#BCA576
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#C69186
token.info-token#8FA9BC
token.warn-token#CBA681
token.error-token#C18A8A
token.debug-token#CBA681