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#e3e3e3
  • activityBar.activeBorder#5a8f00
  • activityBar.activeFocusBorder#5a8f00
  • activityBar.background#f0f0f0
  • activityBar.border#d7d7d7
  • activityBar.foreground#5a8f00
  • activityBar.inactiveForeground#6f6f6f
  • activityBarBadge.background#5a8f00
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBackground#e3e3e3
  • activityBarTop.activeBorder#5a8f00
  • activityBarTop.activeForeground#5a8f00
  • activityBarTop.foreground#303030
  • activityBarTop.inactiveForeground#707070
  • badge.background#e5e5e5
  • badge.foreground#303030
  • breadcrumb.activeSelectionForeground#1f1f1f
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#303030
  • breadcrumb.foreground#707070
  • button.background#e6e6e6
  • button.border#dfdfdf
  • button.foreground#242424
  • button.hoverBackground#dcdcdc
  • button.secondaryBackground#dbdbdb
  • button.secondaryForeground#303030
  • button.secondaryHoverBackground#dddddd
  • charts.green#f0feda
  • charts.lines#f0feda
  • checkbox.background#ffffff
  • checkbox.border#dfdfdf
  • checkbox.selectBackground#dbdbdb
  • checkbox.selectBorder#f0feda
  • commandCenter.activeBackground#dcdcdc
  • commandCenter.activeBorder#f0feda
  • commandCenter.background#ffffff
  • commandCenter.border#dddddd
  • commandCenter.foreground#303030
  • commandCenter.inactiveBorder#dcdcdc
  • debugToolBar.background#dbdbdb
  • descriptionForeground#707070
  • dropdown.background#ffffff
  • dropdown.border#dedede
  • dropdown.foreground#303030
  • editor.background#ffffff
  • editor.findMatchBackground#e0dedb
  • editor.findMatchBorder#9a6500
  • editor.findMatchHighlightBackground#dddcda80
  • editor.foreground#2f2f2f
  • editor.lineHighlightBackground#f4f4f4
  • editor.lineHighlightBorder#dcdcdc
  • editor.rangeHighlightBackground#f0feda12
  • editor.selectionBackground#cfe3ff
  • editor.snippetFinalTabstopHighlightBorder#f0feda
  • editor.snippetTabstopHighlightBackground#f0feda1a
  • editor.wordHighlightBackground#dcdcdc80
  • editor.wordHighlightStrongBackground#dddddd80
  • editorBracketMatch.background#dcdcdc
  • editorBracketMatch.border#6f6f6f
  • editorCursor.foreground#303030
  • editorGroup.border#dcdcdc
  • editorGroup.dropBackground#dcdcdc80
  • editorGroupHeader.border#dcdcdc
  • editorGroupHeader.noTabsBackground#dadada
  • editorGroupHeader.tabsBackground#dadada
  • editorGroupHeader.tabsBorder#dcdcdc
  • editorGutter.background#ffffff
  • editorIndentGuide.activeBackground1#e2e2e2
  • editorIndentGuide.background1#dcdcdc
  • editorLineNumber.activeForeground#606060
  • editorLineNumber.foreground#9a9a9a
  • editorOverviewRuler.border#ffffff
  • editorRuler.foreground#dcdcdc
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#dddddd
  • editorSuggestWidget.foreground#303030
  • editorSuggestWidget.highlightForeground#5a8f00
  • editorSuggestWidget.selectedBackground#eeeeee
  • editorUnnecessaryCode.border#f0feda66
  • editorWidget.background#ffffff
  • editorWidget.border#dddddd
  • extensionButton.prominentBackground#dcdcdc
  • extensionButton.prominentForeground#5a8f00
  • extensionButton.prominentHoverBackground#dedede
  • focusBorder#5a8f00
  • foreground#303030
  • input.background#ffffff
  • input.border#dedede
  • input.foreground#303030
  • input.placeholderForeground#808080
  • inputOption.activeBackground#dcdcdc
  • inputOption.activeBorder#f0feda
  • inputOption.activeForeground#5a8f00
  • keybindingLabel.background#dcdcdc
  • keybindingLabel.border#dedede
  • keybindingLabel.bottomBorder#dcdcdc
  • keybindingLabel.foreground#303030
  • list.activeSelectionBackground#e6e6e6
  • list.activeSelectionForeground#1f1f1f
  • list.activeSelectionIconForeground#f0feda
  • list.focusBackground#eeeeee
  • list.focusForeground#1f1f1f
  • list.focusHighlightForeground#5a8f00
  • list.focusOutline#f0feda
  • list.highlightForeground#5a8f00
  • list.hoverBackground#f3f3f3
  • list.hoverForeground#303030
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#303030
  • menu.background#ffffff
  • menu.border#dedede
  • menu.foreground#303030
  • menu.selectionBackground#eeeeee
  • menu.selectionBorder#dedede
  • menu.selectionForeground#1f1f1f
  • menu.separatorBackground#dedede
  • menubar.selectionBackground#dcdcdc
  • menubar.selectionBorder#dedede
  • menubar.selectionForeground#1f1f1f
  • notificationCenter.border#dddddd
  • notificationLink.foreground#5a8f00
  • notifications.background#ffffff
  • notifications.border#dddddd
  • notifications.foreground#303030
  • panel.background#f7f7f7
  • panel.border#dddddd
  • panelTitle.activeBorder#f0feda
  • panelTitle.activeForeground#303030
  • panelTitle.inactiveForeground#707070
  • peekView.border#f0feda
  • peekViewEditor.background#ffffff
  • peekViewResult.background#f7f7f7
  • pickerGroup.border#dddddd
  • pickerGroup.foreground#5a8f00
  • progressBar.background#f0feda
  • quickInput.background#ffffff
  • quickInput.foreground#303030
  • quickInputList.focusBackground#eeeeee
  • quickInputTitle.background#f7f7f7
  • scrollbarSlider.activeBackground#e7e7e766
  • scrollbarSlider.background#e7e7e733
  • scrollbarSlider.hoverBackground#e7e7e755
  • settings.checkboxBackground#dadada
  • settings.checkboxBorder#dedede
  • settings.dropdownBackground#dadada
  • settings.dropdownBorder#dedede
  • settings.focusedRowBackground#dbdbdb
  • settings.focusedRowBorder#f0feda66
  • settings.headerForeground#303030
  • settings.modifiedItemIndicator#f0feda
  • settings.numberInputBackground#dadada
  • settings.numberInputBorder#dedede
  • settings.rowHoverBackground#dbdbdb
  • settings.textInputBackground#dadada
  • settings.textInputBorder#dedede
  • sideBar.background#f7f7f7
  • sideBar.border#dcdcdc
  • sideBar.dropBackground#dcdcdc80
  • sideBar.foreground#303030
  • sideBarSectionHeader.background#f7f7f7
  • sideBarSectionHeader.border#dcdcdc
  • sideBarTitle.foreground#303030
  • statusBar.background#eeeeee
  • statusBar.border#dedede
  • statusBar.debuggingBackground#d9d9d9
  • statusBar.debuggingBorder#dedede
  • statusBar.debuggingForeground#303030
  • statusBar.foreground#303030
  • statusBar.noFolderBackground#eeeeee
  • statusBar.noFolderBorder#dedede
  • statusBar.noFolderForeground#303030
  • statusBarItem.activeBackground#dedede
  • statusBarItem.compactHoverBackground#dcdcdc
  • statusBarItem.errorBackground#d9d9d9
  • statusBarItem.errorForeground#9a3431
  • statusBarItem.focusBorder#f0feda
  • statusBarItem.hoverBackground#dcdcdc
  • statusBarItem.prominentBackground#dbdbdb
  • statusBarItem.prominentForeground#303030
  • statusBarItem.prominentHoverBackground#dddddd
  • statusBarItem.remoteBackground#d9d9d9
  • statusBarItem.remoteForeground#303030
  • statusBarItem.warningBackground#d9d9d9
  • statusBarItem.warningForeground#9a6500
  • tab.activeBackground#ffffff
  • tab.activeBorder#dadada
  • tab.activeBorderTop#f0feda
  • tab.activeForeground#1f1f1f
  • tab.activeModifiedBorder#f0feda
  • tab.border#d7d7d7
  • tab.hoverBackground#f3f3f3
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#626262
  • tab.inactiveModifiedBorder#e4e4e4
  • tab.lastPinnedBorder#dedede
  • tab.unfocusedActiveBackground#dadada
  • tab.unfocusedActiveForeground#505050
  • tab.unfocusedInactiveBackground#dadada
  • tab.unfocusedInactiveForeground#808080
  • terminal.ansiBlue#1f6fc7
  • terminal.ansiBrightBlue#145bb0
  • terminal.ansiBrightCyan#00838f
  • terminal.ansiBrightGreen#007a4d
  • terminal.ansiBrightMagenta#b1458f
  • terminal.ansiBrightRed#b0003b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#a26100
  • terminal.ansiCyan#008575
  • terminal.ansiGreen#007a4d
  • terminal.ansiMagenta#6767b0
  • terminal.ansiRed#a64542
  • terminal.ansiWhite#303030
  • terminal.ansiYellow#a26100
  • terminal.background#ffffff
  • terminal.border#dedede
  • terminal.dropBackground#dcdcdc80
  • terminal.findMatchBackground#e0dedb80
  • terminal.findMatchBorder#faefdd
  • terminal.foreground#303030
  • terminal.hoverHighlightBackground#dcdcdc
  • terminal.inactiveSelectionBackground#dcdee180
  • terminal.selectionBackground#dcdee1
  • terminal.tab.activeBorder#f0feda
  • terminalCommandDecoration.defaultBackground#707070
  • terminalCommandDecoration.errorBackground#a64542
  • terminalCommandDecoration.successBackground#008575
  • terminalOverviewRuler.border#dedede
  • terminalStickyScroll.background#dadada
  • terminalStickyScroll.border#dedede
  • terminalStickyScrollHover.background#dbdbdb
  • textLink.activeForeground#4a7600
  • textLink.foreground#5a8f00
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#242424
  • titleBar.border#dedede
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#737373
  • toolbar.activeBackground#dcdcdc
  • toolbar.hoverBackground#dbdbdb
  • tree.indentGuidesStroke#dddddd
  • walkThrough.embeddedEditorBackground#dadada
  • widget.border#dddddd
  • widget.shadow#00000022
  • window.activeBorder#dedede
  • window.inactiveBorder#dcdcdc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4b5666italic
string, constant.other.symbol#007d51
constant.numeric, constant.language, support.constant#c17000
keyword, storage, storage.type#b87d25
entity.name.function, support.function, meta.function-call#3c7ccd
entity.name.type, entity.name.class, support.type, support.class#0f9785
variable, variable.other.readwrite#6e6eab
variable.parameter, meta.function.parameters#108c9d
variable.other.property, support.variable.property#89949f
entity.other.attribute-name, meta.decorator#b87d25
entity.name.tag, support.type.property-name#3c7ccd
invalid, invalid.illegal#9a3431underline
mK Coding Extension by Michael Knauer - VS Code Theme