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.activeBorder#E11D48
  • activityBar.background#050406
  • activityBar.border#050406
  • activityBar.foreground#E2E8F0
  • activityBar.inactiveForeground#7A889B
  • activityBarBadge.background#E11D48
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E11D48
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#F59E0B
  • breadcrumb.background#0A090D
  • breadcrumb.focusForeground#E2E8F0
  • breadcrumb.foreground#7A889B
  • breadcrumbPicker.background#0D0B12
  • button.background#E11D48
  • button.foreground#FFFFFF
  • button.hoverBackground#BE123C
  • chat.avatarBackground#E11D48
  • chat.avatarForeground#FFFFFF
  • chat.requestBackground#100E14
  • chat.requestBorder#E11D4840
  • chat.slashCommandBackground#E11D4833
  • chat.slashCommandForeground#F43F5E
  • commandCenter.activeBackground#18151E
  • commandCenter.activeForeground#FFFFFF
  • commandCenter.background#100E14
  • commandCenter.border#E11D4840
  • commandCenter.foreground#E2E8F0
  • debugToolBar.background#0D0B12
  • diffEditor.diagonalFill#4755694D
  • diffEditor.insertedLineBackground#10B9811A
  • diffEditor.insertedTextBackground#10B98126
  • diffEditor.removedLineBackground#F43F5E1A
  • diffEditor.removedTextBackground#F43F5E26
  • dropdown.background#15121B
  • dropdown.border#E11D484D
  • dropdown.foreground#E2E8F0
  • editor.background#0A090D
  • editor.bracketMatchBackground#E11D4840
  • editor.bracketMatchBorder#E11D48
  • editor.findMatchBackground#E11D4880
  • editor.findMatchHighlightBackground#E11D484D
  • editor.foreground#E2E8F0
  • editor.inactiveSelectionBackground#E11D4826
  • editor.lineHighlightBackground#E11D4814
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#E11D484D
  • editor.selectionHighlightBackground#E11D4833
  • editor.wordHighlightBackground#E11D4833
  • editor.wordHighlightStrongBackground#E11D4855
  • editorBracketHighlight.foreground1#E11D48
  • editorBracketHighlight.foreground2#F59E0B
  • editorBracketHighlight.foreground3#FB7185
  • editorBracketHighlight.foreground4#38BDF8
  • editorBracketHighlight.foreground5#34D399
  • editorBracketHighlight.foreground6#FB923C
  • editorBracketHighlight.unexpectedBracket.foreground#EF4444
  • editorBracketPairGuide.activeBackground1#E11D4866
  • editorBracketPairGuide.activeBackground2#F43F5E66
  • editorBracketPairGuide.activeBackground3#FB718566
  • editorBracketPairGuide.activeBackground4#F59E0B66
  • editorBracketPairGuide.activeBackground5#FB923C66
  • editorBracketPairGuide.activeBackground6#94A3B866
  • editorBracketPairGuide.background1#E11D4812
  • editorBracketPairGuide.background2#F43F5E12
  • editorBracketPairGuide.background3#FB718512
  • editorBracketPairGuide.background4#F59E0B12
  • editorBracketPairGuide.background5#FB923C12
  • editorBracketPairGuide.background6#94A3B812
  • editorCodeLens.foreground#94A3B899
  • editorCursor.foreground#E11D48
  • editorError.foreground#F43F5E
  • editorGhostText.background#00000000
  • editorGhostText.foreground#64748B
  • editorGroup.border#08060A
  • editorGroupHeader.tabsBackground#08060A
  • editorGroupHeader.tabsBorder#08060A
  • editorGuide.activeBackground#E11D48AA
  • editorGuide.activeBackground1#E11D4899
  • editorGuide.activeBackground2#F43F5E99
  • editorGuide.activeBackground3#FB718599
  • editorGuide.activeBackground4#F59E0B99
  • editorGuide.activeBackground5#FB923C99
  • editorGuide.activeBackground6#94A3B899
  • editorGuide.background#47556933
  • editorGuide.background1#E11D4814
  • editorGuide.background2#F43F5E14
  • editorGuide.background3#FB718514
  • editorGuide.background4#F59E0B14
  • editorGuide.background5#FB923C14
  • editorGuide.background6#94A3B814
  • editorGutter.addedBackground#10B981
  • editorGutter.deletedBackground#F43F5E
  • editorGutter.foldingControlForeground#E11D48
  • editorGutter.modifiedBackground#F59E0B
  • editorHoverWidget.background#18151E
  • editorHoverWidget.border#E11D4866
  • editorHoverWidget.statusBarBackground#100E14
  • editorIndentGuide.activeBackground#E11D48AA
  • editorIndentGuide.activeBackground1#E11D4899
  • editorIndentGuide.activeBackground2#F43F5E99
  • editorIndentGuide.activeBackground3#FB718599
  • editorIndentGuide.activeBackground4#F59E0B99
  • editorIndentGuide.activeBackground5#FB923C99
  • editorIndentGuide.activeBackground6#94A3B899
  • editorIndentGuide.background#47556933
  • editorIndentGuide.background1#E11D4814
  • editorIndentGuide.background2#F43F5E14
  • editorIndentGuide.background3#FB718514
  • editorIndentGuide.background4#F59E0B14
  • editorIndentGuide.background5#FB923C14
  • editorIndentGuide.background6#94A3B814
  • editorInfo.foreground#38BDF8
  • editorInlayHint.background#15121B80
  • editorInlayHint.foreground#94A3B8AA
  • editorInlayHint.parameterForeground#FB7185AA
  • editorInlayHint.typeForeground#E11D48AA
  • editorLineNumber.activeForeground#E11D48
  • editorLineNumber.foreground#47556999
  • editorLink.activeForeground#FB7185
  • editorOverviewRuler.errorForeground#F43F5E
  • editorOverviewRuler.infoForeground#38BDF8
  • editorOverviewRuler.warningForeground#F59E0B
  • editorRuler.foreground#E11D4820
  • editorStickyScroll.background#0A090D
  • editorStickyScroll.border#100E14
  • editorStickyScrollHover.background#100E14
  • editorSuggestWidget.background#18151E
  • editorSuggestWidget.border#E11D4866
  • editorSuggestWidget.focusHighlightForeground#F59E0B
  • editorSuggestWidget.highlightForeground#F59E0B
  • editorSuggestWidget.selectedBackground#E11D484D
  • editorSuggestWidget.selectedForeground#E2E8F0
  • editorWarning.foreground#F59E0B
  • editorWhitespace.foreground#E2E8F020
  • editorWidget.background#18151E
  • editorWidget.border#E11D4866
  • editorWidget.resizeBorder#E11D48
  • focusBorder#E11D4880
  • foreground#94A3B8
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F43F5E
  • gitDecoration.ignoredResourceForeground#475569
  • gitDecoration.modifiedResourceForeground#F59E0B
  • gitDecoration.untrackedResourceForeground#FB7185
  • inlineChat.border#E11D48
  • input.background#15121B
  • input.border#E11D484D
  • input.foreground#E2E8F0
  • inputOption.activeBorder#E11D48
  • interactive.activeCodeBorder#E11D48
  • list.activeSelectionBackground#E11D4866
  • list.activeSelectionForeground#E2E8F0
  • list.activeSelectionIconForeground#E11D48
  • list.errorForeground#F43F5E
  • list.focusAndSelectionOutline#E11D48
  • list.focusOutline#E11D4880
  • list.hoverBackground#15121B80
  • list.hoverForeground#F59E0B
  • list.inactiveSelectionBackground#E11D4833
  • list.warningForeground#F59E0B
  • merge.border#E11D4880
  • merge.currentHeaderBackground#10B98155
  • merge.incomingHeaderBackground#38BDF855
  • minimap.background#05040780
  • minimap.errorHighlight#F43F5ECC
  • minimap.findMatchHighlight#F59E0BCC
  • minimap.selectionHighlight#E11D4899
  • minimap.warningHighlight#F59E0BCC
  • notebook.cellBorderColor#E11D4833
  • notebook.focusedCellBorder#E11D48
  • notificationCenterHeader.background#100E14
  • notifications.background#18151E
  • notifications.border#E11D4866
  • notifications.foreground#E2E8F0
  • notificationToast.border#E11D4866
  • panel.background#08060A
  • panel.border#08060A
  • panelTitle.activeBorder#E11D48
  • panelTitle.activeForeground#E2E8F0
  • panelTitle.inactiveForeground#7A889B
  • peekView.border#E11D48
  • peekViewEditor.background#0A090D
  • peekViewEditor.matchHighlightBackground#F59E0B44
  • peekViewResult.background#0D0B12
  • peekViewResult.matchHighlightBackground#F59E0B44
  • peekViewResult.selectionBackground#E11D4866
  • peekViewResult.selectionForeground#E2E8F0
  • peekViewTitle.background#0D0B12
  • pickerGroup.border#E11D4840
  • pickerGroup.foreground#E11D48
  • progressBar.background#E11D48
  • quickInput.background#18151E
  • quickInput.foreground#E2E8F0
  • quickInputList.focusBackground#E11D484D
  • quickInputList.focusForeground#E2E8F0
  • quickInputList.focusIconForeground#F59E0B
  • quickInputTitle.background#100E14
  • scrollbarSlider.activeBackground#E11D4880
  • scrollbarSlider.background#E2E8F018
  • scrollbarSlider.hoverBackground#E2E8F035
  • settings.headerForeground#E2E8F0
  • settings.modifiedItemIndicator#E11D48
  • sideBar.background#08060A
  • sideBar.border#08060A
  • sideBar.foreground#E2E8F0
  • sideBarSectionHeader.background#100E14
  • sideBarSectionHeader.border#100E14
  • sideBarSectionHeader.foreground#E2E8F0
  • sideBarTitle.foreground#E2E8F0
  • statusBar.background#050406
  • statusBar.border#050406
  • statusBar.debuggingBackground#E11D48
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E2E8F0
  • statusBar.noFolderBackground#050406
  • statusBarItem.activeBackground#E11D484D
  • statusBarItem.hoverBackground#18151E
  • statusBarItem.remoteBackground#E11D48
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.classForeground#94A3B8
  • symbolIcon.functionForeground#F59E0B
  • symbolIcon.variableForeground#E2E8F0
  • tab.activeBackground#0A090D
  • tab.activeBorder#00000000
  • tab.activeBorderTop#E11D48
  • tab.activeForeground#E2E8F0
  • tab.activeModifiedBorder#F59E0B
  • tab.border#08060A
  • tab.hoverBackground#100E14
  • tab.hoverForeground#E2E8F0
  • tab.inactiveBackground#08060A
  • tab.inactiveForeground#7A889B
  • tab.inactiveModifiedBorder#F59E0B80
  • tab.lastPinnedBorder#E11D48
  • terminal.ansiBlack#07060A
  • terminal.ansiBlue#94A3B8
  • terminal.ansiBrightBlack#15121B
  • terminal.ansiBrightBlue#CBD5E1
  • terminal.ansiBrightCyan#FDA4AF
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#FB7185
  • terminal.ansiBrightRed#F43F5E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F59E0B
  • terminal.ansiCyan#FB7185
  • terminal.ansiGreen#10B981
  • terminal.ansiMagenta#E11D48
  • terminal.ansiRed#F43F5E
  • terminal.ansiWhite#E2E8F0
  • terminal.ansiYellow#F59E0B
  • terminal.background#08060A
  • terminal.foreground#E2E8F0
  • terminal.selectionBackground#E11D484D
  • terminalCommandDecoration.defaultBackground#E11D48
  • terminalCommandDecoration.errorBackground#F43F5E
  • terminalCommandDecoration.successBackground#10B981
  • terminalCursor.foreground#F59E0B
  • testing.iconFailed#F43F5E
  • testing.iconPassed#10B981
  • testing.iconQueued#FB923C
  • testing.iconSkipped#64748B
  • testing.iconUnset#94A3B8
  • testing.peekBorder#E11D48
  • testing.runAction#10B981
  • textLink.activeForeground#F43F5E
  • textLink.foreground#FB7185
  • titleBar.activeBackground#050406
  • titleBar.activeForeground#E2E8F0
  • titleBar.border#050406
  • titleBar.inactiveBackground#050406
  • titleBar.inactiveForeground#7A889B
  • tree.activeIndentGuidesStroke#E11D48
  • tree.indentGuidesStroke#47556966
  • welcomePage.tileBackground#15121B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#64748Bitalic
string.quoted.docstring.multi.python#64748Bitalic
variable, variable.other, variable.other.readwrite, meta.block#E2E8F0
variable.parameter, meta.parameter.type.variable, variable.parameter.function#94A3B8
variable.other.constant, variable.other.readonly#FB7185bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export#FB7185bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression#E11D48bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical#E11D48
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block#71717A
entity.name.function, entity.name.function.constructor#F59E0Bbold
meta.function-call, variable.function#FBBF24
support.function, support.function.builtin, support.function.console#F43F5E
support.function.react, support.function.builtin.react, entity.name.function.react#F59E0Bitalic
meta.decorator, entity.name.function.decorator, punctuation.decorator#FBBF24italic
entity.name.type.class, support.class#BE123Cbold
entity.name.type.interface, entity.name.type.type-parameter#38BDF8italic
entity.name.type.enum, entity.name.type.struct#F59E0Bbold
entity.name.type, support.type#BE123C
string, string.quoted, string.quoted.double, string.quoted.single#94A3B8
string.template#CBD5E1
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#E11D48
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp#2DD4BF
constant.numeric#E2E8F0
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#FB7185bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json#E11D48
string.quoted.double.json, string.quoted.single.json#94A3B8
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag#FB7185
entity.other.attribute-name, entity.other.attribute-name.html#F59E0B
string.quoted.double.html, string.quoted.single.html#94A3B8
entity.name.tag.jsx, entity.name.tag.tsx#FB7185
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx#BE123Cbold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts#F59E0B
entity.other.attribute-name.event.jsx, entity.other.attribute-name.event.tsx#FB7185italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#E11D48
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css#94A3B8
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css#F43F5E
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#CBD5E1
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#F59E0Bbold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#38BDF8italic
variable.css, variable.argument.css, custom-property#FB7185
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#FB7185bold
entity.other.attribute-name.class.css.tailwindcss#94A3B8
entity.other.attribute-name.variant.tailwindcss#FB7185italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue#FB7185bold
entity.other.attribute-name.directive.vue#10B981italic
entity.other.attribute-name.directive.svelte, punctuation.definition.reactive.svelte#F59E0Bitalic
markup.heading, entity.name.section.markdown#E2E8F0bold
markup.inline.raw, markup.fenced_code.block#94A3B8
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#FB7185italic
support.function.magic.python#F59E0Bbold
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust#F59E0Bitalic
support.macro.rust, entity.name.function.macro.rust#E11D48bold
entity.name.type.trait.rust#38BDF8italic
keyword.channel.go, keyword.goroutine.go#FB7185bold
keyword.other.DML.sql, keyword.other.DDL.create.sql#E11D48bold
support.function.scalar.sql, support.function.aggregate.sql#F59E0B
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile#E11D48bold
entity.name.tag.yaml, support.type.property-name.yaml#E11D48
variable.other.normal.shell, variable.other.special.shell#E2E8F0