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#fafafa
  • activityBar.border#e5e5e5
  • activityBar.foreground#262626
  • activityBar.inactiveForeground#a3a3a3
  • activityBarBadge.background#7c5c35
  • activityBarBadge.foreground#fafafa
  • badge.background#7c5c35
  • badge.foreground#fafafa
  • breadcrumb.activeSelectionForeground#7c5c35
  • breadcrumb.focusForeground#171717
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#f5f5f5
  • button.background#7c5c35
  • button.foreground#fafafa
  • button.hoverBackground#6b4d2e
  • button.secondaryBackground#e5e5e5
  • button.secondaryForeground#171717
  • checkbox.background#f5f5f5
  • checkbox.border#d4d4d4
  • checkbox.foreground#171717
  • descriptionForeground#525252
  • diffEditor.insertedLineBackground#6b4d2e11
  • diffEditor.insertedTextBackground#6b4d2e22
  • diffEditor.removedLineBackground#5c3e1e11
  • diffEditor.removedTextBackground#5c3e1e22
  • dropdown.background#f5f5f5
  • dropdown.border#e5e5e5
  • dropdown.foreground#171717
  • editor.background#fafafa
  • editor.findMatchBackground#7c5c3544
  • editor.findMatchBorder#7c5c35
  • editor.findMatchHighlightBackground#7c5c3522
  • editor.foreground#171717
  • editor.inactiveSelectionBackground#7c5c351a
  • editor.lineHighlightBackground#f5f5f5
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#7c5c3533
  • editor.selectionHighlightBackground#7c5c3522
  • editor.wordHighlightBackground#7c5c351a
  • editor.wordHighlightStrongBackground#7c5c3533
  • editorBracketMatch.background#7c5c3522
  • editorBracketMatch.border#7c5c3588
  • editorCursor.background#fafafa
  • editorCursor.foreground#7c5c35
  • editorError.foreground#5c3e1e
  • editorGroupHeader.noTabsBackground#fafafa
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorGutter.addedBackground#6b4d2e88
  • editorGutter.background#fafafa
  • editorGutter.deletedBackground#5c3e1e88
  • editorGutter.modifiedBackground#7c5c3588
  • editorHint.foreground#6b5e52
  • editorHoverWidget.background#f5f5f5
  • editorHoverWidget.border#e5e5e5
  • editorIndentGuide.activeBackground1#d4d4d4
  • editorIndentGuide.background1#f5f5f5
  • editorInfo.foreground#6e7d87
  • editorLineNumber.activeForeground#171717
  • editorLineNumber.foreground#a3a3a3
  • editorSuggestWidget.background#f5f5f5
  • editorSuggestWidget.border#e5e5e5
  • editorSuggestWidget.focusHighlightForeground#7c5c35
  • editorSuggestWidget.foreground#171717
  • editorSuggestWidget.highlightForeground#7c5c35
  • editorSuggestWidget.selectedBackground#e5e5e5
  • editorWarning.foreground#7c5c35
  • editorWhitespace.foreground#e5e5e5
  • editorWidget.background#f5f5f5
  • editorWidget.border#e5e5e5
  • editorWidget.foreground#171717
  • errorForeground#5c3e1e
  • extensionButton.prominentBackground#7c5c35
  • extensionButton.prominentForeground#fafafa
  • extensionButton.prominentHoverBackground#6b4d2e
  • focusBorder#7c5c35
  • gitDecoration.addedResourceForeground#6b4d2e
  • gitDecoration.conflictingResourceForeground#5c3e1e
  • gitDecoration.deletedResourceForeground#5c3e1e
  • gitDecoration.ignoredResourceForeground#a3a3a3
  • gitDecoration.modifiedResourceForeground#7c5c35
  • gitDecoration.renamedResourceForeground#7c5c35
  • gitDecoration.untrackedResourceForeground#6b5e52
  • input.background#f5f5f5
  • input.border#e5e5e5
  • input.foreground#171717
  • input.placeholderForeground#a3a3a3
  • inputValidation.errorBorder#5c3e1e
  • inputValidation.infoBorder#6e7d87
  • inputValidation.warningBorder#7c5c35
  • list.activeSelectionBackground#e5e5e5
  • list.activeSelectionForeground#171717
  • list.dropBackground#e5e5e5
  • list.focusBackground#e5e5e5
  • list.focusForeground#171717
  • list.highlightForeground#7c5c35
  • list.hoverBackground#f5f5f5
  • list.inactiveSelectionBackground#f5f5f5
  • list.inactiveSelectionForeground#262626
  • menu.background#f5f5f5
  • menu.border#e5e5e5
  • menu.foreground#171717
  • menu.selectionBackground#e5e5e5
  • menu.selectionForeground#171717
  • menu.separatorBackground#e5e5e5
  • minimap.background#fafafa
  • minimap.errorHighlight#5c3e1e
  • minimap.findMatchHighlight#7c5c3588
  • minimap.selectionHighlight#7c5c3544
  • minimapGutter.addedBackground#6b4d2e
  • minimapGutter.deletedBackground#5c3e1e
  • minimapGutter.modifiedBackground#7c5c35
  • notificationCenterHeader.background#f5f5f5
  • notifications.background#f5f5f5
  • notifications.border#e5e5e5
  • panel.background#fafafa
  • panel.border#e5e5e5
  • panelTitle.activeBorder#7c5c35
  • panelTitle.activeForeground#171717
  • panelTitle.inactiveForeground#737373
  • peekView.border#7c5c35
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#7c5c3533
  • peekViewResult.background#f5f5f5
  • peekViewResult.matchHighlightBackground#7c5c3533
  • peekViewTitle.background#f5f5f5
  • peekViewTitleDescription.foreground#525252
  • peekViewTitleLabel.foreground#171717
  • quickInput.background#f5f5f5
  • quickInput.foreground#171717
  • quickInputHighlight.foreground#7c5c35
  • quickInputList.focusBackground#e5e5e5
  • quickInputList.focusForeground#171717
  • scrollbarSlider.activeBackground#73737366
  • scrollbarSlider.background#d4d4d466
  • scrollbarSlider.hoverBackground#a3a3a366
  • selection.background#7c5c3533
  • sideBar.background#f5f5f5
  • sideBar.border#e5e5e5
  • sideBar.foreground#262626
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#525252
  • statusBar.background#f5f5f5
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#7c5c35
  • statusBar.debuggingForeground#fafafa
  • statusBar.foreground#262626
  • statusBar.noFolderBackground#e5e5e5
  • statusBarItem.hoverBackground#e5e5e5
  • statusBarItem.remoteBackground#7c5c35
  • statusBarItem.remoteForeground#fafafa
  • tab.activeBackground#fafafa
  • tab.activeBorderTop#7c5c35
  • tab.activeForeground#171717
  • tab.border#e5e5e5
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#737373
  • tab.unfocusedActiveBackground#fafafa
  • tab.unfocusedActiveForeground#525252
  • tab.unfocusedInactiveBackground#f5f5f5
  • tab.unfocusedInactiveForeground#a3a3a3
  • terminal.ansiBlack#fafafa
  • terminal.ansiBlue#6e7d87
  • terminal.ansiBrightBlack#d4d4d4
  • terminal.ansiBrightBlue#6e7d87
  • terminal.ansiBrightCyan#6b5e52
  • terminal.ansiBrightGreen#6b4d2e
  • terminal.ansiBrightMagenta#7a8f96
  • terminal.ansiBrightRed#5c3e1e
  • terminal.ansiBrightWhite#0a0a0a
  • terminal.ansiBrightYellow#7c5c35
  • terminal.ansiCyan#6b5e52
  • terminal.ansiGreen#6b4d2e
  • terminal.ansiMagenta#7a8f96
  • terminal.ansiRed#5c3e1e
  • terminal.ansiWhite#171717
  • terminal.ansiYellow#7c5c35
  • terminal.background#fafafa
  • terminal.border#e5e5e5
  • terminal.foreground#171717
  • terminal.selectionBackground#7c5c3533
  • terminalCursor.background#fafafa
  • terminalCursor.foreground#7c5c35
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#171717
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#fafafa
  • titleBar.inactiveForeground#a3a3a3
  • widget.border#e5e5e5
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation#6e7d87italic
comment.line keyword, comment keyword.codetag.notation#5c3e1eitalic bold
keyword, keyword.control, keyword.other#7c5c35
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#7c5c35
storage, storage.type, storage.modifier#7c5c35
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#7c5c35
string, string.quoted, string.quoted.single, string.quoted.double#6b4d2e
string.template, string.quoted.template#6b4d2e
string.regexp#5c3e1e
constant.character.escape, string constant.other.placeholder#7c5c35
constant.numeric, constant.numeric.integer, constant.numeric.float#5c3e1e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nil, constant.language.nan#5c3e1e
constant, constant.other#5c3e1e
entity.name.function, meta.function entity.name.function, meta.definition.function entity.name.function#6b5e52
meta.function-call entity.name.function, meta.function-call support.function, variable.function, support.function#6b5e52
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.other.inherited-class, support.type, support.class#7c5c35
meta.type.annotation, meta.return.type, meta.type.parameters, entity.name.type.ts, entity.name.type.tsx#7c5c35
entity.name.namespace, entity.name.module, support.other.namespace#7c5c35
variable, variable.other, variable.other.readwrite#171717
variable.parameter, meta.function.parameters variable#404040
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#262626
variable.language.this, variable.language.self, variable.language.super#7c5c35
entity.name.function.decorator, punctuation.decorator, meta.decorator, storage.type.annotation#7c5c35
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.tsx, punctuation.definition.tag.jsx#a3a3a3
entity.name.tag, meta.tag entity.name.tag#5c3e1e
support.class.component, support.class.component.tsx, support.class.component.jsx#7c5c35
entity.other.attribute-name, meta.tag entity.other.attribute-name#7c5c35
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#6b5e52
entity.other.attribute-name.event#6b5e52
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#5c3e1e
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#6b5e52
support.type.property-name.css, support.type.property-name, meta.property-name#7c5c35
support.constant.property-value, meta.property-value, support.constant.font-name, support.constant.media-type#6b4d2e
keyword.other.unit.css, keyword.other.unit#5c3e1e
keyword.control.at-rule, keyword.control.at-rule.media#7c5c35
variable.css, variable.argument.css, support.variable.css#6b5e52
support.type.property-name.json, meta.structure.dictionary.json string.quoted#7c5c35
markup.heading, markup.heading entity.name#7c5c35bold
markup.bold#171717bold
markup.italic#171717italic
markup.underline.link, string.other.link#6b4d2e
markup.inline.raw, markup.raw.inline#6b5e52
markup.fenced_code.block, markup.raw.block#6b5e52
markup.quote#737373italic
markup.list, punctuation.definition.list.begin.markdown#5c3e1e
meta.separator, meta.separator.markdown#d4d4d4
entity.name.tag.yaml#7c5c35
entity.name.type.anchor.yaml, variable.other.alias.yaml#6b5e52
comment.line.shebang#6e7d87italic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#171717
support.function.builtin.shell#7c5c35
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#404040
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#7c5c35italic
entity.name.function.magic.python, support.function.magic.python#6b5e52italic
support.type.python, support.type.exception.python#7c5c35
support.function.builtin.python#6b5e52
entity.name.function.decorator.python, meta.function.decorator.python support.type.python#7c5c35
meta.fstring.python, punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#6b4d2e
storage.type.format.python, meta.format.brace.python#7c5c35
variable.other.enummember.ts, variable.other.enummember.tsx#5c3e1e
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#7c5c35
storage.modifier.ts, storage.modifier.tsx, keyword.other.typescript#7c5c35
keyword.declaration.namespace.ts, keyword.declaration.module.ts#7c5c35
support.function.builtin.go#6b5e52
constant.other.placeholder.go#7c5c35
entity.name.package.go, string.quoted.double.go entity.name.import.go#7c5c35
meta.struct-tag.go, string.quoted.raw.go meta.struct-tag#6e7d87
meta.type-assertion.go entity.name.type.go#7c5c35
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#6b5e52italic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust entity.name.function#7c5c35
punctuation.definition.macro.rust#7c5c35
meta.attribute.rust, meta.attribute.rust entity.name.function.attribute, meta.attribute.rust meta.path.rust, punctuation.definition.attribute.rust#6e7d87
entity.name.type.numeric.rust, entity.name.type.primitive.rust, support.type.primitive.rust#7c5c35
entity.name.type.self.rust#7c5c35
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#5c3e1e
constant.other.symbol.elixir, constant.other.symbol.hashkey.elixir, constant.other.atom.elixir#5c3e1e
variable.other.constant.elixir, punctuation.definition.variable.elixir#6b5e52
punctuation.definition.sigil.elixir, string.other.sigil.elixir, keyword.operator.sigil.elixir#5c3e1e
variable.language.elixir#7c5c35italic
variable.other.atom.erlang, constant.other.atom.erlang#5c3e1e
support.function.builtin.zig, variable.language.builtin.zig, keyword.other.directive.zig#7c5c35
support.type.primitive.zig, entity.name.type.zig#7c5c35
keyword.control.directive, keyword.control.import.include, meta.preprocessor, meta.preprocessor.include, keyword.other.directive#7c5c35
entity.name.function.preprocessor, entity.name.other.preprocessor.macro#6b5e52
string.quoted.other.lt-gt.include, meta.preprocessor.include string#6b4d2e
entity.other.annotation.java, storage.type.annotation.java, punctuation.definition.annotation.java#7c5c35
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java#7c5c35
entity.name.section.toml, punctuation.definition.table.toml, support.type.property-name.table.toml#7c5c35
support.type.property-name.toml, variable.other.key.toml, keyword.key.toml#6b5e52
keyword.other.special-method.dockerfile, entity.name.tag.dockerfile, keyword.other.directive.dockerfile#7c5c35
variable.other.dockerfile#171717
entity.name.type.prisma#7c5c35
entity.name.function.attribute.prisma, support.function.attribute.prisma#6b5e52
support.type.primitive.prisma, support.type.relation.prisma, entity.name.type.primitive.prisma#7c5c35
support.type.graphql, entity.name.type.graphql#7c5c35
variable.graphql, entity.name.field.graphql#171717
entity.name.function.directive.graphql#6b5e52
entity.name.fragment.graphql#6b5e52
invalid, invalid.illegal#5c3e1eunderline
invalid.deprecated#737373strikethrough