Skip to main content
Coding Theme

Color themes

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#F8FAFC
  • activityBar.activeBorder#406513
  • activityBar.background#FFFFFF
  • activityBar.border#E2E8F0
  • activityBar.dropBorder#406513
  • activityBar.foreground#406513
  • activityBar.inactiveForeground#94A3B8
  • activityBarBadge.background#B8FF4D
  • activityBarBadge.foreground#253A0B
  • badge.background#406513
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#406513
  • breadcrumb.focusForeground#0F172A
  • breadcrumb.foreground#4B5563
  • breadcrumbPicker.background#FFFFFF
  • button.background#B8FF4D
  • button.foreground#253A0B
  • button.hoverBackground#99EC30
  • button.secondaryBackground#E2E8F0
  • button.secondaryForeground#1E293B
  • button.secondaryHoverBackground#CBD5E1
  • checkbox.background#FFFFFF
  • checkbox.border#CBD5E1
  • checkbox.foreground#406513
  • debugConsole.errorForeground#DC2626
  • debugConsole.infoForeground#0369A1
  • debugConsole.sourceForeground#4B5563
  • debugConsole.warningForeground#B45309
  • debugIcon.breakpointForeground#DC2626
  • debugIcon.startForeground#5B901A
  • debugTokenExpression.name#0369A1
  • debugTokenExpression.value#374151
  • debugToolBar.background#FFFFFF
  • descriptionForeground#4B5563
  • diffEditor.diagonalFill#E2E8F0
  • diffEditor.insertedLineBackground#B8FF4D1F
  • diffEditor.insertedTextBackground#B8FF4D33
  • diffEditor.removedLineBackground#DC26261A
  • diffEditor.removedTextBackground#DC262626
  • diffEditorGutter.insertedLineBackground#B8FF4D33
  • diffEditorGutter.removedLineBackground#DC262626
  • dropdown.background#FFFFFF
  • dropdown.border#E2E8F0
  • dropdown.foreground#374151
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFFFF
  • editor.findMatchBackground#99EC3070
  • editor.findMatchHighlightBackground#B8FF4D4D
  • editor.findRangeHighlightBackground#B8FF4D1F
  • editor.foreground#374151
  • editor.hoverHighlightBackground#79BF2233
  • editor.inactiveSelectionBackground#B8FF4D26
  • editor.lineHighlightBackground#F8FAFC
  • editor.lineHighlightBorder#F8FAFC00
  • editor.rangeHighlightBackground#F8FAFCCC
  • editor.selectionBackground#B8FF4D55
  • editor.selectionHighlightBackground#B8FF4D33
  • editor.wordHighlightBackground#79BF2226
  • editor.wordHighlightStrongBackground#79BF223D
  • editorBracketHighlight.foreground1#406513
  • editorBracketHighlight.foreground2#0369A1
  • editorBracketHighlight.foreground3#B45309
  • editorBracketHighlight.foreground4#7C3AED
  • editorBracketHighlight.foreground5#DC2626
  • editorBracketHighlight.foreground6#5B901A
  • editorBracketHighlight.unexpectedBracket.foreground#DC2626
  • editorBracketMatch.background#79BF2226
  • editorBracketMatch.border#79BF2280
  • editorCodeLens.foreground#94A3B8
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#406513
  • editorError.foreground#DC2626
  • editorGhostText.foreground#94A3B8
  • editorGroup.border#E2E8F0
  • editorGroup.dropBackground#DCFF83
  • editorGroupHeader.tabsBackground#F8FAFC
  • editorGroupHeader.tabsBorder#E2E8F0
  • editorGutter.addedBackground#5B901A
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#DC2626
  • editorGutter.modifiedBackground#0369A1
  • editorHint.foreground#94A3B8
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#E2E8F0
  • editorHoverWidget.foreground#374151
  • editorIndentGuide.activeBackground1#B8FF4D80
  • editorIndentGuide.background1#EEF2F6
  • editorInfo.foreground#0369A1
  • editorLineNumber.activeForeground#406513
  • editorLineNumber.foreground#CBD5E1
  • editorLink.activeForeground#5B901A
  • editorMarkerNavigation.background#F8FAFC
  • editorMarkerNavigationError.background#DC2626
  • editorMarkerNavigationInfo.background#0369A1
  • editorMarkerNavigationWarning.background#B45309
  • editorMinimap.findMatchHighlight#B8FF4D
  • editorOverviewRuler.border#FFFFFF
  • editorOverviewRuler.errorForeground#DC2626
  • editorOverviewRuler.findMatchForeground#40651399
  • editorOverviewRuler.infoForeground#0369A1
  • editorOverviewRuler.warningForeground#B45309
  • editorRuler.foreground#EEF2F6
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#E2E8F0
  • editorSuggestWidget.foreground#374151
  • editorSuggestWidget.highlightForeground#406513
  • editorSuggestWidget.selectedBackground#F1F5F9
  • editorSuggestWidget.selectedForeground#0F172A
  • editorWarning.foreground#B45309
  • editorWhitespace.foreground#E2E8F0
  • editorWidget.background#FFFFFF
  • editorWidget.border#E2E8F0
  • editorWidget.foreground#374151
  • editorWidget.resizeBorder#B8FF4D
  • errorForeground#DC2626
  • extensionButton.prominentBackground#B8FF4D
  • extensionButton.prominentForeground#253A0B
  • extensionButton.prominentHoverBackground#99EC30
  • extensionIcon.starForeground#B45309
  • extensionIcon.verifiedForeground#0369A1
  • focusBorder#40651366
  • foreground#374151
  • gitDecoration.addedResourceForeground#5B901A
  • gitDecoration.conflictingResourceForeground#B45309
  • gitDecoration.deletedResourceForeground#DC2626
  • gitDecoration.ignoredResourceForeground#CBD5E1
  • gitDecoration.modifiedResourceForeground#0369A1
  • gitDecoration.submoduleResourceForeground#4B5563
  • gitDecoration.untrackedResourceForeground#79BF22
  • icon.foreground#4B5563
  • input.background#FFFFFF
  • input.border#CBD5E1
  • input.foreground#1E293B
  • input.placeholderForeground#94A3B8
  • inputOption.activeBackground#B8FF4D4D
  • inputOption.activeBorder#406513
  • inputOption.activeForeground#0F172A
  • inputValidation.errorBackground#FEF2F2
  • inputValidation.errorBorder#DC2626
  • inputValidation.infoBackground#EFF6FF
  • inputValidation.infoBorder#0369A1
  • inputValidation.warningBackground#FFFBEB
  • inputValidation.warningBorder#B45309
  • list.activeSelectionBackground#ECFFBF
  • list.activeSelectionForeground#0F172A
  • list.dropBackground#DCFF83
  • list.errorForeground#DC2626
  • list.focusBackground#ECFFBF
  • list.focusForeground#0F172A
  • list.focusOutline#40651366
  • list.highlightForeground#406513
  • list.hoverBackground#F1F5F9
  • list.hoverForeground#0F172A
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#F1F5F9
  • list.inactiveSelectionForeground#1E293B
  • list.warningForeground#B45309
  • listFilterWidget.background#F1F5F9
  • listFilterWidget.noMatchesOutline#DC2626
  • listFilterWidget.outline#406513
  • menu.background#FFFFFF
  • menu.border#E2E8F0
  • menu.foreground#374151
  • menu.selectionBackground#ECFFBF
  • menu.selectionForeground#0F172A
  • menu.separatorBackground#E2E8F0
  • menubar.selectionBackground#ECFFBF
  • menubar.selectionForeground#0F172A
  • minimap.errorHighlight#DC2626
  • minimap.selectionHighlight#B8FF4D55
  • minimap.warningHighlight#B45309
  • minimapGutter.addedBackground#5B901A
  • minimapGutter.deletedBackground#DC2626
  • minimapGutter.modifiedBackground#0369A1
  • minimapSlider.activeBackground#40651359
  • minimapSlider.background#40651326
  • minimapSlider.hoverBackground#40651340
  • notificationCenter.border#E2E8F0
  • notificationCenterHeader.background#F8FAFC
  • notificationCenterHeader.foreground#0F172A
  • notifications.background#FFFFFF
  • notifications.border#E2E8F0
  • notifications.foreground#374151
  • notificationsErrorIcon.foreground#DC2626
  • notificationsInfoIcon.foreground#0369A1
  • notificationsWarningIcon.foreground#B45309
  • notificationToast.border#E2E8F0
  • panel.background#FFFFFF
  • panel.border#E2E8F0
  • panelInput.border#E2E8F0
  • panelTitle.activeBorder#406513
  • panelTitle.activeForeground#0F172A
  • panelTitle.inactiveForeground#94A3B8
  • peekView.border#B8FF4D
  • peekViewEditor.background#F8FAFC
  • peekViewEditor.matchHighlightBackground#B8FF4D55
  • peekViewResult.background#FFFFFF
  • peekViewResult.fileForeground#1E293B
  • peekViewResult.lineForeground#4B5563
  • peekViewResult.matchHighlightBackground#B8FF4D55
  • peekViewResult.selectionBackground#79BF2226
  • peekViewResult.selectionForeground#0F172A
  • peekViewTitle.background#F8FAFC
  • peekViewTitleDescription.foreground#4B5563
  • peekViewTitleLabel.foreground#0F172A
  • pickerGroup.border#E2E8F0
  • pickerGroup.foreground#406513
  • problemsErrorIcon.foreground#DC2626
  • problemsInfoIcon.foreground#0369A1
  • problemsWarningIcon.foreground#B45309
  • progressBar.background#406513
  • quickInput.background#FFFFFF
  • quickInput.foreground#374151
  • quickInputList.focusBackground#ECFFBF
  • quickInputTitle.background#F8FAFC
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#40651359
  • scrollbarSlider.background#40651326
  • scrollbarSlider.hoverBackground#40651340
  • selection.background#B8FF4D66
  • settings.checkboxBackground#FFFFFF
  • settings.checkboxBorder#CBD5E1
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownBorder#E2E8F0
  • settings.focusedRowBackground#F8FAFC
  • settings.headerForeground#0F172A
  • settings.modifiedItemIndicator#406513
  • settings.numberInputBackground#FFFFFF
  • settings.textInputBackground#FFFFFF
  • settings.textInputBorder#E2E8F0
  • sideBar.background#F8FAFC
  • sideBar.border#E2E8F0
  • sideBar.foreground#374151
  • sideBarActivityBarTop.border#E2E8F0
  • sideBarSectionHeader.background#F8FAFC
  • sideBarSectionHeader.border#E2E8F0
  • sideBarSectionHeader.foreground#1E293B
  • sideBarTitle.foreground#0F172A
  • statusBar.background#FFFFFF
  • statusBar.border#E2E8F0
  • statusBar.debuggingBackground#B8FF4D
  • statusBar.debuggingForeground#253A0B
  • statusBar.foreground#4B5563
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.activeBackground#E2E8F0
  • statusBarItem.errorBackground#DC2626
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.hoverBackground#F1F5F9
  • statusBarItem.prominentBackground#F1F5F9
  • statusBarItem.prominentHoverBackground#E2E8F0
  • statusBarItem.remoteBackground#F8FAFC
  • statusBarItem.remoteForeground#406513
  • statusBarItem.warningBackground#B45309
  • statusBarItem.warningForeground#FFFFFF
  • symbolIcon.classForeground#0369A1
  • symbolIcon.colorForeground#406513
  • symbolIcon.constantForeground#B45309
  • symbolIcon.enumeratorForeground#7C3AED
  • symbolIcon.fieldForeground#0369A1
  • symbolIcon.functionForeground#5B901A
  • symbolIcon.interfaceForeground#7C3AED
  • symbolIcon.keywordForeground#406513
  • symbolIcon.methodForeground#5B901A
  • symbolIcon.moduleForeground#5B901A
  • symbolIcon.propertyForeground#0369A1
  • symbolIcon.stringForeground#B45309
  • symbolIcon.variableForeground#1E293B
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#406513
  • tab.activeForeground#0F172A
  • tab.activeModifiedBorder#0369A1
  • tab.border#E2E8F0
  • tab.hoverBackground#FFFFFF
  • tab.hoverForeground#0F172A
  • tab.inactiveBackground#F8FAFC
  • tab.inactiveForeground#94A3B8
  • tab.inactiveModifiedBorder#0369A166
  • tab.unfocusedActiveBorderTop#40651380
  • terminal.ansiBlack#1E293B
  • terminal.ansiBlue#0369A1
  • terminal.ansiBrightBlack#4B5563
  • terminal.ansiBrightBlue#0284C7
  • terminal.ansiBrightCyan#5B901A
  • terminal.ansiBrightGreen#79BF22
  • terminal.ansiBrightMagenta#8B5CF6
  • terminal.ansiBrightRed#EF4444
  • terminal.ansiBrightWhite#0F172A
  • terminal.ansiBrightYellow#D97706
  • terminal.ansiCyan#406513
  • terminal.ansiGreen#5B901A
  • terminal.ansiMagenta#7C3AED
  • terminal.ansiRed#DC2626
  • terminal.ansiWhite#374151
  • terminal.ansiYellow#B45309
  • terminal.background#FFFFFF
  • terminal.foreground#374151
  • terminal.selectionBackground#B8FF4D55
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#406513
  • textBlockQuote.background#F8FAFC
  • textBlockQuote.border#B8FF4D
  • textCodeBlock.background#F8FAFC
  • textLink.activeForeground#5B901A
  • textLink.foreground#406513
  • textPreformat.foreground#5B901A
  • textSeparator.foreground#E2E8F0
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#374151
  • titleBar.border#E2E8F0
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#94A3B8
  • tree.inactiveIndentGuidesStroke#F1F5F9
  • tree.indentGuidesStroke#E2E8F0
  • walkThrough.embeddedEditorBackground#F8FAFC
  • welcomePage.background#FFFFFF
  • welcomePage.progress.background#F1F5F9
  • welcomePage.progress.foreground#406513
  • welcomePage.tileBackground#F8FAFC
  • welcomePage.tileBorder#E2E8F0
  • widget.border#E2E8F0
  • widget.shadow#0F172A1F
  • window.activeBorder#FFFFFF
  • window.inactiveBorder#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#374151
comment, punctuation.definition.comment#6B7280italic
string, string.quoted, string.template#B45309
string.regexp#C2660D
constant.numeric#C2410C
constant.language, constant.language.boolean#5B901A
constant.character.escape#79BF22
variable.other.constant, variable.other.enummember#5B901A
keyword, keyword.control, keyword.other#406513
keyword.operator#4B5563
storage, storage.type, storage.modifier#5B901A
entity.name.function, support.function, meta.function-call#4D7A16
entity.name.class, entity.name.type, support.class, support.type#0369A1
entity.other.inherited-class#0369A1italic
variable, variable.other.readwrite#1E293B
variable.parameter#7C3AED
variable.language, variable.language.this#406513italic
entity.name.tag#406513
entity.other.attribute-name#5B901A
punctuation, meta.brace, punctuation.definition#6B7280
meta.property-name, support.type.property-name#0369A1
entity.name.section, markup.heading#406513bold
markup.bold#0F172Abold
markup.italic#1E293Bitalic
markup.underline.link#406513
markup.inserted#5B901A
markup.deleted#DC2626
invalid, invalid.illegal#DC2626
invalid.deprecated#B45309
Microdigm Theme by Microdigm - VS Code Theme