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#c574dd
  • activityBar.background#1d1f28
  • activityBar.foreground#c574dd
  • activityBar.inactiveForeground#EDE7F666
  • activityBarBadge.background#c574dd
  • badge.background#c574dd
  • breadcrumbPicker.background#252731
  • button.background#c574dd
  • button.secondaryBackground#DD2C00
  • checkbox.background#393b45
  • commandCenter.border#c574dd
  • diffEditor.diagonalFill#5A5A5E80
  • diffEditor.insertedLineBackground#388E3C33
  • diffEditor.insertedTextBackground#388E3C66
  • diffEditor.removedLineBackground#D32F2F33
  • diffEditor.removedTextBackground#D32F2F66
  • diffEditorGutter.insertedLineBackground#388E3C1a
  • diffEditorGutter.removedLineBackground#D32F2F1a
  • dropdown.background#393b45
  • dropdown.listBackground#393b45
  • editor.background#1d1f28
  • editor.findMatchBackground#F57C0080
  • editor.findMatchBorder#0000
  • editor.findMatchHighlightBackground#F57C004d
  • editor.findMatchHighlightBorder#0000
  • editor.findRangeHighlightBackground#F57C001a
  • editor.findRangeHighlightBorder#0000
  • editor.foldBackground#3F51B54d
  • editor.foreground#CFD8DC
  • editor.inactiveSelectionBackground#79e6f333
  • editor.lineHighlightBackground#5A5A5E4d
  • editor.lineHighlightBorder#0000
  • editor.selectionBackground#79e6f350
  • editor.selectionHighlightBackground#0097A780
  • editor.selectionHighlightBorder#0000
  • editor.snippetFinalTabstopHighlightBorder#FF3D00
  • editor.snippetTabstopHighlightBackground#c574dd80
  • editor.wordHighlightBackground#0097A733
  • editor.wordHighlightBorder#0000
  • editor.wordHighlightStrongBackground#0097A780
  • editor.wordHighlightStrongBorder#0000
  • editorBracketHighlight.foreground1#4DD0E1
  • editorBracketHighlight.foreground2#FF8A65
  • editorBracketHighlight.foreground3#BA68C8
  • editorBracketHighlight.foreground4#DCE775
  • editorBracketHighlight.foreground5#64B5F6
  • editorBracketHighlight.foreground6#FFD54F
  • editorBracketHighlight.unexpectedBracket.foreground#F06292
  • editorBracketMatch.background#90A4AE33
  • editorBracketMatch.border#90A4AEb3
  • editorBracketPairGuide.activeBackground1#4DD0E1
  • editorBracketPairGuide.activeBackground2#FF8A65
  • editorBracketPairGuide.activeBackground3#BA68C8
  • editorBracketPairGuide.activeBackground4#DCE775
  • editorBracketPairGuide.activeBackground5#64B5F6
  • editorBracketPairGuide.activeBackground6#FFD54F
  • editorBracketPairGuide.background1#4DD0E199
  • editorBracketPairGuide.background2#FF8A6599
  • editorBracketPairGuide.background3#BA68C899
  • editorBracketPairGuide.background4#DCE77599
  • editorBracketPairGuide.background5#64B5F699
  • editorBracketPairGuide.background6#FFD54F99
  • editorError.foreground#C2185B
  • editorGroupHeader.tabsBackground#1d1f28
  • editorGutter.addedBackground#388E3C
  • editorGutter.deletedBackground#D32F2F
  • editorGutter.modifiedBackground#1976D2
  • editorHint.foreground#FBC02D
  • editorIndentGuide.activeBackground#78909C
  • editorIndentGuide.background#37474F
  • editorInfo.foreground#79e6f3
  • editorLightBulb.foreground#FFEB3B
  • editorLightBulbAutoFix.foreground#2196F3
  • editorLineNumber.activeForeground#8897f4
  • editorLineNumber.foreground#5A5A5E
  • editorMarkerNavigationError.background#C2185B
  • editorMarkerNavigationInfo.background#79e6f3
  • editorMarkerNavigationWarning.background#F57C00
  • editorOverviewRuler.addedForeground#388E3C
  • editorOverviewRuler.currentContentForeground#4CAF50
  • editorOverviewRuler.deletedForeground#D32F2F
  • editorOverviewRuler.errorForeground#C2185B
  • editorOverviewRuler.incomingContentForeground#2196F3
  • editorOverviewRuler.infoForeground#79e6f3
  • editorOverviewRuler.modifiedForeground#1976D2
  • editorOverviewRuler.warningForeground#F57C00
  • editorRuler.foreground#5A5A5E40
  • editorUnicodeHighlight.background#FBC02D1a
  • editorUnicodeHighlight.border#FBC02D66
  • editorWarning.foreground#F57C00
  • editorWidget.background#1d1f28
  • editorWidget.border#c574dd
  • errorForeground#C2185B
  • extensionBadge.remoteBackground#7C4DFF
  • extensionButton.separator#c574dd
  • extensionIcon.preReleaseForeground#FF9800
  • extensionIcon.sponsorForeground#FFEB3B
  • extensionIcon.starForeground#FFC107
  • extensionIcon.verifiedForeground#2196F3
  • focusBorder#c574dd
  • foreground#CFD8DC
  • gitDecoration.addedResourceForeground#4CAF50cc
  • gitDecoration.conflictingResourceForeground#FFB74D
  • gitDecoration.deletedResourceForeground#F44336cc
  • gitDecoration.modifiedResourceForeground#2196F3cc
  • gitDecoration.renamedResourceForeground#3F51B5cc
  • gitDecoration.stageDeletedResourceForeground#E57373
  • gitDecoration.stageModifiedResourceForeground#64B5F6
  • gitDecoration.submoduleResourceForeground#4DD0E1
  • gitDecoration.untrackedResourceForeground#4CAF50cc
  • icon.foreground#7C4DFF
  • input.background#393b45
  • inputOption.activeBackground#c574dd
  • inputValidation.errorBackground#880E4F
  • inputValidation.errorBorder#880E4F
  • inputValidation.infoBackground#01579B
  • inputValidation.infoBorder#01579B
  • inputValidation.warningBackground#E65100
  • inputValidation.warningBorder#E65100
  • keybindingLabel.background#c574dd
  • list.activeSelectionBackground#CF8CE390
  • list.dropBackground#252731
  • list.errorForeground#E91E63
  • list.hoverBackground#2f313b
  • list.inactiveSelectionBackground#2f313b
  • list.warningForeground#FF9800
  • menu.background#252731
  • merge.currentContentBackground#388E3C33
  • merge.currentHeaderBackground#388E3C66
  • merge.incomingContentBackground#1976D233
  • merge.incomingHeaderBackground#1976D266
  • mergeEditor.change.background#AFB42B1a
  • mergeEditor.change.word.background#AFB42B4d
  • mergeEditor.conflict.handled.minimapOverViewRuler#2196F3
  • mergeEditor.conflict.handledFocused.border#2196F3
  • mergeEditor.conflict.handledUnfocused.border#1976D2
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#FF9800
  • mergeEditor.conflict.unhandledFocused.border#FF9800
  • mergeEditor.conflict.unhandledUnfocused.border#F57C00
  • minimapSlider.activeBackground#FAFAFA4d
  • minimapSlider.background#FAFAFA33
  • minimapSlider.hoverBackground#FAFAFA4d
  • notificationCenterHeader.background#252731
  • notifications.background#252731
  • notifications.border#c574dd
  • panelInput.border#c574dd
  • panelSection.border#c574dd
  • panelSectionHeader.border#c574dd
  • panelTitle.activeBorder#c574dd
  • peekView.border#c574dd
  • peekViewEditor.background#c574dd0d
  • peekViewEditor.matchHighlightBackground#FF980033
  • peekViewResult.background#c574dd0d
  • peekViewTitle.background#1d1f28
  • problemsErrorIcon.foreground#C2185B
  • problemsInfoIcon.foreground#79e6f3
  • problemsWarningIcon.foreground#F57C00
  • progressBar.background#c574dd
  • settings.focusedRowBorder#c574dd
  • settings.modifiedItemIndicator#FFA000
  • sideBar.background#151720
  • statusBar.background#1d1f28
  • statusBar.debuggingBackground#BF360C
  • statusBar.noFolderBackground#1d1f28
  • statusBarItem.errorBackground#C2185B
  • statusBarItem.prominentBackground#c574dd
  • statusBarItem.remoteBackground#c574dd
  • statusBarItem.warningBackground#F57C00
  • tab.activeBackground#1c1e27
  • tab.activeBorder#c574dd
  • tab.activeForeground#FAFAFA
  • tab.activeModifiedBorder#FFC107
  • tab.inactiveBackground#1d1f28
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlack#263238
  • terminal.ansiBlue#0D47A1
  • terminal.ansiBrightBlack#5A5A5E
  • terminal.ansiBrightBlue#2196F3
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#4CAF50
  • terminal.ansiBrightMagenta#E91E63
  • terminal.ansiBrightRed#F44336
  • terminal.ansiBrightWhite#90A4AE
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#C2185B
  • terminal.ansiRed#D32F2F
  • terminal.ansiWhite#607D8B
  • terminal.ansiYellow#FBC02D
  • textLink.activeForeground#FF9800
  • textLink.foreground#2196F3
  • titleBar.activeBackground#1d1f28
  • titleBar.inactiveBackground#1c1e27

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#4B616C—
constant.language, variable.language, variable.parameter.function.language.special, keyword, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, meta.control, storage, support—italic
constant.name.attribute.tag.pug, meta.brace, meta.decorator, punctuation.accessor, punctuation.brace, punctuation.brackets, punctuation.colon, punctuation.comma, punctuation.decorator, punctuation.definition, punctuation.delimiter.comma, punctuation.delimiter.object.comma, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation, punctuation.other.comma, punctuation.section, punctuation.semi, punctuation.separator, punctuation.terminator, string.interpolated.pug, support.function.interpolation.sass#8897f4
keyword.operator, keyword.other.unit#BE8DE3
keyword, keyword.control, keyword.other.special-method.elixir, meta.control.flow#c574dditalic
source.cs keyword.other.class, source.cs keyword.other.get, source.cs keyword.other.set, source.cs keyword.other.var, punctuation.definition.function.pointer, storage, storage.type.struct#ef4399—
entity.name.function, keyword.other.special-method, meta.function-call, meta.method-call, meta.require, punctuation.definition.function, support.function, support.function.any-method, variable.function#79B6F2—
entity.name.class, entity.name.type, entity.other.inherited-class, keyword.type, keyword.other.type, meta.class.inheritance, meta.class.instance, meta.function.definition, meta.type, source.cs storage.type, storage.type.built-in, storage.type.haskell, support.class, support.type, variable.other.constant.elixir#2196F3—
constant.numeric, constant.character.numeric, variable.other.anonymous.elixir#F48FB1—
constant.character, storage.type.string, string, support.constant.property-value, support.function.variable.quoted.single.elixir#556fff—
constant.character.escape#e67c00—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#536DFE—
keyword.operator.quantifier.regexp#F48FB1—
keyword.control.anchor.regexp#E040FB—
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class, constant.other.character-class.regexp, constant.other.character-class.set.regexp#FF5252—
meta.function-call, parameter.variable.function.elixir, variable.other.block.ruby, variable.parameter#FF6E40—
entity.name.namespace, entity.name.scope-resolution, entity.name.variable, punctuation.definition.variable, string meta.embedded.line.ruby, string source.groovy, source.cpp meta.bracket.square.access, source.cpp meta.parens, source.python constant.other.caps, support.other, support.type.object, variable#CFD8DC—
constant, entity.name.function.preprocessor, meta.preprocessor, punctuation.definition.constant, support.constant, support.constant.property-value.css, support.variable.magic.python, variable.other.constant—bold
constant.character, constant.language, constant.other, source.php variable.language.this punctuation.definition.variable, support.constant, support.constant.property-value.css, support.variable.magic.python, variable.language, variable.parameter.function.language.special#ff4b83—
constant.other.key, constant.other.object.key.js, entity.name.label, entity.name.tag.yaml, entity.name.variable.field, entity.name.variable.property, meta.object-literal.key, meta.object-literal.key string, meta.object.member, meta.meta.objectliteral, meta.property-name, punctuation.definition.variable.ruby, string.unquoted.label.js, source.python meta.attribute, support.constant.property, support.type.map.key, support.type.property-name, support.type.vendored.property-name, support.variable.property, variable.graphql, variable.object.property, variable.other.constant.property, variable.other.member, variable.other.object.property, variable.other.property, variable.other.readwrite.class, variable.other.readwrite.instance#40C4FF—
support.type.property-name—
entity.name.tag#C574DD—
entity.other.attribute-name, meta.attribute, string.unquoted.alias.graphql#f37f97—
entity.other.attribute-name.id#FFAB40—
entity.name.section, markup.heading, punctuation.definition.heading#E040FB
meta.paragraph#CFD8DC—
markup.list, markup.list meta.paragraph#DCE775—
markup.quote meta.paragraph#64B5F6italic
markup.italic, punctuation.definition.italic#FF8A65italic
markup.bold, punctuation.definition.bold#FF8A65bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF8A65bold
markup.underline#FF8A65underline
markup.fenced_code.block, markup.inline.raw, markup.raw.block, markup.raw.inline#FF9800—
markup.inserted#4CAF50—
markup.deleted#E91E63—
markup.changed#2196F3—
meta.link, markup.underline.link#4FC3F7—
string.other.link#FFB74D—
meta.separator#90A4AE—
variable.interpolation#3F51B5—
invalid, invalid.illegal#C2185B—
string.interpolated.dollar.shell#E91E63—
string.other.math.shell#3F51B5—
comment.rainbow4#FF9800—
markup.bold.rainbow9#673AB7—
invalid.rainbow10#FF5722—
source.json meta.structure.dictionary.json support.type.property-name.json#FFE0B2—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFFF8D—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CCFF90—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A7FFEB—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#80D8FF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8C9EFF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EA80FC—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF80AB—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFD180—