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#121212
  • activityBar.border#08341B
  • activityBar.dropBackground#00000080
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#5c6773
  • activityBarBadge.background#009669
  • activityBarBadge.foreground#000000
  • badge.background#009669
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#32c9fa
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#cccccc
  • breadcrumb.foreground#5c6773
  • breadcrumbPicker.background#000000
  • button.background#009669
  • button.foreground#000000
  • button.hoverBackground#00b377
  • button.secondaryBackground#2d3640
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#5c6773
  • debugToolBar.background#121212
  • debugToolBar.border#08341B
  • descriptionForeground#5c6773
  • diffEditor.border#08341B
  • diffEditor.diagonalFill#08341B
  • diffEditor.insertedLineBackground#00ff8010
  • diffEditor.insertedTextBackground#00ff8020
  • diffEditor.removedLineBackground#c3210110
  • diffEditor.removedTextBackground#c3210120
  • disabledForeground#5c6773
  • dropdown.background#000000
  • dropdown.border#08341B
  • dropdown.foreground#cccccc
  • editor.background#000000
  • editor.findMatchBackground#f7b90c40
  • editor.findMatchHighlightBackground#f7b90c20
  • editor.findRangeHighlightBackground#041B0E
  • editor.focusedStackFrameHighlightBackground#18680040
  • editor.foreground#cccccc
  • editor.hoverHighlightBackground#18680020
  • editor.inactiveSelectionBackground#041B0E60
  • editor.lineHighlightBackground#041B0E
  • editor.lineHighlightBorder#041B0E
  • editor.rangeHighlightBackground#041B0E
  • editor.selectionBackground#1B0334
  • editor.selectionHighlightBackground#041B0E
  • editor.snippetFinalTabstopHighlightBackground#041B0E
  • editor.snippetFinalTabstopHighlightBorder#009669
  • editor.snippetTabstopHighlightBackground#041B0E
  • editor.snippetTabstopHighlightBorder#08341B
  • editor.stackFrameHighlightBackground#18680020
  • editor.wordHighlightBackground#18680020
  • editor.wordHighlightStrongBackground#18680040
  • editorBracketHighlight.foreground1#32c9fa
  • editorBracketHighlight.foreground2#f7b90c
  • editorBracketHighlight.foreground3#ff8f40
  • editorBracketHighlight.foreground4#00ff80
  • editorBracketHighlight.foreground5#cecd19
  • editorBracketHighlight.foreground6#bd5173
  • editorBracketMatch.background#041B0E
  • editorBracketMatch.border#f7b90c
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#32c9fa
  • editorError.foreground#c32101
  • editorGroup.border#08341B
  • editorGroup.dropBackground#041B0E80
  • editorGroupHeader.tabsBackground#121212
  • editorGroupHeader.tabsBorder#08341B
  • editorGutter.addedBackground#00ff80
  • editorGutter.background#000000
  • editorGutter.deletedBackground#c32101
  • editorGutter.modifiedBackground#32c9fa
  • editorHint.foreground#32c9fa
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#08341B
  • editorIndentGuide.activeBackground#08341B
  • editorIndentGuide.background#08341B
  • editorInfo.foreground#32c9fa
  • editorLineNumber.activeForeground#009669
  • editorLineNumber.foreground#32c9fa
  • editorLink.activeForeground#32c9fa
  • editorOverviewRuler.addedForeground#00ff80
  • editorOverviewRuler.border#121212
  • editorOverviewRuler.commonContentForeground#5c6773
  • editorOverviewRuler.currentContentForeground#00ff80
  • editorOverviewRuler.deletedForeground#c32101
  • editorOverviewRuler.errorForeground#c32101
  • editorOverviewRuler.findMatchForeground#f7b90c
  • editorOverviewRuler.incomingContentForeground#32c9fa
  • editorOverviewRuler.infoForeground#32c9fa
  • editorOverviewRuler.modifiedForeground#32c9fa
  • editorOverviewRuler.rangeHighlightForeground#186800
  • editorOverviewRuler.selectionHighlightForeground#1B0334
  • editorOverviewRuler.warningForeground#f7b90c
  • editorOverviewRuler.wordHighlightForeground#186800
  • editorOverviewRuler.wordHighlightStrongForeground#186800
  • editorRuler.foreground#041B0E
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#08341B
  • editorSuggestWidget.foreground#cccccc
  • editorSuggestWidget.highlightForeground#32c9fa
  • editorSuggestWidget.selectedBackground#f7b90c
  • editorSuggestWidget.selectedForeground#000000
  • editorUnnecessaryCode.opacity#00000040
  • editorWarning.foreground#f7b90c
  • editorWhitespace.foreground#08341B
  • editorWidget.background#000000
  • editorWidget.border#08341B
  • editorWidget.resizeBorder#32c9fa
  • errorForeground#c32101
  • extensionBadge.remoteBackground#009669
  • extensionBadge.remoteForeground#000000
  • extensionButton.prominentBackground#009669
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#00b377
  • focusBorder#32c9fa
  • foreground#cccccc
  • input.background#041B0E
  • input.border#08341B
  • input.foreground#cccccc
  • input.placeholderForeground#5c6773
  • inputOption.activeBorder#32c9fa
  • inputValidation.errorBackground#c3210120
  • inputValidation.errorBorder#c32101
  • inputValidation.infoBackground#32c9fa20
  • inputValidation.infoBorder#32c9fa
  • inputValidation.warningBackground#f7b90c20
  • inputValidation.warningBorder#f7b90c
  • list.activeSelectionBackground#1B0334
  • list.activeSelectionForeground#009669
  • list.dropBackground#041B0E80
  • list.errorForeground#c32101
  • list.focusBackground#041B0E
  • list.focusForeground#32c9fa
  • list.highlightForeground#32c9fa
  • list.hoverBackground#041B0E
  • list.hoverForeground#32c9fa
  • list.inactiveSelectionBackground#041B0E
  • list.inactiveSelectionForeground#32c9fa
  • list.warningForeground#f7b90c
  • listFilterWidget.background#041B0E
  • listFilterWidget.noMatchesOutline#c32101
  • listFilterWidget.outline#009669
  • menu.background#000000
  • menu.foreground#cccccc
  • menu.selectionBackground#041B0E
  • menu.selectionBorder#08341B
  • menu.selectionForeground#32c9fa
  • menu.separatorBackground#08341B
  • menubar.selectionBackground#041B0E
  • menubar.selectionBorder#08341B
  • menubar.selectionForeground#32c9fa
  • merge.border#08341B
  • merge.commonContentBackground#5c677320
  • merge.commonHeaderBackground#5c677340
  • merge.currentContentBackground#00ff8020
  • merge.currentHeaderBackground#00ff8040
  • merge.incomingContentBackground#32c9fa20
  • merge.incomingHeaderBackground#32c9fa40
  • notificationCenter.border#08341B
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#cccccc
  • notificationError.background#c32101
  • notificationError.border#c32101
  • notificationError.foreground#ffffff
  • notificationInfo.background#32c9fa
  • notificationInfo.border#32c9fa
  • notificationInfo.foreground#000000
  • notificationLink.foreground#32c9fa
  • notifications.background#000000
  • notifications.border#08341B
  • notifications.foreground#cccccc
  • notificationToast.border#08341B
  • notificationWarning.background#f7b90c
  • notificationWarning.border#f7b90c
  • notificationWarning.foreground#000000
  • panel.background#121212
  • panel.border#08341B
  • panelInput.border#08341B
  • panelTitle.activeBorder#009669
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#5c6773
  • peekView.border#08341B
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#f7b90c40
  • peekViewResult.background#121212
  • peekViewResult.fileForeground#cccccc
  • peekViewResult.lineForeground#5c6773
  • peekViewResult.matchHighlightBackground#f7b90c40
  • peekViewResult.selectionBackground#041B0E
  • peekViewResult.selectionForeground#32c9fa
  • peekViewTitle.background#121212
  • peekViewTitleDescription.foreground#5c6773
  • peekViewTitleLabel.foreground#cccccc
  • pickerGroup.border#08341B
  • pickerGroup.foreground#32c9fa
  • progressBar.background#009669
  • quickInput.background#000000
  • quickInput.foreground#cccccc
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#32c9fa80
  • scrollbarSlider.background#08341B80
  • scrollbarSlider.hoverBackground#08341BB0
  • selection.background#1B0334
  • settings.checkboxBackground#041B0E
  • settings.checkboxBorder#08341B
  • settings.dropdownBackground#041B0E
  • settings.dropdownBorder#08341B
  • settings.dropdownListBorder#08341B
  • settings.focusedRowBackground#041B0E40
  • settings.headerForeground#32c9fa
  • settings.modifiedItemIndicator#009669
  • settings.numberInputBackground#041B0E
  • settings.numberInputBorder#08341B
  • settings.textInputBackground#041B0E
  • settings.textInputBorder#08341B
  • sideBar.background#121212
  • sideBar.border#08341B
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#32c9fa
  • sideBarTitle.foreground#cccccc
  • statusBar.background#121212
  • statusBar.border#08341B
  • statusBar.debuggingBackground#009669
  • statusBar.debuggingBorder#08341B
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#32c9fa
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#08341B
  • statusBar.noFolderForeground#32c9fa
  • statusBarItem.activeBackground#00000080
  • statusBarItem.errorBackground#c32101
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#041B0E
  • statusBarItem.prominentBackground#009669
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#00b377
  • statusBarItem.remoteBackground#009669
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#f7b90c
  • statusBarItem.warningForeground#000000
  • symbolIcon.arrayForeground#f7b90c
  • symbolIcon.booleanForeground#f7b90c
  • symbolIcon.classForeground#32c9fa
  • symbolIcon.colorForeground#ff8f40
  • symbolIcon.constantForeground#f7b90c
  • symbolIcon.constructorForeground#009669
  • symbolIcon.enumeratorForeground#32c9fa
  • symbolIcon.enumeratorMemberForeground#f7b90c
  • symbolIcon.eventForeground#cecd19
  • symbolIcon.fieldForeground#186800
  • symbolIcon.fileForeground#32c9fa
  • symbolIcon.folderForeground#32c9fa
  • symbolIcon.functionForeground#00ff80
  • symbolIcon.interfaceForeground#32c9fa
  • symbolIcon.keyForeground#f7b90c
  • symbolIcon.keywordForeground#009669
  • symbolIcon.methodForeground#00ff80
  • symbolIcon.moduleForeground#f7b90c
  • symbolIcon.namespaceForeground#f7b90c
  • symbolIcon.nullForeground#f7b90c
  • symbolIcon.numberForeground#f7b90c
  • symbolIcon.objectForeground#ff8f40
  • symbolIcon.operatorForeground#f7b90c
  • symbolIcon.packageForeground#ff8f40
  • symbolIcon.propertyForeground#186800
  • symbolIcon.referenceForeground#f7b90c
  • symbolIcon.snippetForeground#009669
  • symbolIcon.stringForeground#32c9fa
  • symbolIcon.structForeground#32c9fa
  • symbolIcon.textForeground#cccccc
  • symbolIcon.typeParameterForeground#32c9fa
  • symbolIcon.unitForeground#f7b90c
  • symbolIcon.variableForeground#186800
  • tab.activeBackground#2d3640
  • tab.activeBorder#009669
  • tab.activeBorderTop#009669
  • tab.activeForeground#cccccc
  • tab.activeModifiedBorder#32c9fa
  • tab.border#08341B
  • tab.hoverBackground#041B0E
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#5c6773
  • tab.inactiveModifiedBorder#32c9fa80
  • tab.unfocusedActiveForeground#5c6773
  • tab.unfocusedActiveModifiedBorder#32c9fa40
  • tab.unfocusedHoverBackground#041B0E
  • tab.unfocusedInactiveForeground#5c6773
  • tab.unfocusedInactiveModifiedBorder#32c9fa20
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#32c9fa
  • terminal.ansiBrightBlack#5c6773
  • terminal.ansiBrightBlue#32c9fa
  • terminal.ansiBrightCyan#00ff80
  • terminal.ansiBrightGreen#00ff80
  • terminal.ansiBrightMagenta#bd5173
  • terminal.ansiBrightRed#ff8f40
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#cecd19
  • terminal.ansiCyan#00ff80
  • terminal.ansiGreen#009669
  • terminal.ansiMagenta#bd5173
  • terminal.ansiRed#c32101
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#f7b90c
  • terminal.background#000000
  • terminal.border#08341B
  • terminal.dropBackground#041B0E80
  • terminal.foreground#cccccc
  • terminal.selectionBackground#1B0334
  • terminalCursor.background#000000
  • terminalCursor.foreground#32c9fa
  • textBlockQuote.background#041B0E
  • textBlockQuote.border#08341B
  • textCodeBlock.background#041B0E
  • textLink.activeForeground#32c9fa
  • textLink.foreground#32c9fa
  • textPreformat.foreground#ff8f40
  • textSeparator.foreground#08341B
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#cccccc
  • titleBar.border#08341B
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#5c6773
  • welcomePage.buttonBackground#041B0E
  • welcomePage.buttonHoverBackground#08341B
  • welcomePage.progress.background#08341B
  • welcomePage.progress.foreground#009669
  • widget.shadow#00000080
  • window.activeBorder#32c9fa
  • window.inactiveBorder#2d3640

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#bd5173italic
string, punctuation.definition.string, meta.embedded.block#32c9fa
string.regexp#ff8f40
constant.character.escape, constant.character, constant.other#cecd19
variable, meta.definition.variable.name, support.variable#186800
variable.parameter, variable.function, variable.annotation#f7b90c
entity.name.label, entity.name.tag.label#cecd19
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace#009669
keyword, keyword.control, keyword.operator, keyword.other, storage, storage.type#009669
keyword.control.directive, meta.preprocessor, entity.name.function.preprocessor#bd5173
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.word#f7b90c
entity.name.function, support.function, meta.function-call, variable.function#00ff80bold
entity.name.function.constructor, support.class, support.type.constructor#009669
entity.name.type, support.type, support.class#32c9fa
support.type.builtin, storage.type.primitive#32c9fa
constant, constant.numeric, constant.language, constant.character, constant.other#f7b90c
entity.name.tag, punctuation.definition.tag#32c9fa
entity.name.namespace, support.namespace#f7b90c
markup.heading, entity.name.section#f7b90c
markup.list, punctuation.definition.list#cecd19
markup.raw.block, markup.inline.raw#ff8f40
markup.underline.link, meta.link#32c9fa
markup.link.text, string.other.link.title#cecd19
markup.link.label#009669
markup.quote, punctuation.definition.quote#cecd19
markup.inserted, meta.diff.header.git#00ff80
markup.deleted, punctuation.definition.deleted#c32101
markup.changed, meta.diff.range#ff8f40
support.constant, constant.other.symbol, entity.other.attribute-name#00ff80
invalid.deprecatedstrikethrough
invalid.illegal#c32101bold
invalid.warning#f7b90c
invalid.info#32c9fa
invalid.hint#32c9fa
bracket#009669
Heisenberg_Retro by CataPulse - VS Code Theme