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#cc724e
  • activityBar.background#1d1f21
  • activityBar.border#282a2e
  • activityBar.foreground#c5c8c6
  • activityBar.inactiveForeground#969896
  • activityBarBadge.background#4590f6
  • activityBarBadge.foreground#e2e2dc
  • badge.background#003072
  • badge.foreground#acc5dd
  • breadcrumb.activeSelectionForeground#b5b9b8
  • breadcrumb.focusForeground#c5c8c6
  • breadcrumb.foreground#a0a2a0
  • breadcrumbPicker.background#242427
  • button.background#095b10
  • button.foreground#c0e2c2
  • button.hoverBackground#5dac4d
  • button.secondaryBackground#373b41
  • button.secondaryForeground#e2e2dc
  • button.secondaryHoverBackground#838481
  • checkbox.background#373b41
  • checkbox.border#282a2e
  • debugToolBar.background#242427
  • descriptionForeground#a0a2a0
  • diffEditor.insertedTextBackground#41ac3830
  • diffEditor.removedTextBackground#a15d6e30
  • dropdown.background#282a2e
  • dropdown.border#282a2e
  • dropdown.foreground#c5c8c6
  • dropdown.listBackground#1d1f21
  • editor.background#1d1f21
  • editor.findMatchBackground#c5b43144
  • editor.findMatchHighlightBackground#c5b43122
  • editor.focusedStackFrameHighlightBackground#20561733
  • editor.foldBackground#83848115
  • editor.foreground#c5c8c6
  • editor.inactiveSelectionBackground#4580c022
  • editor.lineHighlightBackground#242427
  • editor.linkedEditingBackground#4580c022
  • editor.selectionBackground#4580c044
  • editor.selectionHighlightBackground#8abeb733
  • editor.selectionHighlightBorder#8abeb700
  • editor.stackFrameHighlightBackground#a7791025
  • editor.wordHighlightBackground#8abeb700
  • editor.wordHighlightBorder#8abeb799
  • editor.wordHighlightStrongBackground#8abeb700
  • editor.wordHighlightStrongBorder#8abeb766
  • editorBracketHighlight.foreground1#81a2be
  • editorBracketHighlight.foreground2#de935f
  • editorBracketHighlight.foreground3#b294bb
  • editorBracketHighlight.foreground4#81a2be
  • editorBracketHighlight.foreground5#de935f
  • editorBracketHighlight.foreground6#b294bb
  • editorBracketMatch.background#8abeb750
  • editorBracketMatch.border#8abeb700
  • editorCursor.foreground#acc5dd
  • editorError.foreground#cc6666
  • editorGroup.border#282a2e
  • editorGroupHeader.tabsBackground#161719
  • editorGroupHeader.tabsBorder#282a2e
  • editorGutter.addedBackground#41ac38
  • editorGutter.deletedBackground#be3e3d
  • editorGutter.modifiedBackground#3977c1
  • editorLineNumber.activeForeground#c5c8c6
  • editorLineNumber.foreground#373b41
  • editorOverviewRuler.border#282a2e
  • editorWarning.foreground#f0c674
  • editorWhitespace.foreground#373b41
  • editorWidget.background#161719
  • errorForeground#cc6666
  • focusBorder#4185e4
  • foreground#b5b9b8
  • gitDecoration.addedResourceForeground#3992b1
  • gitDecoration.conflictingResourceForeground#de935f
  • gitDecoration.deletedResourceForeground#be3e3d
  • gitDecoration.ignoredResourceForeground#969896
  • gitDecoration.modifiedResourceForeground#81a2be
  • gitDecoration.submoduleResourceForeground#969896
  • gitDecoration.untrackedResourceForeground#3992b1
  • input.background#282a2e
  • input.border#282a2e
  • input.foreground#c5c8c6
  • input.placeholderForeground#a0a2a0
  • list.activeSelectionBackground#32353a
  • list.activeSelectionForeground#c5c8c6
  • list.focusBackground#003072
  • list.hoverBackground#212427
  • list.hoverForeground#c5c8c6
  • list.inactiveFocusBackground#172330
  • list.inactiveSelectionBackground#212427
  • list.inactiveSelectionForeground#c5c8c6
  • notificationCenterHeader.background#1d1f21
  • notificationCenterHeader.foreground#a0a2a0
  • notifications.background#282a2e
  • notifications.border#282a2e
  • notifications.foreground#c5c8c6
  • notificationsErrorIcon.foreground#be3e3d
  • notificationsInfoIcon.foreground#81a2be
  • notificationsWarningIcon.foreground#de935f
  • panel.background#161719
  • panel.border#282a2e
  • panelInput.border#282a2e
  • panelTitle.activeBorder#cc724e
  • panelTitle.activeForeground#c5c8c6
  • panelTitle.inactiveForeground#a0a2a0
  • peekViewEditor.background#16171988
  • peekViewEditor.matchHighlightBackground#c5b43133
  • peekViewResult.background#161719
  • peekViewResult.matchHighlightBackground#c5b43133
  • pickerGroup.border#373b41
  • pickerGroup.foreground#c5c8c6
  • progressBar.background#4590f6
  • quickInput.background#1d1f21
  • quickInput.foreground#c5c8c6
  • scrollbar.shadow#01000088
  • scrollbarSlider.activeBackground#96989688
  • scrollbarSlider.background#96989633
  • scrollbarSlider.hoverBackground#96989644
  • settings.headerForeground#c5c8c6
  • settings.modifiedItemIndicator#4590f6
  • sideBar.background#161719
  • sideBar.border#282a2e
  • sideBar.foreground#b5b9b8
  • sideBarSectionHeader.background#161719
  • sideBarSectionHeader.border#282a2e
  • sideBarSectionHeader.foreground#c5c8c6
  • sideBarTitle.foreground#c5c8c6
  • statusBar.background#1d1f21
  • statusBar.border#282a2e
  • statusBar.debuggingBackground#bd6e5e
  • statusBar.debuggingForeground#e2e2dc
  • statusBar.foreground#b5b9b8
  • statusBar.noFolderBackground#1d1f21
  • statusBarItem.prominentBackground#212427
  • statusBarItem.remoteBackground#1d1f21
  • statusBarItem.remoteForeground#b5b9b8
  • tab.activeBackground#1d1f21
  • tab.activeBorder#1d1f21
  • tab.activeBorderTop#cc724e
  • tab.activeForeground#c5c8c6
  • tab.border#282a2e
  • tab.hoverBackground#1d1f21
  • tab.inactiveBackground#161719
  • tab.inactiveForeground#a0a2a0
  • tab.unfocusedActiveBorder#1d1f21
  • tab.unfocusedActiveBorderTop#282a2e
  • tab.unfocusedHoverBackground#1d1f21
  • terminal.ansiBlack#838481
  • terminal.ansiBlue#3977c1
  • terminal.ansiBrightBlack#a0a2a0
  • terminal.ansiBrightBlue#81a2be
  • terminal.ansiBrightCyan#97adaf
  • terminal.ansiBrightGreen#b5bd68
  • terminal.ansiBrightMagenta#b294bb
  • terminal.ansiBrightRed#cc6666
  • terminal.ansiBrightWhite#ddded9
  • terminal.ansiBrightYellow#f0c674
  • terminal.ansiCyan#859fa1
  • terminal.ansiGreen#3992b1
  • terminal.ansiMagenta#b294bb
  • terminal.ansiRed#be3e3d
  • terminal.ansiWhite#b5b9b8
  • terminal.ansiYellow#f0c674
  • terminal.foreground#b5b9b8
  • terminal.tab.activeBorder#cc724e
  • terminalCursor.background#838481
  • terminalCursor.foreground#81a2be
  • textBlockQuote.background#1d1f21
  • textBlockQuote.border#373b41
  • textCodeBlock.background#282a2e
  • textLink.activeForeground#acc5dd
  • textLink.foreground#81a2be
  • textPreformat.foreground#b5b9b8
  • textSeparator.foreground#838481
  • titleBar.activeBackground#1d1f21
  • titleBar.activeForeground#c5c8c6
  • titleBar.border#282a2e
  • titleBar.inactiveBackground#161719
  • titleBar.inactiveForeground#a0a2a0
  • tree.indentGuidesStroke#282a2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#969896
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#81a2be
entity, entity.name#b294bb
variable.parameter.function#c5c8c6
entity.name.tag#b5bd68
keyword#cc6666
storage, storage.type#cc6666
storage.modifier.package, storage.modifier.import, storage.type.java#c5c8c6
string, punctuation.definition.string, string punctuation.section.embedded source#a3b3bc
support#81a2be
meta.property-name#81a2be
variable#de935f
variable.other#c5c8c6
invalid.broken#cc6666italic
invalid.deprecated#cc6666italic
invalid.illegal#cc6666italic
invalid.unimplemented#cc6666italic
carriage-return#1d1f21italic underline
message.error#cc6666
string variable#81a2be
source.regexp, string.regexp#bfd1dd
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#bfd1dd
string.regexp constant.character.escape#b5bd68bold
support.constant#81a2be
support.variable#81a2be
meta.module-reference#81a2be
punctuation.definition.list.begin.markdown#de935f
markup.heading, markup.heading entity.name#81a2bebold
markup.quote#b5bd68
markup.italic#c5c8c6italic
markup.bold#c5c8c6bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#81a2be
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#cc6666
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#b5bd68
markup.changed, punctuation.definition.changed#de935f
markup.ignored, markup.untracked#282a2e
meta.diff.range#b294bbbold
meta.diff.header#81a2be
meta.separator#81a2bebold
meta.output#81a2be
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#b5b9b8
brackethighlighter.unmatched#cc6666
constant.other.reference.link, string.other.link#bfd1ddunderline
token.info-token#6d82a7
token.warn-token#ad801e
token.error-token#bf696e
token.debug-token#b06db3