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#1F232270
  • activityBar.activeBorder#69C9AA
  • activityBar.background#181B1B
  • activityBar.foreground#EFF0F0
  • activityBar.inactiveForeground#6D6969
  • activityBarBadge.background#CC7F7F
  • activityBarBadge.foreground#222020
  • activityBarTop.foreground#EFF0F0
  • badge.background#CC7F7F
  • badge.foreground#222020
  • breadcrumb.activeForeground#EFF0F0
  • breadcrumb.activeSelectionForeground#EFF0F0
  • breadcrumb.background#181B1B
  • breadcrumb.focusForeground#EFF0F0
  • breadcrumb.foreground#6D6969
  • breadcrumbPicker.background#181B1B
  • button.background#CC7F7Fdb
  • button.foreground#222020
  • button.hoverBackground#CC7F7F
  • button.secondaryBackground#69C9AAdb
  • button.secondaryForeground#222020
  • button.secondaryHoverBackground#69C9AA
  • checkbox.background#19191A
  • checkbox.foreground#EFF0F0
  • debugToolBar.background#9FA6AD
  • debugToolBar.foreground#222020
  • descriptionForeground#E5E6E6
  • diffEditor.diagonalFill#9FA6AD
  • diffEditor.insertedLineBackground#9FA6AD40
  • diffEditor.insertedTextBackground#9FA6AD50
  • diffEditor.insertedTextBorder#9FA6AD
  • diffEditor.removedLineBackground#CF7C7C40
  • diffEditor.removedTextBackground#CF7C7C50
  • diffEditor.removedTextBorder#CF7C7C
  • diffEditorGutter.insertedLineBackground#9FA6AD
  • diffEditorGutter.removedLineBackground#CF7C7C
  • disabledForeground#6D6969
  • dropdown.background#252C2C
  • dropdown.border#2A3232
  • dropdown.foreground#EFF0F0
  • editor.background#19191A
  • editor.findMatchBackground#3F3F5070
  • editor.findMatchForeground#EFF0F0
  • editor.findMatchHighlightBackground#1F232270
  • editor.findMatchHighlightForeground#EFF0F0
  • editor.findRangeHighlightBackground#363F3C70
  • editor.foldBackground#1F232270
  • editor.foldPlaceholderForeground#EFF0F0
  • editor.foreground#EFF0F0
  • editor.hoverHighlightBackground#1F232270
  • editor.inactiveSelectionBackground#363F3C70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E5E6E6
  • editor.rangeHighlightBackground#1F232270
  • editor.selectionBackground#363F3C70
  • editor.selectionForeground#EFF0F0
  • editor.selectionHighlightBackground#363F3C70
  • editor.snippetFinalTabstopHighlightBackground#1F232270
  • editor.snippetTabstopHighlightBackground#1F232270
  • editor.symbolHighlightBackground#1F232270
  • editor.wordHighlightBackground#1F232270
  • editor.wordHighlightStrongBackground#1F232250
  • editor.wordHighlightTextBackground#1F232270
  • editorCodeLens.foreground#6D6969
  • editorCursor.background#1F232270
  • editorCursor.foreground#69C9AA
  • editorError.foreground#CF7C7C
  • editorGroup.border#2A3232
  • editorGroup.dropBackground#252C2C
  • editorGroup.emptyBackground#19191A
  • editorGroupHeader.border#2A3232
  • editorGroupHeader.tabsBackground#19191A
  • editorGutter.addedBackground#4D9F4D
  • editorGutter.background#19191A
  • editorGutter.commentRangeForeground#6D6969
  • editorGutter.deletedBackground#CF7C7C
  • editorGutter.modifiedBackground#9FA6AD
  • editorHint.foreground#4D9F4D
  • editorHoverWidget.background#19191A
  • editorHoverWidget.border#2A3232
  • editorHoverWidget.foreground#EFF0F0
  • editorHoverWidget.highlightForeground#EFF0F0
  • editorHoverWidget.statusBarBackground#19191A
  • editorIndentGuide.activeBackground1#69C9AA
  • editorIndentGuide.background1#1F232270
  • editorInfo.foreground#9FA6AD
  • editorLineNumber.activeForeground#69C9AA
  • editorLineNumber.dimmedForeground#6D696990
  • editorLineNumber.foreground#6D6969
  • editorLink.activeForeground#9FA6AD
  • editorMarkerNavigation.background#181B1B
  • editorMarkerNavigationError.background#181B1B
  • editorMarkerNavigationWarning.background#181B1B
  • editorMultiCursor.primary.background#1F232270
  • editorMultiCursor.primary.foreground#69C9AA
  • editorMultiCursor.secondary.background#1F232270
  • editorMultiCursor.secondary.foreground#EFF0F0
  • editorOverviewRuler.addedForeground#4D9F4D
  • editorOverviewRuler.border#2A3232
  • editorOverviewRuler.commentForeground#6D6969
  • editorOverviewRuler.commonContentForeground#EFF0F0
  • editorOverviewRuler.currentContentForeground#9FA6AD
  • editorOverviewRuler.deletedForeground#CF7C7C
  • editorOverviewRuler.errorForeground#CF7C7C
  • editorOverviewRuler.findMatchForeground#EFF0F0
  • editorOverviewRuler.incomingContentForeground#4D9F4D
  • editorOverviewRuler.infoForeground#9FA6AD
  • editorOverviewRuler.modifiedForeground#9FA6AD
  • editorOverviewRuler.rangeHighlightForeground#1F232270
  • editorOverviewRuler.selectionHighlightForeground#363F3C70
  • editorOverviewRuler.warningForeground#CCA77F
  • editorOverviewRuler.wordHighlightForeground#1F232270
  • editorOverviewRuler.wordHighlightStrongForeground#1F232270
  • editorRuler.foreground#1F232270
  • editorSuggestWidget.background#19191A
  • editorSuggestWidget.border#2A3232
  • editorSuggestWidget.focusHighlightForeground#EFF0F0
  • editorSuggestWidget.foreground#6D6969
  • editorSuggestWidget.highlightForeground#EFF0F0
  • editorSuggestWidget.selectedBackground#CC7F7F80
  • editorSuggestWidget.selectedForeground#EFF0F0
  • editorUnicodeHighlight.background#1F232270
  • editorWarning.foreground#CCA77F
  • editorWhitespace.foreground#1F232270
  • editorWidget.background#19191A
  • editorWidget.border#2A3232
  • editorWidget.foreground#EFF0F0
  • errorForeground#CF7C7C
  • extensionButton.prominentBackground#CC7F7Faa
  • extensionButton.prominentForeground#222020
  • extensionButton.prominentHoverBackground#CC7F7F
  • focusBorder#2A3232
  • foreground#EFF0F0
  • gitDecoration.addedResourceForeground#4D9F4D
  • gitDecoration.conflictingResourceForeground#CCA77F
  • gitDecoration.deletedResourceForeground#CF7C7C
  • gitDecoration.ignoredResourceForeground#6D6969
  • gitDecoration.modifiedResourceForeground#9FA6AD
  • gitDecoration.renamedResourceForeground#69C9AA
  • gitDecoration.untrackedResourceForeground#E5E6E6
  • input.background#19191A
  • input.border#6D6969
  • input.foreground#EFF0F0
  • input.placeholderForeground#6D6969
  • inputOption.activeBorder#69C9AA
  • inputValidation.errorBorder#CF7C7C
  • inputValidation.infoBorder#9FA6AD
  • inputValidation.warningBorder#CCA77F
  • list.activeSelectionBackground#CC7F7F70
  • list.activeSelectionForeground#EFF0F0
  • list.dropBackground#252C2C
  • list.dropBetweenBackground#2A3232
  • list.errorForeground#CF7C7C
  • list.focusBackground#CC7F7F50
  • list.focusForeground#EFF0F0
  • list.highlightForeground#69C9AA
  • list.hoverBackground#CC7F7F20
  • list.hoverForeground#EFF0F0
  • list.inactiveFocusBackground#181B1B
  • list.inactiveSelectionBackground#CC7F7F60
  • list.inactiveSelectionForeground#E5E6E6
  • list.warningForeground#CCA77F
  • listFilterWidget.background#252C2C
  • listFilterWidget.noMatchesOutline#CF7C7C
  • listFilterWidget.outline#2A3232
  • merge.border#2A3232
  • merge.currentContentBackground#9FA6AD20
  • merge.currentHeaderBackground#9FA6AD40
  • merge.incomingContentBackground#4D9F4D20
  • merge.incomingHeaderBackground#4D9F4D40
  • mergeEditor.change.background#CCA77F
  • notificationLink.foreground#9FA6AD
  • notifications.background#181B1B
  • notifications.border#2A3232
  • notifications.foreground#EFF0F0
  • notificationsErrorIcon.foreground#CF7C7C
  • notificationsInfoIcon.foreground#9FA6AD
  • notificationsWarningIcon.foreground#CCA77F
  • panel.background#181B1B
  • panel.border#69C9AA
  • panelInput.border#6D6969
  • panelTitle.activeBorder#69C9AA
  • panelTitle.activeForeground#EFF0F0
  • panelTitle.inactiveForeground#6D6969
  • peekView.border#CC7F7F
  • peekViewEditor.background#19191A
  • peekViewEditor.matchHighlightBackground#3F3F5070
  • peekViewResult.background#19191A
  • peekViewResult.fileForeground#EFF0F0
  • peekViewResult.lineForeground#EFF0F0
  • peekViewResult.matchHighlightBackground#1F232270
  • peekViewResult.selectionBackground#181B1B
  • peekViewResult.selectionForeground#EFF0F0
  • peekViewTitle.background#19191A
  • peekViewTitleDescription.foreground#E5E6E6
  • peekViewTitleLabel.foreground#EFF0F0
  • pickerGroup.border#CC7F7F
  • pickerGroup.foreground#CCE1B7
  • progressBar.background#69C9AA
  • selection.background#CC7F7F50
  • settings.checkboxBackground#19191A
  • settings.checkboxBorder#2A3232
  • settings.checkboxForeground#EFF0F0
  • settings.dropdownBackground#19191A
  • settings.dropdownBorder#2A3232
  • settings.dropdownForeground#EFF0F0
  • settings.focusedRowBackground#1F232270
  • settings.focusedRowBorder#6D6969
  • settings.headerBorder#2A3232
  • settings.headerForeground#EFF0F0
  • settings.inactiveSelectedItemBorder#6D6969
  • settings.modifiedItemIndicator#CCA77F
  • settings.numberInputBackground#19191A
  • settings.numberInputBorder#6D6969
  • settings.numberInputForeground#EFF0F0
  • settings.rowHoverBackground#1F232270
  • settings.settingsHeaderHoverForeground#EFF0F0
  • settings.textInputBackground#19191A
  • settings.textInputBorder#6D6969
  • settings.textInputForeground#EFF0F0
  • sideBar.background#19191A
  • sideBarActivityBarTop.border#2A3232
  • sideBarSectionHeader.background#181B1B
  • sideBarSectionHeader.border#2A3232
  • sideBarStickyScroll.background#19191A
  • sideBarStickyScroll.border#2A3232
  • sideBarStickyScroll.shadow#2A3232
  • sideBarTitle.background#19191A
  • sideBarTitle.foreground#EFF0F0
  • statusBar.background#CC7F7F
  • statusBar.debuggingBackground#CCA77F
  • statusBar.debuggingForeground#222020
  • statusBar.foreground#222020
  • statusBar.noFolderBackground#E5E6E6
  • statusBar.noFolderForeground#222020
  • statusBarItem.activeBackground#CC7F7Faa
  • statusBarItem.errorBackground#CF7C7C
  • statusBarItem.errorForeground#222020
  • statusBarItem.errorHoverBackground#CF7C7Caa
  • statusBarItem.hoverBackground#CC7F7Faa
  • statusBarItem.prominentBackground#CC7F7Faa
  • statusBarItem.prominentForeground#222020
  • statusBarItem.prominentHoverBackground#CC7F7Faa
  • statusBarItem.prominentHoverForeground#222020
  • statusBarItem.remoteBackground#69C9AA
  • statusBarItem.remoteForeground#222020
  • statusBarItem.remoteHoverBackground#69C9AAaa
  • statusBarItem.warningBackground#CCA77F
  • statusBarItem.warningForeground#222020
  • statusBarItem.warningHoverBackground#CCA77Faa
  • tab.activeBackground#181B1B
  • tab.activeBorderTop#69C9AA
  • tab.activeForeground#EFF0F0
  • tab.border#2A3232
  • tab.hoverBackground#181B1B80
  • tab.hoverForeground#EFF0F0
  • tab.inactiveBackground#19191A
  • tab.inactiveForeground#6D6969
  • tab.selectedBackground#1F232270
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2E83FC
  • terminal.ansiBrightBlack#3D3D3D
  • terminal.ansiBrightBlue#4882D5
  • terminal.ansiBrightCyan#1FF4D1
  • terminal.ansiBrightGreen#5CFE78
  • terminal.ansiBrightMagenta#DF59C1
  • terminal.ansiBrightRed#F25451
  • terminal.ansiBrightWhite#FDFDFC
  • terminal.ansiBrightYellow#E4EA74
  • terminal.ansiCyan#01967E
  • terminal.ansiGreen#29B040
  • terminal.ansiMagenta#D055B4
  • terminal.ansiRed#E15754
  • terminal.ansiWhite#FEFEFD
  • terminal.ansiYellow#A5AA44
  • terminal.background#19191A
  • terminal.border#2A3232
  • terminal.foreground#EFF0F0
  • terminal.inactiveSelectionBackground#363F3C70
  • terminal.selectionBackground#363F3C70
  • textBlockQuote.background#252C2C
  • textBlockQuote.border#2A3232
  • textCodeBlock.background#252C2C
  • textLink.activeForeground#9FA6AD
  • textLink.foreground#CC7F7F
  • textPreformat.background#252C2C
  • textPreformat.foreground#EFF0F0
  • textSeparator.foreground#EFF0F0
  • titleBar.activeBackground#181B1B
  • titleBar.activeForeground#EFF0F0
  • titleBar.inactiveBackground#181B1B
  • titleBar.inactiveForeground#6D6969
  • widget.border#2A3232

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#EFF0F0
meta.diff, meta.diff.header#6D6969
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#EBCBCB
emphasisitalic
strongbold
invalid#CF7C7Cstrikethrough
invalid.deprecated#EFF0F0underline italic
header#EBCBCB
source.ini, source.ignore, source#E5E6E6
markup.inserted#EBCBCB
markup.deleted#CF7C7C
markup.changed#9FA6AD
markup.error#CF7C7C
markup.underlineunderline
markup.bold#CCA77Fbold
markup.heading#69C9AAbold
markup.italic#E5E6E6italic
markup.inline.raw, markup.raw.restructuredtext#69C9AA
markup.underline.link, markup.underline.link.image, markup.quote#9FA6AD
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#CC7F7F
meta.separator.markdown#69C9AA
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#D1D1EB
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CCA77F
entity.name.class, entity.name.type.class, entity.other.inherited-class#CC7F7F
entity.name.tag, entity.other.attribute-name.parent-selector#E9C8C8
entity.other.attribute-name#CC7F7F
entity.name.function, meta.function-call, meta.method-call, meta.method#69C9AA
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#D4E2C5
support#9DD8C4
entity.name, variable.other.key#69C9AA
entity.name.type#E7D2C6
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DFD7B9
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D6E5C8
entity.other.attribute-name.class.css#69C9AA
storage.class, storage.type#CC7F7F
storage.modifier#CAE7D2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6D6969
constant#EBCBCB
constant.other.color#ACDDB8
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#D9B39B
constant.other.date, constant.other.timestamp#BBBBE2
keyword.operator#C8DFDF
keyword.other.unit#C9E0B2
keyword.control, keyword.other.template, keyword.other.substitution#DAB69F
keyword.other.this#EBCBCB
keyword.control.import, keyword.control.from#DCC8AD
keyword.control.new, keyword.operator.new, keyword.other.important.css#CC7F7F
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#DED4AF
meta.attribute-selector.scss#E5C3C3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#E9C8C8
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E9D6CD
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#CC7F7F
support.constant.property-value.css, constant.numeric.css#E5E6E6
keyword.control.at-rule.apply.tailwind#DCC8AD
keyword.control.at-rule.tailwind.tailwind#DAB69F
keyword.control.at-rule.layer.tailwind#DED4AF
meta.selector#E5C3C3
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F4F0F0
punctuation.definition.constant.restructuredtext#EBCBCB
string.quoted.docstring.multi#69C9AA
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#F4F0F0
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E9D6CD
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#FEFEFD
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#EBE6E5
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#EAE3E1
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#EEE9E8
punctuation.definition.directive.restructuredtext#EBCBCB
variable#BBDDDD
variable.other.alias.yaml#BBDDDDunderline
variable.language, variable.parameter.function.language.special#D9B39B
variable.other.constant#BAD4DE
support.variable#BBDDDD
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C3D4E0
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#CCA77F
support.function, support.type.property-name#E8E3F2
storage#E2CABB
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A5AA44
punctuation.definition.group.capture.regexp#E15754
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E15754
punctuation.definition.character-class.regexp#E4EA74
punctuation.definition.group.regexp#4882D5
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E15754
meta.assertion.look-ahead.regexp#4882D5
source.json meta.structure.dictionary.json support.type.property-name.json#69C9AA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CC7F7F
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#9FA6AD
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#CCA77F
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#CF7C7C
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#4D9F4D
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#69C9AA
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#CC7F7F
token.info-token#9FA6AD
token.warn-token#CCA77F
token.error-token#CF7C7C
token.debug-token#CCA77F