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#0d0406
  • activityBar.border#241016
  • activityBar.foreground#ff5c7a
  • activityBar.inactiveForeground#c29aa0
  • activityBarBadge.background#ff5c7a
  • activityBarBadge.foreground#000000
  • badge.background#b31f34
  • breadcrumb.background#120609
  • button.background#b31f34
  • button.foreground#ffffff
  • button.hoverBackground#ff5c7a
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#120609
  • editor.findMatchBackground#b31f34
  • editor.findMatchBorder#FF5C7A
  • editor.findMatchHighlightBackground#b31f3480
  • editor.findMatchHighlightBorder#FF9EB066
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#1f0a0e
  • editor.lineHighlightBorder#5e131f
  • editor.selectionBackground#5e131f80
  • editorBracketMatch.border#FF5C7A
  • editorCursor.foreground#ff5c7a
  • editorGroup.border#241016
  • editorGroupHeader.noTabsBackground#120609
  • editorGroupHeader.tabsBackground#0d0406
  • editorGutter.addedBackground#50fa7b
  • editorGutter.background#120609
  • editorGutter.modifiedBackground#ff5c7a
  • editorHoverWidget.background#1f0a0e
  • editorHoverWidget.border#5e131f
  • editorHoverWidget.foreground#e8d7dc
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorOverviewRuler.addedForeground#50fa7b
  • editorOverviewRuler.modifiedForeground#ff5c7a
  • editorSuggestWidget.background#1f0a0e
  • editorSuggestWidget.border#5e131f
  • editorSuggestWidget.foreground#e8d7dc
  • editorSuggestWidget.highlightForeground#ff5c7a
  • editorSuggestWidget.selectedBackground#5e131f
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#1f0a0e
  • editorWidget.border#5e131f
  • extensionButton.prominentBackground#FF5C7A
  • extensionButton.prominentHoverBackground#FF5C7A96
  • focusBorder#FF9EB0
  • gitDecoration.addedResourceForeground#50fa7b
  • gitDecoration.deletedResourceForeground#FF5C7A
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#ff5c7a
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#241016
  • input.border#5e131f
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#5e131f
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#ff5c7a
  • list.hoverBackground#241016
  • list.inactiveSelectionBackground#241016
  • list.inactiveSelectionForeground#D7DAE0
  • menu.background#120609
  • menu.selectionBackground#5e131f
  • minimapGutter.addedBackground#50fa7b
  • minimapGutter.modifiedBackground#ff5c7a
  • notificationCenter.background#1f0a0e
  • notifications.background#1f0a0e
  • notifications.border#5e131f
  • output.background#120609
  • panel.background#120609
  • pickerGroup.border#FF5C7A
  • quickInput.background#120609
  • scrollbarSlider.activeBackground#ff5c7a66
  • scrollbarSlider.background#ff5c7a22
  • scrollbarSlider.hoverBackground#ff5c7a44
  • sideBar.background#0d0406
  • sideBar.border#241016
  • sideBar.foreground#c29aa0
  • sideBarSectionHeader.background#0d0406
  • sideBarSectionHeader.border#241016
  • statusBar.background#1f0a0e
  • statusBar.border#3a1620
  • statusBar.debuggingBackground#FF5C7A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#1f0a0e
  • tab.activeForeground#ff5c7a
  • tab.border#3a1620
  • tab.inactiveBackground#0d0406
  • terminal.ansiBlue#FF9EB0
  • terminal.ansiBrightBlue#FF9EB0
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#50fa7b
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#FF5C7A
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FF5C7A
  • terminal.ansiYellow#FFEA16
  • terminal.background#120609
  • terminal.border#5e131f
  • terminal.foreground#e8d7dc
  • terminal.selectionBackground#5e131f80
  • terminalCommandDecoration.defaultBackground#ff5c7a
  • terminalCommandDecoration.errorBackground#ff5555
  • terminalCommandDecoration.successBackground#50fa7b
  • terminalCursor.background#120609
  • terminalCursor.foreground#ff5c7a
  • titleBar.activeBackground#0d0406
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#0d0406
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a4b52italic
string.quoted, string.template, punctuation.definition.string#FFD166
string.template meta.embedded.line#ffeef1
variable, entity.name.variable#C9A0FF
variable.language, variable.other.object.js#FF9EB0
variable.parameter#C9A0FFbold
storage.type, storage.modifier#FF5C7Abold
constant#C9A0FF
string.regexp#C9A0FF
meta.jsx.children.js, meta.property-value.css, text.html.derivative#ffeef1
constant.numeric#FF5C7Abold
constant.language#C9A0FF
constant.character.escape#FFFFFF
entity.name#FF9EB0
entity.name.tag#FF9EB0bold
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#C9A0FF
entity.name.type#FF9EB0bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#ffeef1bold
keyword#FF5C7Abold
keyword.control#FF5C7Abold
keyword.operator#FF5C7Abold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FF5C7Abold
keyword.other.unit#C9A0FF
support#FF9EB0bold
support.function#ffeef1
support.variable#C9A0FF
meta.object-literal.key, support.type.property-name#FF9EB0
variable.other.property.js#FF5C7Abold
punctuation.separator.key-value#FF5C7Abold
punctuation.section.embedded#FF5C7Abold
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF5C7A
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#FF5C7Abold
support.constant.font-name#C9A0FF
entity.other.attribute-name.id#FF5C7Abold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#FF5C7Abold
markup.heading, entity.name.section#C9A0FF
markup.quote#7DD3FCbold
beginning.punctuation.definition.list#C9A0FF
markup.underline.link#F2F2F2
string.other.link.description#C9A0FF
meta.function-call.generic.python#ffeef1
storage.type.cs#FF5C7Abold
entity.name.variable.local.cs#C9A0FF
entity.name.variable.field.cs, entity.name.variable.property.cs#C9A0FF
source.cpp keyword.operator#FF5C7Abold
punctuation.definition.heading.markdown#C9A0FF7c
punctuation.definition.bold.markdown#FF5C7A7a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic
storage.type.interface.ts, storage.type.interface.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.class.ts, storage.type.class.tsx#FF5C7Abold
entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.enum.ts, entity.name.type.enum.tsx#FF9EB0bold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#FF9EB0
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#FF9EB0
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#FF5C7A
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#FFD166italic
entity.name.function.macro.rust, support.macro.rust#FF9EB0bold
variable.language.self.rust, variable.language.super.rust#FF9EB0italic
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.option.rust, entity.name.type.result.rust#FF9EB0bold
support.type.primitive.rust, entity.name.type.primitive.rust#FF5C7Abold
meta.attribute.rust, punctuation.definition.attribute.rust#C9A0FF
support.class.component.js, support.class.component.jsx, support.class.component.tsx#FF9EB0bold
meta.jsx.children, meta.jsx.children.tsx#ffeef1
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#FF5C7Abold
meta.decorator, punctuation.decorator#C9A0FFitalic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#FF9EB0
entity.name.package.go, entity.name.import.go#C9A0FF
support.type.property-name.json#FF9EB0
entity.name.tag.yaml#FF9EB0
support.type.property-name.toml, entity.name.table.toml#FF9EB0