Skip to main content
CodingTheme

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#2D2E3D
  • activityBar.foreground#DEE0E3
  • activityBar.inactiveForeground#D4C5EF55
  • activityBarBadge.background#BA6AAB
  • activityBarBadge.foreground#DEE0E3
  • badge.background#3B3D51
  • badge.foreground#DEE0E3
  • button.background#805177
  • button.secondaryBackground#3B3D51
  • debugToolBar.background#37394B
  • diffEditor.diagonalFill#37394B
  • diffEditor.insertedTextBackground#62986D44
  • diffEditor.removedTextBackground#9C605944
  • dropdown.background#37394B
  • editor.background#1E1F29
  • editor.findMatchBackground#87654180
  • editor.findMatchBorder#876541BF
  • editor.findMatchHighlightBackground#87654140
  • editor.findMatchHighlightBorder#87654180
  • editor.foldBackground#6272A459
  • editor.foreground#DEE0E3
  • editor.hoverHighlightBackground#F3AFE633
  • editor.lineHighlightBorder#44475A66
  • editor.rangeHighlightBackground#8765411A
  • editor.selectionBackground#565A6D8C
  • editor.selectionHighlightBackground#565A6D4D
  • editor.stackFrameHighlightBackground#4B4C3B
  • editor.wordHighlightBackground#CAA9FA33
  • editor.wordHighlightStrongBackground#CAA9FA66
  • editorBracketHighlight.foreground1#FFFF3F
  • editorBracketHighlight.foreground2#21FFFF
  • editorBracketHighlight.foreground3#F37BDC
  • editorBracketHighlight.unexpectedBracket.foreground#F36756
  • editorBracketMatch.border#89909B
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#F09489
  • editorGroup.border#252632
  • editorGroup.dropBackground#3B3D5199
  • editorGroupHeader.tabsBackground#252632
  • editorGutter.addedBackground#9AE7A999
  • editorGutter.commentRangeForeground#6272A4
  • editorGutter.deletedBackground#F0948999
  • editorGutter.modifiedBackground#CAA9FA99
  • editorHoverWidget.border#37394B
  • editorIndentGuide.activeBackground#3B3D51
  • editorIndentGuide.background#2D2E3D
  • editorInlayHint.background#0000
  • editorInlayHint.foreground#6272A4
  • editorLineNumber.activeForeground#DEE0E3
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#F3AFE6
  • editorOverviewRuler.addedForeground#9AE7A999
  • editorOverviewRuler.deletedForeground#F0948999
  • editorOverviewRuler.errorForeground#F0948999
  • editorOverviewRuler.findMatchForeground#FFCA9299
  • editorOverviewRuler.infoForeground#B6F6FD99
  • editorOverviewRuler.modifiedForeground#CAA9FA99
  • editorOverviewRuler.warningForeground#F6FACA99
  • editorOverviewRuler.wordHighlightForeground#CAA9FA33
  • editorOverviewRuler.wordHighlightStrongForeground#CAA9FA66
  • editorRuler.foreground#3B3D51
  • editorSuggestWidget.border#252632
  • editorWarning.foreground#9AE7A9
  • editorWhitespace.foreground#3B3D51
  • editorWidget.background#252632
  • focusBorder#BA6AAB
  • gitDecoration.addedResourceForeground#9AE7A9
  • gitDecoration.conflictingResourceForeground#F6FACA
  • gitDecoration.deletedResourceForeground#F09489
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#CAA9FA
  • gitDecoration.submoduleResourceForeground#CAA9FA
  • gitDecoration.untrackedResourceForeground#FFCA92
  • gitlens.trailingLineForegroundColor#6272A473
  • input.background#37394B
  • input.placeholderForeground#89909B
  • inputOption.activeBorder#BA6AAB
  • inputValidation.errorBackground#574240
  • inputValidation.errorBorder#B45E54
  • inputValidation.errorForeground#DEE0E3CC
  • inputValidation.warningBackground#4B4C3B
  • inputValidation.warningBorder#929663
  • inputValidation.warningForeground#DEE0E3CC
  • list.activeSelectionBackground#AB659E
  • list.activeSelectionIconForeground#DEE0E3
  • list.dropBackground#3B3D51
  • list.errorForeground#F09489
  • list.focusBackground#37394B
  • list.highlightForeground#F3AFE6
  • list.hoverBackground#2D2E3D
  • list.inactiveSelectionBackground#37394B
  • list.warningForeground#9AE7A9
  • menu.background#252632
  • menu.foreground#CCCCCC
  • merge.commonHeaderBackground#89F3FF33
  • merge.currentHeaderBackground#F781E133
  • merge.incomingHeaderBackground#B07AFF33
  • notebook.selectedCellBackground#37394B
  • panel.border#45475E
  • panelTitle.activeBorder#BA6AAB
  • panelTitle.inactiveForeground#6272A4
  • pickerGroup.border#45475E
  • pickerGroup.foreground#F3AFE6
  • progressBar.background#CAA9FA
  • scrollbarSlider.activeBackground#3B3D51C0
  • scrollbarSlider.background#3B3D5166
  • scrollbarSlider.hoverBackground#3B3D51A6
  • settings.modifiedItemIndicator#CAA9FA99
  • sideBar.background#252632
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#45475E
  • sideBarTitle.foreground#DEE0E3
  • statusBar.background#805177
  • statusBar.debuggingBackground#876541
  • statusBar.foreground#DEE0E3
  • statusBar.noFolderBackground#645180
  • tab.inactiveBackground#2D2E3D
  • tab.lastPinnedBorder#45475E
  • terminal.ansiBlack#303953
  • terminal.ansiBlue#CAA9FA
  • terminal.ansiBrightBlack#343E60
  • terminal.ansiBrightBlue#AA70FF
  • terminal.ansiBrightCyan#79F6FF
  • terminal.ansiBrightGreen#6CE484
  • terminal.ansiBrightMagenta#F37BDC
  • terminal.ansiBrightRed#F36756
  • terminal.ansiBrightWhite#939FC5
  • terminal.ansiBrightYellow#F2FB90
  • terminal.ansiCyan#B6F6FD
  • terminal.ansiGreen#9AE7A9
  • terminal.ansiMagenta#F3AFE6
  • terminal.ansiRed#F09489
  • terminal.ansiWhite#B5BCD4
  • terminal.ansiYellow#F6FACA
  • terminal.findMatchBackground#87654180
  • terminal.findMatchBorder#876541BF
  • terminal.findMatchHighlightBackground#87654140
  • terminal.findMatchHighlightBorder#87654180
  • terminal.foreground#DEE0E3
  • terminal.inactiveSelectionBackground#37394B
  • terminal.selectionBackground#565A6D8C
  • terminalOverviewRuler.findMatchForeground#87654180
  • textBlockQuote.background#2D2E3D
  • textBlockQuote.border#645180
  • textLink.activeForeground#F3AFE6
  • textLink.foreground#F3AFE6
  • titleBar.activeBackground#3B3D51
  • titleBar.inactiveBackground#252632
  • tree.indentGuidesStroke#DEE0E344

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#DEE0E3
emphasisitalic
strongbold
header#000080
comment#6272A4
constant.language#F3AFE6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#C8F1BA
constant.regexp#646695
entity.name.tag#F3AFE6
entity.name.tag.css#F3AFE6
entity.other.attribute-name#B6F6FD
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#F3AFE6
invalid#F09489
markup.italic#FFCA92italic
markup.strikethroughstrikethrough
markup.underline#FFCA92underline
markup.bold#FFCA92bold
markup.heading#F3AFE6bold
markup.inserted#C8F1BA
markup.deleted, markup.inline.raw#F6FACA
markup.changed#F3AFE6
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#CAA9FA
punctuation.definition.tag#676E79
meta.preprocessor, entity.name.function.preprocessor#F3AFE6
meta.preprocessor.string#F6FACA
meta.preprocessor.numeric#C8F1BA
meta.structure.dictionary.key.python#B6F6FD
meta.diff.header#F3AFE6
storage#F3AFE6
storage.type#F3AFE6
storage.modifier, keyword.operator.noexcept#F3AFE6
string, meta.embedded.assembly#F6FACA
string.tag#F6FACA
string.value#F6FACA
string.regexp#F09489
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#F3AFE6
meta.template.expression#DEE0E3
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#B6F6FD
keyword#F3AFE6
keyword.control#F3AFE6
keyword.operator#DEE0E3
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#F3AFE6
keyword.other.unit, keyword.control.unit#C8F1BA
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#F3AFE6
keyword.operator.type.php#F3AFE6
support.function.git-rebase#B6F6FD
constant.sha.git-rebase#C8F1BA
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#DEE0E3
variable.language#F3AFE6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Chimera Theme by roydukkey - VS Code Theme