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.activeBorder#f9826c
  • activityBar.background#3dbbbb
  • activityBar.border#000000
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#000000
  • activityBarBadge.background#FF0000
  • activityBarBadge.foreground#ffffff
  • badge.background#007acc
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#9c9c9c
  • breadcrumbPicker.background#ffffff
  • breadcrumbPicker.foreground#000000
  • button.background#266F6F
  • button.foreground#ffffff
  • button.hoverBackground#3dbbbb
  • checkbox.background#2a2a2a
  • checkbox.border#1b1f23
  • debugToolBar.background#2b3036
  • descriptionForeground#b0b0b0
  • dropdown.background#ffffff
  • dropdown.border#000000
  • dropdown.foreground#000000
  • dropdown.listBackground#ffffff
  • editor.background#FFFFFF
  • editor.findMatchBackground#98e9ff
  • editor.findMatchHighlightBackground#98e9ff
  • editor.findRangeHighlightBackground#98e9ff
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foreground#1E1E1E
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#d4d4d4
  • editor.selectionBackground#bcdeff
  • editor.selectionHighlightBackground#bcdeff
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#bcdeff
  • editor.wordHighlightStrongBackground#bcdeff
  • editorBracketMatch.background#515C6A
  • editorBracketMatch.border#D4D4D4
  • editorCursor.foreground#000000
  • editorError.foreground#F48771
  • editorGroupHeader.tabsBorder#00abab
  • editorGutter.background#ffffff
  • editorGutter.foreground#959595
  • editorHint.foreground#4FC1FF
  • editorIndentGuide.background#404040
  • editorInfo.foreground#3794FF
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.background#ffffff
  • editorLineNumber.foreground#959595
  • editorLink.activeForeground#3794FF
  • editorWarning.foreground#CCA700
  • editorWhitespace.foreground#9c9c9c
  • errorForeground#ff4444
  • focusBorder#005cc5
  • foreground#000000
  • gitDecoration.addedResourceForeground#00dd60
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#00dd60
  • input.background#ffffff
  • input.border#444d56
  • input.foreground#000000
  • input.placeholderForeground#b0b0b0
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#007acc
  • list.hoverBackground#9c9c9c
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#005f5f
  • list.inactiveSelectionForeground#ffffff
  • notificationCenterHeader.background#2a2a2a
  • notificationCenterHeader.foreground#b0b0b0
  • notifications.background#1e1e1e
  • notifications.border#1b1f23
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#ffffff
  • panel.border#000000
  • panelInput.border#000000
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#9c9c9c
  • peekViewEditor.background#1f242888
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1f2428
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#9c9c9c
  • progressBar.background#007acc
  • quickInput.background#2a2a2a
  • quickInput.foreground#9c9c9c
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#007acc
  • sideBar.background#ffffff
  • sideBar.border#000000
  • sideBar.foreground#1e1e1e
  • sideBarSectionHeader.background#3dbbbb
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#000000
  • statusBar.background#266F6F
  • statusBar.border#000000
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2a2a2a
  • statusBarItem.activeBackground#3dbbbb
  • statusBarItem.hoverBackground#3dbbbb
  • statusBarItem.prominentBackground#282e34
  • tab.activeBackground#ffffff
  • tab.activeBorder#3bdddd
  • tab.activeBorderTop#3bdddd
  • tab.activeForeground#000000
  • tab.border#000000
  • tab.hoverBackground#00abab
  • tab.inactiveBackground#e6e6e6
  • tab.inactiveForeground#9c9c9c
  • tab.unfocusedActiveBorder#3bdddd
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#00abab
  • terminal.background#000000
  • terminal.border#3dbbbb
  • terminal.foreground#ffffff
  • textBlockQuote.background#2a2a2a
  • textBlockQuote.border#444d56
  • textCodeBlock.background#1e1e1e
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#79b8ff
  • textPreformat.foreground#ffffff
  • textSeparator.foreground#586069
  • titleBar.activeBackground#266F6F
  • titleBar.activeForeground#ffffff
  • titleBar.border#000000
  • titleBar.inactiveBackground#50B5B5
  • titleBar.inactiveForeground#000000
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
constant.numeric, constant.character, constant.language, constant.other#00d4cd
entity.name.function, support.function#de7300
variable.parameter#1e1e1e
keyword#1398a7
keyword.control, keyword.operator, keyword.other#ce54e9
storage, storage.type, storage.modifier#1398a7
string, punctuation.definition.string, string punctuation.section.embedded source#00d4cd
support.type, support.class, support.constant#79b8ff
variable, variable.other#1e1e1e
entity.name.tag, entity.name.type, entity.name.section#000000
invalid#fdaeb7italic
invalid.deprecated#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
source.regexp, string.regexp#dbedff
string.regexp constant.character.escape#85e89dbold
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#79b8ffbold
markup.quote#85e89d
markup.italic#e1e4e8italic
markup.bold#e1e4e8bold
markup.raw#79b8ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Arduino Language Support - Coding Theme