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.activeBorder#006600
  • activityBar.background#030917
  • activityBar.foreground#abadb2
  • activityBarBadge.background#006600
  • activityBarBadge.foreground#f5fff5
  • badge.background#006600
  • button.background#464b55
  • button.foreground#cdced1
  • button.secondaryBackground#353a45
  • button.secondaryForeground#bcbdc1
  • debugToolBar.background#464b55
  • diffEditor.insertedTextBackground#00660033
  • dropdown.background#141926
  • dropdown.border#030917
  • editor.background#030917
  • editor.findMatchBackground#252a36
  • editor.findMatchBorder#53ac53
  • editor.findMatchHighlightBackground#353a4577
  • editor.foldBackground#0066001f
  • editor.foreground#c6c7ca
  • editor.inlineValuesBackground#c3ab8555
  • editor.inlineValuesForeground#cdced1
  • editor.lineHighlightBackground#353a4577
  • editor.selectionBackground#353a4599
  • editor.selectionHighlightBackground#353a4577
  • editor.selectionHighlightBorder#cdced1
  • editor.wordHighlightBackground#353a4577
  • editor.wordHighlightBorder#cdced1
  • editor.wordHighlightStrongBackground#bcbdc122
  • editor.wordHighlightStrongBorder#dddee0
  • editorBracketMatch.background#575b64
  • editorBracketMatch.border#575b64
  • editorCursor.background#141926
  • editorCursor.foreground#eeeff0
  • editorError.background#ff757533
  • editorError.foreground#ff7575
  • editorGroup.border#030917
  • editorGroupHeader.tabsBackground#030917
  • editorHoverWidget.background#252a36
  • editorHoverWidget.border#030917
  • editorIndentGuide.activeBackground#53ac53
  • editorIndentGuide.background#353a45
  • editorInfo.background#02cad433
  • editorInfo.foreground#02cad4
  • editorLineNumber.activeForeground#abadb2
  • editorLineNumber.foreground#575b64
  • editorMarkerNavigation.background#252a36
  • editorOverviewRuler.border#030917
  • editorRuler.foreground#bcbdc126
  • editorSuggestWidget.background#141926
  • editorSuggestWidget.border#030917
  • editorSuggestWidget.foreground#cdced1
  • editorSuggestWidget.highlightForeground#eeeff0
  • editorSuggestWidget.selectedBackground#575b64
  • editorWarning.background#d9d32633
  • editorWarning.foreground#d9d326
  • editorWhitespace.foreground#686b74
  • editorWidget.background#252a36
  • editorWidget.border#030917
  • editorWidget.resizeBorder#006600
  • focusBorder#030917
  • input.background#141926
  • list.activeSelectionBackground#353a45
  • list.activeSelectionForeground#cdced1
  • list.focusForeground#dddee0
  • list.highlightForeground#eeeff0
  • list.hoverBackground#353a45
  • list.inactiveSelectionBackground#252a36
  • list.inactiveSelectionForeground#dddee0
  • list.warningForeground#d9d326
  • menu.background#141926
  • menu.foreground#abadb2
  • minimap.selectionHighlight#00660066
  • panel.border#030917
  • peekView.border#006600
  • peekViewEditor.background#141926
  • peekViewEditor.matchHighlightBackground#353a45
  • peekViewResult.background#141926
  • peekViewResult.selectionBackground#353a45
  • peekViewTitle.background#141926
  • peekViewTitleLabel.foreground#abadb2
  • progressBar.background#d9d326
  • quickInputList.focusBackground#575b64
  • sash.hoverBorder#006600
  • scrollbar.shadow#14192600
  • scrollbarSlider.activeBackground#006600ff
  • scrollbarSlider.background#464b5577
  • scrollbarSlider.hoverBackground#575b6488
  • sideBar.background#030917
  • sideBarSectionHeader.background#141926
  • statusBar.background#006600
  • statusBar.debuggingBackground#9b2c2c
  • statusBar.debuggingBorder#770000
  • statusBar.debuggingForeground#fdf7f7
  • statusBar.foreground#f5fff5
  • statusBar.noFolderBackground#553c9a
  • statusBar.noFolderForeground#ede9f6
  • statusBarItem.hoverBackground#14192644
  • statusBarItem.remoteBackground#660066
  • statusBarItem.remoteForeground#fff5ff
  • tab.activeBackground#252a36
  • tab.activeBorder#345fa6
  • tab.activeForeground#dddee0
  • tab.activeModifiedBorder#553c9a
  • tab.border#030917
  • tab.hoverBackground#353a45
  • tab.hoverBorder#53ac53
  • tab.inactiveBackground#030917
  • tab.inactiveModifiedBorder#9b2c2c
  • tab.unfocusedHoverBackground#282d39
  • terminal.ansiBlack#353a45
  • terminal.ansiBlue#859dc3
  • terminal.ansiBrightBlack#888b92
  • terminal.ansiBrightBlue#80bfff
  • terminal.ansiBrightCyan#0fa5d7
  • terminal.ansiBrightGreen#89b971
  • terminal.ansiBrightMagenta#f28ca6
  • terminal.ansiBrightRed#ef7b6d
  • terminal.ansiBrightWhite#c5c6c9
  • terminal.ansiBrightYellow#f5d780
  • terminal.ansiCyan#0fa5d7
  • terminal.ansiGreen#85c3ab
  • terminal.ansiMagenta#c385bc
  • terminal.ansiRed#ff7575
  • terminal.ansiWhite#acaeb3
  • terminal.ansiYellow#d9d326
  • terminal.foreground#acaeb3
  • textLink.foreground#89b971
  • titleBar.activeBackground#030917
  • titleBar.activeForeground#abadb2
  • titleBar.inactiveBackground#030917
  • titleBar.inactiveForeground#9a9da2
  • widget.shadow#14192600

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.graphql, variable.object.property, variable.other.assignment, variable.other.block.crystal, variable.other.block, variable.other.bracket.shell, variable.other.declaration, variable.other.normal.shell, variable.other.object.js.jsx, variable.other.object.tsx, variable.other.object, variable.other.php, variable.other.positional.shell, variable.other.readwrite.instance.crystal, variable.other.readwrite, variable.other.ruby, variable.other, variable.scss#c6c7ca—
variable.language.self, variable.language.special.self, variable.language.super, variable.language.this, variable.other.alias.yaml, variable.other.class.php, variable.other.constant, variable.other.global.safer.php, variable.other.readwrite.class.ruby, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special.self, variable.other.readwrite.instance.crystal, variable.other.readwrite.module#ff7979—
entity.alias.import#ff7979—
support.variable, support.constant.color.w3c-standard-color-name, support.type, support.class, support.other.namespace#ff99b3—
meta.method.declaration.js storage.type.js, support.function#70dbc1—
meta.generic-where-clause.swift, meta.arguments.attribute.swift, storage.type.annotation, meta.attribute.rust#c3ab85—
constant, support.constant, keyword.other.unit#bfa6f2—
meta.object-literal.key, support.type.property-name.json, variable.other.property.js.jsx, variable.other.property.tsx, variable.other.object.property, variable.other.property, support.type.property-name#e4aa81—
meta.function-call.arguments, variable.parameter#e5e6e7—
entity.name.function#85c3ab—
entity.name.function-call, entity.name.function.call, meta.function-call, meta.method-call entity.name.function, meta.function-call entity.name.function, meta.function.call entity.name.function#e0cd94—
keyword.control.module, keyword.control, keyword.operator.expression.of, keyword.operator.new, keyword.other.special-method, keyword.type.go, keyword, keyword storage.type, storage.modifier, storage.type.class, storage.type.function#c385bc—
entity.name.package, entity.name.type, entity.name.class, entity.name.namespace, entity.name.module, entity.name.scope-resolution, storage.modifier.package.java, storage.type.class.po, meta.inheritance-clause, entity.other.inherited-class#859dc3—
keyword.operator.comparison, keyword.operator.logical#93ecb8—
storage.type, keyword.type#0bc2cb—
keyword.operator#f2f28c—
source.elixir.embedded.source, storage.modifier.import.java, string.quoted.double, string#9ebc8f—
punctuation.definition.template-expression, punctuation.section.embedded#ff7979—
meta.brace, punctuation#abadb2—
comment.documentation, comment.block.documentation, string.quoted.docstring.multi.python, comment.block.documentation punctuation.definition.comment#abadb2—
comment, punctuation.definition.comment, punctuation.whitespace.comment.leading.graphql#464b55italic
comment.wildcard, meta.jsx.children#c6c7ca—
meta.structure.dictionary.value support.type.property-name.json#c385bc—
meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#0bc2cb—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#e0cd94—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#ff99b3—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#70dbc1—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#859dc3—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#ff7979—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#c3ab85—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#d9d326—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json#e4aa81—
meta.tag.metadata, markup.underline.link#c385bc—
meta.tag.metadata.link, string.other.link.title.markdown#85c3ab—
markup.italic#93ecb8—
punctuation.definition.tag#797c83—
meta.tag.inline, entity.name.tag.js.jsx, entity.name.tag.tsx#70dbc1—
meta.tag.object#ff99b3—
meta.tag.metadata.style, source.vue entity.name.tag.style.html, string.other.link.description.markdown#859dc3—
meta.tag.metadata.script, source.vue entity.name.tag.script.html#d9d326—
meta.tag.custom#bfa6f2—
meta.tag.structure, meta.tag, entity.name.tag.yaml, keyword.key.toml, markup.fenced_code.block, markup.inline.raw.string, fenced_code.block.language, markup.raw.block#e4aa81—
entity.other.attribute-name, meta.selector.css, source.css.scss entity.name.tag.css#e0cd94—
heading#e0cd94—
invalid.illegal.tag-handle.yaml, text.html.markdown entity.name.tag.html, text.html.markdown punctuation.definition.tag, meta.tag.other.unrecognized, source.vue entity.name.tag.template.html#ff7979—
markup.bold, punctuation.definition.bold—bold
markup.italic, punctuation.definition.italic, markup.quote.markdown—italic