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.scssitalic
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, 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#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.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#44475aitalic
text.html.derivative#6272a4
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#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.quoteitalic
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
Coffee Space Cats by Cats & Coffee - VS Code Theme