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#f0644c
  • activityBar.background#ffffff
  • activityBar.border#e1e4e8
  • activityBar.foreground#24292e
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#2188ff
  • activityBarBadge.foreground#ffffff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#24292e
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#ffffff
  • button.background#2188ff
  • button.foreground#ffffff
  • button.hoverBackground#186ccc
  • button.secondaryBackground#eaecef
  • button.secondaryForeground#24292e
  • button.secondaryHoverBackground#f3f4f6
  • checkbox.background#f6f8fa
  • checkbox.border#e1e4e8
  • debugToolBar.background#ffffff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#85e89d33
  • diffEditor.removedTextBackground#f9758326
  • dropdown.background#ffffff
  • dropdown.border#e1e4e8
  • dropdown.foreground#24292e
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#959da51a
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#fafbfc
  • 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
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.background#fcfcfc
  • editorCursor.foreground#044289
  • editorError.foreground#f10a0aad
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#34d058
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#f9c513
  • editorHoverWidget.background#f9f9fc
  • editorHoverWidget.foreground#1c1d1f
  • editorIndentGuide.activeBackground#e1e4e8
  • editorIndentGuide.background#eaecef
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#7a858d
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#959da5
  • editorOverviewRuler.border#ffffff
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#c8c8c8
  • editorSuggestWidget.foreground#24292e
  • editorSuggestWidget.highlightForeground#0366d6
  • editorSuggestWidget.selectedBackground#e7e8e9
  • editorSuggestWidget.selectedForeground#04090e
  • editorSuggestWidget.selectedIconForeground#0366d6
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#ffffff
  • errorForeground#cb2431
  • focusBorder#0366d6
  • foreground#24292e
  • gitDecoration.addedResourceForeground#22863a
  • gitDecoration.conflictingResourceForeground#b08800
  • gitDecoration.deletedResourceForeground#cb2431
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#b08800
  • gitDecoration.submoduleResourceForeground#586069
  • gitDecoration.untrackedResourceForeground#22863a
  • input.background#ffffff
  • input.border#e1e4e8
  • input.foreground#24292e
  • input.placeholderForeground#6a737d
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#24292e
  • list.focusBackground#cce5ff
  • list.focusForeground#05264c
  • list.highlightForeground#0366d6
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#24292e
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#24292e
  • notificationCenterHeader.background#e1e4e8
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#fafbfc
  • notifications.border#e1e4e8
  • notifications.foreground#586069
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#f6f8fa
  • panel.border#e1e4e8
  • panel.dropBorder#24292e
  • panelInput.border#e1e4e8
  • panelSection.border#e1e4e8
  • panelSection.dropBackground#2677cb2e
  • panelSectionHeader.background#80808033
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#24292e
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#586069
  • progressBar.background#2188ff
  • quickInput.background#fafbfc
  • quickInput.foreground#24292e
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#586069
  • settings.modifiedItemIndicator#f9c513
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#24292e
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#24292e
  • sideBarTitle.foreground#24292e
  • statusBar.background#ffffff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#d73a49
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f6f8fa
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#24292e
  • tab.border#e1e4e8
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#f6f8fa
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#0366d6
  • terminal.ansiBrightBlack#586069
  • terminal.ansiBrightBlue#2188ff
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#28a745
  • terminal.ansiBrightMagenta#8a63d2
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#959da5
  • terminal.ansiBrightYellow#dbab09
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#22863a
  • terminal.ansiMagenta#6f42c1
  • terminal.ansiRed#d73a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#b08800
  • terminal.foreground#292c30
  • textBlockQuote.background#f6f8fa
  • textBlockQuote.border#dfe2e5
  • textCodeBlock.background#1b1f230d
  • textLink.activeForeground#0366d6
  • textLink.foreground#0366d6
  • textPreformat.foreground#586069
  • textSeparator.foreground#eaecef
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#586069
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#eaecef

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment, string.docstring, punctuation.definition.string julia#8893a0
variable.other.constant, variable.language#005cc5bold
entity.name, storage.type.haskell, meta.export.default, meta.definition.variable#e38509
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression, keyword.operator.update, keyword.operator.assignment, meta.function.call punctuation.brackets#24292e
entity.name.function, meta.function-call, meta.function.call, support.function.macro#0364d3
entity.name.function.julia, meta.function.definitionitalic
meta.function.definition punctuation.brackets
support.function.macro, entity.name.function.macrobold
meta.function-call.arguments#24292e
entity.name.tag, support.class.component#157c37
keyword, storage, storage.type#ce17d4
keyword.operator#005cc5
support.type#ec6206
storage.modifier.package, storage.modifier.import, storage.type.java#24292e
string, punctuation.definition.string, string punctuation.section.embedded source#07852d
support#0364d3
meta.property-name#005cc5
variable.other, variable#24292e
invalid.broken#b31d28italic
invalid.deprecated#b31d28italic
invalid.illegal#b31d28italic
invalid.unimplemented#b31d28italic
carriage-return#fafbfcitalic underline
message.error#b31d28
string source, string variable#00418b
source.regexp, string.regexp#07852ditalic
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#07852d
constant.character.escape#00418bbold
string.regexp constant.character.escape, support.other.escape.special.regexp#00418bbold italic
constant.language, constant.other.symbol, support.constant, constant.numeric, entity.name.constant#d81d55bold
constant.numeric
constant.other#005cc5bold
constant.other.symbol
support.variable#005cc5
meta.module-reference#005cc5
punctuation.definition.list.begin.markdown#e36209
markup.heading, markup.heading entity.name#005cc5bold
markup.quote#22863a
markup.italic#24292eitalic
markup.bold#24292ebold
markup.raw#005cc5
markup.substitution.attribute-referencebold
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#6f42c1bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
constant.other.reference.link, string.other.link#032f62underline
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
Bertram Theme by Robert Bennett - VS Code Theme