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#0000
  • activityBar.activeBorder#fff
  • activityBar.activeFocusBorder#fff
  • activityBar.background#000
  • activityBar.border#fff
  • activityBar.dropBorder#fff
  • activityBar.foreground#fff
  • activityBar.inactiveForeground#fff
  • activityBarBadge.background#000
  • activityBarBadge.foreground#fff
  • activityBarItem.profilesBackground#000
  • activityBarItem.profilesForeground#fff
  • activityBarItem.profilesHoverForeground#fff
  • activityBarTop.activeBorder#ffffff
  • activityBarTop.dropBorder#ffffff
  • activityBarTop.foreground#ffffff
  • activityBarTop.inactiveForeground#ffffff
  • badge.background#000
  • badge.foreground#fff
  • banner.background#0000
  • banner.foreground#fff
  • banner.iconForeground#fff
  • button.background#000
  • button.border#fff
  • button.foreground#fff
  • button.hoverBackground#000
  • button.secondaryBackground#000
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#000
  • button.separator#fff
  • checkbox.background#000
  • checkbox.border#fff
  • checkbox.foreground#fff
  • checkbox.selectBackground#000
  • checkbox.selectBorder#fff
  • contrastActiveBorder#0000
  • contrastBorder#fff
  • debugIcon.breakpointForeground#fff
  • debugIcon.pauseForeground#fff
  • debugIcon.restartForeground#fff
  • debugIcon.startForeground#fff
  • debugIcon.stepBackForeground#fff
  • debugIcon.stepIntoForeground#fff
  • debugIcon.stepOutForeground#fff
  • debugIcon.stepOverForeground#fff
  • debugIcon.stopForeground#fff
  • descriptionForeground#fff
  • disabledForeground#ffffff80
  • dropdown.background#000
  • dropdown.border#fff
  • dropdown.foreground#fff
  • dropdown.listBackground#000
  • editor.background#000
  • editor.findMatchBackground#fff
  • editor.findMatchBorder#0000
  • editor.findMatchHighlightBackground#ffffff80
  • editor.findMatchHighlightBorder#0000
  • editor.findRangeHighlightBackground#ffffff80
  • editor.findRangeHighlightBorder#0000
  • editor.foldBackground#0000
  • editor.foreground#fff
  • editor.hoverHighlightBackground#ffffff80
  • editor.inactiveSelectionBackground#ffffff80
  • editor.lineHighlightBackground#0000
  • editor.lineHighlightBorder#0000
  • editor.linkedEditingBackground#000
  • editor.rangeHighlightBackground#0000
  • editor.rangeHighlightBorder#0000
  • editor.selectionBackground#ffffff80
  • editor.selectionForeground#000
  • editor.selectionHighlightBackground#ffffff80
  • editor.selectionHighlightBorder#ffffff80
  • editor.symbolHighlightBackground#ffffff80
  • editor.symbolHighlightBorder#fff
  • editor.wordHighlightBackground#ffffff80
  • editor.wordHighlightBorder#0000
  • editor.wordHighlightStrongBackground#ffffff80
  • editor.wordHighlightStrongBorder#0000
  • editorBracketHighlight.foreground1#0000
  • editorBracketHighlight.foreground2#0000
  • editorBracketHighlight.foreground3#0000
  • editorBracketHighlight.foreground4#0000
  • editorBracketHighlight.foreground5#0000
  • editorBracketHighlight.foreground6#0000
  • editorBracketHighlight.unexpectedBracket.foreground#fff
  • editorBracketMatch.background#0000
  • editorBracketMatch.border#0000
  • editorBracketPairGuide.activeBackground1#000
  • editorBracketPairGuide.activeBackground2#000
  • editorBracketPairGuide.activeBackground3#000
  • editorBracketPairGuide.activeBackground4#000
  • editorBracketPairGuide.activeBackground5#000
  • editorBracketPairGuide.activeBackground6#000
  • editorBracketPairGuide.background1#000
  • editorBracketPairGuide.background2#000
  • editorBracketPairGuide.background3#000
  • editorBracketPairGuide.background4#000
  • editorBracketPairGuide.background5#000
  • editorBracketPairGuide.background6#000
  • editorCodeLens.foreground#fff
  • editorCommentsWidget.rangeActiveBackground#000
  • editorCommentsWidget.rangeActiveBorder#fff
  • editorCommentsWidget.rangeBackground#000
  • editorCommentsWidget.rangeBorder#fff
  • editorCommentsWidget.resolvedBorder#fff
  • editorCommentsWidget.unresolvedBorder#fff
  • editorCursor.background#000
  • editorCursor.foreground#fff
  • editorError.background#0000
  • editorError.border#fff
  • editorError.foreground#fff
  • editorGroup.border#fff
  • editorGroup.dropBackground#ffffff80
  • editorGroup.dropIntoPromptBackground#000
  • editorGroup.dropIntoPromptBorder#fff
  • editorGroup.dropIntoPromptForeground#fff
  • editorGroup.emptyBackground#000
  • editorGroup.focusedEmptyBorder#fff
  • editorGroupHeader.border#fff
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#fff
  • editorGutter.addedBackground#000
  • editorGutter.background#000
  • editorGutter.commentRangeForeground#fff
  • editorGutter.deletedBackground#000
  • editorGutter.foldingControlForeground#fff
  • editorGutter.modifiedBackground#000
  • editorHint.border#fff
  • editorHint.foreground#fff
  • editorIndentGuide.activeBackground1#0000
  • editorIndentGuide.background1#0000
  • editorInfo.background#0000
  • editorInfo.border#fff
  • editorInfo.foreground#fff
  • editorInlayHint.background#0000
  • editorInlayHint.foreground#fff
  • editorInlayHint.parameterBackground#0000
  • editorInlayHint.parameterForeground#fff
  • editorInlayHint.typeBackground#0000
  • editorInlayHint.typeForeground#fff
  • editorLightBulb.foreground#fff
  • editorLightBulbAutoFix.foreground#fff
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#ffffff80
  • editorLink.activeForeground#fff
  • editorOverviewRuler.addedForeground#ffffff80
  • editorOverviewRuler.background#000
  • editorOverviewRuler.border#fff
  • editorOverviewRuler.bracketMatchForeground#ffffff80
  • editorOverviewRuler.deletedForeground#ffffff80
  • editorOverviewRuler.errorForeground#0000
  • editorOverviewRuler.findMatchForeground#ffffff80
  • editorOverviewRuler.infoForeground#ffffff80
  • editorOverviewRuler.modifiedForeground#ffffff80
  • editorOverviewRuler.rangeHighlightForeground#ffffff80
  • editorOverviewRuler.selectionHighlightForeground#ffffff80
  • editorOverviewRuler.warningForeground#0000
  • editorOverviewRuler.wordHighlightForeground#ffffff80
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff80
  • editorPane.background#000
  • editorRuler.foreground#fff
  • editorSuggestWidget.background#000
  • editorUnicodeHighlight.background#000
  • editorUnicodeHighlight.border#fff
  • editorUnnecessaryCode.border#fff
  • editorUnnecessaryCode.opacity#0000
  • editorWarning.background#0000
  • editorWarning.border#fff
  • editorWarning.foreground#fff
  • editorWhitespace.foreground#0000
  • editorWidget.background#000
  • editorWidget.border#fff
  • editorWidget.foreground#fff
  • editorWidget.resizeBorder#fff
  • errorForeground#fff
  • extensionBadge.remoteBackground#000
  • extensionBadge.remoteForeground#fff
  • extensionButton.background#000
  • extensionButton.foreground#fff
  • extensionButton.hoverBackground#000
  • extensionButton.prominentBackground#fff
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#000
  • extensionButton.separator#fff
  • extensionIcon.preReleaseForeground#ffffff80
  • extensionIcon.sponsorForeground#ffffff80
  • extensionIcon.starForeground#ffffff80
  • extensionIcon.verifiedForeground#ffffff80
  • focusBorder#0000
  • foreground#fff
  • gitDecoration.addedResourceForeground#fff
  • gitDecoration.conflictingResourceForeground#ffffff80
  • gitDecoration.deletedResourceForeground#ffffff80
  • gitDecoration.ignoredResourceForeground#fff
  • gitDecoration.modifiedResourceForeground#fff
  • gitDecoration.renamedResourceForeground#fff
  • gitDecoration.stageDeletedResourceForeground#ffffff80
  • gitDecoration.stageModifiedResourceForeground#fff
  • gitDecoration.submoduleResourceForeground#fff
  • gitDecoration.untrackedResourceForeground#fff
  • icon.foreground#fff
  • input.background#000
  • input.border#fff
  • input.foreground#fff
  • input.placeholderForeground#808080
  • inputOption.activeBackground#fff
  • inputOption.activeBorder#0000
  • inputOption.activeForeground#000
  • inputOption.hoverBackground#0000
  • inputValidation.errorBackground#000
  • inputValidation.errorBorder#fff
  • inputValidation.errorForeground#fff
  • inputValidation.infoBackground#000
  • inputValidation.infoBorder#fff
  • inputValidation.infoForeground#fff
  • inputValidation.warningBackground#000
  • inputValidation.warningBorder#fff
  • inputValidation.warningForeground#fff
  • keybindingLabel.background#000
  • keybindingLabel.border#fff
  • keybindingLabel.bottomBorder#fff
  • keybindingLabel.foreground#fff
  • list.activeSelectionBackground#0000
  • list.activeSelectionForeground#fff
  • list.activeSelectionIconForeground#fff
  • list.deemphasizedForeground#fff
  • list.dropBackground#808080
  • list.errorForeground#fff
  • list.filterMatchBackground#ffffff80
  • list.filterMatchBorder#fff
  • list.focusAndSelectionOutline#0000
  • list.focusBackground#0000
  • list.focusForeground#fff
  • list.focusHighlightForeground#fff
  • list.focusOutline#0000
  • list.highlightForeground#fff
  • list.hoverBackground#0000
  • list.hoverForeground#fff
  • list.inactiveFocusBackground#000
  • list.inactiveFocusOutline#fff
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#fff
  • list.inactiveSelectionIconForeground#fff
  • list.invalidItemForeground#fff
  • list.warningForeground#fff
  • listFilterWidget.background#0000
  • listFilterWidget.noMatchesOutline#fff
  • listFilterWidget.outline#fff
  • listFilterWidget.shadow#0000
  • minimap.background#0000
  • minimap.errorHighlight#fff
  • minimap.findMatchHighlight#ffffff80
  • minimap.foregroundOpacity#fff
  • minimap.selectionHighlight#ffffff80
  • minimap.selectionOccurrenceHighlight#ffffff80
  • minimap.warningHighlight#fff
  • minimapGutter.addedBackground#fff
  • minimapGutter.deletedBackground#fff
  • minimapGutter.modifiedBackground#fff
  • minimapSlider.activeBackground#ffffff80
  • minimapSlider.background#ffffff80
  • minimapSlider.hoverBackground#ffffff80
  • notificationCenter.border#fff
  • notificationCenterHeader.background#000
  • notificationCenterHeader.foreground#fff
  • notificationLink.foreground#fff
  • notifications.background#000
  • notifications.border#fff
  • notifications.foreground#fff
  • notificationsErrorIcon.foreground#fff
  • notificationsInfoIcon.foreground#fff
  • notificationsWarningIcon.foreground#fff
  • notificationToast.border#fff
  • panel.background#000
  • panel.border#fff
  • panel.dropBorder#fff
  • panelInput.border#fff
  • panelSection.border#fff
  • panelSection.dropBackground#ffffff80
  • panelSectionHeader.background#000
  • panelSectionHeader.border#fff
  • panelSectionHeader.foreground#fff
  • panelTitle.activeBorder#fff
  • panelTitle.activeForeground#fff
  • panelTitle.inactiveForeground#fff
  • problemsErrorIcon.foreground#fff
  • problemsInfoIcon.foreground#fff
  • problemsWarningIcon.foreground#fff
  • progressBar.background#fff
  • sash.hoverBorder#0000
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#fff
  • scrollbarSlider.background#fff
  • scrollbarSlider.hoverBackground#fff
  • searchEditor.findMatchBackground#ffffff80
  • searchEditor.findMatchBorder#fff
  • searchEditor.textInputBorder#fff
  • selection.background#808080
  • sideBar.background#000
  • sideBar.border#fff
  • sideBar.dropBackground#ffffff80
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.border#fff
  • sideBarSectionHeader.foreground#fff
  • sideBarTitle.foreground#fff
  • sideBySideEditor.horizontalBorder#fff
  • sideBySideEditor.verticalBorder#fff
  • statusBar.background#000
  • statusBar.border#fff
  • statusBar.debuggingBackground#000
  • statusBar.debuggingBorder#fff
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#000
  • statusBar.noFolderBorder#fff
  • statusBar.noFolderForeground#fff
  • statusBarItem.activeBackground#000
  • statusBarItem.hoverBackground#000
  • statusBarItem.prominentBackground#000
  • statusBarItem.prominentForeground#fff
  • statusBarItem.prominentHoverBackground#000
  • tab.activeBackground#000
  • tab.activeBorder#fff
  • tab.activeBorderTop#fff
  • tab.activeForeground#fff
  • tab.activeModifiedBorder#fff
  • tab.border#fff
  • tab.hoverBackground#000
  • tab.hoverBorder#fff
  • tab.hoverForeground#fff
  • tab.inactiveBackground#000
  • tab.inactiveForeground#fff
  • tab.inactiveModifiedBorder#fff
  • tab.lastPinnedBorder#fff
  • tab.unfocusedActiveBackground#000
  • tab.unfocusedActiveBorder#fff
  • tab.unfocusedActiveBorderTop#fff
  • tab.unfocusedActiveForeground#fff
  • tab.unfocusedActiveModifiedBorder#fff
  • tab.unfocusedHoverBackground#000
  • tab.unfocusedHoverBorder#fff
  • tab.unfocusedHoverForeground#fff
  • tab.unfocusedInactiveBackground#000
  • tab.unfocusedInactiveForeground#fff
  • tab.unfocusedInactiveModifiedBorder#fff
  • terminal.background#000
  • terminal.border#fff
  • terminal.foreground#fff
  • textBlockQuote.background#000
  • textBlockQuote.border#fff
  • textCodeBlock.background#ffffff80
  • textLink.activeForeground#fff
  • textLink.foreground#fff
  • textPreformat.foreground#000
  • textSeparator.foreground#fff
  • toolbar.activeBackground#000
  • toolbar.hoverBackground#000
  • toolbar.hoverOutline#0000
  • tree.indentGuidesStroke#0000
  • tree.tableColumnsBorder#fff
  • tree.tableOddRowsBackground#000
  • welcomePage.background#000
  • widget.shadow#0000
  • window.activeBorder#0000
  • window.inactiveBorder#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.color.rgb-value, constant.character.escape, constant.other.rgb-value, constant.numeric.integer, constant.numeric.float, constant.numeric.octal, constant.numeric.hex, constant.character, constant.rgb-value, constant.language, constant.numeric, constant.regexp, constant.other, constant, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.parent.less, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.scss, entity.other.inherited-class, entity.name.scope-resolution, entity.other.attribute-name, entity.name.namespace, entity.name.tag.less, entity.name.function, entity.name.selector, entity.name.section, entity.name.tag.css, entity.name.method, entity.name.class, entity.name.type, entity.name.tag, entity.other, entity.name, entity, keyword.operator.logical.python, keyword.other.directive.using, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.expression, keyword.operator.logical, keyword.operator.sizeof, keyword.other.operator, keyword.operator.cast, keyword.operator.new, keyword.other.using, keyword.other.unit, keyword.operator, keyword.control, keyword.other, keyword, meta.definition.variable.name, meta.object-literal.key, meta.type.annotation, meta.function-call, meta.preprocessor, meta.return-type, meta.diff.header, meta.function, meta.selector, meta.block, meta.class, meta.cast, meta.type, meta.tag, meta, support.constant.property-value, support.constant.media-type, support.type.property-name, support.constant.font-name, support.constant.media, support.constant.color, support.function, support.variable, support.constant, support.class, support.other, support.type, support, variable.other.readwrite, variable.language.this, variable.parameter, variable.language, variable.other, variable.name, variable, string.quoted.single, string.quoted.double, string.quoted.triple, string.interpolated, string.quoted.other, string.unquoted, string.quoted, string.regexp, string.other, string.value, string.tag, string, source.css entity.other.attribute-name.pseudo-class, source.css.less entity.other.attribute-name.id, source.css entity.other.attribute-name.class, source.cpp keyword.operator.delete, source.cpp keyword.operator.new, invalid.deprecated, invalid.illegal, invalid, emphasis, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, storage.modifier, storage.type, storage#fff—
string.quoted.docstring.multi.python, comment, comment.block, comment.block.documentation, comment.line#ffffff80—
beginning.punctuation, entity.name.section.group-title, entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.id, keyword.const, keyword.control, keyword.function, keyword.import, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.expression, keyword.operator.increment, keyword.operator.increment-decrement, keyword.operator.logical, keyword.operator.misc, keyword.operator.new, keyword.operator.other, keyword.operator.ternary, keyword.other.fn, keyword.other.rust, keyword.other.special-method, keyword.other.where, keyword.package, keyword.type, keyword.var, markup.heading, meta.tag.sgml.doctype.html, punctuation.separator.key-value, storage.modifier, storage.type.class, storage.type.enum, storage.type.function, storage.type.import, storage.type.interface, storage.type.js, storage.type.namespace, storage.type.property, storage.type.rust, storage.type.string.python, storage.type.ts, storage.type.tsx, storage.type.type, support.type.object.module—bold
Monochromy Theme by saMirky - VS Code Theme