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#2C2C2E
  • activityBar.activeBorder#00000000
  • activityBar.background#3E3636
  • activityBar.border#1E1E1E
  • activityBar.foreground#F5F5F5
  • activityBar.inactiveForeground#6E6663
  • activityBarBadge.background#F2C94C
  • activityBarBadge.foreground#1A1A1A
  • activityBarTop.activeBackground#2C2C2E
  • activityBarTop.activeBorder#00000000
  • activityBarTop.background#3E3636
  • activityBarTop.dropBorder#F2BC3C
  • activityBarTop.foreground#F5F5F5
  • activityBarTop.inactiveForeground#6E6663
  • badge.background#F2BC3C
  • badge.foreground#1A1A1A
  • breadcrumb.activeSelectionForeground#F2BC3C
  • breadcrumb.background#1E1E1E
  • breadcrumb.focusForeground#F2F2F2
  • breadcrumb.foreground#6E6E6E
  • breadcrumbPicker.background#262626
  • button.background#F2BC3C
  • button.border#F2BC3C
  • button.foreground#1A1A1A
  • button.hoverBackground#F5CB5C
  • button.secondaryBackground#413C3C
  • button.secondaryBorder#5D5555
  • button.secondaryForeground#8E8E93
  • button.secondaryHoverBackground#413C3C
  • chat.avatarBackground#B399D4
  • chat.avatarForeground#1A1A1A
  • chat.editedFileForeground#B399D4
  • chat.requestBackground#383838
  • chat.requestBorder#2E2E2E
  • chat.requestBubbleBackground#2C2C2E
  • chat.requestBubbleHoverBackground#3E3636
  • chat.slashCommandBackground#B399D430
  • chat.slashCommandForeground#B399D4
  • commandCenter.activeBackground#2E2E2E
  • commandCenter.activeForeground#F2F2F2
  • commandCenter.background#262626
  • commandCenter.border#2E2E2E
  • commandCenter.foreground#9B9B9B
  • commandCenter.inactiveForeground#6E6E6E
  • debugToolBar.background#262626
  • debugToolBar.border#2E2E2E
  • descriptionForeground#9B9B9B
  • dropdown.background#262626
  • dropdown.border#2E2E2E
  • dropdown.foreground#F2F2F2
  • editor.background#1E1E1E
  • editor.findMatchBackground#B399D450
  • editor.findMatchHighlightBackground#B399D430
  • editor.focusedStackFrameHighlightBackground#8FBF8F20
  • editor.foreground#F2F2F2
  • editor.inactiveSelectionBackground#B399D425
  • editor.lineHighlightBackground#262626
  • editor.lineHighlightBorder#262626
  • editor.rangeHighlightBackground#B399D420
  • editor.selectionBackground#B399D440
  • editor.selectionHighlightBackground#B399D430
  • editor.stackFrameHighlightBackground#FFCC6620
  • editor.wordHighlightBackground#B399D425
  • editor.wordHighlightStrongBackground#B399D440
  • editorBracketHighlight.foreground1#B399D4
  • editorBracketHighlight.foreground2#6FB1D6
  • editorBracketHighlight.foreground3#FFCC66
  • editorBracketHighlight.foreground4#8FBF8F
  • editorBracketHighlight.foreground5#F2F2F2
  • editorBracketHighlight.foreground6#9B9B9B
  • editorBracketHighlight.unexpectedBracket.foreground#FF6961
  • editorBracketMatch.background#B399D430
  • editorBracketMatch.border#B399D4
  • editorCursor.foreground#B399D4
  • editorError.foreground#FF6961
  • editorGhostText.border#2E2E2E
  • editorGhostText.foreground#6E6E6E
  • editorGroup.border#262626
  • editorGroupHeader.noTabsBackground#1E1E1E
  • editorGroupHeader.tabsBackground#262626
  • editorGutter.addedBackground#8FBF8F
  • editorGutter.background#1E1E1E
  • editorGutter.deletedBackground#FF6961
  • editorGutter.modifiedBackground#FFCC66
  • editorHint.foreground#8FBF8F
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#2E2E2E
  • editorIndentGuide.activeBackground1#9B9B9B
  • editorIndentGuide.background1#262626
  • editorInfo.foreground#6FB1D6
  • editorLineNumber.activeForeground#F2BC3C
  • editorLineNumber.foreground#6E6E6E
  • editorRuler.foreground#262626
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#2E2E2E
  • editorSuggestWidget.foreground#F2F2F2
  • editorSuggestWidget.highlightForeground#B399D4
  • editorSuggestWidget.selectedBackground#B399D4
  • editorWarning.foreground#FFCC66
  • editorWhitespace.foreground#262626
  • editorWidget.background#262626
  • editorWidget.border#2E2E2E
  • errorForeground#FF6961
  • extensionBadge.remoteBackground#B399D4
  • extensionBadge.remoteForeground#1A1A1A
  • extensionButton.prominentBackground#B399D4
  • extensionButton.prominentForeground#1A1A1A
  • extensionButton.prominentHoverBackground#B399D4
  • focusBorder#00000000
  • foreground#F2F2F2
  • gitDecoration.addedResourceForeground#8FBF8F
  • gitDecoration.conflictingResourceForeground#FF6961
  • gitDecoration.deletedResourceForeground#FF6961
  • gitDecoration.ignoredResourceForeground#6E6E6E
  • gitDecoration.modifiedResourceForeground#FFCC66
  • gitDecoration.untrackedResourceForeground#8FBF8F
  • icon.foreground#F2BC3C
  • inlineChat.background#383838
  • inlineChat.border#B399D4
  • inlineChat.foreground#F2F2F2
  • inlineChat.shadow#00000040
  • inlineChatInput.background#262626
  • inlineChatInput.border#B399D4
  • inlineChatInput.placeholderForeground#9B9B9B
  • input.background#262626
  • input.border#2E2E2E
  • input.foreground#F2F2F2
  • input.placeholderForeground#9B9B9B
  • inputOption.activeBackground#B399D4
  • inputOption.activeForeground#1A1A1A
  • inputValidation.errorBackground#FF696120
  • inputValidation.errorBorder#FF6961
  • inputValidation.infoBackground#6FB1D620
  • inputValidation.infoBorder#6FB1D6
  • inputValidation.warningBackground#FFCC6620
  • inputValidation.warningBorder#FFCC66
  • list.activeSelectionBackground#3E3636
  • list.activeSelectionForeground#F2F2F2
  • list.errorForeground#FF6961
  • list.focusForeground#FFFFFF
  • list.focusOutline#F2BC3C
  • list.highlightForeground#B399D4
  • list.hoverBackground#3E3636
  • list.hoverForeground#F2F2F2
  • list.inactiveSelectionBackground#3E3636
  • list.inactiveSelectionForeground#C7C2BE
  • list.warningForeground#FFCC66
  • menu.background#282828
  • menu.foreground#F2F2F2
  • menu.selectionBackground#F2BC3C
  • menu.selectionForeground#1A1A1A
  • menu.separatorBackground#2E2E2E
  • menubar.selectionBackground#2C2C2E
  • menubar.selectionForeground#F2BC3C
  • minimap.background#1E1E1E
  • minimap.errorHighlight#FF6961
  • minimap.selectionHighlight#B399D480
  • minimap.warningHighlight#FFCC66
  • minimapGutter.addedBackground#8FBF8F
  • minimapGutter.deletedBackground#FF6961
  • minimapGutter.modifiedBackground#FFCC66
  • notificationCenterHeader.background#2E2E2E
  • notificationCenterHeader.foreground#9B9B9B
  • notificationLink.foreground#B399D4
  • notifications.background#2E2E2E
  • notifications.border#262626
  • notifications.foreground#F2F2F2
  • notificationsErrorIcon.foreground#FF6961
  • notificationsInfoIcon.foreground#6FB1D6
  • notificationsWarningIcon.foreground#FFCC66
  • panel.background#1E1E1E
  • panel.border#2E2E2E
  • panelTitle.activeBorder#B399D4
  • panelTitle.activeForeground#F2F2F2
  • panelTitle.inactiveForeground#6E6E6E
  • peekView.border#B399D4
  • peekViewEditor.background#262626
  • peekViewEditor.matchHighlightBackground#B399D440
  • peekViewResult.background#2E2E2E
  • peekViewResult.fileForeground#F2F2F2
  • peekViewResult.lineForeground#9B9B9B
  • peekViewResult.matchHighlightBackground#B399D440
  • peekViewResult.selectionBackground#B399D4
  • peekViewResult.selectionForeground#1A1A1A
  • peekViewTitle.background#262626
  • peekViewTitleDescription.foreground#9B9B9B
  • peekViewTitleLabel.foreground#F2F2F2
  • pickerGroup.border#2E2E2E
  • pickerGroup.foreground#B399D4
  • quickInput.background#262626
  • quickInput.foreground#F2F2F2
  • quickInputTitle.background#2E2E2E
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#B399D460
  • scrollbarSlider.background#2E2E2E80
  • scrollbarSlider.hoverBackground#383838A0
  • selection.background#B399D450
  • settings.checkboxBackground#262626
  • settings.checkboxForeground#F2F2F2
  • settings.dropdownBackground#262626
  • settings.dropdownForeground#F2F2F2
  • settings.headerForeground#9B9B9B
  • settings.modifiedItemIndicator#B399D4
  • settings.numberInputBackground#262626
  • settings.numberInputForeground#F2F2F2
  • settings.textInputBackground#262626
  • settings.textInputForeground#F2F2F2
  • sideBar.background#5D5555
  • sideBar.border#262626
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#282828
  • sideBarSectionHeader.foreground#9B9B9B
  • sideBarTitle.foreground#C7C2BE
  • statusBar.background#999090
  • statusBar.border#383838
  • statusBar.debuggingBackground#B399D4
  • statusBar.debuggingForeground#1A1A1A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#999090
  • statusBarItem.activeBackground#413C3C
  • statusBarItem.errorBackground#444444
  • statusBarItem.errorForeground#FF6961
  • statusBarItem.hoverBackground#413C3C
  • statusBarItem.hoverForeground#F2BC3C
  • statusBarItem.prominentBackground#565656
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.prominentHoverBackground#565656
  • statusBarItem.remoteBackground#413C3C
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.warningBackground#444444
  • statusBarItem.warningForeground#FFCC66
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#F2BC3C
  • tab.activeBorderTop#F2BC3C
  • tab.activeForeground#F2F2F2
  • tab.border#262626
  • tab.hoverBackground#2E2E2E
  • tab.hoverForeground#F2F2F2
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#9B9B9B
  • tab.unfocusedActiveBackground#262626
  • tab.unfocusedActiveForeground#9B9B9B
  • tab.unfocusedInactiveForeground#6E6E6E
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#6FB1D6
  • terminal.ansiBrightBlack#9B9B9B
  • terminal.ansiBrightBlue#6FB1D6
  • terminal.ansiBrightCyan#6FB1D6
  • terminal.ansiBrightGreen#8FBF8F
  • terminal.ansiBrightMagenta#B399D4
  • terminal.ansiBrightRed#FF6961
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#6FB1D6
  • terminal.ansiGreen#8FBF8F
  • terminal.ansiMagenta#B399D4
  • terminal.ansiRed#FF6961
  • terminal.ansiWhite#F2F2F2
  • terminal.ansiYellow#FFCC66
  • terminal.background#1E1E1E
  • terminal.border#2E2E2E
  • terminal.dropBackground#262626
  • terminal.dropBorder#B399D4
  • terminal.dropForeground#F2F2F2
  • terminal.findMatchHighlightBackground#B399D440
  • terminal.findMatchHighlightBorder#B399D4
  • terminal.foreground#F2F2F2
  • terminal.inactiveSelectionBackground#B399D430
  • terminal.selectionBackground#B399D450
  • terminal.tab.activeBorder#B399D4
  • terminal.tab.activeForeground#F2F2F2
  • terminal.tab.hoverBackground#2E2E2E
  • terminal.tab.inactiveForeground#9B9B9B
  • terminal.tab.unfocusedActiveBorder#9B9B9B
  • terminal.tab.unfocusedActiveForeground#9B9B9B
  • terminal.tab.unfocusedInactiveForeground#6E6E6E
  • terminalCommandDecoration.defaultBackground#B399D4
  • terminalCommandDecoration.defaultForeground#1A1A1A
  • terminalCommandDecoration.errorBackground#FF6961
  • terminalCommandDecoration.errorForeground#1A1A1A
  • terminalCommandDecoration.runningBackground#6FB1D6
  • terminalCommandDecoration.runningForeground#1A1A1A
  • terminalCommandDecoration.successBackground#8FBF8F
  • terminalCommandDecoration.successForeground#1A1A1A
  • terminalCursor.background#1E1E1E
  • terminalCursor.foreground#B399D4
  • terminalOverviewRuler.border#2E2E2E
  • terminalOverviewRuler.cursorForeground#B399D4
  • textBlockQuote.background#262626
  • textBlockQuote.border#C7C2BE
  • textCodeBlock.background#000000
  • textLink.activeForeground#F5CB5C
  • textLink.foreground#F2BC3C
  • textPreformat.foreground#C7C2BE
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#1E1E1E
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#8E8E93
  • walkThrough.embeddedEditorBackground#262626
  • welcomePage.background#1E1E1E
  • welcomePage.progress.background#2E2E2E
  • welcomePage.progress.foreground#B399D4
  • welcomePage.tileBackground#262626
  • welcomePage.tileBorder#2E2E2E
  • window.activeBorder#262626
  • window.inactiveBorder#1E1E1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#CACFD2—
comment, punctuation.definition.comment#FFFEA3bold
punctuation, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.parameters, punctuation.definition.comment, punctuation.separator, punctuation.separator.continuation, punctuation.separator.inheritance, punctuation.separator.namespace, punctuation.separator.class, punctuation.separator.method, punctuation.separator.parameter, punctuation.separator.array, punctuation.separator.key-value, punctuation.section, punctuation.section.embedded, punctuation.accessor, punctuation.terminator, keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.type, keyword.operator.new, keyword.operator.expression, keyword.operator.spread, keyword.operator.optional, keyword.operator.ternary, keyword.operator.nullish, keyword.operator.pipe, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.void, keyword.operator.delete, keyword.operator.in, keyword.operator.of, keyword.operator.class, keyword.operator.rust, keyword.operator.arrow, keyword.operator.range, keyword.operator.channel, storage.type.function.arrow, meta.tag punctuation.definition.tag, meta.brace.round, meta.brace.square, meta.brace.curly#F0A0B4—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#80EE98—
meta.tag.sgml, markup.deleted.git_gutter#E999ED—
entity.name.tag#45C3E6—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#C792EAitalic
source.sass keyword.control#45C3E6—
entity.other.attribute-name.class#C792EA—
entity.other.attribute-name#C792EA—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#E999ED—
support.type#B794C7italic
entity.name.type.class.java, entity.name.type.enum.java, entity.name.type.record.java, storage.type.generic.java, storage.type.generic.wildcard.java#B794C7italic
entity.name.type.cs, entity.name.type.alias.cs, entity.name.type.class.cs, entity.name.type.delegate.cs, entity.name.type.enum.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.union.cs#B794C7italic
entity.name.type.class.python#B794C7italic
entity.name.type.trait.php, entity.name.type.interface.php, entity.name.type.enum.php, entity.name.type.class.php#B794C7italic
entity.name.type.go, entity.name.type.any.go, entity.name.type.comparable.go#B794C7italic
entity.name.type.cpp, entity.name.type.class.cpp, entity.name.type.enum.cpp, entity.name.type.constructor.cpp, entity.name.type.destructor.cpp, entity.name.type.struct.parameter.cpp, entity.name.type.enum.parameter.cpp, entity.name.type.union.parameter.cpp, entity.name.type.class.parameter.cpp#B794C7italic
support.class.dart#B794C7italic
entity.name.type.rust, entity.name.type.primitive.rust, entity.name.type.numeric.rust, entity.name.type.option.rust, entity.name.type.result.rust#B794C7italic
variable, string constant.other.placeholder#59D7FB—
meta.block variable.other#59D7FB—
support.other.variable#59D7FB—
string.other.link#45C3E6—
constant.other.color#C792EA—
keyword, storage.type, storage.modifier, keyword.other#59D7FB—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#C792EA—
variable.language#FFB347italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#C792EA—
entity.name.method.js#80EE98italic
meta.class-method.js entity.name.function.js, variable.function.constructor#FFFFFF—
constant.numeric, constant.language, support.constant, constant.character, constant.escape#59D7FB—
variable.parameter#80EE98—
keyword.other.unit#80EE98—
keyword.other.unit.percentage#F0A0B4—
tag.decorator.js entity.name.tag.js#B794C7italic
meta.decorator.ts#B794C7italic
meta.decorator.tsx#B794C7italic
entity.name.function.decorator.python#B794C7italic
storage.type.annotation.java#B794C7italic
support.attribute.php, support.attribute.builtin.php#B794C7italic
punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#B794C7italic
entity.other.attribute#B794C7italic
storage.modifier.attribute.swift#B794C7italic
entity.name.type.annotation.kotlin, entity.name.type.annotation-site.kotlin#B794C7italic
storage.type.annotation.dart#B794C7italic
string.regexp#FFCCFF—
constant.character.escape#F0A0B4—
*url*, *link*, *uri*—underline
markup.inserted#45C3E6—
markup.changed#C792EA—
markup.deleted#FF5370—
invalid, invalid.illegal#FF5370—
source.js constant.other.object.key.js string.unquoted.label.js#FFB6C1italic
source.json meta.structure.dictionary.json support.type.property-name.json#45C3E6—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA—
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#80EE98—
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#FFCCFF—
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#FFF568—
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#cacfd2—
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#C08552—
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#F39C12—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5370—
markup.heading.markdown punctuation.definition.heading.markdown#FFB6C1—
markdown.heading, markup.heading | markup.heading entity.name#45C3E6bold
markup.bold, markup.bold string#45C3E6bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#F39C12bold
markup.italic#80EE98italic
text.html.markdown, punctuation.definition.list_item.markdown#CACFD2—
text.html.markdown markup.inline.raw.markdown#80EE98—
markup.underline#FFB6C1underline
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#FFB6C1—
markup.quote punctuation.definition.blockquote.markdown#FFB6C1—
markup.quote—italic
string.other.link.description.title.markdown#C08552—
string.other.link.title.markdown#45C3E6—
constant.other.reference.link.markdown#FFCB6B—
markup.raw.block#FFB6C1—
markup.raw.block.fenced.markdown#FFB6C1—
punctuation.definition.fenced.markdown#FFB6C1—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#CACFD2—
variable.language.fenced.markdown#CACFD2—
meta.separator#FFB6C1bold
markup.table#CACFD2—
support.type.property-name.css#A86FCD—
support.function.name.css, support.function.css#8FDFA1—
constant.numeric.css, keyword.other.unit.css, constant.other.color.rgb-value.css, support.constant.property-value.css, string.quoted.single.css, string.quoted.double.css#FFFFFF—
Macchiato by geek-tics - VS Code Theme