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—
modified dark lavender by sugarUwU - VS Code Theme