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#A2546E20
  • activityBar.activeBorder#A2546E
  • activityBar.background#140F12
  • activityBar.foreground#C4728A
  • activityBar.inactiveForeground#6D6259
  • activityBarBadge.background#A2546E
  • activityBarBadge.foreground#F5EDE5
  • badge.background#A2546E
  • badge.foreground#F5EDE5
  • breadcrumb.activeSelectionForeground#C4728A
  • breadcrumb.background#1A1518
  • breadcrumb.focusForeground#E8E0D8
  • breadcrumb.foreground#B0A59A
  • breadcrumbPicker.background#1A1518
  • button.background#A2546E
  • button.foreground#F5EDE5
  • button.hoverBackground#B86580
  • button.secondaryBackground#3D3238
  • button.secondaryForeground#E8E0D8
  • button.secondaryHoverBackground#4D4248
  • diffEditor.insertedLineBackground#7BAB7B15
  • diffEditor.insertedTextBackground#7BAB7B20
  • diffEditor.removedLineBackground#C46B6B15
  • diffEditor.removedTextBackground#C46B6B20
  • dropdown.background#1A1518
  • dropdown.border#3D3238
  • dropdown.foreground#E8E0D8
  • editor.background#1A1518
  • editor.findMatchBackground#C9A86C50
  • editor.findMatchHighlightBackground#C9A86C30
  • editor.findRangeHighlightBackground#A2546E20
  • editor.foldBackground#261E2250
  • editor.foreground#E8E0D8
  • editor.hoverHighlightBackground#A2546E20
  • editor.lineHighlightBackground#261E2250
  • editor.lineHighlightBorder#261E2200
  • editor.rangeHighlightBackground#A2546E15
  • editor.selectionBackground#A2546E40
  • editor.selectionHighlightBackground#A2546E25
  • editor.wordHighlightBackground#D4B48325
  • editor.wordHighlightStrongBackground#D4B48340
  • editorBracketHighlight.foreground1#A2546E
  • editorBracketHighlight.foreground2#D4B483
  • editorBracketHighlight.foreground3#6B9B9B
  • editorBracketHighlight.foreground4#9B7BB0
  • editorBracketHighlight.foreground5#8B9EB0
  • editorBracketHighlight.foreground6#C9A86C
  • editorBracketHighlight.unexpectedBracket.foreground#C46B6B
  • editorCursor.foreground#C4728A
  • editorError.foreground#C46B6B
  • editorGroup.border#3D3238
  • editorGroup.dropBackground#A2546E30
  • editorGroupHeader.tabsBackground#140F12
  • editorGutter.addedBackground#7BAB7B
  • editorGutter.deletedBackground#C46B6B
  • editorGutter.modifiedBackground#7B9BB0
  • editorHint.foreground#6B9B9B
  • editorHoverWidget.background#1A1518
  • editorHoverWidget.border#3D3238
  • editorIndentGuide.activeBackground#3D323860
  • editorIndentGuide.background#3D323830
  • editorInfo.foreground#7B9BB0
  • editorLineNumber.activeForeground#A2546E
  • editorLineNumber.foreground#4D4248
  • editorLink.activeForeground#C4728A
  • editorOverviewRuler.addedForeground#7BAB7BA0
  • editorOverviewRuler.border#3D323800
  • editorOverviewRuler.deletedForeground#C46B6BA0
  • editorOverviewRuler.errorForeground#C46B6B
  • editorOverviewRuler.infoForeground#7B9BB0
  • editorOverviewRuler.modifiedForeground#7B9BB0A0
  • editorOverviewRuler.selectionHighlightForeground#A2546E80
  • editorOverviewRuler.warningForeground#D4A86C
  • editorOverviewRuler.wordHighlightForeground#D4B48380
  • editorOverviewRuler.wordHighlightStrongForeground#D4B483A0
  • editorRuler.foreground#3D323850
  • editorSuggestWidget.background#1A1518
  • editorSuggestWidget.foreground#E8E0D8
  • editorSuggestWidget.highlightForeground#C4728A
  • editorSuggestWidget.selectedBackground#A2546E40
  • editorWarning.foreground#D4A86C
  • editorWhitespace.foreground#3D323850
  • editorWidget.background#1A1518
  • editorWidget.border#3D3238
  • errorForeground#C46B6B
  • focusBorder#A2546E80
  • foreground#E8E0D8
  • gitDecoration.conflictingResourceForeground#D4A86C
  • gitDecoration.deletedResourceForeground#C46B6B
  • gitDecoration.ignoredResourceForeground#6D6259
  • gitDecoration.modifiedResourceForeground#7B9BB0
  • gitDecoration.stageDeletedResourceForeground#C46B6B
  • gitDecoration.stageModifiedResourceForeground#7B9BB0
  • gitDecoration.untrackedResourceForeground#7BAB7B
  • input.background#140F12
  • input.border#3D3238
  • input.foreground#E8E0D8
  • input.placeholderForeground#6D6259
  • inputOption.activeBackground#A2546E30
  • inputOption.activeBorder#A2546E
  • inputValidation.errorBorder#C46B6B
  • inputValidation.infoBorder#7B9BB0
  • inputValidation.warningBorder#D4A86C
  • list.activeSelectionBackground#A2546E50
  • list.activeSelectionForeground#F5EDE5
  • list.dropBackground#A2546E30
  • list.errorForeground#C46B6B
  • list.focusBackground#A2546E40
  • list.highlightForeground#C4728A
  • list.hoverBackground#261E2280
  • list.inactiveSelectionBackground#3D323850
  • list.warningForeground#D4A86C
  • menu.background#1A1518
  • menu.foreground#E8E0D8
  • menu.selectionBackground#A2546E40
  • menu.selectionForeground#F5EDE5
  • menu.separatorBackground#3D3238
  • menubar.selectionBackground#A2546E40
  • menubar.selectionForeground#F5EDE5
  • minimap.background#1A151880
  • minimap.errorHighlight#C46B6B
  • minimap.findMatchHighlight#C9A86C80
  • minimap.selectionHighlight#A2546E60
  • minimap.warningHighlight#D4A86C
  • notificationCenter.border#3D3238
  • notificationCenterHeader.background#1A1518
  • notificationCenterHeader.foreground#E8E0D8
  • notificationLink.foreground#C4728A
  • notifications.background#1A1518
  • notifications.border#3D3238
  • notifications.foreground#E8E0D8
  • panel.background#140F12
  • panel.border#3D3238
  • panelTitle.activeBorder#A2546E
  • panelTitle.activeForeground#E8E0D8
  • panelTitle.inactiveForeground#6D6259
  • peekView.border#A2546E
  • peekViewEditor.background#140F12
  • peekViewEditor.matchHighlightBackground#C9A86C40
  • peekViewResult.background#1A1518
  • peekViewResult.fileForeground#E8E0D8
  • peekViewResult.lineForeground#B0A59A
  • peekViewResult.matchHighlightBackground#C9A86C40
  • peekViewResult.selectionBackground#A2546E40
  • peekViewResult.selectionForeground#F5EDE5
  • peekViewTitle.background#1A1518
  • peekViewTitleDescription.foreground#B0A59A
  • peekViewTitleLabel.foreground#C4728A
  • progressBar.background#A2546E
  • quickInput.background#1A1518
  • quickInput.foreground#E8E0D8
  • quickInputList.focusBackground#A2546E40
  • quickInputTitle.background#140F12
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#A2546E60
  • scrollbarSlider.background#3D323850
  • scrollbarSlider.hoverBackground#4D424870
  • selection.background#A2546E40
  • settings.checkboxBackground#1A1518
  • settings.checkboxBorder#3D3238
  • settings.checkboxForeground#E8E0D8
  • settings.dropdownBackground#1A1518
  • settings.dropdownBorder#3D3238
  • settings.dropdownForeground#E8E0D8
  • settings.headerForeground#E8E0D8
  • settings.modifiedItemIndicator#A2546E
  • settings.numberInputBackground#140F12
  • settings.numberInputBorder#3D3238
  • settings.numberInputForeground#E8E0D8
  • settings.textInputBackground#140F12
  • settings.textInputBorder#3D3238
  • settings.textInputForeground#E8E0D8
  • sideBar.background#140F12
  • sideBar.foreground#B0A59A
  • sideBarSectionHeader.background#1A1518
  • sideBarSectionHeader.border#3D323800
  • sideBarSectionHeader.foreground#C4728A
  • sideBarTitle.foreground#E8E0D8
  • statusBar.background#140F12
  • statusBar.border#3D323800
  • statusBar.debuggingBackground#A2546E
  • statusBar.debuggingForeground#F5EDE5
  • statusBar.foreground#B0A59A
  • statusBar.noFolderBackground#1A1518
  • statusBar.noFolderForeground#B0A59A
  • statusBarItem.hoverBackground#3D3238
  • statusBarItem.prominentBackground#A2546E
  • statusBarItem.prominentHoverBackground#B86580
  • statusBarItem.remoteBackground#A2546E
  • statusBarItem.remoteForeground#F5EDE5
  • tab.activeBackground#1A1518
  • tab.activeBorderTop#A2546E
  • tab.activeForeground#E8E0D8
  • tab.border#140F12
  • tab.hoverBackground#261E22
  • tab.inactiveBackground#140F12
  • tab.inactiveForeground#6D6259
  • tab.unfocusedActiveForeground#B0A59A
  • tab.unfocusedInactiveForeground#6D6259
  • terminal.ansiBlack#1A1518
  • terminal.ansiBlue#7B9BB0
  • terminal.ansiBrightBlack#6D6259
  • terminal.ansiBrightBlue#8FAFC4
  • terminal.ansiBrightCyan#7FB0B0
  • terminal.ansiBrightGreen#8FC08F
  • terminal.ansiBrightMagenta#C4728A
  • terminal.ansiBrightRed#D88888
  • terminal.ansiBrightWhite#F5EDE5
  • terminal.ansiBrightYellow#E0BC82
  • terminal.ansiCyan#6B9B9B
  • terminal.ansiGreen#7BAB7B
  • terminal.ansiMagenta#A2546E
  • terminal.ansiRed#C46B6B
  • terminal.ansiWhite#E8E0D8
  • terminal.ansiYellow#D4A86C
  • terminal.background#1A1518
  • terminal.foreground#E8E0D8
  • titleBar.activeBackground#140F12
  • titleBar.activeForeground#E8E0D8
  • titleBar.border#3D323800
  • titleBar.inactiveBackground#140F12
  • titleBar.inactiveForeground#6D6259
  • tree.indentGuidesStroke#3D323860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#A2546E
comment, punctuation.definition.comment#6D6259italic
comment keyword.codetag.notation, comment.block.documentation keyword, storage.type.class.jsdoc#9B7BB0
comment.block.documentation variable.other, comment.block.documentation entity.name.type#6B9B9Bitalic
string#C9A86C
punctuation.definition.string.begin, punctuation.definition.string.end#A68B52
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#A2546E
meta.template.expression#E8E0D8
constant, variable.other.constant#D4B483
constant.numeric#9B7BB0
constant.language.boolean#C4728A
constant.language.null, constant.language.undefined#C4728Aitalic
keyword#A2546E
storage.type, storage.modifier#A2546Eitalic
keyword.control#A2546E
keyword.control.import, keyword.control.export, keyword.control.from#A2546Eitalic
entity.name.function, meta.function-call#8B9EB0
variable.parameter#D4B483italic
storage.type.function.arrow#A2546E
entity.name.type.class, entity.name.class#6B9B9Bbold
entity.name.type.interface#6B9B9Bitalic
entity.name.type, support.type#6B9B9Bitalic
entity.name.type.parameter#D4B483
variable#E8E0D8
variable.language#C4728Aitalic
variable.other.property, meta.object-literal.key#B0A59A
entity.name.tag#A2546E
entity.other.attribute-name#D4B483italic
string.quoted.double.html, string.quoted.single.html#C9A86C
meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6B9B9B
support.type.property-name.css#8B9EB0
support.constant.property-value.css, meta.property-value.css#D4B483
keyword.other.unit.css#9B7BB0
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#A2546E
keyword.operator#A2546E
keyword.operator.comparison, keyword.operator.relational#6B9B9B
keyword.operator.logical#A2546E
punctuation#B0A59A
punctuation.definition.block, meta.brace#B0A59A
string.regexp#C4728A
punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#9B7BB0
meta.decorator, punctuation.decorator#9B7BB0
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown#A2546Ebold
markup.bold#D4B483bold
markup.italic#9B7BB0italic
markup.underline.link, string.other.link#8B9EB0
markup.inline.raw, markup.fenced_code.block#C9A86C
markup.quote#6D6259italic
punctuation.definition.list.begin.markdown#A2546E
support.type.property-name.json#A2546E
string.quoted.double.json#C9A86C
entity.name.tag.yaml#A2546E
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python#C4728Aitalic
support.function.builtin.python, support.type.python#8B9EB0
support.function.magic.python#9B7BB0italic
entity.name.function.decorator.python, meta.function.decorator.python#9B7BB0
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#6D6259italic
constant.character.format.placeholder.other.python#A2546E
punctuation.definition.lifetime.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust#C4728Aitalic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#9B7BB0
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#6B9B9B
keyword.other.unsafe.rust#C4728Abold
storage.modifier.mut.rust#A2546Eitalic
entity.name.type.rust, entity.name.type.primitive.rust, support.type.primitive.rust#6B9B9B
entity.name.type.trait.rust#6B9B9Bitalic
keyword.other.impl.rust#A2546Eitalic
variable.language.self.rust#C4728Aitalic
entity.name.module.rust, entity.name.namespace.rust#6B9B9B
variable.language.this#C4728Aitalic
support.type.primitive.ts, support.type.builtin.ts#6B9B9B
entity.name.package.go#6B9B9B
support.function.builtin.go#8B9EB0
keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.conditional, meta.preprocessor#9B7BB0
support.type.sys-types.c, support.type.sys-types.cpp, storage.type.built-in.c, storage.type.built-in.cpp#6B9B9B
support.function#8B9EB0
support.class#6B9B9B
support.constant#D4B483
entity.name#6B9B9B
entity.name.namespace, entity.name.module#6B9B9B
invalid#C4728Aunderline
invalid.deprecated#6D6259strikethrough