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#1a0e2e
  • activityBar.border#1a0e2e60
  • activityBar.foreground#ff9cac
  • activityBarBadge.background#e3e3e3
  • activityBarBadge.foreground#1a0e2e
  • badge.background#1a0e2e30
  • badge.foreground#c792ea
  • breadcrumb.activeSelectionForeground#c792ea
  • breadcrumb.background#1a0e2e
  • breadcrumb.focusForeground#ff9cac
  • breadcrumb.foreground#e8d5f5
  • breadcrumbPicker.background#1a0e2e
  • button.background#c792ea50
  • contrastBorder#c792ea40
  • debugToolBar.background#1a0e2e
  • diffEditor.insertedTextBackground#ffcb6b15
  • diffEditor.removedTextBackground#c3e88d20
  • dropdown.background#1a0e2e
  • dropdown.border#e8d5f510
  • editor.background#1a0e2e
  • editor.findMatchBackground#1a0e2e
  • editor.findMatchBorder#c792eab8
  • editor.findMatchHighlightBackground#b4b4b583
  • editor.findMatchHighlightBorder#e8d5f530
  • editor.foreground#e8d5f5
  • editor.lineHighlightBackground#2a154550
  • editor.selectionBackground#fffac230
  • editor.selectionHighlightBackground#baabbf6b
  • editor.selectionHighlightBorder#fffac2f0
  • editorBracketHighlight.foreground1#ff9cac
  • editorBracketHighlight.foreground2#89ddff
  • editorBracketHighlight.foreground3#c792ea
  • editorBracketHighlight.foreground4#c3e88d
  • editorBracketHighlight.foreground5#fffac2
  • editorBracketHighlight.foreground6#f78c6c
  • editorBracketHighlight.unexpectedBracket.foreground#ff5370
  • editorBracketMatch.background#1a0e2e
  • editorBracketMatch.border#89ddff7f
  • editorCursor.foreground#ff9caccf
  • editorError.foreground#c3e88d70
  • editorGroup.border#1a0e2e30
  • editorGroupHeader.tabsBackground#1a0e2e
  • editorGutter.addedBackground#ffcb6b60
  • editorGutter.deletedBackground#c3e88d60
  • editorGutter.modifiedBackground#fffac260
  • editorHoverWidget.background#1a0e2e
  • editorHoverWidget.border#e8d5f510
  • editorIndentGuide.activeBackground1#3d2a5a
  • editorIndentGuide.background1#3d2a5a70
  • editorInfo.foreground#fffac270
  • editorLineNumber.activeForeground#fffac2
  • editorLineNumber.foreground#c792ead7
  • editorLink.activeForeground#ff9cac
  • editorMarkerNavigation.background#ff9cac05
  • editorOverviewRuler.border#1a0e2e
  • editorOverviewRuler.errorForeground#c3e88d40
  • editorOverviewRuler.findMatchForeground#a297a5cc
  • editorOverviewRuler.infoForeground#fffac240
  • editorOverviewRuler.warningForeground#89ddff70
  • editorRuler.foreground#3d2a5a
  • editorSuggestWidget.background#1a0e2e
  • editorSuggestWidget.border#e8d5f510
  • editorSuggestWidget.foreground#ff9cac
  • editorSuggestWidget.highlightForeground#89ddff
  • editorSuggestWidget.selectedBackground#c792ea20
  • editorWarning.foreground#f78c6cc9
  • editorWhitespace.foreground#ff9cac40
  • editorWidget.background#1a0e2e
  • editorWidget.border#89ddff
  • editorWidget.resizeBorder#c792ea
  • extensionButton.prominentBackground#ffcb6b90
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#e8d5f500
  • gitDecoration.conflictingResourceForeground#89ddff
  • gitDecoration.deletedResourceForeground#c3e88d
  • gitDecoration.ignoredResourceForeground#c792ea
  • gitDecoration.modifiedResourceForeground#fffac2
  • gitDecoration.untrackedResourceForeground#e8d5f5
  • input.background#231540
  • input.border#e8d5f510
  • input.foreground#ff9cac
  • input.placeholderForeground#ff9cac60
  • inputOption.activeBackground#ff9cac30
  • inputOption.activeBorder#ff9cac30
  • inputValidation.errorBorder#c3e88d50
  • inputValidation.infoBorder#fffac250
  • inputValidation.warningBorder#89ddff50
  • list.activeSelectionBackground#1a0e2e
  • list.activeSelectionForeground#a39da5c7
  • list.focusBackground#231540
  • list.focusForeground#e8d5f5
  • list.highlightForeground#c792ea9e
  • list.hoverBackground#3d2a5a
  • list.hoverForeground#e8d5f5
  • list.inactiveSelectionBackground#1a0e2e30
  • list.inactiveSelectionForeground#cecacfc8
  • list.warningForeground#89ddff
  • listFilterWidget.background#1a0e2e30
  • listFilterWidget.noMatchesOutline#1a0e2e30
  • listFilterWidget.outline#1a0e2e30
  • menu.background#1a0e2ef8
  • menu.border#c792ea50
  • menu.foreground#ff9cac
  • menu.selectionBackground#231540
  • menu.selectionBorder#1a0e2e30
  • menu.selectionForeground#ff9cac
  • menu.separatorBackground#ff9cac
  • menubar.selectionBackground#231540
  • menubar.selectionBorder#c792ea50
  • menubar.selectionForeground#ff9cac
  • minimap.background#1a0e2e
  • minimapGutter.addedBackground#c3e88d
  • minimapGutter.deletedBackground#89ddff
  • minimapGutter.modifiedBackground#ffcb6b
  • minimapSlider.activeBackground#ffcb6bb0
  • minimapSlider.background#5e189a80
  • minimapSlider.hoverBackground#7b22c0a0
  • notebook.cellBorderColor#c792ea40
  • notebook.cellEditorBackground#1a0e2e
  • notebook.cellStatusBarItemHoverBackground#c792ea20
  • notebook.focusedCellBorder#c792ea
  • notebook.inactiveFocusedCellBorder#c792ea50
  • notebook.outputContainerBackgroundColor#130a22
  • notebook.outputContainerBorderColor#c792ea30
  • notebook.selectedCellBackground#c792ea10
  • notebook.selectedCellBorder#c792ea
  • notebookScrollbarSlider.activeBackground#c792eacc
  • notebookScrollbarSlider.background#c792eabb
  • notebookScrollbarSlider.hoverBackground#c792eaee
  • notificationLink.foreground#c792ea
  • notifications.background#1a0e2e
  • notifications.foreground#ff9cac
  • panel.background#130a22
  • panel.border#130a2260
  • panelTitle.activeBorder#c792ea
  • panelTitle.activeForeground#e8d5f5
  • panelTitle.inactiveForeground#ff9cac
  • peekView.border#1a0e2e30
  • peekViewEditor.background#ff9cac05
  • peekViewEditor.matchHighlightBackground#c792ea50
  • peekViewEditorGutter.background#ff9cac05
  • peekViewResult.background#ff9cac05
  • peekViewResult.matchHighlightBackground#c792ea50
  • peekViewResult.selectionBackground#9b6bce70
  • peekViewTitle.background#ff9cac05
  • peekViewTitleDescription.foreground#ff9cac60
  • pickerGroup.foreground#c792ea
  • progressBar.background#c792ea
  • scrollbar.shadow#1a0e2e00
  • scrollbarSlider.activeBackground#c792eacc
  • scrollbarSlider.background#c792eabb
  • scrollbarSlider.hoverBackground#c792eaee
  • selection.background#7c4ea0a1
  • settings.checkboxBackground#1a0e2e
  • settings.checkboxForeground#ff9cac
  • settings.dropdownBackground#1a0e2e
  • settings.dropdownForeground#ff9cac
  • settings.headerForeground#c792ea
  • settings.modifiedItemIndicator#c792ea
  • settings.numberInputBackground#1a0e2e
  • settings.numberInputForeground#ff9cac
  • settings.textInputBackground#1a0e2e
  • settings.textInputForeground#ff9cac
  • sideBar.background#130a22
  • sideBar.border#c792ea50
  • sideBar.foreground#e8d5f5c6
  • sideBarSectionHeader.background#130a22
  • sideBarSectionHeader.border#130a2260
  • sideBarSectionHeader.foreground#e8d5f5
  • sideBarTitle.foreground#ff9cac
  • statusBar.background#5e189a
  • statusBar.border#1a0e2e60
  • statusBar.debuggingBackground#8b12bbe8
  • statusBar.debuggingForeground#ebebeb
  • statusBar.foreground#FFFCFC
  • statusBar.noFolderBackground#1a0e2e
  • statusBarItem.hoverBackground#c792ea20
  • statusBarItem.remoteBackground#c792ea
  • statusBarItem.remoteForeground#1a0e2e
  • tab.activeBackground#2a154550
  • tab.activeBorder#c792ea
  • tab.activeForeground#e8d5f5
  • tab.activeModifiedBorder#c792ea
  • tab.border#1a0e2e
  • tab.inactiveBackground#c792ea20
  • tab.inactiveForeground#ff9cacaf
  • tab.unfocusedActiveBackground#c792ea40
  • tab.unfocusedActiveBorder#c792ea
  • tab.unfocusedActiveForeground#ff9cac
  • tab.unfocusedInactiveBackground#c792ea10
  • tab.unfocusedInactiveForeground#ff9cac7f
  • terminal.ansiBlack#1a0e2e
  • terminal.ansiBlue#e8d5f5
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#e8d5f5
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#1a3820
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#fffac2
  • terminal.ansiCyan#89ddffcd
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#c5c3c3
  • terminal.ansiYellow#ffcb6bdd
  • terminalCursor.background#1a0e2e
  • terminalCursor.foreground#89ddff
  • textLink.activeForeground#ff9cac
  • textLink.foreground#c792ea
  • titleBar.activeBackground#1a0e2e
  • titleBar.activeForeground#ff9cac
  • titleBar.border#1a0e2e60
  • titleBar.inactiveBackground#1a0e2e
  • titleBar.inactiveForeground#c792ea
  • tree.indentGuidesStroke#3d2a5a
  • widget.shadow#1a0e2e30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, storage.modifier#fffac2
keyword#e8d5f5
storage.type#c792ea
keyword.operator, punctuation.separator, storage.type.function.arrow.js#f78c6c
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#ffcb6b
constant.other.php#89ddff
constant.other.color#e8d5f5
variable.language.this.js#c3e88d
invalid, invalid.illegal#ff5370
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#e8d5f5
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#fffac2
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#ff9cac
punctuation.definition, string.quoted.single.scss#89ddffe0
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#6272a4italic
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, variable.other.object.js#ff9cac
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#89ddff
string.other.link.title.markdown, variable.other.property.js, constant.other.caps.python, support.type.property-name.json#fffac2
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#a3c0d8d5
entity.name.function, entity.other.attribute-name.html#82aaff
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, variable.other.object.property.js, variable.other.definition.java#e8d5f5
support.other.variable, string.other.link, markup.table#ff9cac
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#89ddff
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#c3e88d
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#ffcb6b
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#ff9cac
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#fffac2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, invalid.deprecated#c3e88d
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#e8d5f5italic
entity.other.attribute-name, support.function#89ddff
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#ff9cac
source.scss keyword.control#89ddff
markup.inserted, entity.name.tag.html#ffcb6b
markup.deleted#c3e88d
markup.changed#89ddff
string.regexp#e8d5f5
constant.character.escape#e8d5f5
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#ff9cacitalic
text.html.markdown, punctuation.definition.list_item.markdown#ff9cac
text.html.markdown markup.inline.raw.markdown#89ddff
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#c792ea50
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#fffac2bold
markup.underline#e8d5f5underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#c792ea50
markup.quoteitalic
string.other.link.description.title.markdown#89ddff
constant.other.reference.link.markdown#89ddff
markup.raw.block#89ddff
punctuation.definition.raw.markdown, punctuation.definition.markdown#e8d5f5
variable.language.fenced.markdown#c792ea
meta.separator#A7A8AFbold
token.info-token#c792ea
token.warn-token#ffcb6b
token.error-token#ff5370
token.debug-token#e8d5f5
keyword.control.flow.python, keyword.control.import.python, keyword.control.python#ff9cacbold
storage.type.function.python, storage.type.class.python#c792eaitalic
entity.name.function.python#82aaff
entity.name.type.python, entity.name.class.python#ff9cacbold
variable.parameter.python#89ddffitalic
variable.language.special.self.python#c792eaitalic
constant.language.python#89ddff
support.function.builtin.python#c3e88d
entity.name.function.decorator.python, punctuation.definition.decorator.python#ffcb6bitalic
meta.function-call.python support.function#82aaff
storage.type.type.ts, storage.type.type.tsx, storage.type.interface.ts, storage.type.interface.tsx#c792eaitalic
entity.name.type.ts, entity.name.type.tsx, entity.name.interface.ts, entity.name.interface.tsx#ff9cacbold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#89ddff
meta.type.annotation.ts, meta.type.annotation.tsx, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#c792ea
keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#f78c6c
meta.decorator.ts, meta.decorator.tsx, punctuation.decorator.ts, punctuation.decorator.tsx#ffcb6bitalic
keyword.control.rust, keyword.other.rust#ff9cacbold
storage.type.rust, storage.modifier.rust#c792eaitalic
entity.name.function.rust#82aaff
entity.name.type.rust, entity.name.enum.rust, entity.name.struct.rust, entity.name.trait.rust#ff9cacbold
entity.name.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#ffcb6bitalic
support.macro.rust, entity.name.function.macro.rust#c3e88dbold
meta.attribute.rust, punctuation.definition.attribute.rust#ffcb6b
variable.language.self.rust#c792eaitalic
keyword.control.go, keyword.control.import.go#ff9cacbold
storage.type.go#c792eaitalic
entity.name.function.go#82aaff
entity.name.type.go#ff9cacbold
support.function.builtin.go#c3e88d
constant.language.go#89ddff
variable.other.go#e8d5f5
keyword.control.java, keyword.other.import.java, keyword.other.package.java#ff9cacbold
storage.modifier.java, storage.type.java#c792eaitalic
entity.name.function.java#82aaff
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java#ff9cacbold
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java#ffcb6bitalic
variable.parameter.java#89ddffitalic
keyword.control.ruby, keyword.control.start-block.ruby#ff9cacbold
storage.type.function.ruby, storage.type.class.ruby#c792eaitalic
entity.name.function.ruby#82aaff
entity.name.type.class.ruby, entity.name.type.module.ruby#ff9cacbold
constant.other.symbol.ruby, punctuation.definition.constant.ruby#ffcb6b
variable.other.constant.ruby#fffac2
variable.language.ruby#c792eaitalic
keyword.other.special-method.ruby#c3e88d
keyword.control.c, keyword.control.cpp#ff9cacbold
storage.type.c, storage.type.cpp, storage.modifier.c, storage.modifier.cpp#c792eaitalic
entity.name.function.c, entity.name.function.cpp#82aaff
entity.name.type.c, entity.name.type.cpp, entity.name.class.cpp#ff9cacbold
keyword.control.directive.c, keyword.control.directive.cpp, meta.preprocessor.c, meta.preprocessor.cpp, punctuation.definition.directive.c, punctuation.definition.directive.cpp#ffcb6bitalic
variable.parameter.c, variable.parameter.cpp#89ddffitalic
keyword.control.swift, keyword.statement.swift#ff9cacbold
storage.type.swift, storage.modifier.swift#c792eaitalic
entity.name.function.swift#82aaff
entity.name.type.swift, entity.name.type.class.swift, entity.name.type.struct.swift, entity.name.type.enum.swift, entity.name.type.protocol.swift#ff9cacbold
variable.parameter.swift#89ddffitalic
meta.attribute.swift, punctuation.definition.attribute.swift#ffcb6bitalic
support.function.swift, support.function.any-method.swift#c3e88d
entity.name.tag.yaml, punctuation.separator.key-value.yaml#ff9cac
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#a3c0d8d5
constant.language.boolean.yaml, constant.language.null.yaml#89ddff
punctuation.definition.block.sequence.item.yaml#f78c6c
variable.other.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml, entity.name.type.anchor.yaml#ffcb6bitalic
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql#ff9cacbold
entity.name.function.sql, support.function.aggregate.sql#82aaff
constant.numeric.sql#89ddff
string.quoted.single.sql, string.quoted.double.sql#a3c0d8d5
entity.name.tag.sql, meta.toc-list.table-name.sql#ff9cac
keyword.control.bash, keyword.control.shell#ff9cacbold
entity.name.function.shell#82aaff
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#fffac2
punctuation.definition.variable.shell#f78c6c
support.function.builtin.shell#c3e88d
string.quoted.double.shell, string.quoted.single.shell#a3c0d8d5
meta.scope.heredoc.shell, string.unquoted.heredoc.shell#a3c0d8d5italic