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#0a0a0f
  • activityBar.border#0a0a0f60
  • activityBar.foreground#FFA7DB
  • activityBarBadge.background#cdd6f4
  • activityBarBadge.foreground#0a0a0f
  • badge.background#0a0a0f30
  • badge.foreground#bd93f9
  • breadcrumb.activeSelectionForeground#bd93f9
  • breadcrumb.background#0a0a0f
  • breadcrumb.focusForeground#FFA7DB
  • breadcrumb.foreground#cdd6f4
  • breadcrumbPicker.background#0a0a0f
  • button.background#bd93f950
  • contrastBorder#bd93f940
  • debugToolBar.background#0a0a0f
  • diffEditor.insertedTextBackground#ffb86c15
  • diffEditor.removedTextBackground#50fa7b20
  • dropdown.background#0a0a0f
  • dropdown.border#cdd6f410
  • editor.background#0a0a0f
  • editor.findMatchBackground#0a0a0f
  • editor.findMatchBorder#bd93f9b8
  • editor.findMatchHighlightBackground#44475a83
  • editor.findMatchHighlightBorder#cdd6f430
  • editor.foreground#cdd6f4
  • editor.lineHighlightBackground#16161f
  • editor.selectionBackground#f1fa8c30
  • editor.selectionHighlightBackground#44475a6b
  • editor.selectionHighlightBorder#f1fa8cf0
  • editorBracketHighlight.foreground1#FFA7DB
  • editorBracketHighlight.foreground2#8be9fd
  • editorBracketHighlight.foreground3#bd93f9
  • editorBracketHighlight.foreground4#50fa7b
  • editorBracketHighlight.foreground5#f1fa8c
  • editorBracketHighlight.foreground6#ffb86c
  • editorBracketHighlight.unexpectedBracket.foreground#ff5555
  • editorBracketMatch.background#0a0a0f
  • editorBracketMatch.border#8be9fd7f
  • editorCursor.foreground#FFA7DBcf
  • editorError.foreground#ff555570
  • editorGroup.border#0a0a0f30
  • editorGroupHeader.tabsBackground#070709
  • editorGutter.addedBackground#ffb86c60
  • editorGutter.deletedBackground#50fa7b60
  • editorGutter.modifiedBackground#f1fa8c60
  • editorHoverWidget.background#13131a
  • editorHoverWidget.border#cdd6f410
  • editorIndentGuide.activeBackground1#44475a
  • editorIndentGuide.background1#44475a70
  • editorInfo.foreground#f1fa8c70
  • editorLineNumber.activeForeground#f1fa8c
  • editorLineNumber.foreground#bd93f9d7
  • editorLink.activeForeground#FFA7DB
  • editorMarkerNavigation.background#FFA7DB05
  • editorOverviewRuler.border#0a0a0f
  • editorOverviewRuler.errorForeground#ff555540
  • editorOverviewRuler.findMatchForeground#44475acc
  • editorOverviewRuler.infoForeground#f1fa8c40
  • editorOverviewRuler.warningForeground#8be9fd70
  • editorRuler.foreground#44475a
  • editorSuggestWidget.background#13131a
  • editorSuggestWidget.border#cdd6f410
  • editorSuggestWidget.foreground#FFA7DB
  • editorSuggestWidget.highlightForeground#8be9fd
  • editorSuggestWidget.selectedBackground#bd93f920
  • editorWarning.foreground#ffb86cc9
  • editorWhitespace.foreground#FFA7DB40
  • editorWidget.background#13131a
  • editorWidget.border#8be9fd
  • editorWidget.resizeBorder#bd93f9
  • extensionButton.prominentBackground#ffb86c90
  • extensionButton.prominentHoverBackground#50fa7b
  • focusBorder#cdd6f400
  • gitDecoration.conflictingResourceForeground#8be9fd
  • gitDecoration.deletedResourceForeground#50fa7b
  • gitDecoration.ignoredResourceForeground#bd93f9
  • gitDecoration.modifiedResourceForeground#f1fa8c
  • gitDecoration.untrackedResourceForeground#f8f8f2
  • input.background#13131a
  • input.border#cdd6f410
  • input.foreground#FFA7DB
  • input.placeholderForeground#FFA7DB60
  • inputOption.activeBackground#FFA7DB30
  • inputOption.activeBorder#FFA7DB30
  • inputValidation.errorBorder#ff555550
  • inputValidation.infoBorder#f1fa8c50
  • inputValidation.warningBorder#8be9fd50
  • list.activeSelectionBackground#16161f
  • list.activeSelectionForeground#cdd6f4c7
  • list.focusBackground#13131a
  • list.focusForeground#f8f8f2
  • list.highlightForeground#bd93f99e
  • list.hoverBackground#16161f
  • list.hoverForeground#cdd6f4
  • list.inactiveSelectionBackground#0a0a0f30
  • list.inactiveSelectionForeground#cdd6f4c8
  • list.warningForeground#8be9fd
  • listFilterWidget.background#0a0a0f30
  • listFilterWidget.noMatchesOutline#0a0a0f30
  • listFilterWidget.outline#0a0a0f30
  • menu.background#0a0a0ff8
  • menu.border#bd93f950
  • menu.foreground#FFA7DB
  • menu.selectionBackground#13131a
  • menu.selectionBorder#0a0a0f30
  • menu.selectionForeground#FFA7DB
  • menu.separatorBackground#FFA7DB
  • menubar.selectionBackground#13131a
  • menubar.selectionBorder#bd93f950
  • menubar.selectionForeground#FFA7DB
  • minimap.background#0a0a0f
  • minimapGutter.addedBackground#50fa7b
  • minimapGutter.deletedBackground#8be9fd
  • minimapGutter.modifiedBackground#ffb86c
  • minimapSlider.activeBackground#ffb86cb0
  • minimapSlider.background#bd93f980
  • minimapSlider.hoverBackground#bd93f9a0
  • notebook.cellBorderColor#bd93f940
  • notebook.cellEditorBackground#0a0a0f
  • notebook.cellStatusBarItemHoverBackground#bd93f920
  • notebook.focusedCellBorder#bd93f9
  • notebook.inactiveFocusedCellBorder#bd93f950
  • notebook.outputContainerBackgroundColor#070709
  • notebook.outputContainerBorderColor#bd93f930
  • notebook.selectedCellBackground#bd93f910
  • notebook.selectedCellBorder#bd93f9
  • notebookScrollbarSlider.activeBackground#bd93f9cc
  • notebookScrollbarSlider.background#bd93f9bb
  • notebookScrollbarSlider.hoverBackground#bd93f9ee
  • notificationLink.foreground#bd93f9
  • notifications.background#13131a
  • notifications.foreground#FFA7DB
  • panel.background#070709
  • panel.border#0a0a0f60
  • panelTitle.activeBorder#bd93f9
  • panelTitle.activeForeground#cdd6f4
  • panelTitle.inactiveForeground#FFA7DB
  • peekView.border#0a0a0f30
  • peekViewEditor.background#FFA7DB05
  • peekViewEditor.matchHighlightBackground#bd93f950
  • peekViewEditorGutter.background#FFA7DB05
  • peekViewResult.background#FFA7DB05
  • peekViewResult.matchHighlightBackground#bd93f950
  • peekViewResult.selectionBackground#bd93f970
  • peekViewTitle.background#FFA7DB05
  • peekViewTitleDescription.foreground#FFA7DB60
  • pickerGroup.foreground#bd93f9
  • progressBar.background#bd93f9
  • scrollbar.shadow#0a0a0f00
  • scrollbarSlider.activeBackground#bd93f9cc
  • scrollbarSlider.background#bd93f9bb
  • scrollbarSlider.hoverBackground#bd93f9ee
  • selection.background#44475aa1
  • settings.checkboxBackground#0a0a0f
  • settings.checkboxForeground#FFA7DB
  • settings.dropdownBackground#13131a
  • settings.dropdownForeground#FFA7DB
  • settings.headerForeground#bd93f9
  • settings.modifiedItemIndicator#bd93f9
  • settings.numberInputBackground#13131a
  • settings.numberInputForeground#FFA7DB
  • settings.textInputBackground#13131a
  • settings.textInputForeground#FFA7DB
  • sideBar.background#070709
  • sideBar.border#bd93f950
  • sideBar.foreground#cdd6f4c6
  • sideBarSectionHeader.background#070709
  • sideBarSectionHeader.border#0a0a0f60
  • sideBarSectionHeader.foreground#cdd6f4
  • sideBarTitle.foreground#FFA7DB
  • statusBar.background#1a1a2e
  • statusBar.border#0a0a0f60
  • statusBar.debuggingBackground#bd93f9e8
  • statusBar.debuggingForeground#0a0a0f
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#0a0a0f
  • statusBarItem.hoverBackground#bd93f920
  • statusBarItem.remoteBackground#bd93f9
  • statusBarItem.remoteForeground#0a0a0f
  • tab.activeBackground#16161f
  • tab.activeBorder#bd93f9
  • tab.activeForeground#cdd6f4
  • tab.activeModifiedBorder#bd93f9
  • tab.border#0a0a0f
  • tab.inactiveBackground#070709
  • tab.inactiveForeground#FFA7DBaf
  • tab.unfocusedActiveBackground#13131a
  • tab.unfocusedActiveBorder#bd93f9
  • tab.unfocusedActiveForeground#FFA7DB
  • tab.unfocusedInactiveBackground#070709
  • tab.unfocusedInactiveForeground#FFA7DB7f
  • terminal.ansiBlack#0a0a0f
  • terminal.ansiBlue#f8f8f2
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#f8f8f2
  • terminal.ansiBrightCyan#8be9fd
  • terminal.ansiBrightGreen#0f3818
  • terminal.ansiBrightMagenta#bd93f9
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#f1fa8c
  • terminal.ansiCyan#8be9fdcd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#bd93f9
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#cdd6f4
  • terminal.ansiYellow#f1fa8cdd
  • terminalCursor.background#0a0a0f
  • terminalCursor.foreground#8be9fd
  • textLink.activeForeground#FFA7DB
  • textLink.foreground#bd93f9
  • titleBar.activeBackground#0a0a0f
  • titleBar.activeForeground#FFA7DB
  • titleBar.border#0a0a0f60
  • titleBar.inactiveBackground#070709
  • titleBar.inactiveForeground#bd93f9
  • tree.indentGuidesStroke#44475a
  • widget.shadow#0a0a0f30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, storage.modifier#f1fa8c—
keyword#f8f8f2—
storage.type#bd93f9—
keyword.operator, punctuation.separator, storage.type.function.arrow.js#ffb86c—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss—italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#ffb86c—
constant.other.php#8be9fd—
constant.other.color#cdd6f4—
variable.language.this.js#50fa7b—
invalid, invalid.illegal#ff5555—
Keyword, Storage—italic
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#f8f8f2—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#f1fa8c—
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#8be9fdd1—
keyword.control—bold
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#44475aitalic
text.html.derivative#6272a4—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, variable.other.object.js#FFA7DB—
entity.name.tag.html—bold
variable.parameter.js, variable.parameter.keyframe-list.css#8be9fd—
string.other.link.title.markdown, variable.other.property.js, constant.other.caps.python, support.type.property-name.json#f1fa8c
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#b8d0e8d5—
entity.name.function, entity.other.attribute-name.html#8be9fd—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, variable.other.object.property.js, variable.other.definition.java#f8f8f2
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#8be9fd—
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#50fa7b—
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#ffb86c
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#FFA7DB—
support.type#8be9fd—
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#f1fa8c—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, invalid.deprecated#50fa7b—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#f8f8f2italic
entity.other.attribute-name, support.function#8be9fd—
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#8be9fd—
markup.inserted, entity.name.tag.html#ffb86c—
markup.deleted#50fa7b—
markup.changed#8be9fd—
string.regexp#f8f8f2—
constant.character.escape#f8f8f2—
*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#8be9fd—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#bd93f950—
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#f1fa8cbold
markup.underline#f8f8f2underline
markup.strike—
markup.quote punctuation.definition.blockquote.markdown#bd93f950—
markup.quote—italic
string.other.link.description.title.markdown#8be9fd—
constant.other.reference.link.markdown#8be9fd—
markup.raw.block#8be9fd—
punctuation.definition.raw.markdown, punctuation.definition.markdown#f8f8f2—
variable.language.fenced.markdown#bd93f9—
meta.separator#6272a4bold
token.info-token#bd93f9—
token.warn-token#ffb86c—
token.error-token#ff5555—
token.debug-token#f8f8f2—
keyword.control.flow.python, keyword.control.import.python, keyword.control.python#FFA7DBbold
storage.type.function.python, storage.type.class.python#bd93f9italic
entity.name.function.python#8be9fd—
entity.name.type.python, entity.name.class.python#FFA7DBbold
variable.parameter.python#8be9fditalic
variable.language.special.self.python#bd93f9italic
constant.language.python#8be9fd—
support.function.builtin.python#50fa7b—
entity.name.function.decorator.python, punctuation.definition.decorator.python#ffb86citalic
meta.function-call.python support.function#8be9fd—
storage.type.type.ts, storage.type.type.tsx, storage.type.interface.ts, storage.type.interface.tsx#bd93f9italic
entity.name.type.ts, entity.name.type.tsx, entity.name.interface.ts, entity.name.interface.tsx#FFA7DBbold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#8be9fd—
meta.type.annotation.ts, meta.type.annotation.tsx, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#bd93f9—
keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#ffb86c—
meta.decorator.ts, meta.decorator.tsx, punctuation.decorator.ts, punctuation.decorator.tsx#ffb86citalic
keyword.control.rust, keyword.other.rust#FFA7DBbold
storage.type.rust, storage.modifier.rust#bd93f9italic
entity.name.function.rust#8be9fd—
entity.name.type.rust, entity.name.enum.rust, entity.name.struct.rust, entity.name.trait.rust#FFA7DBbold
entity.name.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#ffb86citalic
support.macro.rust, entity.name.function.macro.rust#50fa7bbold
meta.attribute.rust, punctuation.definition.attribute.rust#ffb86c—
variable.language.self.rust#bd93f9italic
keyword.control.go, keyword.control.import.go#FFA7DBbold
storage.type.go#bd93f9italic
entity.name.function.go#8be9fd—
entity.name.type.go#FFA7DBbold
support.function.builtin.go#50fa7b—
constant.language.go#8be9fd—
variable.other.go#cdd6f4—
keyword.control.java, keyword.other.import.java, keyword.other.package.java#FFA7DBbold
storage.modifier.java, storage.type.java#bd93f9italic
entity.name.function.java#8be9fd—
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java#FFA7DBbold
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java#ffb86citalic
variable.parameter.java#8be9fditalic
keyword.control.ruby, keyword.control.start-block.ruby#FFA7DBbold
storage.type.function.ruby, storage.type.class.ruby#bd93f9italic
entity.name.function.ruby#8be9fd—
entity.name.type.class.ruby, entity.name.type.module.ruby#FFA7DBbold
constant.other.symbol.ruby, punctuation.definition.constant.ruby#ffb86c—
variable.other.constant.ruby#f1fa8c—
variable.language.ruby#bd93f9italic
keyword.other.special-method.ruby#50fa7b—
keyword.control.c, keyword.control.cpp#FFA7DBbold
storage.type.c, storage.type.cpp, storage.modifier.c, storage.modifier.cpp#bd93f9italic
entity.name.function.c, entity.name.function.cpp#8be9fd—
entity.name.type.c, entity.name.type.cpp, entity.name.class.cpp#FFA7DBbold
keyword.control.directive.c, keyword.control.directive.cpp, meta.preprocessor.c, meta.preprocessor.cpp, punctuation.definition.directive.c, punctuation.definition.directive.cpp#ffb86citalic
variable.parameter.c, variable.parameter.cpp#8be9fditalic
keyword.control.swift, keyword.statement.swift#FFA7DBbold
storage.type.swift, storage.modifier.swift#bd93f9italic
entity.name.function.swift#8be9fd—
entity.name.type.swift, entity.name.type.class.swift, entity.name.type.struct.swift, entity.name.type.enum.swift, entity.name.type.protocol.swift#FFA7DBbold
variable.parameter.swift#8be9fditalic
meta.attribute.swift, punctuation.definition.attribute.swift#ffb86citalic
support.function.swift, support.function.any-method.swift#50fa7b—
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#b8d0e8d5—
constant.language.boolean.yaml, constant.language.null.yaml#8be9fd—
punctuation.definition.block.sequence.item.yaml#ffb86c—
variable.other.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml, entity.name.type.anchor.yaml#ffb86citalic
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql#FFA7DBbold
entity.name.function.sql, support.function.aggregate.sql#8be9fd—
constant.numeric.sql#8be9fd—
string.quoted.single.sql, string.quoted.double.sql#b8d0e8d5—
entity.name.tag.sql, meta.toc-list.table-name.sql#FFA7DB—
keyword.control.bash, keyword.control.shell#FFA7DBbold
entity.name.function.shell#8be9fd—
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#f1fa8c—
punctuation.definition.variable.shell#ffb86c—
support.function.builtin.shell#50fa7b—
string.quoted.double.shell, string.quoted.single.shell#b8d0e8d5—
meta.scope.heredoc.shell, string.unquoted.heredoc.shell#b8d0e8d5italic