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#191919
  • activityBar.foreground#7B797B
  • activityBar.inactiveForeground#303030
  • activityBarBadge.background#5D21D2
  • activityBarBadge.foreground#F1EDF1
  • badge.background#5D21D2
  • badge.foreground#F1EDF1
  • breadcrumb.background#191919
  • breadcrumb.focusForeground#F1EDF1
  • breadcrumb.foreground#7B797B
  • button.background#5D21D2
  • button.foreground#F1EDF1
  • commandCenter.activeBackground#1C1C1C
  • commandCenter.background#191919
  • commandCenter.border#1C1C1C
  • commandCenter.foreground#555555
  • debugToolBar.background#5D21D2
  • editor.background#191919
  • editor.foldBackground#7B797B25
  • editor.foreground#F1EDF1
  • editor.hoverHighlightBackground#211F39
  • editor.lineHighlightBackground#303030
  • editor.lineHighlightBorder#303030
  • editor.selectionBackground#6A6793
  • editor.selectionHighlightBackground#38335e
  • editorBracketMatch.background#303030
  • editorBracketMatch.border#303030
  • editorGroupHeader.tabsBackground#191919
  • editorHoverWidget.background#303030
  • editorHoverWidget.border#303030
  • editorHoverWidget.foreground#7B797B
  • editorIndentGuide.activeBackground#7B797B
  • editorIndentGuide.background#303030
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#444444
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#444444
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#444444
  • editorLineNumber.activeForeground#7B797B
  • editorLineNumber.foreground#303030
  • editorRuler.foreground#303030
  • editorSuggestWidget.background#191919
  • editorSuggestWidget.border#303030
  • editorSuggestWidget.foreground#7B797B
  • editorSuggestWidget.selectedBackground#1C1C1C
  • editorWidget.background#262626
  • editorWidget.border#5D21D2
  • focusBorder#303030
  • gitDecoration.ignoredResourceForeground#69698f
  • input.background#1C1C1C
  • input.border#303030
  • input.placeholderForeground#7B797B
  • inputOption.activeBackground#303030
  • inputOption.activeBorder#5D21D2
  • inputOption.activeForeground#F1EDF1
  • list.activeSelectionBackground#26262650
  • list.activeSelectionForeground#f2eeff
  • list.focusBackground#555555
  • list.focusForeground#F1EDF1
  • list.hoverBackground#1C1C1C
  • list.hoverForeground#7B797B
  • list.inactiveSelectionBackground#1C1C1C
  • menu.background#303030
  • menu.border#1C1C1C
  • menu.selectionBackground#1C1C1C
  • menu.selectionForeground#F1EDF1
  • menu.separatorBackground#262626
  • notificationCenterHeader.background#262626
  • notificationCenterHeader.foreground#F1EDF1
  • notifications.background#262626
  • notifications.border#303030
  • panel.border#1C1C1C
  • panelTitle.activeBorder#5D21D2
  • panelTitle.activeForeground#F1EDF1
  • panelTitle.inactiveForeground#7B797B
  • peekView.border#303030
  • peekViewEditor.background#303030
  • peekViewEditor.matchHighlightBackground#5D21D2
  • peekViewEditorGutter.background#1C1C1C
  • peekViewResult.background#191919
  • peekViewResult.fileForeground#7B797B
  • peekViewResult.lineForeground#7B797B
  • peekViewResult.matchHighlightBackground#5D21D250
  • peekViewResult.selectionBackground#303030
  • peekViewResult.selectionForeground#F1EDF1
  • peekViewTitle.background#191919
  • peekViewTitleDescription.foreground#303030
  • peekViewTitleLabel.foreground#7B797B
  • pickerGroup.foreground#7b797b
  • progressBar.background#5D21D2
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#303030
  • scrollbarSlider.hoverBackground#444444
  • settings.headerForeground#555555
  • settings.numberInputBorder#262626
  • settings.textInputBorder#262626
  • sideBar.background#191919
  • sideBar.border#191919
  • sideBar.foreground#e7e3f5ef
  • sideBarSectionHeader.background#191919
  • sideBarSectionHeader.border#1C1C1C
  • sideBarTitle.foreground#fff
  • statusBar.background#191919
  • statusBar.debuggingBackground#5D21D2
  • statusBar.debuggingForeground#F1EDF1
  • statusBar.foreground#7B797B
  • statusBar.noFolderBackground#191919
  • statusBar.noFolderForeground#7B797B
  • statusBarItem.remoteBackground#1C1C1C
  • statusBarItem.remoteForeground#F1EDF1
  • tab.activeBackground#1C1C1C
  • tab.activeForeground#F1EDF1
  • tab.border#191919
  • tab.hoverBackground#1C1C1C
  • tab.hoverForeground#d3cfe5
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#7B797B
  • terminal.background#191919
  • terminal.border#303030
  • terminal.foreground#7B797B
  • terminal.selectionBackground#303030
  • titleBar.activeBackground#191919
  • titleBar.activeForeground#7B797B
  • titleBar.inactiveBackground#191919
  • titleBar.inactiveForeground#7B797B
  • tree.indentGuidesStroke#303030
  • welcomePage.progress.background#1C1C1C
  • welcomePage.progress.foreground#5D21D2
  • welcomePage.tileBackground#191919
  • welcomePage.tileHoverBackground#303030
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.paragraph.markdown#7B797B—
markup.heading.markdown#FF61AB—
markup.fenced_code.block.markdown#FDFFB6—
comment, punctuation.definition.comment, string.quoted.docstring#7B797Bitalic
constant.character, constant.other#82AAFF—
entity.name.function.tsx, variable.other.readwrite.alias.tsx#FDFFB6—
string.template.ts, string.quoted.single.tsx, string.quoted.single.ts, string.template.tsx, string.template.ts, constant.numeric.decimal.ts, string.quoted.double.json, constant.language.boolean.true.tsx, constant.language.boolean.true.ts#FF61AB—
support.type.primitive.ts#E1A679—
punctuation.definition.binding-pattern.object.ts, punctuation.definition.binding-pattern.array.ts, punctuation.definition.block.tsx, meta.brace.square.ts#F1EDF1—
entity.name.tag.tsx, entity.name.type.class.tsx, meta.decorator.tsx, entity.name.type.struct.rust#FDFFB6—
storage.type.tsx, storage.type.function.ts, storage.type.function.tsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.import.tsx, keyword.control.from.tsx, storage.type.class.tsx, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.default.ts, keyword.control.default.tsx#B4BEFE—
meta.import.tsx, meta.import.ts#FF61AB—
meta.brace.round.ts#F1EDF1—
storage.type.function.arrow.tsx, keyword.operator.assignment.tsx#B4BEFE—
support.type.property-name.json, support.type.property-name.toml#dc8a78—
support.type.property-name.table.toml#FFC6FF—
variable.other.object.ts, variable.other.object.tsx#FCA669—
support.type.builtin.ts, constant.language.null.ts, constant.language.undefined.ts#6c7086—
keyword.operator.expression.typeof.ts#9399b2—
keyword.operator.expression.keyof.ts#6c7086—
keyword.control.as.ts#f5c2e7—
storage.type.ts#cad3f5—
variable.other.constant#F1EDF1—
meta.definition.variable.ts#F1EDF1—
storage.modifier.tsx#E1A679—
constant.language.null.tsx#FF6A99—
meta.jsx.children.tsx#A6ADC8—
meta.embedded.block.master-css.class#E0DF94—
Foretag Development Toolkit by Foretag - VS Code Theme