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.activeFocusBorder#040402
  • activityBar.background#3e3b30
  • activityBar.foreground#7a7560
  • activityBar.inactiveForeground#9a937a
  • activityBarBadge.background#040402
  • activityBarBadge.foreground#ddd5b1
  • badge.background#040402
  • badge.foreground#9a937a
  • breadcrumb.activeSelectionForeground#ddd5b1
  • breadcrumb.background#040402
  • breadcrumb.focusForeground#bbb495
  • breadcrumb.foreground#7a7560
  • breadcrumbPicker.background#23221a
  • button.background#23221a
  • button.foreground#ddd5b1
  • button.hoverBackground#7a7560
  • checkbox.background#040402
  • checkbox.foreground#9a937a
  • debugExceptionWidget.background#23221a
  • debugIcon.breakpointCurrentStackframeForeground#a5bc78
  • debugIcon.breakpointDisabledForeground#7a7560
  • debugIcon.breakpointForeground#7cc1a7
  • debugIcon.breakpointStackframeForeground#77cb7f
  • debugIcon.breakpointUnverifiedForeground#3e3b30
  • debugIcon.continueForeground#c1e07f
  • debugIcon.disconnectForeground#7cc1a7
  • debugIcon.pauseForeground#99dff0
  • debugIcon.restartForeground#c1e07f
  • debugIcon.startForeground#c1e07f
  • debugIcon.stepBackForeground#77cb7f
  • debugIcon.stepIntoForeground#80bdcb
  • debugIcon.stepOutForeground#e2d283
  • debugIcon.stepOverForeground#99dff0
  • debugIcon.stopForeground#7cc1a7
  • debugToolBar.background#23221a
  • descriptionForeground#5b5747
  • diffEditor.insertedTextBackground#c1e07f20
  • diffEditor.removedTextBackground#7cc1a720
  • dropdown.background#040402
  • dropdown.foreground#9a937a
  • dropdown.listBackground#040402
  • editor.background#040402
  • editor.findMatchBackground#a5bc786f
  • editor.findMatchHighlightBackground#84e7c36f
  • editor.findRangeHighlightBackground#23221a6f
  • editor.foreground#9a937a
  • editor.hoverHighlightBackground#3e3b306f
  • editor.inactiveSelectionBackground#3e3b30
  • editor.lineHighlightBackground#23221a
  • editor.rangeHighlightBackground#23221a6f
  • editor.selectionBackground#3e3b30
  • editor.selectionHighlightBackground#23221a
  • editor.snippetFinalTabstopHighlightBackground#5b5747
  • editor.snippetTabstopHighlightBackground#3e3b30
  • editor.wordHighlightBackground#3e3b306f
  • editor.wordHighlightStrongBackground#5b57476f
  • editorBracketMatch.background#3e3b30
  • editorCodeLens.foreground#3e3b30
  • editorCursor.foreground#9a937a
  • editorError.foreground#7cc1a7
  • editorGroup.border#9a937a
  • editorGroup.dropBackground#3e3b306f
  • editorGroup.emptyBackground#040402
  • editorGroupHeader.border#040402
  • editorGroupHeader.noTabsBackground#23221a
  • editorGroupHeader.tabsBackground#23221a
  • editorGutter.addedBackground#2a9e2a
  • editorGutter.background#040402
  • editorGutter.commentRangeForeground#7a7560
  • editorGutter.deletedBackground#af2222
  • editorGutter.modifiedBackground#104891
  • editorHint.foreground#99dff0
  • editorHoverWidget.background#040402
  • editorIndentGuide.activeBackground#7a7560
  • editorIndentGuide.background#5b5747
  • editorInfo.foreground#80bdcb
  • editorLightBulb.foreground#a5bc78
  • editorLightBulbAutoFix.foreground#99dff0
  • editorLineNumber.activeForeground#5b5747
  • editorLineNumber.foreground#5b5747
  • editorLink.activeForeground#99dff0
  • editorMarkerNavigation.background#23221a
  • editorMarkerNavigationError.background#7cc1a7
  • editorMarkerNavigationInfo.background#99dff0
  • editorMarkerNavigationWarning.background#a5bc78
  • editorOverviewRuler.addedForeground#c1e07f
  • editorOverviewRuler.bracketMatchForeground#bbb495
  • editorOverviewRuler.commonContentForeground#77cb7f
  • editorOverviewRuler.currentContentForeground#99dff0
  • editorOverviewRuler.deletedForeground#7cc1a7
  • editorOverviewRuler.errorForeground#7cc1a7
  • editorOverviewRuler.findMatchForeground#23221a6f
  • editorOverviewRuler.incomingContentForeground#c1e07f
  • editorOverviewRuler.infoForeground#80bdcb
  • editorOverviewRuler.modifiedForeground#e2d283
  • editorOverviewRuler.rangeHighlightForeground#5b57476f
  • editorOverviewRuler.selectionHighlightForeground#3e3b306f
  • editorOverviewRuler.warningForeground#a5bc78
  • editorOverviewRuler.wordHighlightForeground#ddd5b16f
  • editorOverviewRuler.wordHighlightStrongForeground#99dff06f
  • editorPane.background#040402
  • editorRuler.foreground#23221a
  • editorSuggestWidget.background#23221a
  • editorSuggestWidget.foreground#9a937a
  • editorSuggestWidget.highlightForeground#99dff0
  • editorSuggestWidget.selectedBackground#3e3b30
  • editorWarning.foreground#a5bc78
  • editorWhitespace.foreground#5b5747
  • editorWidget.background#040402
  • editorWidget.foreground#9a937a
  • errorForeground#7cc1a7
  • extensionBadge.remoteBackground#84e7c3
  • extensionBadge.remoteForeground#ddd5b1
  • extensionButton.prominentBackground#c1e07f
  • extensionButton.prominentForeground#ddd5b1
  • extensionButton.prominentHoverBackground#3e3b30
  • foreground#9a937a
  • gitDecoration.conflictingResourceForeground#a5bc78
  • gitDecoration.deletedResourceForeground#77cb7f
  • gitDecoration.ignoredResourceForeground#5b5747
  • gitDecoration.modifiedResourceForeground#77cb7f
  • gitDecoration.submoduleResourceForeground#77cb7f
  • gitDecoration.untrackedResourceForeground#77cb7f
  • icon.foreground#7a7560
  • input.background#23221a
  • input.foreground#9a937a
  • input.placeholderForeground#5b5747
  • inputOption.activeBackground#3e3b30
  • inputOption.activeBorder#84e7c3
  • inputValidation.errorBackground#7cc1a7
  • inputValidation.errorBorder#7cc1a7
  • inputValidation.errorForeground#9a937a
  • inputValidation.infoBackground#99dff0
  • inputValidation.infoBorder#99dff0
  • inputValidation.infoForeground#9a937a
  • inputValidation.warningBackground#a5bc78
  • inputValidation.warningBorder#a5bc78
  • inputValidation.warningForeground#9a937a
  • list.activeSelectionBackground#040402
  • list.activeSelectionForeground#7a7560
  • list.dropBackground#ddd5b1
  • list.errorForeground#7cc1a7
  • list.filterMatchBackground#3e3b30
  • list.focusBackground#040402
  • list.focusForeground#7a7560
  • list.highlightForeground#ddd5b1
  • list.hoverBackground#040402
  • list.hoverForeground#7a7560
  • list.inactiveFocusBackground#3e3b30
  • list.inactiveSelectionBackground#040402
  • list.inactiveSelectionForeground#7a7560
  • list.invalidItemForeground#7cc1a7
  • list.warningForeground#a5bc78
  • listFilterWidget.background#040402
  • listFilterWidget.noMatchesOutline#7cc1a7
  • menu.background#23221a
  • menu.foreground#9a937a
  • menu.selectionBackground#3e3b30
  • menu.selectionForeground#9a937a
  • menu.separatorBackground#ddd5b1
  • menubar.selectionBackground#23221a
  • menubar.selectionForeground#9a937a
  • merge.currentContentBackground#99dff040
  • merge.currentHeaderBackground#99dff040
  • merge.incomingContentBackground#c1e07f60
  • merge.incomingHeaderBackground#c1e07f60
  • minimap.errorHighlight#852020
  • minimap.findMatchHighlight#23221a
  • minimap.selectionHighlight#ffffff
  • minimap.warningHighlight#eeff0062
  • notificationCenterHeader.background#23221a
  • notificationCenterHeader.foreground#9a937a
  • notificationLink.foreground#99dff0
  • notifications.background#3e3b30
  • notifications.foreground#9a937a
  • notificationsErrorIcon.foreground#7cc1a7
  • notificationsInfoIcon.foreground#99dff0
  • notificationsWarningIcon.foreground#a5bc78
  • panel.background#23221a
  • panelTitle.activeForeground#9a937a
  • panelTitle.inactiveForeground#5b5747
  • peekViewEditor.background#23221a
  • peekViewEditor.matchHighlightBackground#84e7c36f
  • peekViewEditorGutter.background#23221a
  • peekViewResult.background#040402
  • peekViewResult.fileForeground#9a937a
  • peekViewResult.lineForeground#5b5747
  • peekViewResult.matchHighlightBackground#84e7c36f
  • peekViewResult.selectionBackground#3e3b30
  • peekViewResult.selectionForeground#9a937a
  • peekViewTitle.background#3e3b30
  • peekViewTitleDescription.foreground#5b5747
  • peekViewTitleLabel.foreground#9a937a
  • pickerGroup.foreground#5b5747
  • problemsErrorIcon.foreground#7cc1a7
  • problemsInfoIcon.foreground#80bdcb
  • problemsWarningIcon.foreground#a5bc78
  • progressBar.background#5b5747
  • quickInput.background#23221a
  • quickInput.foreground#9a937a
  • scrollbar.shadow#23221a
  • scrollbarSlider.activeBackground#7a75606f
  • scrollbarSlider.background#3e3b306f
  • scrollbarSlider.hoverBackground#5b57476f
  • selection.background#99dff0
  • settings.checkboxBackground#23221a
  • settings.checkboxForeground#9a937a
  • settings.dropdownBackground#23221a
  • settings.dropdownForeground#9a937a
  • settings.headerForeground#9a937a
  • settings.modifiedItemIndicator#99dff0
  • settings.numberInputBackground#23221a
  • settings.numberInputForeground#9a937a
  • settings.textInputBackground#23221a
  • settings.textInputForeground#9a937a
  • sideBar.background#23221a
  • sideBar.border#040402
  • sideBar.dropBackground#3e3b30
  • sideBar.foreground#9a937a
  • sideBarSectionHeader.background#23221a
  • sideBarSectionHeader.foreground#9a937a
  • sideBarTitle.foreground#9a937a
  • statusBar.background#23221a
  • statusBar.debuggingBackground#84e7c3
  • statusBar.debuggingForeground#ddd5b1
  • statusBar.foreground#9a937a
  • statusBar.noFolderBackground#e2d283
  • statusBar.noFolderForeground#ddd5b1
  • statusBarItem.activeBackground#5b5747
  • statusBarItem.hoverBackground#3e3b30
  • statusBarItem.prominentBackground#e2d283
  • statusBarItem.prominentForeground#ddd5b1
  • statusBarItem.prominentHoverBackground#7cc1a7
  • statusBarItem.remoteBackground#040402
  • statusBarItem.remoteForeground#ddd5b1
  • symbolIcon.arrayForeground#9a937a
  • symbolIcon.booleanForeground#84e7c3
  • symbolIcon.classForeground#a5bc78
  • symbolIcon.colorForeground#f0f
  • symbolIcon.constantForeground#84e7c3
  • symbolIcon.constructorForeground#99dff0
  • symbolIcon.enumeratorForeground#84e7c3
  • symbolIcon.enumeratorMemberForeground#99dff0
  • symbolIcon.eventForeground#a5bc78
  • symbolIcon.fieldForeground#7cc1a7
  • symbolIcon.fileForeground#9a937a
  • symbolIcon.folderForeground#9a937a
  • symbolIcon.functionForeground#99dff0
  • symbolIcon.interfaceForeground#99dff0
  • symbolIcon.keyForeground#f0f
  • symbolIcon.keywordForeground#e2d283
  • symbolIcon.methodForeground#99dff0
  • symbolIcon.moduleForeground#9a937a
  • symbolIcon.namespaceForeground#9a937a
  • symbolIcon.nullForeground#77cb7f
  • symbolIcon.numberForeground#84e7c3
  • symbolIcon.objectForeground#f0f
  • symbolIcon.operatorForeground#f0f
  • symbolIcon.packageForeground#f0f
  • symbolIcon.propertyForeground#9a937a
  • symbolIcon.referenceForeground#f0f
  • symbolIcon.snippetForeground#9a937a
  • symbolIcon.stringForeground#c1e07f
  • symbolIcon.structForeground#a5bc78
  • symbolIcon.textForeground#9a937a
  • symbolIcon.typeParameterForeground#f0f
  • symbolIcon.unitForeground#f0f
  • symbolIcon.variableForeground#7cc1a7
  • tab.activeBackground#040402
  • tab.activeForeground#7a7560
  • tab.activeModifiedBorder#99dff0
  • tab.border#23221a
  • tab.hoverBackground#040402
  • tab.inactiveBackground#23221a
  • tab.inactiveForeground#9a937a
  • tab.inactiveModifiedBorder#99dff0
  • tab.unfocusedActiveBackground#040402
  • tab.unfocusedActiveForeground#7a7560
  • tab.unfocusedActiveModifiedBorder#99dff0
  • tab.unfocusedHoverBackground#3e3b30
  • tab.unfocusedInactiveForeground#5b5747
  • tab.unfocusedInactiveModifiedBorder#99dff0
  • terminal.ansiBlack#040402
  • terminal.ansiBlue#99dff0
  • terminal.ansiBrightBlack#5b5747
  • terminal.ansiBrightBlue#99dff0
  • terminal.ansiBrightCyan#80bdcb
  • terminal.ansiBrightGreen#c1e07f
  • terminal.ansiBrightMagenta#e2d283
  • terminal.ansiBrightRed#7cc1a7
  • terminal.ansiBrightWhite#ddd5b1
  • terminal.ansiBrightYellow#a5bc78
  • terminal.ansiCyan#80bdcb
  • terminal.ansiGreen#c1e07f
  • terminal.ansiMagenta#e2d283
  • terminal.ansiRed#7cc1a7
  • terminal.ansiWhite#9a937a
  • terminal.ansiYellow#a5bc78
  • terminal.background#040402
  • terminal.foreground#7a7560
  • terminalCursor.foreground#9a937a
  • textBlockQuote.background#23221a
  • textBlockQuote.border#99dff0
  • textCodeBlock.background#040402
  • textLink.activeForeground#80bdcb
  • textLink.foreground#99dff0
  • textPreformat.foreground#99dff0
  • textSeparator.foreground#f0f
  • titleBar.activeBackground#040402
  • titleBar.activeForeground#9a937a
  • titleBar.inactiveBackground#23221a
  • titleBar.inactiveForeground#5b5747
  • tree.indentGuidesStroke#9a937a
  • walkThrough.embeddedEditorBackground#040402
  • welcomePage.background#040402
  • widget.shadow#040402
  • window.activeBorder#040402
  • window.inactiveBorder#23221a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5b5747
comment.block.preprocessor#5b5747
comment.documentation, comment.block.documentation#5b5747
keyword.operator#9a937a
keyword, storage#e2d283
storage.type, support.type#e2d283
constant.language, support.constant, variable.language#84e7c3
variable, support.variable#7cc1a7
entity.name.function, support.function#99dff0
entity.name.type, entity.other.inherited-class, support.class#a5bc78
entity.name.exception#8d1d1d
entity.name.section
constant.numeric, constant.character, constant#84e7c3
string#c1e07f
constant.character.escape#80bdcb
string.regexp#c1e07f
constant.other.symbol#c1e07f
punctuation#c1e07f
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#e2d283
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#77cb7f
entity.name.tag#a5bc78
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#e2d283
constant.character.entity, punctuation.definition.entity#80bdcb
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#e2d283
meta.property-value, meta.property-value constant.other, support.constant.property-value#84e7c3
keyword.other.important
markup.changed#000000
markup.deleted#000000
markup.
markup.error#660000
markup.inserted#000000
meta.link#7cc1a7
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.
markup.traceback#660000
markup.underlineunderline
markup.quote#80bdcb
markup.list#7cc1a7
markup., markup.#e2d283
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
Minority Theme by FireMegrez - VS Code Theme