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#4091da
  • activityBar.background#16161D0D
  • activityBar.border#16161D22
  • activityBar.foreground#16161d
  • activityBar.inactiveForeground#16161D99
  • activityBarBadge.background#4091da
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4091da
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#16161DDD
  • breadcrumb.focusForeground#16161d
  • breadcrumb.foreground#16161D99
  • breadcrumbPicker.background#FFFFFF
  • button.background#4091da
  • button.foreground#FFFFFF
  • button.hoverBackground#4091DA88
  • button.secondaryBackground#16161D0D
  • button.secondaryForeground#16161d
  • button.secondaryHoverBackground#16161D22
  • checkbox.background#FFFFFF
  • checkbox.border#16161D33
  • debugToolBar.background#FFFFFF
  • descriptionForeground#16161D99
  • diffEditor.insertedTextBackground#55B64F22
  • diffEditor.removedTextBackground#FE000022
  • dropdown.background#FFFFFF
  • dropdown.border#16161D33
  • dropdown.foreground#16161d
  • dropdown.listBackground#F5F5FA
  • editor.background#F5F5FA
  • editor.findMatchBackground#FCF05066
  • editor.findMatchHighlightBackground#FCF05033
  • editor.focusedStackFrameHighlightBackground#55B64F33
  • editor.foldBackground#16161D11
  • editor.foreground#16161d
  • editor.inactiveSelectionBackground#4091DA22
  • editor.lineHighlightBackground#16161D0D
  • editor.linkedEditingBackground#4091DA22
  • editor.selectionBackground#4091DA33
  • editor.selectionHighlightBackground#A2E7FA66
  • editor.selectionHighlightBorder#A2E7FA00
  • editor.stackFrameHighlightBackground#F9BE1C33
  • editor.wordHighlightBackground#A2E7FA00
  • editor.wordHighlightBorder#4091DA99
  • editor.wordHighlightStrongBackground#A2E7FA00
  • editor.wordHighlightStrongBorder#4091DA66
  • editorBracketHighlight.foreground1#EA6135
  • editorBracketHighlight.foreground2#EA6135
  • editorBracketHighlight.foreground3#EA6135
  • editorBracketHighlight.foreground4#EA6135
  • editorBracketHighlight.foreground5#EA6135
  • editorBracketHighlight.foreground6#EA6135
  • editorBracketMatch.background#A2E7FA66
  • editorBracketMatch.border#4091DA00
  • editorCursor.foreground#4091da
  • editorError.foreground#FE0000
  • editorGroup.border#16161D22
  • editorGroupHeader.tabsBackground#16161D0D
  • editorGroupHeader.tabsBorder#16161D22
  • editorGutter.addedBackground#55B64F
  • editorGutter.deletedBackground#FE0000
  • editorGutter.modifiedBackground#F9BE1C
  • editorIndentGuide.activeBackground#FFFFFFAA
  • editorIndentGuide.background#16161D22
  • editorLineNumber.activeForeground#16161d
  • editorLineNumber.foreground#FFFFFF80
  • editorOverviewRuler.border#16161D22
  • editorWarning.foreground#F9BE1C
  • editorWhitespace.foreground#FFFFFFAA
  • editorWidget.background#FFFFFF
  • errorForeground#FE0000
  • focusBorder#4091da
  • foreground#16161d
  • gitDecoration.addedResourceForeground#55B64F
  • gitDecoration.conflictingResourceForeground#EA6135
  • gitDecoration.deletedResourceForeground#FE0000
  • gitDecoration.ignoredResourceForeground#16161D88
  • gitDecoration.modifiedResourceForeground#F9BE1C
  • gitDecoration.submoduleResourceForeground#16161D88
  • gitDecoration.untrackedResourceForeground#55B64F
  • input.background#FFFFFF
  • input.border#16161D33
  • input.foreground#16161d
  • input.placeholderForeground#16161D88
  • list.activeSelectionBackground#4091da
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#EA6135
  • list.focusBackground#A2E7FA
  • list.hoverBackground#4091DA18
  • list.hoverForeground#16161d
  • list.inactiveFocusBackground#A2E7FA33
  • list.inactiveSelectionBackground#4091DA22
  • list.inactiveSelectionForeground#16161d
  • list.warningForeground#F9BE1C
  • notificationCenterHeader.background#16161D0D
  • notificationCenterHeader.foreground#16161D99
  • notifications.background#FFFFFF
  • notifications.border#16161D22
  • notifications.foreground#16161d
  • notificationsErrorIcon.foreground#FE0000
  • notificationsInfoIcon.foreground#4091da
  • notificationsWarningIcon.foreground#EA6135
  • panel.background#16161D0D
  • panel.border#16161D22
  • panelInput.border#16161D22
  • panelTitle.activeBorder#4091DA
  • panelTitle.activeForeground#16161d
  • panelTitle.inactiveForeground#16161D99
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#F9BE1C44
  • peekViewResult.background#16161D0D
  • peekViewResult.matchHighlightBackground#F9BE1C44
  • pickerGroup.border#16161D22
  • pickerGroup.foreground#4091da
  • progressBar.background#4091da
  • quickInput.background#FFFFFF
  • quickInput.foreground#16161d
  • scrollbar.shadow#16161D22
  • scrollbarSlider.activeBackground#16161D88
  • scrollbarSlider.background#16161D33
  • scrollbarSlider.hoverBackground#16161D44
  • settings.headerForeground#16161d
  • settings.modifiedItemIndicator#4091da
  • sideBar.background#16161D0D
  • sideBar.border#16161D22
  • sideBar.foreground#16161DDD
  • sideBarSectionHeader.background#16161D18
  • sideBarSectionHeader.border#16161D22
  • sideBarSectionHeader.foreground#16161d
  • sideBarTitle.foreground#16161d
  • statusBar.background#16161D0D
  • statusBar.border#16161D22
  • statusBar.debuggingBackground#FE0000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#16161d
  • statusBar.noFolderBackground#F5F5FA
  • statusBarItem.prominentBackground#4091DA22
  • statusBarItem.remoteBackground#4091da
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F5F5FA
  • tab.activeBorder#F5F5FA
  • tab.activeBorderTop#4091da
  • tab.activeForeground#16161d
  • tab.border#16161D22
  • tab.hoverBackground#F5F5FA
  • tab.inactiveBackground#16161D18
  • tab.inactiveForeground#16161D99
  • tab.unfocusedActiveBorder#F5F5FA
  • tab.unfocusedActiveBorderTop#16161D22
  • tab.unfocusedHoverBackground#F5F5FA
  • terminal.ansiBlack#16161d
  • terminal.ansiBlue#4091DA
  • terminal.ansiBrightBlack#16161D99
  • terminal.ansiBrightBlue#4091DA
  • terminal.ansiBrightCyan#EA6135
  • terminal.ansiBrightGreen#55B64F
  • terminal.ansiBrightMagenta#4091DA
  • terminal.ansiBrightRed#FE0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F9BE1C
  • terminal.ansiCyan#EA6135
  • terminal.ansiGreen#55B64F
  • terminal.ansiMagenta#4091DA
  • terminal.ansiRed#FE0000
  • terminal.ansiWhite#16161D22
  • terminal.ansiYellow#F9BE1C
  • terminal.foreground#16161d
  • terminal.tab.activeBorder#FE0000
  • terminalCursor.background#FFFFFF80
  • terminalCursor.foreground#4091da
  • textBlockQuote.background#FFFFFF
  • textBlockQuote.border#16161D22
  • textCodeBlock.background#16161D0D
  • textLink.activeForeground#EA6135
  • textLink.foreground#4091da
  • textPreformat.foreground#16161d
  • textSeparator.foreground#16161D22
  • titleBar.activeBackground#16161D0D
  • titleBar.activeForeground#16161d
  • titleBar.border#16161D22
  • titleBar.inactiveBackground#F5F5FA
  • titleBar.inactiveForeground#16161D99
  • tree.indentGuidesStroke#16161D22
  • welcomePage.buttonBackground#16161D0D
  • welcomePage.buttonHoverBackground#16161D22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#55B64Fitalic
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#A2E7FA
entity, entity.name#4091DA
variable.parameter.function#16161d
entity.name.tag#55B64F
keyword#FE0000
storage, storage.type#FE0000
storage.modifier.package, storage.modifier.import, storage.type.java#16161d
string, punctuation.definition.string, string punctuation.section.embedded source#A2E7FA
support#A2E7FA
meta.property-name#A2E7FA
variable#F9BE1C
variable.other#16161d
invalid.broken#FE0000italic
invalid.deprecated#FE0000italic
invalid.illegal#FE0000italic
invalid.unimplemented#FE0000italic
carriage-return#F5F5FAitalic underline
message.error#FE0000
string variable#A2E7FA
source.regexp, string.regexp#A2E7FA
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#A2E7FA
string.regexp constant.character.escape#55B64Fbold
support.constant#A2E7FA
support.variable#A2E7FA
meta.module-reference#A2E7FA
punctuation.definition.list.begin.markdown#EA6135
markup.heading, markup.heading entity.name#4091DAbold
markup.quote#55B64F
markup.italic#16161ditalic
markup.bold#16161dbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#A2E7FA
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FE0000
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#55B64F
markup.changed, punctuation.definition.changed#EA6135
markup.ignored, markup.untracked#16161d
meta.diff.range#4091DAbold
meta.diff.header#A2E7FA
meta.separator#A2E7FA
meta.output#A2E7FA
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#16161DDD
brackethighlighter.unmatched#FE0000
constant.other.reference.link, string.other.link#4091DAunderline