Skip to main content
CodingTheme

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#121521
  • activityBar.foreground#5B5F71
  • activityBarBadge.background#5B5F71
  • activityBarBadge.foreground#F2F2F2
  • badge.background#5B5F71
  • badge.foreground#F2F2F2
  • breadcrumb.activeSelectionForeground#F2F2F2
  • breadcrumb.focusForeground#F2F2F2
  • breadcrumb.foreground#BFBFBF
  • breadcrumbPicker.background#161928
  • button.background#121521
  • button.foreground#F2F2F2
  • button.hoverBackground#12152177
  • debugExceptionWidget.background#FFC04D
  • debugToolBar.background#121521
  • debugToolBar.border#5B5F71
  • descriptionForeground#E5E5E5
  • diffEditor.border#242A42
  • diffEditor.insertedTextBackground#4AC94877
  • diffEditor.insertedTextBorder#4AC948
  • diffEditor.removedTextBackground#FF6D6D77
  • diffEditor.removedTextBorder#FF6D6D
  • dropdown.background#242A42
  • dropdown.foreground#A6A6A6
  • dropdown.listBackground#242A42
  • editor.background#121521
  • editor.focusedStackFrameHighlightBackground#00FF00
  • editor.foreground#E5E5E5
  • editor.inactiveSelectionBackground#3A4055
  • editor.selectionBackground#3A4055
  • editor.selectionForeground#242A42
  • editor.selectionHighlightBackground#3A4055
  • editor.selectionHighlightBorder#F2F2F2
  • editor.snippetFinalTabstopHighlightBackground#242A42
  • editor.snippetFinalTabstopHighlightBorder#FFFFFF
  • editor.snippetTabstopHighlightBackground#242A42
  • editor.snippetTabstopHighlightBorder#FFFFFF
  • editor.stackFrameHighlightBackground#5B5F71
  • editorCursor.background#121521
  • editorCursor.foreground#F2F2F2
  • editorError.border#FF6D6D
  • editorError.foreground#FF6D6D
  • editorGroup.border#5B5F71
  • editorGroup.dropBackground#5B5F7177
  • editorGroupHeader.noTabsBackground#191D2E
  • editorGroupHeader.tabsBackground#191D2E
  • editorGutter.addedBackground#80D97E
  • editorGutter.deletedBackground#FF6D6D
  • editorGutter.modifiedBackground#60B1FF
  • editorHint.border#41CFFF
  • editorHint.foreground#41CFFF
  • editorHoverWidget.background#0E101B
  • editorHoverWidget.border#A6A6A6
  • editorInfo.border#1E90FF
  • editorInfo.foreground#1E90FF
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#A6A6A6
  • editorMarkerNavigation.background#121521
  • editorMarkerNavigationError.background#FF6D6D
  • editorMarkerNavigationInfo.background#1E90FF
  • editorMarkerNavigationWarning.background#FFC04D
  • editorSuggestWidget.background#0E101B
  • editorSuggestWidget.border#242A42
  • editorSuggestWidget.foreground#A6A6A6
  • editorSuggestWidget.highlightForeground#F2F2F2
  • editorSuggestWidget.selectedBackground#242A42
  • editorUnnecessaryCode.border#FF0000
  • editorUnnecessaryCode.opacity#FF0000
  • editorWarning.border#FFC04D
  • editorWarning.foreground#FFC04D
  • editorWidget.background#0E101B
  • editorWidget.border#A6A6A6
  • editorWidget.resizeBorder#1E90FF
  • errorForeground#FFCCCC
  • extensionButton.prominentBackground#2F354C
  • extensionButton.prominentForeground#F2F2F2
  • extensionButton.prominentHoverBackground#121521
  • focusBorder#242A42
  • foreground#F2F2F2
  • gitDecoration.addedResourceForeground#B6E9B5
  • gitDecoration.conflictingResourceForeground#E5FFFF
  • gitDecoration.deletedResourceForeground#FFAAAA
  • gitDecoration.ignoredResourceForeground#FFF49A
  • gitDecoration.modifiedResourceForeground#A3D2FF
  • gitDecoration.submoduleResourceForeground#FF93FF
  • gitDecoration.untrackedResourceForeground#A6A6A6
  • input.background#242A42
  • inputOption.activeBorder#F2F2F2
  • inputValidation.errorBackground#FF4D4D
  • inputValidation.errorBorder#FF4D4D
  • inputValidation.errorForeground#FFCCCC
  • inputValidation.infoBackground#2ACAFF
  • inputValidation.infoBorder#2ACAFF
  • inputValidation.infoForeground#BBEEFF
  • inputValidation.warningBackground#FFA824
  • inputValidation.warningBorder#FFA824
  • inputValidation.warningForeground#FFEAC4
  • list.activeSelectionBackground#191D2E
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#242A42
  • list.errorForeground#FF6D6D
  • list.focusBackground#191D2E
  • list.focusForeground#F2F2F2
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#242A42
  • list.hoverForeground#D9D9D9
  • list.inactiveSelectionBackground#121521
  • list.inactiveSelectionForeground#A6A6A6
  • list.invalidItemForeground#FF6D6D
  • list.warningForeground#FFC04D
  • menu.background#1D2235
  • menu.foreground#F2F2F2
  • menu.selectionBackground#F2F2F2
  • menu.selectionBorder#121521
  • menu.selectionForeground#242A42
  • menu.separatorBackground#7F7F7F
  • menubar.selectionBackground#1D2235
  • menubar.selectionForeground#A6A6A6
  • notificationCenter.border#242A42
  • notificationCenterHeader.background#1D2235
  • notificationCenterHeader.foreground#F2F2F2
  • notificationLink.foreground#F2F2F2
  • notifications.background#1D2235
  • notifications.border#121521
  • notifications.foreground#A6A6A6
  • notificationToast.border#121521
  • panel.background#121521
  • panel.border#3A4055
  • panelTitle.activeBorder#F2F2F2
  • panelTitle.activeForeground#F2F2F2
  • panelTitle.inactiveForeground#BFBFBF
  • peekView.border#242A42
  • peekViewEditor.background#242A42
  • peekViewEditor.matchHighlightBackground#191D2E
  • peekViewEditorGutter.background#1D2235
  • peekViewResult.background#1D2235
  • peekViewResult.fileForeground#242A42
  • peekViewResult.lineForeground#A6A6A6
  • peekViewResult.matchHighlightBackground#121521
  • peekViewResult.selectionBackground#191D2E
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#191D2E
  • peekViewTitleDescription.foreground#A6A6A6
  • peekViewTitleLabel.foreground#F2F2F2
  • pickerGroup.border#242A42
  • pickerGroup.foreground#A6A6A6
  • selection.background#5B5F7177
  • settings.checkboxBackground#242A42
  • settings.checkboxForeground#A6A6A6
  • settings.dropdownBackground#242A42
  • settings.dropdownForeground#A6A6A6
  • settings.headerForeground#F2F2F2
  • settings.modifiedItemIndicator#1E90FF
  • settings.numberInputBackground#242A42
  • settings.numberInputForeground#A6A6A6
  • settings.textInputBackground#242A42
  • settings.textInputForeground#A6A6A6
  • sideBar.background#0E101B
  • sideBar.dropBackground#FF000077
  • sideBar.foreground#F2F2F2
  • sideBarSectionHeader.background#121521
  • sideBarSectionHeader.foreground#8C8C8C
  • sideBarTitle.foreground#F2F2F2
  • statusBar.background#191D2E
  • statusBar.debuggingBackground#41CFFF
  • statusBar.debuggingForeground#F2F2F2
  • statusBar.foreground#A6A6A6
  • statusBar.noFolderBackground#A6A6A6
  • statusBar.noFolderForeground#191D2E
  • statusBarItem.activeBackground#121521
  • statusBarItem.hoverBackground#242A42
  • statusBarItem.prominentBackground#191D2E
  • statusBarItem.prominentHoverBackground#242A42
  • tab.activeBorder#454A5E
  • tab.hoverBackground#242A4277
  • tab.hoverBorder#A6A6A6
  • tab.inactiveBackground#161928
  • tab.inactiveForeground#BFBFBF
  • tab.unfocusedActiveBorderTop#242A42
  • tab.unfocusedActiveForeground#A6A6A6
  • tab.unfocusedHoverBackground#242A4277
  • tab.unfocusedInactiveForeground#A6A6A6
  • terminal.ansiBlack#292121
  • terminal.ansiBlue#1E90FF
  • terminal.ansiBrightBlack#AEAEAE
  • terminal.ansiBrightBlue#60B1FF
  • terminal.ansiBrightCyan#99FFFF
  • terminal.ansiBrightGreen#80D97E
  • terminal.ansiBrightMagenta#FF93FF
  • terminal.ansiBrightRed#FF6F6F
  • terminal.ansiBrightWhite#F7F7F7
  • terminal.ansiBrightYellow#FFF49A
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#4AC948
  • terminal.ansiMagenta#FF41FF
  • terminal.ansiRed#FF3333
  • terminal.ansiWhite#F2F2F2
  • terminal.ansiYellow#FFE303
  • terminal.background#121521
  • terminal.foreground#BFBFBF
  • terminal.selectionBackground#5B5F7177
  • terminalCursor.background#F2F2F277
  • terminalCursor.foreground#5B5F71
  • textBlockQuote.background#242A42
  • textCodeBlock.background#191D2E
  • textLink.activeForeground#F2F2F2
  • textLink.foreground#A6A6A6
  • textPreformat.foreground#60B1FF
  • titleBar.activeBackground#191D2E
  • titleBar.activeForeground#F2F2F2
  • titleBar.border#242A42
  • titleBar.inactiveBackground#191D2E
  • titleBar.inactiveForeground#A6A6A6
  • walkThrough.embeddedEditorBackground#121521
  • welcomePage.buttonBackground#121521
  • welcomePage.buttonHoverBackground#12152177
  • widget.shadow#121521

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5B5F71italic
keyword.control.at-rule#5CF8C9italic
entity.name.tag, punctuation.definition.tag#FE4980
entity.other.attribute-name.class, punctuation.definition.entity#FF6F7C
entity.other.attribute-name.id#82BBEA
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, keyword.other.unit#F66D9Bitalic
keyword.other.important#FFED4A
support.type.property-name, meta.property-name#C4C4FF
entity.other.attribute-name, meta.attribute-selector#75BEFF
support.constant.property-value, meta.property-value#E6E6E6
support.class, entity.name.type.namespace#4BC9B0
constant.numeric#FF6F7Citalic
constant.other#E2C196italic
support.function#5CF8C9
string.quoted.double, string.quoted.single#C1E8CF
keyword.operator#8FE4DC
punctuation#88F7DE
punctuation.section.embedded#9691FB
support.function.construct.output#FE4980
storage.type, keyword, keyword.other.phpdoc#ED9EF8bold italic
storage.modifier#84B7F4bold
entity.name.function, support.function#53AFF4
keyword.control, keyword.other#C4C4FF
variable.other, punctuation.definition.variable#F98487
variable.language.this#F984CD
variable.language.thisitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Dragonight by teamdragonight - VS Code Theme