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.activeBackground#262626
  • activityBar.activeBorder#ffaf00
  • activityBar.background#000000
  • activityBar.dropBorder#ffaf00
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#767676
  • activityBarBadge.background#ffaf00
  • activityBarBadge.foreground#000000
  • badge.background#767676
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#d0d0d0
  • breadcrumb.focusForeground#d0d0d0
  • breadcrumb.foreground#d0d0d0
  • button.background#ffaf00
  • button.foreground#000000
  • button.hoverBackground#d78700
  • button.secondaryBackground#767676
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#d0d0d0
  • descriptionForeground#d78700
  • diffEditor.border#585858
  • diffEditor.diagonalFill#585858
  • diffEditor.insertedTextBackground#00af5f20
  • diffEditor.removedTextBackground#d7005f20
  • dropdown.background#303030
  • dropdown.border#767676
  • dropdown.foreground#d0d0d0
  • editor.background#000000
  • editor.findMatchBackground#00af5f40
  • editor.findMatchBorder#00af5f
  • editor.findRangeHighlightBorder#00af5f
  • editor.foldBackground#303030
  • editor.foreground#d0d0d0
  • editor.lineHighlightBackground#262626
  • editor.selectionBackground#0087d7
  • editor.selectionHighlightBackground#0087d740
  • editor.wordHighlightBackground#0087d740
  • editor.wordHighlightStrongBackground#0087d780
  • editor.wordHighlightStrongBorder#0087d7
  • editorBracketHighlight.foreground1#00afff
  • editorBracketHighlight.foreground2#ff87ff
  • editorBracketHighlight.foreground3#00d75f
  • editorBracketHighlight.foreground4#ff5f87
  • editorBracketHighlight.foreground5#00d7d7
  • editorBracketHighlight.foreground6#ffaf00
  • editorBracketMatch.background#262626
  • editorBracketMatch.border#767676
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorGroup.border#585858
  • editorGroup.dropBackground#303030
  • editorGroupHeader.tabsBackground#303030
  • editorGutter.addedBackground#00af5f
  • editorGutter.deletedBackground#d7005f
  • editorGutter.foldingControlForeground#767676
  • editorGutter.modifiedBackground#d78700
  • editorHoverWidget.statusBarBackground#303030
  • editorIndentGuide.activeBackground#767676
  • editorIndentGuide.background#585858
  • editorLightBulb.foreground#ffaf00
  • editorLightBulbAutoFix.foreground#00d75f
  • editorLineNumber.activeForeground#d0d0d0
  • editorLineNumber.foreground#585858
  • editorLink.activeForeground#ffaf00
  • editorOverviewRuler.border#585858
  • editorOverviewRuler.bracketMatchForeground#262626
  • editorOverviewRuler.errorForeground#d7005f
  • editorOverviewRuler.findMatchForeground#00af5f
  • editorOverviewRuler.infoForeground#0087d7
  • editorOverviewRuler.rangeHighlightForeground#00af5f
  • editorOverviewRuler.selectionHighlightForeground#0087d7
  • editorOverviewRuler.unicodeForeground#
  • editorOverviewRuler.warningForeground#d78700
  • editorOverviewRuler.wordHighlightForeground#0087d7
  • editorOverviewRuler.wordHighlightStrongForeground#d78700
  • editorRuler.foreground#585858
  • editorSuggestWidget.border#767676
  • editorUnicodeHighlight.border#
  • editorWhitespace.foreground#585858
  • editorWidget.background#303030
  • editorWidget.border#585858
  • errorForeground#d7005f
  • extensionBadge.remoteBackground#ffaf00
  • extensionBadge.remoteForeground#000000
  • extensionButton.prominentBackground#ffaf00
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#d78700
  • extensionIcon.preReleaseForeground#d78700
  • extensionIcon.starForeground#00afff
  • extensionIcon.verifiedForeground#d78700
  • focusBorder#ffaf00
  • foreground#d0d0d0
  • gitDecoration.addedResourceForeground#00af5f
  • gitDecoration.conflictingResourceForeground#d787d7
  • gitDecoration.deletedResourceForeground#d7005f
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#d78700
  • gitDecoration.renamedResourceForeground#0087d7
  • gitDecoration.stageDeletedResourceForeground#d7005f
  • gitDecoration.stageModifiedResourceForeground#ffaf00
  • gitDecoration.submoduleResourceForeground#0087d7
  • gitDecoration.untrackedResourceForeground#00af5f
  • icon.foreground#d0d0d0
  • input.background#000000
  • input.border#767676
  • input.foreground#d0d0d0
  • input.placeholderForeground#767676
  • inputOption.activeBackground#ffaf00
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#d7005f20
  • inputValidation.errorBorder#d7005f
  • inputValidation.infoBackground#0087d720
  • inputValidation.infoBorder#0087d7
  • inputValidation.warningBackground#d7870020
  • inputValidation.warningBorder#d78700
  • keybindingLabel.background#262626
  • keybindingLabel.foreground#d0d0d0
  • keybindingTable.headerBackground#262626
  • keybindingTable.rowsBackground#303030
  • list.activeSelectionBackground#0087d7
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#303030
  • list.errorForeground#d7005f
  • list.focusHighlightForeground#ffaf00
  • list.highlightForeground#ffaf00
  • list.hoverBackground#262626
  • list.inactiveSelectionBackground#262626
  • list.warningForeground#d78700
  • minimap.errorHighlight#d7005f
  • minimap.selectionHighlight#0087d7
  • minimap.selectionOccurrenceHighlight#0087d7
  • minimap.unicodeHighlight#
  • minimap.warningHighlight#d78700
  • minimapGutter.addedBackground#00af5f
  • minimapGutter.deletedBackground#d7005f
  • minimapGutter.modifiedBackground#d78700
  • notificationCenterHeader.background#262626
  • notificationLink.foreground#ffaf00
  • notifications.background#303030
  • notificationsErrorIcon.foreground#d7005f
  • notificationsInfoIcon.foreground#0087d7
  • notificationsWarningIcon.foreground#d78700
  • panel.border#585858
  • panel.dropBorder#ffaf00
  • panelTitle.activeBorder#ffaf00
  • panelTitle.inactiveForeground#767676
  • peekView.border#ffaf00
  • peekViewEditor.background#303030
  • peekViewEditor.matchHighlightBackground#00af5f40
  • peekViewEditor.matchHighlightBorder#00af5f
  • pickerGroup.border#585858
  • pickerGroup.foreground#d78700
  • ports.iconRunningProcessForeground#00d75f
  • progressBar.background#ffaf00
  • quickInput.background#303030
  • quickInputList.focusBackground#262626
  • quickInputTitle.background#262626
  • sash.hoverBorder#ffaf00
  • scrollbarSlider.activeBackground#767676
  • scrollbarSlider.background#585858
  • scrollbarSlider.hoverBackground#d0d0d0
  • searchEditor.findMatchBorder#
  • selection.background#0087d7
  • settings.focusedRowBackground#303030
  • settings.focusedRowBorder#ffaf00
  • settings.headerForeground#d0d0d0
  • settings.modifiedItemIndicator#ffaf00
  • settings.rowHoverBackground#303030
  • sideBar.background#303030
  • sideBar.dropBackground#
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#262626
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#d0d0d0
  • statusBar.debuggingBackground#d7005f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBarItem.activeBackground#00000000
  • statusBarItem.errorBackground#d7005f
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.remoteBackground#d7005f
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#d78700
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#000000
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#303030
  • tab.inactiveForeground#d0d0d0
  • tab.lastPinnedBorder#262626
  • tab.unfocusedActiveForeground#d0d0d0
  • tab.unfocusedInactiveForeground#d0d0d0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0087d7
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#00afff
  • terminal.ansiBrightCyan#00d7d7
  • terminal.ansiBrightGreen#00d75f
  • terminal.ansiBrightMagenta#ff87ff
  • terminal.ansiBrightRed#ff5f87
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffaf00
  • terminal.ansiCyan#00afaf
  • terminal.ansiGreen#00af5f
  • terminal.ansiMagenta#d787d7
  • terminal.ansiRed#d7005f
  • terminal.ansiWhite#d0d0d0
  • terminal.ansiYellow#d78700
  • terminal.background#000000
  • terminal.border#585858
  • terminal.foreground#d0d0d0
  • terminal.selectionBackground#0087d7
  • terminal.selectionForeground#000000
  • textCodeBlock.background#303030
  • textLink.activeForeground#ffaf00
  • textLink.foreground#d78700
  • textPreformat.foreground#ff87ff
  • toolbar.hoverBackground#303030
  • tree.indentGuidesStroke#585858
  • tree.tableColumnsBorder#303030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.undefined, keyword, storage.modifier, variable.language.this, variable.language.super, storage.type.function.js, storage.type.function.ts, storage.type.class.js, storage.type.class.ts, storage.type.js, storage.type.ts, storage.type.type.ts, source.css support.function#00afff—
constant.character.escape#875fff—
keyword.operator, constant.character.escape, punctuation.definition.logical, punctuation.definition.quote, punctuation.definition.list, punctuation.definition.para, punctuation.definition.template-expression, punctuation.definition.attribute#00afff—
entity.name.type, punctuation.definition.group, support.type.primitive, storage.type#ffaf00—
storage.type.annotation, variable.parameter#ff87ff—
string, markup.quote, constant.other.reference, markup.underline.link#00d75f—
comment, meta.separator#767676—
entity.name.function#ff87ff—
constant.numeric, constant.language.null, constant.language.boolean#ff5f87—
variable, meta.import variable.other.readwrite.alias#d0d0d0—
entity.name.tag, variable.other.property, variable.other.normal.shell, punctuation.definition.variable.shell, punctuation.definition.character-class, constant.other.character-class, entity.other.attribute-name, support.type.property-name, meta.import variable#ff87ff—
variable.other.enummember, variable.other.constant, punctuation.definition.character-class#d0d0d0—
Normal#d0d0d0—
heading, markup.bold#ffaf00—
markup.inline.raw, markup.italic, markup.bold, markup.strikethrough#00afff—
string.other.link.title.markdown#ffaf00—
heading—bold
entity.name.tag.html, entity.name.tag.css, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, entity.name.tag.template.html.vue#ffaf00—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.html, meta.attribute.id.html string#ff5f87—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.html, meta.attribute.class.html string#00afff—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.html#00d7d7—
entity.other.attribute-name.css, entity.other.attribute-name.html#00d75f—
Pire Theme by notxkcd - VS Code Theme