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#00141d
  • activityBar.border#00141d
  • activityBar.dropBackground#002e3d
  • activityBar.foreground#0096be
  • activityBarBadge.background#ff963b
  • activityBarBadge.foreground#00141d
  • badge.background#ff963b
  • badge.foreground#00141d
  • button.background#ff5d94
  • button.foreground#00141d
  • button.hoverBackground#ba90ff
  • debugExceptionWidget.background#002e3d
  • debugExceptionWidget.border#002e3d
  • debugToolBar.background#002e3d
  • diffEditor.insertedTextBackground#46fe7a20
  • diffEditor.removedTextBackground#ff5b6f20
  • dropdown.background#002e3d
  • dropdown.border#002e3d
  • dropdown.foreground#00b0df
  • editor.background#00141d
  • editor.findMatchBackground#ff963b7f
  • editor.findMatchHighlightBackground#ff963b3f
  • editor.findRangeHighlightBackground#002e3d
  • editor.foreground#00caff
  • editor.hoverHighlightBackground#00485e
  • editor.inactiveSelectionBackground#ff963b7f
  • editor.lineHighlightBackground#00141d
  • editor.lineHighlightBorder#002e3d
  • editor.rangeHighlightBackground#002e3d
  • editor.selectionBackground#00485e
  • editor.selectionHighlightBackground#002e3d
  • editor.wordHighlightBackground#ff963b7f
  • editor.wordHighlightStrongBackground#c082ff7f
  • editorBracketMatch.background#002e3d
  • editorBracketMatch.border#002e3d
  • editorCodeLens.foreground#0096be
  • editorCursor.foreground#ff963b
  • editorError.border#00caff
  • editorError.foreground#ff5b6f
  • editorGroup.border#002e3d
  • editorGroup.dropBackground#00485e7f
  • editorGroup.emptyBackground#00141d
  • editorGroup.focusedEmptyBorder#002e3d
  • editorGroupHeader.noTabsBackground#00141d
  • editorGroupHeader.tabsBackground#00141d
  • editorGroupHeader.tabsBorder#00141d
  • editorGutter.addedBackground#46fe7a
  • editorGutter.background#00141d
  • editorGutter.deletedBackground#ff5b6f
  • editorGutter.modifiedBackground#ff963b
  • editorHoverWidget.background#002e3d
  • editorHoverWidget.border#002e3d
  • editorIndentGuide.activeBackground#00485e
  • editorIndentGuide.background#002e3d
  • editorLineNumber.foreground#00485e
  • editorLink.activeForeground#ba90ff
  • editorMarkerNavigation.background#002e3d
  • editorMarkerNavigationError.background#ff5b6f
  • editorMarkerNavigationWarning.background#faf605
  • editorOverviewRuler.addedForeground#46fe7a7f
  • editorOverviewRuler.border#002e3d
  • editorOverviewRuler.commonContentForeground#ff963b
  • editorOverviewRuler.currentContentForeground#ba90ff
  • editorOverviewRuler.deletedForeground#ff5b6f7f
  • editorOverviewRuler.errorForeground#ff5b6f7f
  • editorOverviewRuler.findMatchForeground#ff963bbf
  • editorOverviewRuler.incomingContentForeground#ff5d94
  • editorOverviewRuler.infoForeground#ff5d947f
  • editorOverviewRuler.modifiedForeground#ff963b7f
  • editorOverviewRuler.rangeHighlightForeground#00485ebf
  • editorOverviewRuler.selectionHighlightForeground#002e3dbf
  • editorOverviewRuler.warningForeground#faf6057f
  • editorOverviewRuler.wordHighlightForeground#00485ebf
  • editorOverviewRuler.wordHighlightStrongForeground#00627ebf
  • editorPane.background#00141d
  • editorRuler.foreground#002e3d
  • editorSuggestWidget.background#002e3d
  • editorSuggestWidget.border#002e3d
  • editorSuggestWidget.foreground#00b0df
  • editorSuggestWidget.highlightForeground#c082ff
  • editorSuggestWidget.selectedBackground#00485e
  • editorWarning.border#00b0df
  • editorWarning.foreground#faf605
  • editorWhitespace.foreground#002e3d
  • editorWidget.background#002e3d
  • editorWidget.border#002e3d
  • errorForeground#ff5b6f
  • extensionButton.prominentBackground#ff5d94
  • extensionButton.prominentForeground#00141d
  • extensionButton.prominentHoverBackground#ba90ff
  • focusBorder#ff963b
  • foreground#00caff
  • gitDecoration.conflictingResourceForeground#ba90ff
  • gitDecoration.deletedResourceForeground#ff5b6f
  • gitDecoration.ignoredResourceForeground#00627e
  • gitDecoration.modifiedResourceForeground#ff963b
  • gitDecoration.untrackedResourceForeground#ff963b
  • input.background#002e3d
  • input.border#002e3d
  • input.foreground#00b0df
  • input.placeholderForeground#00485e
  • inputOption.activeBorder#ba90ff
  • inputValidation.errorBackground#002e3d
  • inputValidation.errorBorder#ff5b6f
  • inputValidation.infoBackground#002e3d
  • inputValidation.infoBorder#ff5d94
  • inputValidation.warningBackground#002e3d
  • inputValidation.warningBorder#faf605
  • list.activeSelectionBackground#ff963b
  • list.activeSelectionForeground#00141d
  • list.dropBackground#00627e
  • list.errorForeground#ff5b6f
  • list.focusBackground#00627e
  • list.focusForeground#00141d
  • list.highlightForeground#ff963b
  • list.hoverBackground#002e3d
  • list.hoverForeground#0096be
  • list.inactiveSelectionBackground#ff963b7f
  • list.inactiveSelectionForeground#ff963b
  • list.invalidItemForeground#ff5b6f
  • list.warningForeground#ff963b
  • listFilterWidget.background#002e3d
  • listFilterWidget.noMatchesOutline#ff5b6f
  • listFilterWidget.outline#ff5d94
  • merge.border#007c9e
  • merge.commonContentBackground#ff963b4c
  • merge.commonHeaderBackground#ff963b4c
  • merge.currentContentBackground#ba90ff4c
  • merge.currentHeaderBackground#ba90ff4c
  • merge.incomingContentBackground#ff5d944c
  • merge.incomingHeaderBackground#ff5d944c
  • notification.background#002e3d
  • notification.buttonBackground#ff5d94
  • notification.buttonForeground#00141d
  • notification.buttonHoverBackground#ba90ff
  • notification.errorBackground#ff5b6f
  • notification.errorForeground#00141d
  • notification.foreground#00caff
  • notification.infoBackground#ff5d94
  • notification.infoForeground#00141d
  • notification.warningBackground#faf605
  • notification.warningForeground#00141d
  • panel.background#00141d
  • panel.border#002e3d
  • panelTitle.activeBorder#00627e
  • panelTitle.activeForeground#00b0df
  • panelTitle.inactiveForeground#007c9e
  • peekView.border#c082ff
  • peekViewEditor.background#002e3d
  • peekViewEditor.matchHighlightBackground#ff963b7f
  • peekViewEditorGutter.background#002e3d
  • peekViewResult.background#002e3d
  • peekViewResult.fileForeground#00b0df
  • peekViewResult.lineForeground#00485e
  • peekViewResult.matchHighlightBackground#ff963b
  • peekViewResult.selectionBackground#00627e
  • peekViewResult.selectionForeground#00caff
  • peekViewTitle.background#00485e
  • peekViewTitleDescription.foreground#0096be
  • peekViewTitleLabel.foreground#00caff
  • pickerGroup.border#0096be
  • pickerGroup.foreground#00caff
  • progressBar.background#46fe7a
  • scrollbar.shadow#00141d
  • scrollbarSlider.activeBackground#0096be7f
  • scrollbarSlider.background#00627e7f
  • scrollbarSlider.hoverBackground#007c9e7f
  • selection.background#ba90ff4c
  • sideBar.background#00141d
  • sideBar.border#002e3d
  • sideBar.foreground#00b0df
  • sideBarSectionHeader.background#00485e
  • sideBarSectionHeader.foreground#00b0df
  • sideBarTitle.foreground#0096be
  • statusBar.background#00141d
  • statusBar.border#00141d
  • statusBar.debuggingBackground#faf605
  • statusBar.debuggingBorder#faf6057f
  • statusBar.debuggingForeground#00141d
  • statusBar.foreground#00b0df
  • statusBar.noFolderBackground#ff963b
  • statusBar.noFolderBorder#ff963b7f
  • statusBar.noFolderForeground#00141d
  • statusBarItem.activeBackground#ba90ff
  • statusBarItem.hoverBackground#00627e
  • statusBarItem.prominentBackground#ba90ff
  • statusBarItem.prominentHoverBackground#46fe7a
  • tab.activeBackground#00141d
  • tab.activeForeground#00b0df
  • tab.border#00141d
  • tab.inactiveBackground#002e3d
  • tab.inactiveForeground#0081a5
  • tab.unfocusedActiveForeground#00627e
  • tab.unfocusedInactiveForeground#00485e
  • terminal.ansiBlack#00141d
  • terminal.ansiBlue#ff5d94
  • terminal.ansiBrightBlack#002e3d
  • terminal.ansiBrightBlue#ff5d94
  • terminal.ansiBrightCyan#ba90ff
  • terminal.ansiBrightGreen#ba90ff
  • terminal.ansiBrightMagenta#c082ff
  • terminal.ansiBrightRed#faf605
  • terminal.ansiBrightWhite#00caff
  • terminal.ansiBrightYellow#ff963b
  • terminal.ansiCyan#ba90ff
  • terminal.ansiGreen#46fe7a
  • terminal.ansiMagenta#c082ff
  • terminal.ansiRed#ff5b6f
  • terminal.ansiWhite#00b0df
  • terminal.ansiYellow#ff963b
  • terminal.background#00141d
  • terminal.foreground#00b0df
  • terminal.selectionBackground#ff5d947f
  • terminalCursor.background#002e3d
  • terminalCursor.foreground#0096be
  • titleBar.activeBackground#00141d
  • titleBar.activeForeground#0096be
  • titleBar.inactiveBackground#00141d
  • titleBar.inactiveForeground#00627e
  • tree.indentGuidesStroke#002e3d
  • walkThrough.embeddedEditorBackground#00141d
  • welcomePage.buttonBackground#002e3d
  • welcomePage.buttonHoverBackground#00485e
  • widget.shadow#00141d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#00b0df
comment#00627e
constant#c082ff
entity#ba90ff
invalid#ff5b6f
keyword#ff963b
storage#c082ff
string#46fe7a
support#ba90ff
variable#00caff
markup.heading#ba90ff
markup.deleted#ff5b6f
markup.inserted#46fe7a
markup.changed#ff963b
markup.underlineunderline
markup.underline.link#ff5d94
markup.list#00caff
markup.raw#c082ff
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#0096beitalic
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#ff85ef
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#FF5D94
sourc by Vitor Alencar - VS Code Theme