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#161b22
  • activityBar.border#30363d
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#ffffff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#176f2c
  • button.foreground#dcffe4
  • button.hoverBackground#22863a
  • button.secondaryBackground#444d56
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#586069
  • checkbox.background#444d56
  • checkbox.border#30363d
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#21262d
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#1c2128
  • editor.background#090c10
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#3392ff22
  • editor.lineHighlightBackground#161b22
  • editor.linkedEditingBackground#3392ff22
  • editor.selectionBackground#3392ff44
  • editor.selectionHighlightBackground#17e5e633
  • editor.selectionHighlightBorder#17e5e600
  • editor.stackFrameHighlightBackground#c6902625
  • editor.wordHighlightBackground#17e5e600
  • editor.wordHighlightBorder#17e5e699
  • editor.wordHighlightStrongBackground#17e5e600
  • editor.wordHighlightStrongBorder#17e5e666
  • editorBracketMatch.background#17e5e650
  • editorBracketMatch.border#17e5e600
  • editorCursor.foreground#c8e1ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#0d1117
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground1#444d56
  • editorIndentGuide.background1#2f363d
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#f0f6fc4d
  • editorOverviewRuler.border#30363d
  • editorWhitespace.foreground#444d56
  • editorWidget.background#161b22
  • errorForeground#f97583
  • focusBorder#005cc5
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#56D364
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#F85149
  • gitDecoration.ignoredResourceForeground#30363D
  • gitDecoration.modifiedResourceForeground#58a6ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#56D364
  • input.background#010409
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#388bfd1a
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#044289
  • list.hoverBackground#161b22
  • list.hoverForeground#c9d1d9
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#161b22
  • list.inactiveSelectionForeground#c9d1d9
  • notificationCenterHeader.background#0d1117
  • notificationCenterHeader.foreground#959da5
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#0d1117
  • panel.border#30363d
  • panelInput.border#2f363d
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#161b2288
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#161b22
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#c9d1d9
  • progressBar.background#0366d6
  • quickInput.background#0d1117
  • quickInput.foreground#c9d1d9
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#c9d1d9
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#0d1117
  • sideBar.border#21262d
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#161b22
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#161b22
  • statusBar.border#30363d
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.prominentBackground#161b22
  • tab.activeBackground#090c10
  • tab.activeBorder#090c10
  • tab.activeBorderTop#21262d
  • tab.activeForeground#c9d1d9
  • tab.border#21262d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#0d1117
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedHoverBackground#0d1117
  • terminal.foreground#d1d5da
  • textBlockQuote.background#0d1117
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#58a6ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#161b22
  • titleBar.activeForeground#c9d1d9
  • titleBar.border#30363d
  • titleBar.inactiveBackground#161b2299
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.background#090c10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6A737D
constant, entity.name.constant, variable.other.constant, variable.language#58a6ff
entity, entity.name#d2a8ff
entity.other.attribute-name#79c0ff
variable.parameter#c9d1d9
variable.parameter.function#c9d1d9
entity.name.tag#7ee787
entity.name.type.module#ffa657
keyword#ff7b72
keyword.operator#79c0ff
storage, storage.type#ff7b72
storage.modifier.package, storage.modifier.import, storage.type.java#c9d1d9
string, punctuation.definition.string, string punctuation.section.embedded source#a5d6ff
support#58a6ff
meta.property-name#58a6ff
variable#f0f6fc
variable.language.super#c9d1d9
variable.language.this#c9d1d9
variable.other#c9d1d9
variable.other.object.property#79c0ff
variable.other.property#79c0ff
variable.other.readwrite.alias#ffa657
invalid.broken#FDAEB7italic
invalid.deprecated#FDAEB7italic
invalid.illegal#FDAEB7italic
invalid.unimplemented#FDAEB7italic
carriage-return#0d1117italic underline
message.error#FDAEB7
string source#c9d1d9
string variable#58a6ff
source.regexp, string.regexp#DBEDFF
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#DBEDFF
string.regexp constant.character.escape#85E89Dbold
support.constant#58a6ff
support.variable#58a6ff
meta.module-reference#58a6ff
punctuation.definition.list.begin.markdown#FFAB70
markup.heading, markup.heading entity.name#58a6ffbold
markup.quote#85E89D
markup.italic#c9d1d9italic
markup.bold#c9d1d9bold
markup.raw#58a6ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FDAEB7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85E89D
markup.changed, punctuation.definition.changed#FFAB70
punctuation.definition.tag#79c0ff
markup.ignored, markup.untracked#2F363D
meta.diff.range#B392F0bold
meta.diff.header#58a6ff
meta.separator#58a6ffbold
meta.output#58a6ff
meta.object-literal.key#58a6ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#D1D5DA
brackethighlighter.unmatched#FDAEB7
constant.other.reference.link, string.other.link#DBEDFFunderline
comment#8b949e
punctuation.definition.comment#8b949e
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

GitHub Dark Color Theme - Coding Theme