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.boldbold
markup.italic, punctuation.definition.italic, markup.quote.markdownitalic