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#eb3084
  • activityBar.background#20232b
  • activityBar.border#1a1c23
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#fff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#3960a3
  • button.foreground#dcffe4
  • button.hoverBackground#315490
  • button.secondaryBackground#444d56
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#586069
  • checkbox.background#444d56
  • checkbox.border#1a1c23
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#2f363d
  • dropdown.border#1a1c23
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#20232b
  • editor.background#20232b
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#2b3036
  • 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
  • editorBracketHighlight.foreground1#79b8ff
  • editorBracketHighlight.foreground2#ffab70
  • editorBracketHighlight.foreground3#b392f0
  • editorBracketHighlight.foreground4#79b8ff
  • editorBracketHighlight.foreground5#ffab70
  • editorBracketHighlight.foreground6#b392f0
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#c8e1ff
  • editorError.foreground#f97583
  • editorGroup.border#1a1c23
  • editorGroupHeader.tabsBackground#1B1E27
  • editorGroupHeader.tabsBorder#1a1c23
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground1#444d56
  • editorIndentGuide.background1#2f363d
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#1a1c23
  • editorWarning.foreground#ffea7f
  • editorWhitespace.foreground#444d56
  • editorWidget.background#1B1E27
  • errorForeground#f97583
  • focusBorder#005cc5
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#0da0ba
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#0da0ba
  • input.background#2f363d
  • input.border#1a1c23
  • input.foreground#e1e4e8
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#39414a
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#044289
  • list.hoverBackground#282e34
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#282e34
  • list.inactiveSelectionForeground#e1e4e8
  • notificationCenterHeader.background#20232b
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2f363d
  • notifications.border#1a1c23
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#1B1E27
  • panel.border#1a1c23
  • panelInput.border#2f363d
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1B1E27
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1B1E27
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#0366d6
  • quickInput.background#20232b
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#e1e4e8
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#1B1E27
  • sideBar.border#1a1c23
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#1B1E27
  • sideBarSectionHeader.border#1a1c23
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#20232b
  • statusBar.border#1a1c23
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#20232b
  • statusBarItem.prominentBackground#282e34
  • statusBarItem.remoteBackground#20232b
  • statusBarItem.remoteForeground#d1d5da
  • tab.activeBackground#20232b
  • tab.activeBorder#20232b
  • tab.activeBorderTop#ff4c9c
  • tab.activeForeground#e1e4e8
  • tab.border#1a1c23
  • tab.hoverBackground#20232b
  • tab.inactiveBackground#1B1E27
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#20232b
  • tab.unfocusedActiveBorderTop#1a1c23
  • tab.unfocusedHoverBackground#20232b
  • terminal.ansiBlack#586069
  • terminal.ansiBlue#2188ff
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#79b8ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#85e89d
  • terminal.ansiBrightMagenta#b392f0
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#ffea7f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#0da0ba
  • terminal.ansiMagenta#b392f0
  • terminal.ansiRed#ea4a5a
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#ffea7f
  • terminal.foreground#d1d5da
  • terminal.tab.activeBorder#f9826c
  • terminalCursor.background#586069
  • terminalCursor.foreground#79b8ff
  • textBlockQuote.background#20232b
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#79b8ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#20232b
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#1a1c23
  • titleBar.inactiveBackground#1B1E27
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737ditalic
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#79b8ff
constant.numeric, constant.languange.boolean, constant.language#9bf6ff
entity, entity.name#b392f0
entity.name.function#6e8cef
entity.name.tag#85e89d
keyword#f97583
keyword.operator.assignment#ff46e6
keyword.operator.logical#9ece6abold
storage, storage.type#f97583
storage.modifier.package, storage.modifier.import, storage.type.java#e1e4e8
string, punctuation.definition.string#9ecbff
string punctuation.section.embedded source, string.quoted.double, string.quoted.single#2ac3deitalic
support.function.magic#9ece6a
meta.property-name#79b8ff
variable#e6edea
variable.parameter#ffa347
variable.other.property#d380ee
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#20232bitalic underline
message.error#fdaeb7
string variable#2ac3de
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
constant.character.format.#FFDE64
support.constant#79b8ff
support.variable#2ac3de
meta.module-reference#79b8ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#79b8ffbold
markup.quote#85e89d
markup.italic#e1e4e8italic
markup.bold#e1e4e8bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79b8ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
punctuation.separator#79b8ff
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed, punctuation.definition.arguments, punctuation.definition.list, punctuation.definition.dict#FFDE64
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
meta.function-call.generic#d380ee
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline
GitHub Custom Dark by Rivan Aji - VS Code Theme