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#fff
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#2188ff
  • activityBarBadge.foreground#fff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafbfc
  • button.background#159739
  • button.foreground#fff
  • button.hoverBackground#138934
  • button.secondaryBackground#e1e4e8
  • button.secondaryForeground#1b1f23
  • button.secondaryHoverBackground#d1d5da
  • checkbox.background#fafbfc
  • checkbox.border#d1d5da
  • debugToolBar.background#fff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#fafbfc
  • dropdown.border#e1e4e8
  • dropdown.foreground#2f363d
  • dropdown.listBackground#fff
  • editor.background#fff
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#d1d5da11
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#f6f8fa
  • editor.linkedEditingBackground#0366d611
  • editor.selectionBackground#0366d625
  • editor.selectionHighlightBackground#34d05840
  • editor.selectionHighlightBorder#34d05800
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#24943e99
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketHighlight.foreground1#005cc5
  • editorBracketHighlight.foreground2#e36209
  • editorBracketHighlight.foreground3#5a32a3
  • editorBracketHighlight.foreground4#005cc5
  • editorBracketHighlight.foreground5#e36209
  • editorBracketHighlight.foreground6#5a32a3
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorError.foreground#cb2431
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#d7dbe0
  • editorIndentGuide.background#eff2f6
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#f9c513
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#f6f8fa
  • errorForeground#cb2431
  • focusBorder#2188ff
  • foreground#444d56
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • input.background#fafbfc
  • input.border#e1e4e8
  • input.foreground#2f363d
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#2f363d
  • list.focusBackground#cce5ff
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#2f363d
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#2f363d
  • notificationCenterHeader.background#e1e4e8
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#fafbfc
  • notifications.border#e1e4e8
  • notifications.foreground#2f363d
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#f6f8fa
  • panel.border#e1e4e8
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#2f363d
  • progressBar.background#2188ff
  • quickInput.background#fafbfc
  • quickInput.foreground#2f363d
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#2f363d
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#2f363d
  • sideBarTitle.foreground#2f363d
  • statusBar.background#fff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#fff
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.remoteBackground#fff
  • statusBarItem.remoteForeground#586069
  • tab.activeBackground#fff
  • tab.activeBorder#fff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#2f363d
  • tab.border#e1e4e8
  • tab.hoverBackground#fff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#fff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#fff
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#0366d6
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#005cc5
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#22863a
  • terminal.ansiBrightMagenta#5a32a3
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#d1d5da
  • terminal.ansiBrightYellow#b08800
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#28a745
  • terminal.ansiMagenta#5a32a3
  • terminal.ansiRed#d73a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#dbab09
  • terminal.foreground#586069
  • terminal.tab.activeBorder#f9826c
  • terminalCursor.background#d1d5da
  • terminalCursor.foreground#005cc5
  • textBlockQuote.background#fafbfc
  • textBlockQuote.border#e1e4e8
  • textCodeBlock.background#f6f8fa
  • textLink.activeForeground#005cc5
  • textLink.foreground#0366d6
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#2f363d
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
comment#8C8C8Citalic
string, constant.other.symbol#003366
string.regexp, constant.character, constant.other#CE54B8
constant.numeric#E36209
constant.language#E36209
variable, variable.parameter.function-call#000000
variable.member#f07171
variable.language#0033B3italic
storage#0033B3
keyword#0033B3
keyword.operator#000000
punctuation.separator, punctuation.terminator#000000
punctuation.section#000000
punctuation.accessor#000000
punctuation.definition.template-expression#fa8d3e
meta.embedded#5c6166
source.java storage.type, source.haskell storage.type, source.c storage.type#CE54B8
entity.other.inherited-class#CE54B8
storage.type.function#000000
source.java storage.type.primitive#0033B3
entity.name.function#18800D
variable.parameter, meta.parameter#6F42C1
variable.function, variable.annotation, meta.function-call.generic, support.function.go#18800D
support.function, support.macro#f07171
entity.name.import, entity.name.package#86b300
entity.name#D73A49
entity.name.tag, meta.tag.sgml#0033B3
support.class.component#399ee6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#0033B3
entity.other.attribute-name#D73A49
support.constant#ed9366italic
support.type, support.class, source.go storage.type#0033B3
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#0033B3
invalid#e65050
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#f2ae49
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#399ee6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#787b8099
support.type.property-name#067D17normal
constant.numeric.line-number.find-in-files - match#787b8099
constant.numeric.line-number.match#fa8d3e
entity.name.filename.find-in-files#86b300
message.error#e65050
markup.heading, markup.heading entity.name#86b300bold
markup.underline.link, string.other.link#55b4d4
markup.italic#f07171italic
markup.bold#f07171bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#787b8099bold
markup.quote#4cbf99italic
markup.list punctuation.definition.list.begin#0033B3
markup.inserted#6cbf43
markup.changed#478acc
markup.deleted#ff7383
markup.strike#e6ba7e
markup.table#55b4d4
text.html.markdown markup.inline.raw#ed9366
text.html.markdown meta.dummy.line-break#787b8099
punctuation.definition.markdown#787b8099
GatomontesRoseIII by GatomontesRoseIII - VS Code Theme