Skip to main content
Coding Theme

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.activeBackground#00000000
  • activityBar.activeBorder#6741ca
  • activityBar.background#ffe3dc
  • activityBar.border#eecbc5
  • activityBar.foreground#6741ca
  • activityBar.inactiveForeground#5c0300
  • activityBarBadge.background#6741ca
  • activityBarBadge.foreground#fffaf6
  • activityBarTop.activeBorder#6741ca
  • activityBarTop.dropBorder#6741ca
  • activityBarTop.foreground#6741ca
  • activityBarTop.inactiveForeground#5c0300
  • badge.background#6741ca
  • badge.foreground#fffaf6
  • breadcrumb.background#fffaf6
  • button.background#6741ca
  • button.border#6741ca
  • button.foreground#fffaf6
  • button.hoverBackground#6741cacc
  • button.secondaryBackground#fffaf6
  • button.secondaryForeground#6741ca
  • button.secondaryHoverBackground#fffaf6cc
  • button.separator#fffaf64d
  • commandCenter.activeBackground#ffe3dc
  • commandCenter.activeBorder#eecbc5
  • commandCenter.background#ffe3dc
  • commandCenter.border#eecbc5
  • commandCenter.foreground#5c0300
  • commandCenter.inactiveBorder#eecbc5
  • commandCenter.inactiveForeground#eecbc5
  • debugToolBar.background#ffe3dc
  • descriptionForeground#7c271c
  • diffEditor.border#eecbc5
  • diffEditor.diagonalFill#3800001a
  • diffEditor.insertedLineBackground#9cd3ff40
  • diffEditor.insertedTextBackground#9cd3ff40
  • diffEditor.removedLineBackground#ff769440
  • diffEditor.removedTextBackground#ff769440
  • diffEditorGutter.insertedLineBackground#9cd3ff40
  • diffEditorGutter.removedLineBackground#ff769440
  • diffEditorOverview.insertedForeground#0069cc
  • diffEditorOverview.removedForeground#d2004f
  • disabledForeground#977872
  • dropdown.background#fffaf6
  • dropdown.border#977872
  • dropdown.foreground#5c0300
  • dropdown.listBackground#fffaf6
  • editor.background#fffaf6
  • editor.findMatchBackground#ff9a8880
  • editor.findMatchHighlightBackground#ff9a8880
  • editor.findRangeHighlightBackground#dabe0080
  • editor.foldBackground#00000000
  • editor.foreground#380000
  • editor.inactiveSelectionBackground#6fdb554d
  • editor.lineHighlightBackground#ffe3dc40
  • editor.rangeHighlightBackground#dabe0040
  • editor.selectionBackground#6fdb554d
  • editor.wordHighlightBackground#6fdb5580
  • editor.wordHighlightStrongBackground#ff88e380
  • editorBracketHighlight.foreground1#007858
  • editorBracketHighlight.foreground2#0064b9
  • editorBracketHighlight.foreground3#9b357f
  • editorBracketHighlight.foreground4#007858
  • editorBracketHighlight.foreground5#0064b9
  • editorBracketHighlight.foreground6#9b357f
  • editorBracketHighlight.unexpectedBracket.foreground#bb005e
  • editorBracketMatch.background#ff88e380
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#b0008c
  • editorGroup.border#eecbc5
  • editorGroup.dropBackground#6fdb554d
  • editorGroupHeader.border#eecbc5
  • editorGroupHeader.noTabsBackground#fffaf6
  • editorGroupHeader.tabsBackground#ffe3dc
  • editorGroupHeader.tabsBorder#eecbc5
  • editorGutter.addedBackground#0069cc
  • editorGutter.deletedBackground#d2004f
  • editorGutter.modifiedBackground#c3009b
  • editorHoverWidget.background#fff
  • editorHoverWidget.border#977872
  • editorIndentGuide.activeBackground1#5c030080
  • editorIndentGuide.background1#5c03001a
  • editorLightBulb.foreground#ff9a88
  • editorLightBulbAutoFix.foreground#dabe00
  • editorLineNumber.activeForeground#5c0300
  • editorLineNumber.foreground#977872
  • editorLink.activeForeground#0009fb
  • editorOverviewRuler.border#eecbc540
  • editorRuler.foreground#eecbc580
  • editorStickyScroll.border#eecbc5
  • editorSuggestWidget.background#fff
  • editorSuggestWidget.border#977872
  • editorWidget.background#ffe3dc
  • editorWidget.border#977872
  • editorWidget.foreground#5c0300
  • editorWidget.resizeBorder#ffe3dc
  • errorForeground#d2004f
  • focusBorder#6741ca
  • foreground#5c0300
  • gitDecoration.conflictingResourceForeground#00747b
  • gitDecoration.deletedResourceForeground#d2004f
  • gitDecoration.ignoredResourceForeground#5c03004d
  • gitDecoration.modifiedResourceForeground#0069cc
  • gitDecoration.untrackedResourceForeground#c3009b
  • icon.foreground#5c0300
  • input.background#fffaf6
  • input.border#977872
  • input.placeholderForeground#977872
  • inputOption.activeBorder#5c0300
  • keybindingLabel.background#00000000
  • keybindingLabel.border#eecbc5
  • keybindingLabel.bottomBorder#eecbc5
  • keybindingLabel.foreground#5c0300
  • list.activeSelectionBackground#6741ca
  • list.activeSelectionForeground#fffaf6
  • list.activeSelectionIconForeground#fffaf6
  • list.dropBackground#6fdb554d
  • list.errorForeground#d2004f
  • list.focusForeground#5c0300
  • list.focusHighlightForeground#fffaf6
  • list.highlightForeground#6741ca
  • list.hoverBackground#9778721a
  • list.inactiveSelectionBackground#97787226
  • list.inactiveSelectionForeground#5c0300
  • list.inactiveSelectionIconForeground#5c0300
  • list.warningForeground#905300
  • menu.background#fff1ec
  • menu.border#eecbc5
  • menu.foreground#5c0300
  • menu.separatorBackground#eecbc5
  • merge.currentContentBackground#9cd3ff40
  • merge.currentHeaderBackground#9cd3ffa6
  • merge.incomingContentBackground#ff769440
  • merge.incomingHeaderBackground#ff7694a6
  • notificationCenterHeader.background#ffe3dc
  • notificationCenterHeader.foreground#5c0300
  • notificationLink.foreground#0009fb
  • notifications.background#ffe3dc
  • notifications.foreground#5c0300
  • notificationToast.border#977872
  • panel.background#fff1ec
  • panel.border#eecbc5
  • panelSection.border#eecbc5
  • panelSectionHeader.border#eecbc5
  • panelTitle.activeBorder#6741ca
  • panelTitle.activeForeground#6741ca
  • panelTitle.inactiveForeground#5c0300
  • peekView.border#977872
  • peekViewEditor.background#fff
  • peekViewResult.background#fff
  • peekViewResult.fileForeground#5c0300
  • peekViewResult.lineForeground#5c0300
  • peekViewTitle.background#fff
  • peekViewTitleDescription.foreground#5c0300
  • peekViewTitleLabel.foreground#5c0300
  • pickerGroup.border#eecbc5
  • progressBar.background#5c0300
  • quickInput.background#ffe3dc
  • quickInputList.focusBackground#6741ca
  • quickInputList.focusForeground#fffaf6
  • quickInputList.focusIconForeground#fffaf6
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#5c030099
  • scrollbarSlider.background#5c030033
  • scrollbarSlider.hoverBackground#5c030080
  • settings.checkboxBackground#fffaf6
  • settings.dropdownBackground#fffaf6
  • settings.headerForeground#5c0300
  • settings.modifiedItemIndicator#6741ca
  • settings.numberInputBackground#fffaf6
  • settings.rowHoverBackground#ffe3dc40
  • settings.textInputBackground#fffaf6
  • sideBar.background#ffe3dc
  • sideBar.border#eecbc5
  • sideBar.dropBackground#6fdb554d
  • sideBarSectionHeader.background#ffe3dc
  • sideBarSectionHeader.border#eecbc5
  • statusBar.background#ffe3dc
  • statusBar.border#eecbc5
  • statusBar.debuggingBackground#ffe3dc
  • statusBar.foreground#5c0300
  • statusBar.noFolderBackground#ffe3dc
  • statusBarItem.errorBackground#bb005e
  • statusBarItem.errorForeground#fffaf6
  • statusBarItem.errorHoverBackground#bb005e
  • statusBarItem.errorHoverForeground#fffaf6
  • statusBarItem.remoteBackground#ffe3dc
  • statusBarItem.remoteForeground#5c0300
  • tab.activeBackground#fffaf6
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#380000
  • tab.border#eecbc5
  • tab.inactiveBackground#ffe3dc
  • tab.inactiveForeground#5c0300
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#5b403b
  • terminal.ansiBlue#0069cc
  • terminal.ansiBrightBlack#5b403b
  • terminal.ansiBrightBlue#0069cc
  • terminal.ansiBrightCyan#00747b
  • terminal.ansiBrightGreen#007a00
  • terminal.ansiBrightMagenta#c3009b
  • terminal.ansiBrightRed#d2004f
  • terminal.ansiBrightWhite#fff6f1
  • terminal.ansiBrightYellow#905300
  • terminal.ansiCyan#00747b
  • terminal.ansiGreen#007a00
  • terminal.ansiMagenta#c3009b
  • terminal.ansiRed#d2004f
  • terminal.ansiWhite#fff6f1
  • terminal.ansiYellow#905300
  • terminal.background#fff1ec
  • terminal.foreground#380000
  • terminal.tab.activeBorder#6741ca
  • textBlockQuote.background#00000000
  • textBlockQuote.border#380000
  • textLink.activeForeground#0009fb
  • textLink.foreground#0009fb
  • textPreformat.foreground#0069cc
  • titleBar.activeBackground#ffe3dc
  • titleBar.activeForeground#5c0300
  • titleBar.border#eecbc5
  • titleBar.inactiveBackground#ffe3dc
  • titleBar.inactiveForeground#5c0300
  • toolbar.activeBackground#9778724d
  • toolbar.hoverBackground#97787233
  • tree.indentGuidesStroke#5c030040
  • widget.border#eecbc5
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#380000
emphasisitalic
strongbold
header#007f5ebold
comment, punctuation.definition.comment#696969italic
constant.language#0069ccbold
constant.regexp#0069cc
support.class.component, entity.name.tag#b80093
entity.name.tag.css#380000
entity.other.attribute-name#005f44
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, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#005f44
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#ba0094bold
invalid#bb005e
markup.underline#0009fbunderline
markup.bold#007f5ebold
markup.heading#007f5ebold
markup.italic#007f5eitalic
markup.strikethroughstrikethrough
markup.inserted#0069cc
markup.deleted#d2004f
markup.changed#905300
punctuation.definition.quote.begin.markdown#a34a3d
punctuation.definition.list.begin.markdown#a34a3d
markup.inline.raw#0069cc
punctuation.definition.tag#a34a3d
meta.preprocessor, entity.name.function.preprocessor#b80093
meta.preprocessor.string#0069cc
constant.numeric, meta.preprocessor.numeric, entity.other.keyframe-offset.percentage.css#0069cc
meta.structure.dictionary.key.python#007f5ebold
source.diff#a34a3d
meta.diff.header#fff6f1
storage#380000
source.java storage.type, source.go storage.type#ba0094bold
storage.type#007f5ebold
storage.modifier, keyword.operator.noexcept#007f5ebold
string, meta.embedded.assembly, constant.other.symbol#0069cc
string.tag#007f5ebold
string.value#0069cc
string.regexp#0069cc
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#a34a3d
meta.template.expression, meta.interpolation#380000
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#004c9d
keyword#007f5ebold
keyword.control#007f5ebold
keyword.operator.type.annotation#a34a3d
keyword.operator#a34a3d
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#007f5ebold
keyword.other.unit#0069ccbold
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#a34a3d
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#380000
variable.language#0069ccbold
meta.attribute, variable.other.property, variable.other.object.property#004c9d
entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#b80093
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#ba0094bold
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#ba0094bold
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#007f5ebold
variable, meta.definition.variable.name, support.variable, entity.name.variable#380000
variable.parameter#004c9d
meta.object-literal.key, variable.object.property, source.json support.type.property-name#005f44
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#0069ccbold
constant.other.placeholder#007f5ebold
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#004c9d
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#004c9d
keyword.operator.or.regexp, keyword.control.anchor.regexp#004c9d
keyword.operator.quantifier.regexp#004c9d
constant.character, constant.other.option#004c9d
constant.character.escape#004c9d
entity.name.label#380000
punctuation, meta.brace#a34a3d
Popsicle Theme by Sage Fennel - VS Code Theme