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.background#15131F
  • activityBar.foreground#D5D2FF
  • activityBar.inactiveForeground#8583A6
  • activityBarBadge.background#FF8FB8
  • activityBarBadge.foreground#15131F
  • badge.background#FF8FB8
  • badge.foreground#15131F
  • breadcrumb.activeSelectionForeground#FF928A
  • breadcrumb.focusForeground#DDE0E4
  • breadcrumb.foreground#8583A6
  • breadcrumbPicker.background#242034
  • button.background#C792FF
  • button.foreground#15131F
  • button.hoverBackground#DEB4FF
  • commandCenter.activeBackground#FF8FB82A
  • commandCenter.activeForeground#DDE0E4
  • commandCenter.background#1C1929
  • commandCenter.border#39334F
  • commandCenter.foreground#8583A6
  • debugIcon.breakpointCurrentStackframeForeground#FFBE85
  • debugIcon.breakpointDisabledForeground#65627F
  • debugIcon.breakpointForeground#FF7188
  • debugIcon.disconnectForeground#FF7188
  • debugIcon.pauseForeground#FFBE85
  • debugIcon.restartForeground#63E6E2
  • debugIcon.startForeground#B5E879
  • debugIcon.stopForeground#FF7188
  • debugToolBar.background#242034
  • debugToolBar.border#39334F
  • descriptionForeground#8583A6
  • diffEditor.border#39334F
  • diffEditor.diagonalFill#2D293E
  • diffEditor.insertedLineBackground#80AD871F
  • diffEditor.insertedTextBackground#80AD8730
  • diffEditor.removedLineBackground#D555611F
  • diffEditor.removedTextBackground#D5556130
  • diffEditorGutter.insertedLineBackground#B5E879
  • diffEditorGutter.removedLineBackground#FF7188
  • disabledForeground#65627F
  • dropdown.background#242034
  • dropdown.border#39334F
  • dropdown.foreground#D5D2FF
  • editor.background#15131F
  • editor.focusedStackFrameHighlightBackground#C792FF2E
  • editor.foreground#D5D2FF
  • editor.inactiveSelectionBackground#C792FF2E
  • editor.lineHighlightBackground#FF8FB812
  • editor.selectionBackground#FF8FB844
  • editor.stackFrameHighlightBackground#A18BD433
  • editorBracketHighlight.foreground1#7698EE
  • editorBracketHighlight.foreground2#68B8C3
  • editorBracketHighlight.foreground3#A18BD4
  • editorBracketHighlight.foreground4#5F82D8
  • editorBracketHighlight.foreground5#4D9DA9
  • editorBracketHighlight.foreground6#8772BC
  • editorBracketHighlight.unexpectedBracket.foreground#FF7188
  • editorBracketMatch.background#C792FF2E
  • editorBracketMatch.border#FF8FB8
  • editorCursor.foreground#FF8FB8
  • editorError.border#00000000
  • editorError.foreground#FF7188
  • editorGhostText.foreground#65627F
  • editorGroup.border#2D293E
  • editorGroupHeader.noTabsBackground#15131F
  • editorGroupHeader.tabsBackground#15131F
  • editorGutter.addedBackground#B5E879
  • editorGutter.deletedBackground#FF7188
  • editorGutter.modifiedBackground#FF8FB8
  • editorHint.border#00000000
  • editorHint.foreground#8583A6
  • editorHoverWidget.background#242034
  • editorHoverWidget.border#39334F
  • editorInfo.border#00000000
  • editorInfo.foreground#63E6E2
  • editorInlayHint.background#1C1929
  • editorInlayHint.foreground#8583A6
  • editorInlayHint.parameterForeground#8583A6
  • editorInlayHint.typeForeground#63E6E2
  • editorLineNumber.activeForeground#8583A6
  • editorLineNumber.foreground#65627F
  • editorStickyScroll.background#15131F
  • editorStickyScroll.border#2D293E
  • editorStickyScrollHover.background#C792FF18
  • editorSuggestWidget.background#242034
  • editorSuggestWidget.border#39334F
  • editorSuggestWidget.foreground#D5D2FF
  • editorSuggestWidget.highlightForeground#FF928A
  • editorSuggestWidget.selectedBackground#FF8FB82A
  • editorWarning.border#00000000
  • editorWarning.foreground#FFBE85
  • editorWidget.background#242034
  • editorWidget.border#39334F
  • errorForeground#FF7188
  • focusBorder#FF8FB8
  • foreground#8583A6
  • gitDecoration.addedResourceForeground#B5E879
  • gitDecoration.conflictingResourceForeground#FFBE85
  • gitDecoration.deletedResourceForeground#FF7188
  • gitDecoration.ignoredResourceForeground#65627F
  • gitDecoration.modifiedResourceForeground#FF8FB8
  • icon.foreground#8583A6
  • input.background#1C1929
  • input.border#39334F
  • input.foreground#D5D2FF
  • input.placeholderForeground#8583A6
  • inputOption.activeBackground#FF8FB82A
  • inputOption.activeBorder#FF8FB8
  • list.activeSelectionBackground#FF8FB82A
  • list.activeSelectionForeground#DDE0E4
  • list.focusBackground#FF8FB82A
  • list.focusForeground#DDE0E4
  • list.hoverBackground#C792FF18
  • list.hoverForeground#DDE0E4
  • list.inactiveSelectionBackground#C792FF18
  • list.inactiveSelectionForeground#D5D2FF
  • menu.background#242034
  • menu.foreground#D5D2FF
  • menu.selectionBackground#FF8FB82A
  • menu.selectionForeground#DDE0E4
  • menu.separatorBackground#39334F
  • merge.border#FFBE85
  • merge.commonContentBackground#CDA65E24
  • merge.commonHeaderBackground#CDA65E24
  • merge.currentContentBackground#C792FF2E
  • merge.currentHeaderBackground#7698EE1F
  • merge.incomingContentBackground#80AD8730
  • merge.incomingHeaderBackground#80AD871F
  • minimap.errorHighlight#D55561AA
  • minimap.findMatchHighlight#FF8FB844
  • minimap.infoHighlight#68B8C3AA
  • minimap.selectionHighlight#7698EE40
  • minimap.warningHighlight#D7C66AAA
  • minimapGutter.addedBackground#B5E879
  • minimapGutter.deletedBackground#FF7188
  • minimapGutter.modifiedBackground#FF8FB8
  • notebook.cellBorderColor#2D293E
  • notebook.cellEditorBackground#1C1929
  • notebook.cellStatusBarItemHoverBackground#C792FF18
  • notebook.editorBackground#15131F
  • notebook.focusedCellBorder#FF8FB8
  • notebook.inactiveFocusedCellBorder#2D293E
  • notebook.outputContainerBackgroundColor#1C1929
  • notebook.selectedCellBorder#39334F
  • notebookScrollbarSlider.activeBackground#7698EE80
  • notebookScrollbarSlider.background#68717C55
  • notebookScrollbarSlider.hoverBackground#858E9970
  • notificationCenter.border#39334F
  • notificationCenterHeader.background#242034
  • notificationCenterHeader.foreground#DDE0E4
  • notificationLink.foreground#FF928A
  • notifications.background#242034
  • notifications.border#39334F
  • notifications.foreground#D5D2FF
  • panel.background#1C1929
  • panel.border#39334F
  • peekView.border#FF8FB8
  • peekViewEditor.background#15131F
  • peekViewEditor.matchHighlightBackground#FF8FB844
  • peekViewResult.background#1C1929
  • peekViewResult.fileForeground#DDE0E4
  • peekViewResult.lineForeground#8583A6
  • peekViewResult.matchHighlightBackground#C792FF2E
  • peekViewResult.selectionBackground#FF8FB82A
  • peekViewResult.selectionForeground#DDE0E4
  • peekViewTitle.background#242034
  • peekViewTitleDescription.foreground#8583A6
  • peekViewTitleLabel.foreground#DDE0E4
  • pickerGroup.border#39334F
  • pickerGroup.foreground#63E6E2
  • problemsErrorIcon.foreground#FF7188
  • problemsInfoIcon.foreground#63E6E2
  • problemsWarningIcon.foreground#FFBE85
  • quickInput.background#242034
  • quickInput.foreground#D5D2FF
  • quickInputList.focusBackground#FF8FB82A
  • quickInputList.focusForeground#DDE0E4
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#7698EE80
  • scrollbarSlider.background#68717C55
  • scrollbarSlider.hoverBackground#858E9970
  • selection.background#FF8FB844
  • sideBar.background#1C1929
  • sideBar.border#39334F
  • sideBar.foreground#8583A6
  • sideBarSectionHeader.background#242034
  • sideBarSectionHeader.border#2D293E
  • sideBarSectionHeader.foreground#8583A6
  • statusBar.background#1C1929
  • statusBar.debuggingBackground#C792FF
  • statusBar.foreground#8583A6
  • statusBarItem.errorBackground#FF7188
  • statusBarItem.remoteBackground#63E6E2
  • statusBarItem.warningBackground#FFBE85
  • tab.activeBackground#15131F
  • tab.activeBorderTop#FF8FB8
  • tab.activeForeground#DDE0E4
  • tab.border#2D293E
  • tab.inactiveBackground#15131F
  • tab.inactiveForeground#8583A6
  • tab.unfocusedActiveForeground#8583A6
  • terminal.ansiBlack#121315
  • terminal.ansiBlue#7698EE
  • terminal.ansiBrightBlack#68717C
  • terminal.ansiBrightBlue#91AFF4
  • terminal.ansiBrightCyan#89CDD5
  • terminal.ansiBrightGreen#96C2BB
  • terminal.ansiBrightMagenta#BAA7E2
  • terminal.ansiBrightRed#E06B75
  • terminal.ansiBrightWhite#F0F1F3
  • terminal.ansiBrightYellow#F0DE7A
  • terminal.ansiCyan#68B8C3
  • terminal.ansiGreen#78AAA3
  • terminal.ansiMagenta#A18BD4
  • terminal.ansiRed#D55561
  • terminal.ansiWhite#C2C7CE
  • terminal.ansiYellow#D7C66A
  • terminal.background#1C1929
  • terminal.border#39334F
  • terminal.foreground#D5D2FF
  • terminal.selectionBackground#FF8FB844
  • terminalCursor.background#1C1929
  • terminalCursor.foreground#FF928A
  • testing.coverCountBadgeBackground#FF8FB82A
  • testing.coverCountBadgeForeground#DDE0E4
  • testing.coveredBackground#80AD8724
  • testing.iconErrored#FF7188
  • testing.iconFailed#FF7188
  • testing.iconPassed#B5E879
  • testing.iconQueued#FFBE85
  • testing.iconSkipped#8583A6
  • testing.iconUnset#8583A6
  • testing.runAction#FF8FB8
  • testing.uncoveredBackground#D5556129
  • titleBar.activeBackground#15131F
  • titleBar.activeForeground#D5D2FF
  • titleBar.inactiveBackground#15131F
  • titleBar.inactiveForeground#8583A6
  • widget.border#39334F
  • widget.shadow#000000
  • window.activeBorder#2D293E
  • window.inactiveBorder#2D293E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.primitive.ts, support.type.primitive.tsx#91F3EE
variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#FFB0CD
storage.type.interface.ts, storage.type.interface.tsx#FF8FB8
entity.name.type.interface.ts, entity.name.type.interface.tsx#DEB4FF
support.type.builtin.ts, support.type.builtin.tsx, support.type.object.module.ts, support.type.object.module.tsx#8583A6
support.type.primitive.ts, support.type.primitive.tsx, storage.type.ts, storage.type.tsx#91F3EE
variable.other.property.ts, variable.other.property.tsx, meta.object-literal.key.ts, meta.object-literal.key.tsx#80B7FF
entity.name.function.magic.python#DEB4FF
support.function.builtin.python, support.type.python, support.variable.python#63E6E2
support.type.exception.python, entity.name.type.exception.python#FF7188
meta.function.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#FFB0CD
keyword.other.package.java, keyword.control.import.java#FF8FB8
storage.type.class.java, storage.type.interface.java, storage.type.enum.java, storage.type.record.java#FF928A
storage.type.primitive.java#91F3EE
storage.type.annotation.java, meta.declaration.annotation.java, entity.name.type.annotation.java#FFB0CD
entity.name.function.constructor.java, meta.method.identifier.java#DEB4FF
variable.other.constant.java, constant.other.java#FFBE85
storage.type.primitive.java, storage.type.java#91F3EE
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#FF8FB8
entity.name.module, support.module, string.quoted.module#8583A6
entity.name.function.constructor, meta.function.constructor, support.class#DEB4FF
support.class, support.type, support.variable, support.constant#63E6E2
string.regexp, string.regexp.js, string.regexp.ts#C792FF
variable.other.env, variable.other.assignment.env, entity.name.variable.env#80B7FF
string.unquoted.env, string.quoted.double.env, string.quoted.single.env#B5E879
entity.name.tag.yaml, meta.mapping.key.yaml string.unquoted.plain.out.yaml, meta.mapping.key.yaml string.unquoted.plain.in.yaml#80B7FF
meta.mapping.value.yaml string.unquoted.plain.out.yaml, meta.mapping.value.yaml string.unquoted.plain.in.yaml, meta.block.mapping.value.yaml string.unquoted.plain.out.yaml#B5E879
entity.name.type.anchor.yaml, variable.other.anchor.yaml#DEB4FF
variable.other.alias.yaml#63E6E2
constant.language.yaml, constant.numeric.yaml#FFBE85
support.type.property-name.json#80B7FF
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json#B5E879
constant.language.json#FFBE85
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#8583A6
markup.heading, entity.name.section, markup.heading.markdown#FFB0AAbold
punctuation.definition.heading, punctuation.definition.heading.markdown#FF928Abold
markup.bold, markup.bold.markdown#DDE0E4bold
markup.italic, markup.italic.markdown#C792FFitalic
markup.inline.raw, markup.inline.raw.string.markdown#B5E879
markup.fenced_code.block, markup.raw.block#B5E879
markup.quote, markup.quote.markdown#8583A6italic
punctuation.definition.list, punctuation.definition.list.begin.markdown, punctuation.definition.list.begin#FF928A
markup.underline.link, string.other.link, meta.link.inline#91F3EE
entity.name.tag.css#FF8FB8
entity.other.attribute-name.class.css#FF8FB8
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#DEB4FF
support.type.property-name.css, meta.property-name.css#80B7FF
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css#B5E879
comment, punctuation.definition.comment#65627Fitalic
comment.block.documentation, comment.line.documentation#8583A6italic
keyword, storage.modifier, storage.type.function#FF8FB8
meta.package.java storage.modifier.package.java#8583A6
meta.import.java storage.modifier.import.java#8583A6
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.import, keyword.control.return#FF928A
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.accessor#63E6E2
storage.type.interface.ts, storage.type.class.ts, storage.type.enum.ts, storage.type.type.ts, storage.type.namespace.ts, storage.type.interface.tsx, storage.type.class.tsx#FF928A
entity.name.type.interface.ts, entity.name.type.class.ts, entity.name.type.alias.ts, entity.name.type.enum.ts, entity.name.type.interface.tsx, entity.name.type.class.tsx#91F3EE
storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.type.rust, storage.type.union.rust#FF928A
entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.rust, support.type.rust, storage.type.numeric.rust, storage.type.primitive.rust#91F3EE
entity.name.function.rust, meta.function.call.rust entity.name.function.rust#DEB4FF
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#FFB0CD
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, variable.other.lifetime.rust#F6D06F
entity.name.namespace.rust, entity.name.module.rust, meta.use.rust entity.name.namespace.rust#8583A6
variable.other.constant.rust, constant.other.rust#FFBE85
meta.preprocessor.c, keyword.control.directive.c, keyword.control.import.c, punctuation.definition.directive.c#FF8FB8
storage.type.c, storage.type.built-in.c, support.type.c#91F3EE
entity.name.function.c, meta.function.c entity.name.function.c#DEB4FF
constant.other.c, variable.other.constant.c#FFBE85
entity.name.label.c#C792FF
string.quoted.other.lt-gt.include.c, string.quoted.double.include.c#8583A6
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, support.type#91F3EE
storage.type.class, storage.type.interface, storage.type.struct, storage.type.enum, storage.type.trait, storage.type.union, storage.type.record#FF928A
entity.name.namespace, entity.name.module, support.module#80B7FF
entity.name.function, support.function, variable.function, meta.function-call entity.name.function#DEB4FF
entity.name.function.member, meta.method-call entity.name.function, support.function.method#C792FF
variable, meta.definition.variable#D5D2FF
variable.parameter#D5D2FF
variable.other.property, support.type.property-name, meta.object-literal.key#80B7FF
string#B5E879
constant.numeric#F6D06F
constant.language.boolean#FFBE85
constant.language.null#F6D06F
meta.decorator, storage.type.annotation#FFB0CD
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters, punctuation.definition.typeparameters#8583A6
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#91F3EE
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#FF8FB8
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8583A6
punctuation.definition.template-expression, punctuation.section.embedded.begin, punctuation.section.embedded.end#FF928A
invalid, invalid.illegal#FF7188