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#16161d
  • activityBar.border#00000066
  • activityBar.foreground#ffffffe6
  • activityBar.inactiveForeground#ffffff99
  • activityBarBadge.background#4091da
  • activityBarBadge.foreground#ffffff
  • badge.background#4091da
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffffcc
  • breadcrumb.focusForeground#ffffffe6
  • breadcrumb.foreground#ffffff99
  • breadcrumbPicker.background#16161d
  • button.background#55b64f
  • button.foreground#ffffff
  • button.hoverBackground#55b64f
  • button.secondaryBackground#16161d
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#ffffff12
  • checkbox.background#16161d
  • checkbox.border#00000066
  • debugToolBar.background#16161d
  • descriptionForeground#ffffff99
  • diffEditor.insertedTextBackground#55b64f30
  • diffEditor.removedTextBackground#fe000030
  • dropdown.background#16161d
  • dropdown.border#00000066
  • dropdown.foreground#ffffffe6
  • dropdown.listBackground#16161d
  • editor.background#16161d
  • editor.findMatchBackground#fcf05044
  • editor.findMatchHighlightBackground#fcf05022
  • editor.focusedStackFrameHighlightBackground#55b64f25
  • editor.foldBackground#ffffff10
  • editor.foreground#ffffffe6
  • editor.inactiveSelectionBackground#4091da22
  • editor.lineHighlightBackground#ffffff08
  • editor.linkedEditingBackground#4091da22
  • editor.selectionBackground#4091da44
  • editor.selectionHighlightBackground#a2e7fa33
  • editor.selectionHighlightBorder#a2e7fa00
  • editor.stackFrameHighlightBackground#f9be1c25
  • editor.wordHighlightBackground#a2e7fa00
  • editor.wordHighlightBorder#a2e7fa99
  • editor.wordHighlightStrongBackground#a2e7fa00
  • editor.wordHighlightStrongBorder#a2e7fa66
  • editorBracketHighlight.foreground1#ea6135
  • editorBracketHighlight.foreground2#ea6135
  • editorBracketHighlight.foreground3#ea6135
  • editorBracketHighlight.foreground4#ea6135
  • editorBracketHighlight.foreground5#ea6135
  • editorBracketHighlight.foreground6#ea6135
  • editorBracketMatch.background#a2e7fa50
  • editorBracketMatch.border#a2e7fa00
  • editorCursor.foreground#a2e7fa
  • editorError.foreground#fe0000
  • editorGroup.border#00000066
  • editorGroupHeader.tabsBackground#16161d
  • editorGroupHeader.tabsBorder#00000066
  • editorGutter.addedBackground#55b64f
  • editorGutter.deletedBackground#fe0000
  • editorGutter.modifiedBackground#f9be1c
  • editorIndentGuide.activeBackground#ffffff24
  • editorIndentGuide.background#ffffff12
  • editorLineNumber.activeForeground#ffffffe6
  • editorLineNumber.foreground#ffffff33
  • editorOverviewRuler.border#00000066
  • editorWarning.foreground#fcf050
  • editorWhitespace.foreground#ffffff24
  • editorWidget.background#16161d
  • errorForeground#fe0000
  • focusBorder#a2e7fa
  • foreground#ffffffcc
  • gitDecoration.addedResourceForeground#55b64f
  • gitDecoration.conflictingResourceForeground#ea6135
  • gitDecoration.deletedResourceForeground#fe0000
  • gitDecoration.ignoredResourceForeground#ffffff99
  • gitDecoration.modifiedResourceForeground#f9be1c
  • gitDecoration.submoduleResourceForeground#ffffff99
  • gitDecoration.untrackedResourceForeground#55b64f
  • input.background#16161d
  • input.border#00000066
  • input.foreground#ffffffe6
  • input.placeholderForeground#ffffff99
  • list.activeSelectionBackground#ffffff14
  • list.activeSelectionForeground#ffffffe6
  • list.errorForeground#ea6135
  • list.focusBackground#a2e7fa
  • list.hoverBackground#ffffff08
  • list.hoverForeground#ffffffe6
  • list.inactiveFocusBackground#ffffff08
  • list.inactiveSelectionBackground#ffffff0c
  • list.inactiveSelectionForeground#ffffffe6
  • list.warningForeground#f9be1c
  • notificationCenterHeader.background#16161d
  • notificationCenterHeader.foreground#ffffff99
  • notifications.background#16161d
  • notifications.border#00000066
  • notifications.foreground#ffffffe6
  • notificationsErrorIcon.foreground#fe0000
  • notificationsInfoIcon.foreground#a2e7fa
  • notificationsWarningIcon.foreground#ea6135
  • panel.background#16161d
  • panel.border#00000066
  • panelInput.border#ffffff12
  • panelTitle.activeBorder#4091DA
  • panelTitle.activeForeground#ffffffe6
  • panelTitle.inactiveForeground#ffffff99
  • peekViewEditor.background#16161d88
  • peekViewEditor.matchHighlightBackground#f9be1c33
  • peekViewResult.background#16161d
  • peekViewResult.matchHighlightBackground#f9be1c33
  • pickerGroup.border#ffffff24
  • pickerGroup.foreground#ffffffe6
  • progressBar.background#a2e7fa
  • quickInput.background#16161d
  • quickInput.foreground#ffffffe6
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#ffffff88
  • scrollbarSlider.background#ffffff33
  • scrollbarSlider.hoverBackground#ffffff44
  • settings.headerForeground#ffffffe6
  • settings.modifiedItemIndicator#a2e7fa
  • sideBar.background#16161d
  • sideBar.border#00000066
  • sideBar.foreground#ffffffcc
  • sideBarSectionHeader.background#16161d
  • sideBarSectionHeader.border#00000066
  • sideBarSectionHeader.foreground#ffffffe6
  • sideBarTitle.foreground#ffffffe6
  • statusBar.background#16161d
  • statusBar.border#00000066
  • statusBar.debuggingBackground#fe000050
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#16161d
  • statusBarItem.prominentBackground#16161d
  • statusBarItem.remoteBackground#16161d
  • statusBarItem.remoteForeground#ffffffcc
  • tab.activeBackground#16161d
  • tab.activeBorder#16161d
  • tab.activeBorderTop#4091da
  • tab.activeForeground#ffffffe6
  • tab.border#00000066
  • tab.hoverBackground#16161d
  • tab.inactiveBackground#16161d
  • tab.inactiveForeground#ffffff99
  • tab.unfocusedActiveBorder#16161d
  • tab.unfocusedActiveBorderTop#00000066
  • tab.unfocusedHoverBackground#16161d
  • terminal.ansiBlack#ffffff80
  • terminal.ansiBlue#a2e7fa
  • terminal.ansiBrightBlack#ffffff99
  • terminal.ansiBrightBlue#a2e7fa
  • terminal.ansiBrightCyan#ea6135
  • terminal.ansiBrightGreen#55B64F
  • terminal.ansiBrightMagenta#4091DA
  • terminal.ansiBrightRed#fe0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FCF050
  • terminal.ansiCyan#ea6135
  • terminal.ansiGreen#55B64F
  • terminal.ansiMagenta#4091DA
  • terminal.ansiRed#fe0000
  • terminal.ansiWhite#ffffffcc
  • terminal.ansiYellow#FCF050
  • terminal.foreground#ffffffcc
  • terminal.tab.activeBorder#fe0000
  • terminalCursor.background#ffffff80
  • terminalCursor.foreground#a2e7fa
  • textBlockQuote.background#16161d
  • textBlockQuote.border#ffffff24
  • textCodeBlock.background#16161d
  • textLink.activeForeground#a2e7fa
  • textLink.foreground#a2e7fa
  • textPreformat.foreground#ffffffcc
  • textSeparator.foreground#ffffff80
  • titleBar.activeBackground#16161d
  • titleBar.activeForeground#ffffffe6
  • titleBar.border#00000066
  • titleBar.inactiveBackground#16161d
  • titleBar.inactiveForeground#ffffff99
  • tree.indentGuidesStroke#ffffff12
  • welcomePage.buttonBackground#16161d
  • welcomePage.buttonHoverBackground#ffffff12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#55b64f
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#a2e7fa
entity, entity.name#4091DA
variable.parameter.function#ffffffe6
entity.name.tag#55b64f
keyword#fe0000
storage, storage.type#fe0000
storage.modifier.package, storage.modifier.import, storage.type.java#ffffffe6
string, punctuation.definition.string, string punctuation.section.embedded source#a2e7fa
support#a2e7fa
meta.property-name#a2e7fa
variable#f9be1c
variable.other#ffffffe6
invalid.broken#fe0000italic
invalid.deprecated#fe0000italic
invalid.illegal#fe0000italic
invalid.unimplemented#fe0000italic
carriage-return#16161ditalic 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#a2e7fabold
markup.quote#55b64f
markup.italic#ffffffe6italic
markup.bold#ffffffe6bold
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#a2e7fabold
meta.output#a2e7fa
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#ffffffcc
brackethighlighter.unmatched#fe0000
constant.other.reference.link, string.other.link#a2e7faunderline