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.background#000000
  • activityBar.border#232529
  • activityBar.foreground#ffffff
  • activityBarBadge.background#5c33ff
  • activityBarBadge.foreground#ffffff
  • badge.background#000000
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#eeffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#676f9b
  • breadcrumbPicker.background#000000
  • button.background#5c33ff
  • button.border#00000000
  • button.foreground#ffffff
  • button.hoverBackground#5c33ff
  • checkbox.background#000000
  • checkbox.border#ffffff77
  • checkbox.foreground#9d85ff
  • contrastBorder#282b3c
  • debugExceptionWidget.background#232529
  • debugExceptionWidget.border#2c3043
  • debugToolBar.background#232529
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.removedTextBackground#ef535033
  • dropdown.background#000000
  • dropdown.border#ffffff
  • dropdown.foreground#ffffff
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#676f9bdd
  • editor.findMatchHighlightBackground#676f9b77
  • editor.foreground#bfc7d5
  • editor.hoverHighlightBackground#5c33ff
  • editor.inactiveSelectionBackground#676f9b33
  • editor.lineHighlightBackground#676f9b33
  • editor.rangeHighlightBackground#676f9b33
  • editor.selectionBackground#676f9b77
  • editor.selectionHighlightBackground#676f9b44
  • editor.wordHighlightBackground#32374d
  • editor.wordHighlightStrongBackground#676f9b33
  • editorActiveLineNumber.foreground#eeffff
  • editorCodeLens.foreground#ffca28
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorError.foreground#ef5350
  • editorGroup.border#3b415c
  • editorGroup.dropBackground#676f9b77
  • editorGroupHeader.border#3b415c77
  • editorGroupHeader.noTabsBackground#232529
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#676f9b33
  • editorGutter.addedBackground#9ccc65
  • editorGutter.deletedBackground#ef5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#5c33ff
  • editorHoverWidget.foreground#bfc7d5
  • editorIndentGuide.activeBackground#3b415c
  • editorIndentGuide.background#00000000
  • editorInlayHint.background#0000001a
  • editorInlayHint.foreground#4b5275
  • editorInlayHint.parameterBackground#0000001a
  • editorInlayHint.parameterForeground#969696
  • editorInlayHint.typeBackground#0000001a
  • editorInlayHint.typeForeground#969696
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#3b415caa
  • editorLink.activeForeground#ffffff
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#ef5350
  • editorMarkerNavigationWarning.background#ffca28
  • editorOverviewRuler.border#3b415c77
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorPane.background#000000
  • editorRuler.foreground#ffffff
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#2b2f40
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.foreground#bfc7d5cc
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5c33ff
  • editorSuggestWidget.selectedForeground#bfc7d5
  • editorSuggestWidget.selectedIconForeground#bfc7d5
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3b415c
  • editorWidget.background#000000
  • editorWidget.border#5c33ff
  • editorWidget.foreground#bfc7d5cc
  • errorForeground#ef5350
  • extensionButton.prominentBackground#2c3043cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#2c3043
  • focusBorder#282b3c
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#ef535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#e2c08de6
  • gitDecoration.untrackedResourceForeground#a9c77d
  • icon.foreground#ffffffdd
  • input.background#000000
  • input.border#ffffff
  • input.foreground#ffffff
  • input.placeholderForeground#808080
  • inputOption.activeBackground#5c33ff
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#ff0000
  • inputValidation.errorBorder#ff0000
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#64b5f6f2
  • inputValidation.infoBorder#64b5f6
  • inputValidation.warningBackground#ffca28f2
  • inputValidation.warningBorder#ffca28
  • list.activeSelectionBackground#676f9b55
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#676f9b33
  • list.errorForeground#ff0000
  • list.filterMatchBackground#676f9b77
  • list.filterMatchBorder#00000000
  • list.focusBackground#ffffff
  • list.focusForeground#000000
  • list.focusOutline#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#000000
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#676f9b11
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#676f9b22
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#ff0000
  • list.warningForeground#ffff00
  • listFilterWidget.background#3b415c66
  • listFilterWidget.noMatchesOutline#ff000099
  • listFilterWidget.outline#00ff0099
  • merge.currentHeaderBackground#7e57c25a
  • merge.incomingHeaderBackground#7e57c25a
  • notificationCenter.border#ffffff
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#80cbc4
  • notifications.background#000000
  • notifications.border#ffffff
  • notifications.foreground#ffffff
  • notificationToast.border#ffffff
  • panel.background#000000
  • panel.border#3b415c
  • panel.dropBorder#676f9b77
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff77
  • peekView.border#3b415c
  • peekViewEditor.background#3b415c22
  • peekViewEditor.matchHighlightBackground#676f9b77
  • peekViewResult.background#3b415c77
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#676f9b77
  • peekViewResult.selectionBackground#676f9b55
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#bfc7d5
  • peekViewTitleLabel.foreground#bfc7d5
  • pickerGroup.border#5c33ff
  • pickerGroup.foreground#ffffffcc
  • quickInput.background#000000
  • quickInput.foreground#bfc7d5cc
  • quickInputList.focusBackground#5c33ff
  • quickInputList.focusForeground#bfc7d5cc
  • sash.hoverBorder#5c33ff
  • scrollbar.shadow#676f9b77
  • scrollbarSlider.activeBackground#676f9bee
  • scrollbarSlider.background#676f9b22
  • scrollbarSlider.hoverBackground#676f9baa
  • selection.background#3c435e
  • sideBar.background#000000
  • sideBar.border#3b415c
  • sideBar.dropBackground#676f9b77
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#3b415c77
  • sideBarSectionHeader.foreground#eeffff
  • sideBarTitle.foreground#eeffff
  • statusBar.background#000000
  • statusBar.border#3b415c
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#1f2330
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#25293a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#5c33ff
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#000000
  • tab.activeBorder#ffffff
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff77
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#ffffff77
  • tab.unfocusedActiveForeground#ffffff99
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#ffffff66
  • terminal.ansiBlack#676e95
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#676e95
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5572
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#a9c77d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5572
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • terminal.background#000000
  • terminal.border#3b415c77
  • terminal.dropBackground#676f9b77
  • terminal.foreground#ffffff
  • textLink.activeForeground#ffffff
  • textLink.foreground#9d85ff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.border#3b415c77
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#3b415c
  • toolbar.activeBackground#ffffff11
  • toolbar.hoverBackground#ffffff22
  • toolbar.hoverOutline#00000000
  • tree.indentGuidesStroke#3b415c
  • walkThrough.embeddedEditorBackground#232635
  • widget.shadow#00000000
  • window.activeBorder#ffffff33
  • window.inactiveBorder#ffffff11

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
markup.underline—underline
markup.italic—italic
markup.strikethrough—strikethrough
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python, punctuation.definition.tag, keyword.operator, storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#BDC0C9—
invalid#FF5263—
entity.name.tag.css, entity.name.tag.less, storage, storage.modifier, keyword.operator.noexcept, 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, keyword, keyword.control, keyword.other.unit, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.language, support.type.primitive#6C95EB—
meta.declaration.annotation, storage.type.annotation#C191FF—
entity.name.function#39CC8F—
constant.language, entity.other.attribute-name, entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss, meta.structure.dictionary.key.python, string.tag, support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded, variable.other.property, variable.other.field, variable.other.member#66C3CC—
string, meta.embedded.assembly, meta.preprocessor.string, string.value#C9A26D—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, meta.preprocessor.numeric, variable.object.property, meta.object-literal#51C0CF—
comment#6E798Aitalic
comment.documentation, comment.block.documentation#648769italic
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, string.regexp, meta.template.expression#B8B167—
variable.other.type, variable.other.generic, entity.name.type.type-parameter, entity.name.type#C191FF—
entity.name.tag#D5B778—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Calm Orbit by sqwibsoft - VS Code Theme