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#EDEFF2
  • activityBar.border#11141826
  • activityBar.foreground#111418
  • activityBarBadge.background#2D72D2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#2D72D2
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#111418
  • breadcrumb.background#EDEFF2
  • breadcrumb.focusForeground#111418
  • breadcrumb.foreground#252A31
  • breadcrumbPicker.background#EDEFF2
  • button.background#215DB0
  • button.foreground#FFFFFF
  • button.hoverBackground#215DB0
  • debugExceptionWidget.background#EDEFF2
  • debugExceptionWidget.border#11141826
  • debugToolBar.background#EDEFF2
  • descriptionForeground#252A31
  • disabledForeground#5f6b7c99
  • dropdown.background#FFFFFF
  • dropdown.border#11141826
  • dropdown.foreground#111418
  • dropdown.listBackground#EDEFF2
  • editor.background#FFFFFF
  • editor.findMatchBackground#72ca9b33
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#fbd06533
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#72ca9b1a
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#d3d8de33
  • editor.foreground#111418
  • editor.hoverHighlightBackground#00000000
  • editor.inactiveSelectionBackground#7dbcff99
  • editor.lineHighlightBackground#fbb3601a
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#72ca9b1a
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#7dbcff99
  • editor.selectionForeground#111418
  • editor.selectionHighlightBackground#abb3bf33
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#72ca9b33
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#8abbff33
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#C5CBD3
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#ABB3BF
  • editorCursor.background#215DB0
  • editorCursor.foreground#215DB0
  • editorError.background#cd42461a
  • editorError.foreground#AC2F33
  • editorGroup.border#11141826
  • editorGroup.dropBackground#ABB3BF
  • editorGroupHeader.noTabsBackground#EDEFF2
  • editorGroupHeader.tabsBackground#EDEFF2
  • editorGroupHeader.tabsBorder#11141826
  • editorGutter.addedBackground#32a46766
  • editorGutter.background#EDEFF2
  • editorGutter.commentRangeForeground#d3d8de80
  • editorGutter.deletedBackground#e76a6e80
  • editorGutter.modifiedBackground#4c90f080
  • editorHint.foreground#5F6B7C
  • editorHoverWidget.background#EDEFF2
  • editorHoverWidget.border#11141826
  • editorIndentGuide.activeBackground#C5CBD3
  • editorIndentGuide.background#EDEFF2
  • editorInfo.foreground#5F6B7C
  • editorInlayHint.background#FF01FF
  • editorLightBulb.foreground#2D72D2
  • editorLightBulbAutoFix.foreground#238551
  • editorLineNumber.activeForeground#5f6b7c99
  • editorLineNumber.foreground#5f6b7c99
  • editorLink.activeForeground#215DB0
  • editorMarkerNavigation.background#EDEFF2
  • editorMarkerNavigationError.background#EDEFF2
  • editorMarkerNavigationInfo.background#8f99a826
  • editorMarkerNavigationWarning.background#c876191a
  • editorOverviewRuler.addedForeground#32A467
  • editorOverviewRuler.bracketMatchForeground#C5CBD3
  • editorOverviewRuler.deletedForeground#E76A6E
  • editorOverviewRuler.errorForeground#AC2F33
  • editorOverviewRuler.findMatchForeground#fbd06533
  • editorOverviewRuler.infoForeground#5F6B7C
  • editorOverviewRuler.modifiedForeground#4C90F0
  • editorOverviewRuler.rangeHighlightForeground#fbd06533
  • editorOverviewRuler.selectionHighlightForeground#abb3bf33
  • editorOverviewRuler.warningForeground#935610
  • editorOverviewRuler.wordHighlightForeground#72ca9b33
  • editorOverviewRuler.wordHighlightStrongForeground#8abbff33
  • editorRuler.foreground#EDEFF2
  • editorWarning.foreground#935610
  • editorWhitespace.foreground#E5E8EB
  • editorWidget.background#EDEFF2
  • editorWidget.border#11141826
  • errorForeground#AC2F33
  • focusBorder#215DB0
  • foreground#111418
  • gitDecoration.conflictingResourceForeground#AC2F33
  • gitDecoration.deletedResourceForeground#AC2F33
  • gitDecoration.ignoredResourceForeground#ABB3BF
  • gitDecoration.modifiedResourceForeground#215DB0
  • gitDecoration.untrackedResourceForeground#C87619
  • icon.foreground#5F6B7C
  • input.background#FFFFFF
  • input.border#11141826
  • input.foreground#111418
  • input.placeholderForeground#5f6b7c99
  • inputOption.activeBorder#215DB0
  • inputValidation.errorBackground#cd42461a
  • inputValidation.errorBorder#00000000
  • inputValidation.infoBackground#8f99a826
  • inputValidation.infoBorder#00000000
  • inputValidation.warningBackground#c876191a
  • inputValidation.warningBorder#00000000
  • list.activeSelectionBackground#2d72d21a
  • list.activeSelectionForeground#111418
  • list.dropBackground#EDEFF2
  • list.focusBackground#fbb3601a
  • list.focusForeground#111418
  • list.highlightForeground#111418
  • list.hoverBackground#8f99a826
  • list.hoverForeground#111418
  • list.inactiveFocusBackground#fbb3601a
  • list.inactiveSelectionBackground#2d72d21a
  • list.inactiveSelectionForeground#111418
  • list.invalidItemForeground#AC2F33
  • notificationCenter.border#11141826
  • notificationCenterHeader.background#EDEFF2
  • notificationCenterHeader.foreground#252A31
  • notificationLink.foreground#215DB0
  • notifications.background#EDEFF2
  • notifications.border#11141826
  • notifications.foreground#252A31
  • notificationToast.border#11141826
  • panel.background#FFFFFF
  • panel.border#11141826
  • panel.dropBackground#ABB3BF
  • pickerGroup.border#11141826
  • pickerGroup.foreground#252A31
  • progressBar.background#215DB0
  • quickInput.background#EDEFF2
  • quickInput.foreground#111418
  • quickInputList.focusBackground#fbb3601a
  • quickInputList.focusForeground#111418
  • quickInputList.focusIconForeground#5F6B7C
  • quickInputTitle.background#EDEFF2
  • sash.hoverBorder#215DB0
  • scrollbar.shadow#ABB3BF
  • scrollbarSlider.activeBackground#215db033
  • scrollbarSlider.background#dce0e580
  • scrollbarSlider.hoverBackground#dce0e580
  • searchEditor.findMatchBackground#72ca9b33
  • searchEditor.findMatchBorder#00000000
  • searchEditor.textInputBorder#00000000
  • selection.background#7dbcff99
  • sideBar.background#FFFFFF
  • sideBar.border#11141826
  • sideBar.dropBackground#ABB3BF
  • sideBar.foreground#111418
  • sideBarSectionHeader.background#EDEFF2
  • sideBarSectionHeader.foreground#111418
  • sideBarTitle.foreground#111418
  • statusBar.background#EDEFF2
  • statusBar.border#11141826
  • statusBar.debuggingBackground#c876191a
  • statusBar.debuggingBorder#11141826
  • statusBar.debuggingForeground#935610
  • statusBar.foreground#252A31
  • statusBar.noFolderBackground#EDEFF2
  • statusBar.noFolderBorder#11141826
  • statusBarItem.activeBackground#FFFFFF
  • statusBarItem.hoverBackground#DCE0E5
  • statusBarItem.prominentBackground#2385511a
  • statusBarItem.prominentHoverBackground#2385511a
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#215DB0
  • tab.activeForeground#111418
  • tab.border#00000000
  • tab.hoverBackground#DCE0E5
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#111418
  • tab.unfocusedActiveBorder#11141826
  • tab.unfocusedActiveForeground#111418
  • tab.unfocusedHoverBackground#DCE0E5
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveForeground#111418
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#325CC0
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#007ACC
  • terminal.ansiBrightCyan#00AACB
  • terminal.ansiBrightGreen#60CB00
  • terminal.ansiBrightMagenta#E64CE6
  • terminal.ansiBrightRed#F05050
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFBC5D
  • terminal.ansiCyan#0083B2
  • terminal.ansiGreen#448C27
  • terminal.ansiMagenta#7A3E9D
  • terminal.ansiRed#AA3731
  • terminal.ansiWhite#BBBBBB
  • terminal.ansiYellow#CB9000
  • terminal.background#FFFFFF
  • terminal.foreground#111418
  • terminal.selectionBackground#7dbcff99
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#215db0b3
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#111418
  • titleBar.border#11141826
  • titleBar.inactiveBackground#EDEFF2
  • titleBar.inactiveForeground#5f6b7c99
  • toolbar.activeBackground#FFFFFF
  • toolbar.hoverBackground#DCE0E5
  • toolbar.hoverOutline#00000000
  • walkThrough.embeddedEditorBackground#FFFFFF
  • welcomePage.background#EDEFF2
  • welcomePage.progress.background#215DB0
  • welcomePage.progress.foreground#252A31
  • welcomePage.tileBackground#EDEFF2
  • welcomePage.tileHoverBackground#EDEFF2
  • welcomePage.tileShadow#ABB3BF
  • widget.shadow#ABB3BF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, punctuation, storage.type.function, meta.brace, storage.type, keyword.control, keyword.operator, keyword.control.import, keyword.control.at-rule, keyword.control, keyword.control.conditional, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, keyword.operator.assignment.cs, keyword.control.export, keyword.other.await, support.class.console, support.type.object.module, storage.type.class.jsdoc, storage.modifier#738091—
comment, punctuation.definition.comment#ABB3BF—
string, meta.jsx.children#238551—
variable#111418—
variable.parameter#EC9A3C—
entity.name.function#2D72D2italic
entity.name.type, support.type.primitive#9D3F9Dbold
constant, constant.numeric#8ABBFFbold
humanistic-theme by Anton Chebotaev - VS Code Theme