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#ffb8c7
  • activityBar.background#302a49
  • activityBar.border#ffb8c7
  • activityBar.foreground#ff85aa
  • activityBar.inactiveForeground#ffb8c7
  • activityBarBadge.background#ff4f6c
  • activityBarBadge.foreground#ffffff
  • badge.background#ff4f6c
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#3b7af0
  • breadcrumb.background#171d3a
  • breadcrumb.focusForeground#3b7af0
  • breadcrumb.foreground#b8ccee
  • breadcrumbPicker.background#ffffff
  • button.background#c5d9ff
  • button.foreground#4b4b4b
  • button.hoverBackground#ffcad5
  • checkbox.background#ffffff
  • checkbox.foreground#ff85aa
  • debugConsole.errorForeground#ff4f6c
  • debugConsole.infoForeground#b8ccee
  • debugConsole.sourceForeground#b8ccee
  • debugConsole.warningForeground#ff85aa
  • debugConsoleInputIcon.foreground#b8ccee
  • dropdown.background#ffffff
  • dropdown.border#ffb8c7
  • dropdown.foreground#7c7c7c
  • dropdown.listBackground#ffffff
  • editor.background#1b1436
  • editor.findMatchBackground#015a96
  • editor.findMatchHighlightBackground#af006c
  • editor.foreground#808080
  • editor.hoverHighlightBackground#4364a191
  • editor.lineHighlightBackground#7b7ac53f
  • editor.rangeHighlightBackground#bdb8a53a
  • editor.selectionBackground#e0ebff
  • editor.selectionHighlightBackground#9e99ff42
  • editorBracketMatch.background#ffffff00
  • editorBracketMatch.border#f1f1f17a
  • editorCursor.foreground#ff85aa
  • editorError.foreground#ff85aa
  • editorGroup.border#ffb8c7
  • editorGroup.dropBackground#ff85aa
  • editorGroup.emptyBackground#f5f4f4
  • editorGroupHeader.tabsBackground#ffb8c7
  • editorGroupHeader.tabsBorder#f7f7f7
  • editorGutter.background#121e3571
  • editorHoverWidget.background#fdfbfb
  • editorHoverWidget.border#bad2ff
  • editorHoverWidget.foreground#636262
  • editorHoverWidget.statusBarBackground#ececec
  • editorIndentGuide.activeBackground#b8ccee
  • editorIndentGuide.background#e4e4e4
  • editorLineNumber.activeForeground#ff85aa
  • editorLineNumber.foreground#b8ccee
  • editorMarkerNavigation.background#ffffff
  • editorMarkerNavigationError.background#ffb8c7
  • editorMarkerNavigationInfo.background#ffb8c7
  • editorMarkerNavigationWarning.background#ffb8c7
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e6e6e6
  • editorSuggestWidget.foreground#808080
  • editorSuggestWidget.highlightForeground#636363
  • editorSuggestWidget.selectedBackground#e0ebff
  • editorWarning.foreground#ff85aa
  • editorWhitespace.foreground#6ea1ff
  • editorWidget.background#f5f4f4
  • editorWidget.border#e6e6e6
  • editorWidget.foreground#5a5a5a
  • extensionButton.prominentBackground#ff4f6c
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#77a6ff
  • focusBorder#ffb8c7
  • foreground#777777
  • gitDecoration.ignoredResourceForeground#5789e6
  • gitDecoration.modifiedResourceForeground#5789e6
  • gitDecoration.untrackedResourceForeground#5789e6
  • icon.foreground#5a5a5a
  • input.background#ffffff
  • input.border#ffb8c7
  • input.foreground#4b4b4b
  • input.placeholderForeground#868686
  • inputOption.activeBackground#f0f0f0
  • inputOption.activeForeground#ff85aa
  • keybindingLabel.background#ffb8c7
  • keybindingLabel.border#ffb8c7
  • keybindingLabel.bottomBorder#ffb8c7
  • keybindingLabel.foreground#ffffff
  • list.activeSelectionBackground#e0ebff
  • list.activeSelectionForeground#ff85aa
  • list.dropBackground#ffffff
  • list.errorForeground#ffffff
  • list.focusBackground#e0ebff
  • list.focusForeground#ff85aa
  • list.hoverBackground#ececec
  • list.hoverForeground#ff85aa
  • list.inactiveSelectionBackground#e0ebff
  • list.inactiveSelectionForeground#ff85aa
  • list.warningForeground#ff4f6c
  • menu.background#ffffff
  • menu.foreground#4b4b4b
  • menu.selectionBackground#ececec
  • menu.selectionForeground#ff85aa
  • menubar.selectionBackground#fddfe6
  • menubar.selectionForeground#ff85aa
  • minimap.background#e6e6e6
  • minimap.findMatchHighlight#ff578a
  • minimap.selectionHighlight#0400ff
  • minimap.warningHighlight#ff85aa
  • minimapSlider.activeBackground#998e8e75
  • minimapSlider.background#e939743f
  • minimapSlider.hoverBackground#ff18653f
  • notificationCenter.border#bebebe
  • notificationCenterHeader.background#ffb8c7
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#ffffff
  • notifications.foreground#7a7a7a
  • notificationsWarningIcon.foreground#ff4f6c
  • panel.background#271c5771
  • panel.border#e2e2e2
  • panelTitle.activeBorder#ff85aa
  • panelTitle.activeForeground#ff6a83
  • panelTitle.inactiveForeground#949494
  • peekViewTitleDescription.foreground#6f9df1
  • peekViewTitleLabel.foreground#6f9df1
  • pickerGroup.border#bad2ff
  • pickerGroup.foreground#8b8b8b
  • problemsErrorIcon.foreground#ff4f6c
  • problemsInfoIcon.foreground#9e9e9e
  • problemsWarningIcon.foreground#6f9df1
  • quickInput.background#ffffff
  • quickInputList.focusBackground#e0ebff
  • scrollbar.shadow#aaaaaa
  • scrollbarSlider.activeBackground#70a2ff49
  • scrollbarSlider.background#b6b6b63b
  • scrollbarSlider.hoverBackground#a8c7ff49
  • selection.background#e0ebff
  • settings.headerForeground#575757
  • settings.modifiedItemIndicator#bad2ff
  • sideBar.background#ffffff
  • sideBar.border#ffb8c7
  • sideBar.foreground#7c7c7c
  • sideBarSectionHeader.background#ffb8c7
  • sideBarSectionHeader.foreground#5a5a5a
  • sideBarTitle.foreground#5a5a5a
  • statusBar.background#b8ccf2
  • statusBar.border#c5c5c5
  • statusBar.debuggingBackground#ffb8c7
  • statusBar.foreground#302a49
  • statusBarItem.activeBackground#ffb8c7
  • statusBarItem.hoverBackground#fddfe6
  • tab.activeBackground#ffb8c7
  • tab.activeBorder#ffb8c7
  • tab.activeForeground#302a49
  • tab.border#ffffff
  • tab.hoverBackground#ffb8c7
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#fddfe6
  • tab.inactiveForeground#ff85aa
  • terminal.background#302a49
  • terminal.foreground#b8ccee
  • terminalCursor.foreground#ff85aa
  • textCodeBlock.background#e0ebffbd
  • textLink.activeForeground#ff6a83
  • textLink.foreground#ff85aa
  • titleBar.activeBackground#b8ccf2
  • titleBar.activeForeground#302a49
  • titleBar.border#f7f7f7
  • titleBar.inactiveBackground#e0ebff
  • titleBar.inactiveForeground#dd8ca4
  • welcomePage.buttonBackground#e0ebff
  • welcomePage.buttonHoverBackground#fddfe6
  • widget.shadow#aaaaaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.dictionary.begin.json.comments, punctuation.definition.dictionary.end.json.comments,#ffffff
punctuation.definition.array.begin.json.comments, punctuation.definition.array.end.json.comments#ffffff
invalid.illegal.expected-dictionary-separator.json.comments, meta.structure.dictionary.json.comments, meta.structure.dictionary.value.json.comments,meta.structure.dictionary.json.comments, source.json.comments#a7a7a7
comment, string#aaaaaa
support.function#a3ee91
support.type.property-name, support.type.property-name.json, #ff85aa
support.type, punctuation.separator.comma.js#bda2be
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#bda2be
entity.name.tag#bda2be
entity.other.attribute-name, entity.other.attribute-name.class.css#ffed85
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#757575
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#757575
entity.other.attribute-name.id.css, variable #8aedff
support.type.property-name.css, entity.name.function.js#398fff
string.quoted.single.js, meta.structure.dictionary, string.quoted.double.json#05aecc
constant.numeric#ffed85
keyword.other.special-method#7CAFC2
keyword, variable.other.constant.js#fc912d
string.quoted.double.html, string.quoted.double.handlebars#ff5555
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#dbdbdb
support.constant.color.w3c-standard-color-name.css#dbdbdb
keyword.operator#c9d9f8
text.html.derivative#c9d9f8
variable.parameter#fc912d
storage.type#c073ff
keyword.control.loop.js, keyword.control.conditional#ff3482
string.quoted.double.js#ff85aa
constant.language, support.constant.math.js#EAB780
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#f1f1f1
constant.other.color.rgb-value.hex.css, keyword.operator.gradient.css#dbdbdb
entity.name.tag.css, meta.brace.round.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js#f1f1f1
variable.other.readwrite.js, string.quoted.double.css#dbdbdb
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css#f1f1f1
punctuation.definition.block.js, punctuation.terminator.statement.js#f1f1f1
punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css#f1f1f1
ccotton by c-cottton - VS Code Theme