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#202225
  • activityBar.border#20222560
  • activityBar.foreground#FFA7DB
  • activityBarBadge.background#e3e3e3
  • activityBarBadge.foreground#202225
  • badge.background#20222530
  • badge.foreground#E69FFF
  • breadcrumb.activeSelectionForeground#d8a1ec
  • breadcrumb.background#202225
  • breadcrumb.focusForeground#FFA7DB
  • breadcrumb.foreground#ececeb
  • breadcrumbPicker.background#202225
  • button.background#E69FFF50
  • contrastBorder#E69FFF40
  • debugToolBar.background#202225
  • diffEditor.insertedTextBackground#E88D0215
  • diffEditor.removedTextBackground#40F06520
  • dropdown.background#202225
  • dropdown.border#F5D1D110
  • editor.background#202225
  • editor.findMatchBackground#202225
  • editor.findMatchBorder#c6a6d2b8
  • editor.findMatchHighlightBackground#b4b4b583
  • editor.findMatchHighlightBorder#F5D1D130
  • editor.foreground#eeb1d5
  • editor.lineHighlightBackground#6d148950
  • editor.selectionBackground#FFFCDC30
  • editor.selectionHighlightBackground#baabbf6b
  • editor.selectionHighlightBorder#FFFCDCf0
  • editorBracketHighlight.foreground1#FFA7DB
  • editorBracketHighlight.foreground2#45BAFF
  • editorBracketHighlight.foreground3#E69FFF
  • editorBracketHighlight.foreground4#62ec80
  • editorBracketHighlight.foreground5#FFF39F
  • editorBracketHighlight.foreground6#fc9851
  • editorBracketHighlight.unexpectedBracket.foreground#ec6962
  • editorBracketMatch.background#202225
  • editorBracketMatch.border#45BAFF7f
  • editorCursor.foreground#fda6e6cf
  • editorError.foreground#40F06570
  • editorGroup.border#20222530
  • editorGroupHeader.tabsBackground#202225
  • editorGutter.addedBackground#E88D0260
  • editorGutter.deletedBackground#40F06560
  • editorGutter.modifiedBackground#FFFCDC60
  • editorHoverWidget.background#202225
  • editorHoverWidget.border#F5D1D110
  • editorIndentGuide.activeBackground1#4B4C4F
  • editorIndentGuide.background1#4B4C4F70
  • editorInfo.foreground#FFFCDC70
  • editorLineNumber.activeForeground#FFFCDC
  • editorLineNumber.foreground#ecb8ffd7
  • editorLink.activeForeground#FFA7DB
  • editorMarkerNavigation.background#FFA7DB05
  • editorOverviewRuler.border#202225
  • editorOverviewRuler.errorForeground#40F06540
  • editorOverviewRuler.findMatchForeground#a297a5cc
  • editorOverviewRuler.infoForeground#FFFCDC40
  • editorOverviewRuler.warningForeground#45BAFF70
  • editorRuler.foreground#4B4C4F
  • editorSuggestWidget.background#202225
  • editorSuggestWidget.border#F5D1D110
  • editorSuggestWidget.foreground#FFA7DB
  • editorSuggestWidget.highlightForeground#45BAFF
  • editorSuggestWidget.selectedBackground#E69FFF20
  • editorWarning.foreground#fa8666c9
  • editorWhitespace.foreground#FFA7DB40
  • editorWidget.background#202225
  • editorWidget.border#45BAFF
  • editorWidget.resizeBorder#E69FFF
  • extensionButton.prominentBackground#E88D0290
  • extensionButton.prominentHoverBackground#40F065
  • focusBorder#F5D1D100
  • gitDecoration.conflictingResourceForeground#45BAFF
  • gitDecoration.deletedResourceForeground#40F065
  • gitDecoration.ignoredResourceForeground#E69FFF
  • gitDecoration.modifiedResourceForeground#FFF39F
  • gitDecoration.untrackedResourceForeground#FFFCDC
  • input.background#353739
  • input.border#F5D1D110
  • input.foreground#FFA7DB
  • input.placeholderForeground#FFA7DB60
  • inputOption.activeBackground#FFA7DB30
  • inputOption.activeBorder#FFA7DB30
  • inputValidation.errorBorder#40F06550
  • inputValidation.infoBorder#FFFCDC50
  • inputValidation.warningBorder#45BAFF50
  • list.activeSelectionBackground#2d2f34
  • list.activeSelectionForeground#f0d5e8
  • list.focusBackground#353739
  • list.focusForeground#FFFCDC
  • list.highlightForeground#e59fff9e
  • list.hoverBackground#4B4C4F
  • list.hoverForeground#F5D1D1
  • list.inactiveSelectionBackground#20222530
  • list.inactiveSelectionForeground#cecacfc8
  • list.warningForeground#45BAFF
  • listFilterWidget.background#20222530
  • listFilterWidget.noMatchesOutline#20222530
  • listFilterWidget.outline#20222530
  • menu.background#202225f8
  • menu.border#E69FFF50
  • menu.foreground#FFA7DB
  • menu.selectionBackground#353739
  • menu.selectionBorder#20222530
  • menu.selectionForeground#FFA7DB
  • menu.separatorBackground#FFA7DB
  • menubar.selectionBackground#353739
  • menubar.selectionBorder#E69FFF50
  • menubar.selectionForeground#FFA7DB
  • minimap.background#202225
  • minimapGutter.addedBackground#40F065
  • minimapGutter.deletedBackground#45BAFF
  • minimapGutter.modifiedBackground#E88D02
  • minimapSlider.activeBackground#E88D02b0
  • minimapSlider.background#8c02e880
  • minimapSlider.hoverBackground#e802d9a0
  • notebook.cellBorderColor#E69FFF40
  • notebook.cellEditorBackground#202225
  • notebook.cellStatusBarItemHoverBackground#E69FFF20
  • notebook.focusedCellBorder#E69FFF
  • notebook.inactiveFocusedCellBorder#E69FFF50
  • notebook.outputContainerBackgroundColor#1a1b20
  • notebook.outputContainerBorderColor#E69FFF30
  • notebook.selectedCellBackground#E69FFF10
  • notebook.selectedCellBorder#E69FFF
  • notebookScrollbarSlider.activeBackground#E69FFFcc
  • notebookScrollbarSlider.background#E69FFFbb
  • notebookScrollbarSlider.hoverBackground#E69FFFee
  • notificationLink.foreground#E69FFF
  • notifications.background#202225
  • notifications.foreground#FFA7DB
  • panel.background#202225
  • panel.border#20222560
  • panelTitle.activeBorder#E69FFF
  • panelTitle.activeForeground#F5D1D1
  • panelTitle.inactiveForeground#FFA7DB
  • peekView.border#20222530
  • peekViewEditor.background#FFA7DB05
  • peekViewEditor.matchHighlightBackground#E69FFF50
  • peekViewEditorGutter.background#FFA7DB05
  • peekViewResult.background#FFA7DB05
  • peekViewResult.matchHighlightBackground#E69FFF50
  • peekViewResult.selectionBackground#d89bee70
  • peekViewTitle.background#FFA7DB05
  • peekViewTitleDescription.foreground#FFA7DB60
  • pickerGroup.foreground#E69FFF
  • progressBar.background#E69FFF
  • scrollbar.shadow#20222500
  • scrollbarSlider.activeBackground#E69FFFcc
  • scrollbarSlider.background#E69FFFbb
  • scrollbarSlider.hoverBackground#E69FFFee
  • selection.background#7c787ea1
  • settings.checkboxBackground#202225
  • settings.checkboxForeground#FFA7DB
  • settings.dropdownBackground#202225
  • settings.dropdownForeground#FFA7DB
  • settings.headerForeground#E69FFF
  • settings.modifiedItemIndicator#E69FFF
  • settings.numberInputBackground#202225
  • settings.numberInputForeground#FFA7DB
  • settings.textInputBackground#202225
  • settings.textInputForeground#FFA7DB
  • sideBar.background#202225
  • sideBar.border#E69FFF50
  • sideBar.foreground#e8e7e7c6
  • sideBarSectionHeader.background#202225
  • sideBarSectionHeader.border#20222560
  • sideBarSectionHeader.foreground#f5f5f1
  • sideBarTitle.foreground#ffb2df
  • statusBar.background#e15cb0
  • statusBar.border#20222560
  • statusBar.debuggingBackground#dd1683e8
  • statusBar.debuggingForeground#ebebeb
  • statusBar.foreground#FFFCFC
  • statusBar.noFolderBackground#202225
  • statusBarItem.hoverBackground#E69FFF20
  • statusBarItem.remoteBackground#E69FFF
  • statusBarItem.remoteForeground#202225
  • tab.activeBackground#E69FFF50
  • tab.activeBorder#E69FFF
  • tab.activeForeground#F5D1D1
  • tab.activeModifiedBorder#E69FFF
  • tab.border#202225
  • tab.inactiveBackground#E69FFF20
  • tab.inactiveForeground#FFA7DBaf
  • tab.unfocusedActiveBackground#E69FFF40
  • tab.unfocusedActiveBorder#E69FFF
  • tab.unfocusedActiveForeground#FFA7DB
  • tab.unfocusedInactiveBackground#E69FFF10
  • tab.unfocusedInactiveForeground#FFA7DB7f
  • terminal.ansiBlack#202225
  • terminal.ansiBlue#FFFCDC
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#FFFCDC
  • terminal.ansiBrightCyan#45BAFF
  • terminal.ansiBrightGreen#0f3818
  • terminal.ansiBrightMagenta#e56bec
  • terminal.ansiBrightRed#ff5e5e
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#e8ff53
  • terminal.ansiCyan#82c3e9cd
  • terminal.ansiGreen#40F065
  • terminal.ansiMagenta#d29ad8
  • terminal.ansiRed#e87b6c
  • terminal.ansiWhite#c5c3c3
  • terminal.ansiYellow#e1f07add
  • terminalCursor.background#202225
  • terminalCursor.foreground#45BAFF
  • textLink.activeForeground#FFA7DB
  • textLink.foreground#E69FFF
  • titleBar.activeBackground#202225
  • titleBar.activeForeground#FFA7DB
  • titleBar.border#20222560
  • titleBar.inactiveBackground#202225
  • titleBar.inactiveForeground#E69FFF
  • tree.indentGuidesStroke#4B4C4F
  • widget.shadow#20222530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, storage.modifier#f1ee96
keyword#f0ebe5
storage.type#d88de3
keyword.operator, punctuation.separator, storage.type.function.arrow.js#fc9851
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#E88D02
constant.other.php#45BAFF
constant.other.color#F5D1D1
variable.language.this.js#62ec80
invalid, invalid.illegal#ec6962
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#ededee
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#FFF39F
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.binding-pattern.object.js#FFA7DB
punctuation.definition, string.quoted.single.scss#b5f0e6d1
keyword.controlbold
comment.line, comment.line.scss, comment.line.double-slash, comment.line.number-sign, comment.line.number-sign.mips, punctuation.definition.comment.scss, punctuation.definition.comment, comment.line.double-slash.js, punctuation.definition.comment.begin.documentation, punctuation.definition.comment.end.documentation, punctuation.definition.comment.documentation, comment.block, comment.block.documentation, source.ignore#76777bitalic
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, variable.other.object.js#FFA7DB
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#45BAFF
string.other.link.title.markdown, variable.other.property.js, constant.other.caps.python, support.type.property-name.json#FFF39F
string, variable.other.constant.js, string.quoted.double, string.quoted.single, string.quoted.triple, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, string constant.other#c2d2ded5
entity.name.function, entity.other.attribute-name.html#7cc8ff
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, variable.other.object.property.js, variable.other.definition.java#FFEBFA
support.other.variable, string.other.link, markup.table#FFA7DB
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#45BAFF
variable.parameter.function.language.special, variable.parameter, meta.var-single-variable.expr.js, meta.var.expr.js, string.quoted.single.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js#62ec80
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#E88D02
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ff8bcd
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#FFF39F
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, invalid.deprecated#40F065
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFFCDCitalic
entity.other.attribute-name, support.function#45BAFF
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, storage.type.function.js, meta.object-literal.key#FFA7DB
source.scss keyword.control#45BAFF
markup.inserted, entity.name.tag.html#E88D02
markup.deleted#40F065
markup.changed#45BAFF
string.regexp#FFEBFA
constant.character.escape#FFEBFA
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#FFA7DBitalic
text.html.markdown, punctuation.definition.list_item.markdown#FFA7DB
text.html.markdown markup.inline.raw.markdown#45BAFF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#E69FFF50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#FFF39Fbold
markup.underline#FFFCDCunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#E69FFF50
markup.quoteitalic
string.other.link.description.title.markdown#45BAFF
constant.other.reference.link.markdown#45BAFF
markup.raw.block#45BAFF
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFEBFA
variable.language.fenced.markdown#E69FFF
meta.separator#A7A8AFbold
token.info-token#E69FFF
token.warn-token#ffb245
token.error-token#FF293B
token.debug-token#FFEBFA
keyword.control.flow.python, keyword.control.import.python, keyword.control.python#FFA7DBbold
storage.type.function.python, storage.type.class.python#d88de3italic
entity.name.function.python#7cc8ff
entity.name.type.python, entity.name.class.python#ff8bcdbold
variable.parameter.python#45BAFFitalic
variable.language.special.self.python#E69FFFitalic
constant.language.python#45BAFF
support.function.builtin.python#62ec80
entity.name.function.decorator.python, punctuation.definition.decorator.python#E88D02italic
meta.function-call.python support.function#7cc8ff
storage.type.type.ts, storage.type.type.tsx, storage.type.interface.ts, storage.type.interface.tsx#d88de3italic
entity.name.type.ts, entity.name.type.tsx, entity.name.interface.ts, entity.name.interface.tsx#ff8bcdbold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#45BAFF
meta.type.annotation.ts, meta.type.annotation.tsx, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#E69FFF
keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#fc9851
meta.decorator.ts, meta.decorator.tsx, punctuation.decorator.ts, punctuation.decorator.tsx#E88D02italic
keyword.control.rust, keyword.other.rust#FFA7DBbold
storage.type.rust, storage.modifier.rust#d88de3italic
entity.name.function.rust#7cc8ff
entity.name.type.rust, entity.name.enum.rust, entity.name.struct.rust, entity.name.trait.rust#ff8bcdbold
entity.name.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#E88D02italic
support.macro.rust, entity.name.function.macro.rust#62ec80bold
meta.attribute.rust, punctuation.definition.attribute.rust#E88D02
variable.language.self.rust#E69FFFitalic
keyword.control.go, keyword.control.import.go#FFA7DBbold
storage.type.go#d88de3italic
entity.name.function.go#7cc8ff
entity.name.type.go#ff8bcdbold
support.function.builtin.go#62ec80
constant.language.go#45BAFF
variable.other.go#eeb1d5
keyword.control.java, keyword.other.import.java, keyword.other.package.java#FFA7DBbold
storage.modifier.java, storage.type.java#d88de3italic
entity.name.function.java#7cc8ff
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java#ff8bcdbold
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java#E88D02italic
variable.parameter.java#45BAFFitalic
keyword.control.ruby, keyword.control.start-block.ruby#FFA7DBbold
storage.type.function.ruby, storage.type.class.ruby#d88de3italic
entity.name.function.ruby#7cc8ff
entity.name.type.class.ruby, entity.name.type.module.ruby#ff8bcdbold
constant.other.symbol.ruby, punctuation.definition.constant.ruby#E88D02
variable.other.constant.ruby#FFF39F
variable.language.ruby#E69FFFitalic
keyword.other.special-method.ruby#62ec80
keyword.control.c, keyword.control.cpp#FFA7DBbold
storage.type.c, storage.type.cpp, storage.modifier.c, storage.modifier.cpp#d88de3italic
entity.name.function.c, entity.name.function.cpp#7cc8ff
entity.name.type.c, entity.name.type.cpp, entity.name.class.cpp#ff8bcdbold
keyword.control.directive.c, keyword.control.directive.cpp, meta.preprocessor.c, meta.preprocessor.cpp, punctuation.definition.directive.c, punctuation.definition.directive.cpp#E88D02italic
variable.parameter.c, variable.parameter.cpp#45BAFFitalic
keyword.control.swift, keyword.statement.swift#FFA7DBbold
storage.type.swift, storage.modifier.swift#d88de3italic
entity.name.function.swift#7cc8ff
entity.name.type.swift, entity.name.type.class.swift, entity.name.type.struct.swift, entity.name.type.enum.swift, entity.name.type.protocol.swift#ff8bcdbold
variable.parameter.swift#45BAFFitalic
meta.attribute.swift, punctuation.definition.attribute.swift#E88D02italic
support.function.swift, support.function.any-method.swift#62ec80
entity.name.tag.yaml, punctuation.separator.key-value.yaml#FFA7DB
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#c2d2ded5
constant.language.boolean.yaml, constant.language.null.yaml#45BAFF
punctuation.definition.block.sequence.item.yaml#fc9851
variable.other.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml, entity.name.type.anchor.yaml#E88D02italic
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql#FFA7DBbold
entity.name.function.sql, support.function.aggregate.sql#7cc8ff
constant.numeric.sql#45BAFF
string.quoted.single.sql, string.quoted.double.sql#c2d2ded5
entity.name.tag.sql, meta.toc-list.table-name.sql#ff8bcd
keyword.control.bash, keyword.control.shell#FFA7DBbold
entity.name.function.shell#7cc8ff
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#f1ee96
punctuation.definition.variable.shell#fc9851
support.function.builtin.shell#62ec80
string.quoted.double.shell, string.quoted.single.shell#c2d2ded5
meta.scope.heredoc.shell, string.unquoted.heredoc.shell#c2d2ded5italic