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#0a0a0a
  • activityBar.border#262626
  • activityBar.foreground#e5e5e5
  • activityBar.inactiveForeground#525252
  • activityBarBadge.background#c2a47b
  • activityBarBadge.foreground#0a0a0a
  • badge.background#c2a47b
  • badge.foreground#0a0a0a
  • breadcrumb.activeSelectionForeground#c2a47b
  • breadcrumb.focusForeground#f5f5f5
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#171717
  • button.background#c2a47b
  • button.foreground#0a0a0a
  • button.hoverBackground#d4b68d
  • button.secondaryBackground#262626
  • button.secondaryForeground#f5f5f5
  • checkbox.background#171717
  • checkbox.border#404040
  • checkbox.foreground#f5f5f5
  • descriptionForeground#a3a3a3
  • diffEditor.insertedLineBackground#ad947411
  • diffEditor.insertedTextBackground#ad947422
  • diffEditor.removedLineBackground#9f886a11
  • diffEditor.removedTextBackground#9f886a22
  • dropdown.background#171717
  • dropdown.border#262626
  • dropdown.foreground#f5f5f5
  • editor.background#0a0a0a
  • editor.findMatchBackground#c2a47b44
  • editor.findMatchBorder#c2a47b
  • editor.findMatchHighlightBackground#c2a47b22
  • editor.foreground#f5f5f5
  • editor.inactiveSelectionBackground#c2a47b1a
  • editor.lineHighlightBackground#171717
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#c2a47b33
  • editor.selectionHighlightBackground#c2a47b22
  • editor.wordHighlightBackground#c2a47b1a
  • editor.wordHighlightStrongBackground#c2a47b33
  • editorBracketMatch.background#c2a47b22
  • editorBracketMatch.border#c2a47b88
  • editorCursor.background#0a0a0a
  • editorCursor.foreground#c2a47b
  • editorError.foreground#9f886a
  • editorGroupHeader.noTabsBackground#0a0a0a
  • editorGroupHeader.tabsBackground#171717
  • editorGutter.addedBackground#ad947488
  • editorGutter.background#0a0a0a
  • editorGutter.deletedBackground#9f886a88
  • editorGutter.modifiedBackground#c2a47b88
  • editorHint.foreground#afa193
  • editorHoverWidget.background#171717
  • editorHoverWidget.border#262626
  • editorIndentGuide.activeBackground1#404040
  • editorIndentGuide.background1#171717
  • editorInfo.foreground#707b84
  • editorLineNumber.activeForeground#f5f5f5
  • editorLineNumber.foreground#525252
  • editorSuggestWidget.background#171717
  • editorSuggestWidget.border#262626
  • editorSuggestWidget.focusHighlightForeground#c2a47b
  • editorSuggestWidget.foreground#f5f5f5
  • editorSuggestWidget.highlightForeground#c2a47b
  • editorSuggestWidget.selectedBackground#262626
  • editorWarning.foreground#c2a47b
  • editorWhitespace.foreground#262626
  • editorWidget.background#171717
  • editorWidget.border#262626
  • editorWidget.foreground#f5f5f5
  • errorForeground#9f886a
  • extensionButton.prominentBackground#c2a47b
  • extensionButton.prominentForeground#0a0a0a
  • extensionButton.prominentHoverBackground#d4b68d
  • focusBorder#c2a47b
  • gitDecoration.addedResourceForeground#ad9474
  • gitDecoration.conflictingResourceForeground#9f886a
  • gitDecoration.deletedResourceForeground#9f886a
  • gitDecoration.ignoredResourceForeground#525252
  • gitDecoration.modifiedResourceForeground#c2a47b
  • gitDecoration.renamedResourceForeground#c2a47b
  • gitDecoration.untrackedResourceForeground#afa193
  • input.background#171717
  • input.border#262626
  • input.foreground#f5f5f5
  • input.placeholderForeground#525252
  • inputValidation.errorBorder#9f886a
  • inputValidation.infoBorder#707b84
  • inputValidation.warningBorder#c2a47b
  • list.activeSelectionBackground#262626
  • list.activeSelectionForeground#f5f5f5
  • list.dropBackground#262626
  • list.focusBackground#262626
  • list.focusForeground#f5f5f5
  • list.highlightForeground#c2a47b
  • list.hoverBackground#171717
  • list.inactiveSelectionBackground#171717
  • list.inactiveSelectionForeground#e5e5e5
  • menu.background#171717
  • menu.border#262626
  • menu.foreground#f5f5f5
  • menu.selectionBackground#262626
  • menu.selectionForeground#f5f5f5
  • menu.separatorBackground#262626
  • minimap.background#0a0a0a
  • minimap.errorHighlight#9f886a
  • minimap.findMatchHighlight#c2a47b88
  • minimap.selectionHighlight#c2a47b44
  • minimapGutter.addedBackground#ad9474
  • minimapGutter.deletedBackground#9f886a
  • minimapGutter.modifiedBackground#c2a47b
  • notificationCenterHeader.background#171717
  • notifications.background#171717
  • notifications.border#262626
  • panel.background#0a0a0a
  • panel.border#262626
  • panelTitle.activeBorder#c2a47b
  • panelTitle.activeForeground#f5f5f5
  • panelTitle.inactiveForeground#737373
  • peekView.border#c2a47b
  • peekViewEditor.background#0a0a0a
  • peekViewEditor.matchHighlightBackground#c2a47b33
  • peekViewResult.background#171717
  • peekViewResult.matchHighlightBackground#c2a47b33
  • peekViewTitle.background#171717
  • peekViewTitleDescription.foreground#a3a3a3
  • peekViewTitleLabel.foreground#f5f5f5
  • quickInput.background#171717
  • quickInput.foreground#f5f5f5
  • quickInputHighlight.foreground#c2a47b
  • quickInputList.focusBackground#262626
  • quickInputList.focusForeground#f5f5f5
  • scrollbarSlider.activeBackground#73737366
  • scrollbarSlider.background#40404066
  • scrollbarSlider.hoverBackground#52525266
  • selection.background#c2a47b33
  • sideBar.background#171717
  • sideBar.border#262626
  • sideBar.foreground#e5e5e5
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#262626
  • sideBarSectionHeader.foreground#a3a3a3
  • statusBar.background#171717
  • statusBar.border#262626
  • statusBar.debuggingBackground#c2a47b
  • statusBar.debuggingForeground#0a0a0a
  • statusBar.foreground#e5e5e5
  • statusBar.noFolderBackground#262626
  • statusBarItem.hoverBackground#262626
  • statusBarItem.remoteBackground#c2a47b
  • statusBarItem.remoteForeground#0a0a0a
  • tab.activeBackground#0a0a0a
  • tab.activeBorderTop#c2a47b
  • tab.activeForeground#f5f5f5
  • tab.border#262626
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#737373
  • tab.unfocusedActiveBackground#0a0a0a
  • tab.unfocusedActiveForeground#a3a3a3
  • tab.unfocusedInactiveBackground#171717
  • tab.unfocusedInactiveForeground#525252
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#707b84
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#707b84
  • terminal.ansiBrightCyan#afa193
  • terminal.ansiBrightGreen#ad9474
  • terminal.ansiBrightMagenta#7a858b
  • terminal.ansiBrightRed#9f886a
  • terminal.ansiBrightWhite#fafafa
  • terminal.ansiBrightYellow#c2a47b
  • terminal.ansiCyan#afa193
  • terminal.ansiGreen#ad9474
  • terminal.ansiMagenta#7a858b
  • terminal.ansiRed#9f886a
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#c2a47b
  • terminal.background#0a0a0a
  • terminal.border#262626
  • terminal.foreground#f5f5f5
  • terminal.selectionBackground#c2a47b33
  • terminalCursor.background#0a0a0a
  • terminalCursor.foreground#c2a47b
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#f5f5f5
  • titleBar.border#262626
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#525252
  • widget.border#262626
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation#707b84italic
comment.line keyword, comment keyword.codetag.notation#9f886aitalic bold
keyword, keyword.control, keyword.other#c2a47b
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#c2a47b
storage, storage.type, storage.modifier#c2a47b
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise#737373
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.bracket, punctuation.definition.parameters, meta.brace#737373
punctuation.definition.template-expression, punctuation.section.embedded#c2a47b
string, string.quoted, string.quoted.single, string.quoted.double#ad9474
string.template, string.quoted.template#ad9474
string.regexp#9f886a
constant.character.escape, string constant.other.placeholder#c2a47b
constant.numeric, constant.numeric.integer, constant.numeric.float#9f886a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nil, constant.language.nan#9f886a
constant, constant.other#9f886a
entity.name.function, meta.function entity.name.function, meta.definition.function entity.name.function#afa193
meta.function-call entity.name.function, meta.function-call support.function, variable.function, support.function#afa193
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.other.inherited-class, support.type, support.class#c2a47b
meta.type.annotation, meta.return.type, meta.type.parameters, entity.name.type.ts, entity.name.type.tsx#c2a47b
entity.name.namespace, entity.name.module, support.other.namespace#c2a47b
variable, variable.other, variable.other.readwrite#f5f5f5
variable.parameter, meta.function.parameters variable#d4d4d4
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e5e5e5
variable.language.this, variable.language.self, variable.language.super#c2a47b
entity.name.function.decorator, punctuation.decorator, meta.decorator, storage.type.annotation#c2a47b
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.tsx, punctuation.definition.tag.jsx#525252
entity.name.tag, meta.tag entity.name.tag#9f886a
support.class.component, support.class.component.tsx, support.class.component.jsx#c2a47b
entity.other.attribute-name, meta.tag entity.other.attribute-name#c2a47b
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#afa193
entity.other.attribute-name.event#afa193
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#737373
meta.tag.sgml.html, meta.tag.sgml keyword#737373
entity.name.tag.css#9f886a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#afa193
support.type.property-name.css, support.type.property-name, meta.property-name#c2a47b
support.constant.property-value, meta.property-value, support.constant.font-name, support.constant.media-type#ad9474
keyword.other.unit.css, keyword.other.unit#9f886a
keyword.control.at-rule, keyword.control.at-rule.media#c2a47b
variable.css, variable.argument.css, support.variable.css#afa193
support.type.property-name.json, meta.structure.dictionary.json string.quoted#c2a47b
markup.heading, markup.heading entity.name#c2a47bbold
markup.bold#f5f5f5bold
markup.italic#f5f5f5italic
markup.underline.link, string.other.link#ad9474
markup.inline.raw, markup.raw.inline#afa193
markup.fenced_code.block, markup.raw.block#afa193
markup.quote#737373italic
markup.list, punctuation.definition.list.begin.markdown#9f886a
meta.separator, meta.separator.markdown#404040
entity.name.tag.yaml#c2a47b
entity.name.type.anchor.yaml, variable.other.alias.yaml#afa193
comment.line.shebang#707b84italic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#f5f5f5
support.function.builtin.shell#c2a47b
meta.subshell.shell, punctuation.definition.subshell.shell#737373
punctuation.definition.string.end.heredoc.shell, keyword.operator.heredoc.shell#737373
string.unquoted.argument.shell, constant.other.option.shell#d4d4d4
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#c2a47bitalic
entity.name.function.magic.python, support.function.magic.python#afa193italic
support.type.python, support.type.exception.python#c2a47b
support.function.builtin.python#afa193
entity.name.function.decorator.python, meta.function.decorator.python support.type.python#c2a47b
meta.fstring.python, punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#ad9474
storage.type.format.python, meta.format.brace.python#c2a47b
variable.other.enummember.ts, variable.other.enummember.tsx#9f886a
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx, keyword.operator.expression.keyof.ts, keyword.operator.expression.keyof.tsx, keyword.operator.expression.infer.ts, keyword.operator.expression.satisfies.ts, keyword.operator.expression.satisfies.tsx#c2a47b
storage.modifier.ts, storage.modifier.tsx, keyword.other.typescript#c2a47b
keyword.declaration.namespace.ts, keyword.declaration.module.ts#c2a47b
support.function.builtin.go#afa193
constant.other.placeholder.go#c2a47b
entity.name.package.go, string.quoted.double.go entity.name.import.go#c2a47b
meta.struct-tag.go, string.quoted.raw.go meta.struct-tag#707b84
meta.type-assertion.go entity.name.type.go#c2a47b
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#afa193italic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust entity.name.function#c2a47b
punctuation.definition.macro.rust#c2a47b
meta.attribute.rust, meta.attribute.rust entity.name.function.attribute, meta.attribute.rust meta.path.rust, punctuation.definition.attribute.rust#707b84
entity.name.type.numeric.rust, entity.name.type.primitive.rust, support.type.primitive.rust#c2a47b
entity.name.type.self.rust#c2a47b
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#9f886a
constant.other.symbol.elixir, constant.other.symbol.hashkey.elixir, constant.other.atom.elixir#9f886a
variable.other.constant.elixir, punctuation.definition.variable.elixir#afa193
punctuation.definition.sigil.elixir, string.other.sigil.elixir, keyword.operator.sigil.elixir#9f886a
variable.language.elixir#c2a47bitalic
variable.other.atom.erlang, constant.other.atom.erlang#9f886a
support.function.builtin.zig, variable.language.builtin.zig, keyword.other.directive.zig#c2a47b
support.type.primitive.zig, entity.name.type.zig#c2a47b
keyword.control.directive, keyword.control.import.include, meta.preprocessor, meta.preprocessor.include, keyword.other.directive#c2a47b
entity.name.function.preprocessor, entity.name.other.preprocessor.macro#afa193
string.quoted.other.lt-gt.include, meta.preprocessor.include string#ad9474
entity.other.annotation.java, storage.type.annotation.java, punctuation.definition.annotation.java#c2a47b
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java#c2a47b
entity.name.section.toml, punctuation.definition.table.toml, support.type.property-name.table.toml#c2a47b
support.type.property-name.toml, variable.other.key.toml, keyword.key.toml#afa193
keyword.other.special-method.dockerfile, entity.name.tag.dockerfile, keyword.other.directive.dockerfile#c2a47b
variable.other.dockerfile#f5f5f5
entity.name.type.prisma#c2a47b
entity.name.function.attribute.prisma, support.function.attribute.prisma#afa193
support.type.primitive.prisma, support.type.relation.prisma, entity.name.type.primitive.prisma#c2a47b
support.type.graphql, entity.name.type.graphql#c2a47b
variable.graphql, entity.name.field.graphql#f5f5f5
entity.name.function.directive.graphql#afa193
entity.name.fragment.graphql#afa193
invalid, invalid.illegal#9f886aunderline
invalid.deprecated#737373strikethrough