Skip to main content
CodingTheme

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#E07A471a
  • activityBar.activeBorder#E07A47
  • activityBar.activeFocusBorder#E07A47
  • activityBar.background#202020
  • activityBar.border#00000000
  • activityBar.dropBorder#E07A4733
  • activityBar.foreground#E07A47
  • activityBar.inactiveForeground#5E5E5E
  • activityBarBadge.background#E07A47
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.activeBorder#E07A47
  • activityBarTop.dropBorder#E07A4733
  • activityBarTop.foreground#E07A47
  • activityBarTop.inactiveForeground#5E5E5E
  • badge.background#353535
  • badge.foreground#E4E4E4
  • breadcrumb.activeSelectionForeground#E07A47
  • breadcrumb.background#141414
  • breadcrumb.focusForeground#E07A47
  • breadcrumb.foreground#D0D0D0
  • breadcrumbPicker.background#1A1A1A
  • button.background#E07A47
  • button.border#00000000
  • button.foreground#FFFFFF
  • button.hoverBackground#ca6e40
  • button.secondaryBackground#353535
  • button.secondaryForeground#E4E4E4
  • button.secondaryHoverBackground#424242
  • button.separator#FFFFFF4d
  • checkbox.background#353535
  • checkbox.border#00000000
  • checkbox.foreground#E07A47
  • debugExceptionWidget.background#202020
  • debugExceptionWidget.border#FF7A7A
  • debugToolBar.background#202020
  • debugToolBar.border#00000000
  • descriptionForeground#B8B8B8
  • diffEditor.insertedLineBackground#86E89A1a
  • diffEditor.insertedTextBackground#86E89A26
  • diffEditor.removedLineBackground#FF7A7A1a
  • diffEditor.removedTextBackground#FF7A7A26
  • disabledForeground#D0D0D0
  • dropdown.background#1A1A1A
  • dropdown.border#E07A47
  • dropdown.foreground#E4E4E4
  • dropdown.listBackground#353535
  • editor.background#141414
  • editor.findMatchBackground#FFA65D4d
  • editor.findMatchHighlightBackground#FFA65D26
  • editor.findRangeHighlightBackground#FFA65D1a
  • editor.foreground#E4E4E4
  • editor.hoverHighlightBackground#E07A471a
  • editor.inactiveSelectionBackground#E07A4726
  • editor.lineHighlightBackground#E07A470d
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#E07A471a
  • editor.selectionBackground#E07A474d
  • editor.selectionHighlightBackground#E07A4733
  • editor.wordHighlightBackground#E07A4726
  • editor.wordHighlightStrongBackground#E07A4740
  • editorBracketHighlight.foreground1#FF7A7A
  • editorBracketHighlight.foreground2#FFA65D
  • editorBracketHighlight.foreground3#FFDF61
  • editorBracketHighlight.foreground4#86E89A
  • editorBracketHighlight.foreground5#7AB8FF
  • editorBracketHighlight.foreground6#C79BFF
  • editorBracketHighlight.unexpectedBracket.foreground#FF7A7A
  • editorBracketMatch.background#E07A4733
  • editorBracketMatch.border#E07A47
  • editorCursor.foreground#E07A47
  • editorError.foreground#FF7A7A
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#1A1A1A
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#86E89A
  • editorGutter.background#141414
  • editorGutter.commentRangeForeground#7A7A7A
  • editorGutter.deletedBackground#FF7A7A
  • editorGutter.foldingControlForeground#5E5E5E
  • editorGutter.modifiedBackground#FFDF61
  • editorHint.foreground#5DE4FA
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#424242
  • editorHoverWidget.foreground#E4E4E4
  • editorHoverWidget.statusBarBackground#202020
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#353535
  • editorInfo.foreground#7AB8FF
  • editorLineNumber.activeForeground#E4E4E4
  • editorLineNumber.foreground#5E5E5E
  • editorLink.activeForeground#7AB8FF
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#424242
  • editorSuggestWidget.focusHighlightForeground#E07A47
  • editorSuggestWidget.foreground#E4E4E4
  • editorSuggestWidget.highlightForeground#E07A47
  • editorSuggestWidget.selectedBackground#E07A4733
  • editorSuggestWidget.selectedForeground#E4E4E4
  • editorSuggestWidget.selectedIconForeground#E07A47
  • editorWarning.foreground#FFDF61
  • editorWhitespace.foreground#424242
  • editorWidget.background#1A1A1A
  • editorWidget.border#424242
  • editorWidget.foreground#E4E4E4
  • editorWidget.resizeBorder#E07A47
  • errorForeground#FF7A7A
  • focusBorder#E07A47
  • foreground#E4E4E4
  • gitDecoration.addedResourceForeground#7BD88F
  • gitDecoration.conflictingResourceForeground#FB923C
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#9CA3AF
  • gitDecoration.modifiedResourceForeground#FCD34D
  • gitDecoration.renamedResourceForeground#60A5FA
  • gitDecoration.stageDeletedResourceForeground#FCA5A5
  • gitDecoration.stageModifiedResourceForeground#FDE047
  • gitDecoration.submoduleResourceForeground#C084FC
  • gitDecoration.untrackedResourceForeground#4DD4E8
  • icon.foreground#E07A47
  • input.background#1A1A1A
  • input.border#424242
  • input.foreground#E4E4E4
  • input.placeholderForeground#5E5E5E
  • inputOption.activeBackground#E07A4733
  • inputOption.activeBorder#E07A47
  • inputOption.activeForeground#E4E4E4
  • inputOption.hoverBackground#E07A471a
  • inputValidation.errorBackground#1A1A1A
  • inputValidation.errorBorder#FF7A7A
  • inputValidation.errorForeground#E4E4E4
  • inputValidation.infoBackground#1A1A1A
  • inputValidation.infoBorder#7AB8FF
  • inputValidation.infoForeground#E4E4E4
  • inputValidation.warningBackground#1A1A1A
  • inputValidation.warningBorder#FFDF61
  • inputValidation.warningForeground#E4E4E4
  • list.activeSelectionBackground#E07A4733
  • list.activeSelectionForeground#E4E4E4
  • list.activeSelectionIconForeground#E07A47
  • list.dropBackground#E07A4733
  • list.errorForeground#FF7A7A
  • list.focusBackground#E07A4726
  • list.focusForeground#E4E4E4
  • list.focusHighlightForeground#E07A47
  • list.highlightForeground#E07A47
  • list.hoverBackground#E07A471a
  • list.hoverForeground#E4E4E4
  • list.inactiveSelectionBackground#E07A4726
  • list.inactiveSelectionForeground#E4E4E4
  • list.inactiveSelectionIconForeground#E07A47
  • list.invalidItemForeground#FF7A7A
  • list.warningForeground#FFDF61
  • menu.background#1A1A1A
  • menu.foreground#E4E4E4
  • menu.selectionBackground#E07A4733
  • menu.selectionBorder#00000000
  • menu.selectionForeground#E4E4E4
  • menu.separatorBackground#424242
  • menubar.selectionBackground#E07A4733
  • menubar.selectionForeground#E4E4E4
  • minimap.background#141414
  • minimap.errorHighlight#FF7A7A
  • minimap.findMatchHighlight#FFA65D
  • minimap.foregroundOpacity#000000aa
  • minimap.selectionHighlight#E07A47
  • minimap.selectionOccurrenceHighlight#E07A47
  • minimap.warningHighlight#FFDF61
  • minimapGutter.addedBackground#86E89A
  • minimapGutter.deletedBackground#FF7A7A
  • minimapGutter.modifiedBackground#FFDF61
  • minimapSlider.activeBackground#E07A4766
  • minimapSlider.background#E07A4733
  • minimapSlider.hoverBackground#E07A474d
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#202020
  • notificationCenterHeader.foreground#E4E4E4
  • notificationLink.foreground#7AB8FF
  • notifications.background#1A1A1A
  • notifications.border#00000000
  • notifications.foreground#E4E4E4
  • notificationsErrorIcon.foreground#FF7A7A
  • notificationsInfoIcon.foreground#7AB8FF
  • notificationsWarningIcon.foreground#FFDF61
  • notificationToast.border#00000000
  • panel.background#1A1A1A
  • panel.border#00000000
  • panel.dropBorder#E07A4733
  • panelInput.border#424242
  • panelSection.border#424242
  • panelSection.dropBackground#E07A4733
  • panelSectionHeader.background#202020
  • panelSectionHeader.foreground#E4E4E4
  • panelTitle.activeBorder#E07A47
  • panelTitle.activeForeground#E4E4E4
  • panelTitle.inactiveForeground#5E5E5E
  • peekView.border#E07A47
  • peekViewEditor.background#1A1A1A
  • peekViewEditorGutter.background#1A1A1A
  • peekViewResult.background#202020
  • peekViewResult.fileForeground#E4E4E4
  • peekViewResult.lineForeground#B8B8B8
  • peekViewResult.matchHighlightBackground#FFA65D4d
  • peekViewResult.selectionBackground#E07A4733
  • peekViewResult.selectionForeground#E4E4E4
  • peekViewTitle.background#202020
  • peekViewTitleDescription.foreground#B8B8B8
  • peekViewTitleLabel.foreground#E4E4E4
  • progressBar.background#E07A47
  • sash.hoverBorder#E07A47
  • scrollbar.shadow#20202080
  • scrollbarSlider.activeBackground#E07A4766
  • scrollbarSlider.background#E07A4733
  • scrollbarSlider.hoverBackground#E07A474d
  • selection.background#E07A474d
  • settings.checkboxBackground#1A1A1A
  • settings.checkboxBorder#424242
  • settings.checkboxForeground#E4E4E4
  • settings.dropdownBackground#1A1A1A
  • settings.dropdownBorder#424242
  • settings.dropdownForeground#E4E4E4
  • settings.dropdownListBorder#424242
  • settings.focusedRowBackground#E07A471a
  • settings.focusedRowBorder#E07A47
  • settings.headerForeground#E4E4E4
  • settings.modifiedItemIndicator#E07A47
  • settings.numberInputBackground#1A1A1A
  • settings.numberInputBorder#424242
  • settings.numberInputForeground#E4E4E4
  • settings.rowHoverBackground#E07A470d
  • settings.textInputBackground#1A1A1A
  • settings.textInputBorder#424242
  • settings.textInputForeground#E4E4E4
  • sideBar.background#1A1A1A
  • sideBar.border#00000000
  • sideBar.dropBackground#E07A4733
  • sideBar.foreground#E4E4E4
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#E4E4E4
  • sideBarTitle.foreground#E4E4E4
  • statusBar.background#E07A47
  • statusBar.border#00000000
  • statusBar.debuggingBackground#FFA65D
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#E4E4E4
  • statusBar.foreground#E4E4E4
  • statusBar.noFolderBackground#C79BFF
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#E4E4E4
  • statusBarItem.activeBackground#E4E4E433
  • statusBarItem.errorBackground#FF7A7A
  • statusBarItem.errorForeground#E4E4E4
  • statusBarItem.hoverBackground#E4E4E41a
  • statusBarItem.prominentBackground#00000000
  • statusBarItem.prominentForeground#E4E4E4
  • statusBarItem.prominentHoverBackground#E4E4E41a
  • statusBarItem.remoteBackground#7AB8FF
  • statusBarItem.remoteForeground#E4E4E4
  • statusBarItem.warningBackground#FFDF61
  • statusBarItem.warningForeground#E4E4E4
  • tab.activeBackground#141414
  • tab.activeBorder#00000000
  • tab.activeBorderTop#E07A47
  • tab.activeForeground#E4E4E4
  • tab.activeModifiedBorder#FFDF61
  • tab.border#00000000
  • tab.hoverBackground#E07A471a
  • tab.hoverForeground#E4E4E4
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#5E5E5E
  • tab.inactiveModifiedBorder#FFDF6180
  • tab.lastPinnedBorder#424242
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#E07A4780
  • tab.unfocusedActiveForeground#E4E4E4
  • tab.unfocusedActiveModifiedBorder#FFDF61
  • tab.unfocusedHoverBackground#E07A470d
  • tab.unfocusedHoverForeground#E4E4E4
  • tab.unfocusedInactiveForeground#5E5E5E
  • tab.unfocusedInactiveModifiedBorder#FFDF6180
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#6CABF7
  • terminal.ansiBrightBlack#6A6A6A
  • terminal.ansiBrightBlue#92D5FF
  • terminal.ansiBrightCyan#7DFFFF
  • terminal.ansiBrightGreen#9FFFAF
  • terminal.ansiBrightMagenta#D6BBFF
  • terminal.ansiBrightRed#FFA8A8
  • terminal.ansiBrightWhite#D4D4D4
  • terminal.ansiBrightYellow#FFED7D
  • terminal.ansiCyan#4DD4E8
  • terminal.ansiGreen#7BD88F
  • terminal.ansiMagenta#B68BF7
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#9C9893
  • terminal.ansiYellow#FCD34D
  • terminal.background#141414
  • terminal.findMatchBackground#FFA65D4d
  • terminal.findMatchHighlightBackground#FFA65D26
  • terminal.foreground#E4E4E4
  • terminal.selectionBackground#E07A474d
  • terminalCursor.background#141414
  • terminalCursor.foreground#E07A47
  • textBlockQuote.background#1A1A1A
  • textBlockQuote.border#202020
  • textCodeBlock.background#1A1A1A
  • textLink.activeForeground#6293cc
  • textLink.foreground#7AB8FF
  • textPreformat.foreground#E4E4E4
  • textSeparator.foreground#E07A47
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#E4E4E4
  • titleBar.border#00000000
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#5E5E5E
  • tree.indentGuidesStroke#424242
  • tree.tableColumnsBorder#424242
  • tree.tableOddRowsBackground#2A2A2A4d
  • walkThrough.embeddedEditorBackground#1A1A1A
  • welcomePage.background#141414
  • welcomePage.progress.background#1A1A1A
  • welcomePage.progress.foreground#E07A47
  • welcomePage.tileBackground#1A1A1A
  • welcomePage.tileBorder#424242
  • welcomePage.tileHoverBackground#E07A471a
  • widget.shadow#2020204d
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source, variable.other.readwrite, punctuation.definition.variable#E4E4E4
comment, punctuation.definition.comment#969696
string, punctuation.definition.string#86E89A
constant.character.escape, constant.other.placeholder#FF85C8
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, entity.name.constant#FFDF61
keyword, keyword.control, keyword.operator.word, keyword.operator.new, storage.type, storage.modifier, variable.language.this, variable.language.super, punctuation.definition.keyword#C79BFFbold
keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace#5DE4FA
entity.name.function, meta.function-call, support.function, variable.function#FFA65D
entity.name.class, entity.name.type, entity.other.inherited-class, support.class, support.type, entity.name.namespace, entity.name.module#7AB8FF
entity.name.interface, entity.name.trait#7AB8FF
entity.name.enum#7AB8FF
variable.other.enummember, constant.other.enum#5DE4FA
variable.parameter, meta.function.parameters#E07A47
variable.other.property, meta.property.object, entity.name.tag.yaml, support.type.property-name#9C9893
meta.decorator, meta.annotation, punctuation.decorator, punctuation.definition.decorator, storage.type.annotation#FF85C8
string.regexp, constant.regexp, constant.character.character-class.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#FF85C8
entity.name.tag, punctuation.definition.tag#FF7A7A
entity.other.attribute-name, entity.other.attribute#FFA65D
support.constant, support.variable#FFDF61
invalid, invalid.illegal#FFFFFFbold underline
markup.heading, punctuation.definition.heading#7AB8FFbold
markup.bold#FFA65Dbold
markup.italic#FFA65Ditalic
markup.inline.raw, markup.raw, markup.fenced_code#86E89A
markup.underline.link, string.other.link#7AB8FFunderline
markup.list, punctuation.definition.list#FF7A7A
markup.quote#9C9893
punctuation, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments#7A7A7A
storage.modifier.async, storage.modifier.const, storage.modifier.static, storage.modifier.readonly#C79BFF
variable.language, variable.other.predefined#C79BFF
markup.inserted, meta.diff.header.to-file#86E89A
markup.deleted, meta.diff.header.from-file#FF7A7A
markup.changed#FFDF61
meta.export variable.other.readwrite, meta.export variable.other.constant#E07A47
variable.other.property.js, variable.other.property.ts, variable.other.property.tsx, variable.other.property.jsx, meta.object-literal.key#9C9893
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, variable.other.constant.jsx#FFDF61
string.template, punctuation.definition.template-expression#86E89A
meta.template.expression, meta.embedded.line#E4E4E4
variable.other.jsdoc, comment.block.documentation variable.other#E07A47
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#C79BFF
storage.type.function.arrow, keyword.operator.arrow#5DE4FA
storage.modifier.async, keyword.control.flow.await#C79BFF
meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator entity.name.function#FF85C8
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#C79BFF
support.type.object.module, support.type.object.console#7AB8FF
meta.type.parameters, entity.name.type.parameter#FFDF61
keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.keyof, keyword.operator.expression.is#C79BFF
entity.name.tag.jsx, entity.name.tag.tsx, support.class.component.jsx, support.class.component.tsx#FF7A7A
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#FFA65D
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#5DE4FA
meta.object-binding-pattern variable.other.readwrite, meta.array-binding-pattern variable.other.readwrite#E07A47
constant.language.null, constant.language.undefined#C79BFF
variable.language.special.self.python, variable.parameter.function.language.special.self.python#C79BFF
support.function.magic.python, entity.name.function.decorator.python#FF85C8
string.interpolated.python, string.quoted.single.format.python, string.quoted.double.format.python#86E89A
meta.interpolation.python, punctuation.definition.interpolation.python#5DE4FA
entity.name.function.decorator.python, meta.function.decorator.python#FF85C8
support.function.builtin.python#7AB8FF
support.type.python#7AB8FF
entity.name.type.class.python, meta.class.python entity.name.type.class#7AB8FF
variable.parameter.function.python, meta.function.parameters.python#E07A47
meta.function.return-type.python, meta.function.parameters.annotation.python#FFDF61
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#9C9893
keyword.control.flow.lambda.python#C79BFF
support.type.exception.python#FF7A7A
keyword.control.import.python, keyword.control.import.from.python#C79BFF
storage.modifier.global.python, storage.modifier.nonlocal.python#C79BFF
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#7AB8FF
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#FF7A7A
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#5DE4FA
support.type.property-name.css, support.type.property-name.scss, meta.property-name.css, meta.property-name.scss#9C9893
support.constant.property-value.css, support.constant.property-value.scss, meta.property-value.css, meta.property-value.scss#FFA65D
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css, constant.numeric.scss#FFDF61
constant.other.color.css, constant.other.color.scss, support.constant.color.css, support.constant.color.scss#FF85C8
support.function.css, support.function.scss, meta.function.css, meta.function.scss#FFA65D
variable.css, variable.scss, variable.argument.css, variable.argument.scss#E07A47
keyword.other.important.css, keyword.other.important.scss#FF7A7Abold
keyword.control.at-rule.css, keyword.control.at-rule.scss, meta.at-rule.css, meta.at-rule.scss#C79BFF
support.type.property-name.media.css, support.type.property-name.media.scss#9C9893
variable.scss, variable.sass, punctuation.definition.variable.scss#E07A47
entity.name.function.scss, entity.other.attribute-name.placeholder-selector.scss#FFA65D
entity.other.attribute-name.parent-selector.css, entity.name.tag.reference.scss#FF7A7A
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml#FF7A7A
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#7A7A7A
entity.other.attribute-name.html, entity.other.attribute-name.xml#FFA65D
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#86E89A
constant.character.entity.html, constant.character.entity.xml#FF85C8
meta.tag.metadata.doctype.html, entity.name.tag.doctype.html#C79BFF
string.unquoted.cdata.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml#9C9893
entity.name.tag.script.html#7AB8FF
entity.name.tag.style.html#7AB8FF
entity.other.attribute-name.id.html, entity.other.attribute-name.class.html#E07A47
entity.other.attribute-name.event.html#FFDF61
entity.other.attribute-name.directive#C79BFF
markup.heading.markdown, punctuation.definition.heading.markdown#7AB8FFbold
markup.bold.markdown#FFA65Dbold
markup.italic.markdown#FFA65D
markup.inline.raw.markdown, markup.fenced_code.block.markdown#86E89A
markup.underline.link.markdown, string.other.link.title.markdown#7AB8FFunderline
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown, markup.list.numbered.markdown#FF7A7A
markup.quote.markdown#9C9893
meta.separator.markdown#7A7A7A

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Claude VSCode Theme by Alvin Unreal - VS Code Theme