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#f78166
  • activityBar.background#0d1117
  • activityBar.border#30363d
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#8b949e
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#ffffff
  • badge.background#1f6feb
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#8b949e
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • breadcrumbPicker.background#161b22
  • button.background#1f6feb
  • button.foreground#ffffff
  • button.hoverBackground#388bfd
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#161b22
  • checkbox.border#30363d
  • debugConsole.errorForeground#ffd1dc
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#f2d15f
  • debugConsole.warningForeground#f2d15f
  • debugConsoleInputIcon.foreground#bc8cff
  • debugIcon.breakpointForeground#ffd1dc
  • debugTokenExpression.boolean#79c0ff
  • debugTokenExpression.error#ffd1dc
  • debugTokenExpression.name#79c0ff
  • debugTokenExpression.number#79c0ff
  • debugTokenExpression.string#a5d6ff
  • debugTokenExpression.value#a5d6ff
  • debugToolBar.background#161b22
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#1f6feb26
  • diffEditor.insertedTextBackground#58a6ff4d
  • diffEditor.removedLineBackground#b7610026
  • diffEditor.removedTextBackground#ffd1dc4d
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#161b22
  • editor.background#204b81
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#388bfd66
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#58a6ff12
  • editor.selectionBackground#ffffff33
  • editor.selectionHighlightBackground#58a6ff40
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#6e768180
  • editor.wordHighlightBorder#6e768199
  • editor.wordHighlightStrongBackground#6e76814d
  • editor.wordHighlightStrongBorder#6e768199
  • editorBracketHighlight.foreground1#79c0ff
  • editorBracketHighlight.foreground2#79c0ff
  • editorBracketHighlight.foreground3#f2d15f
  • editorBracketHighlight.foreground4#ffd1dc
  • editorBracketHighlight.foreground5#ff9bce
  • editorBracketHighlight.foreground6#d2a8ff
  • editorBracketHighlight.unexpectedBracket.foreground#8b949e
  • editorBracketMatch.background#58a6ff40
  • editorBracketMatch.border#58a6ff99
  • editorCursor.foreground#58a6ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#010409
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#56d4dd66
  • editorGutter.deletedBackground#ffd1dc66
  • editorGutter.modifiedBackground#f2d15f66
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#484f58
  • editorWidget.background#161b22
  • errorForeground#ffd1dc
  • errorLens.errorBackground#aa0000
  • errorLens.errorForeground#ffffff
  • errorLens.hintBackground#f6d258
  • errorLens.hintForeground#ffffff
  • errorLens.infoBackground#88a2bc
  • errorLens.infoForeground#ffffff
  • errorLens.warningBackground#ff8800
  • errorLens.warningForeground#ffffff
  • focusBorder#010409
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#56d4dd
  • gitDecoration.conflictingResourceForeground#ffd1dc
  • gitDecoration.deletedResourceForeground#ffd1dc
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#f2d15f
  • gitDecoration.submoduleResourceForeground#8b949e
  • gitDecoration.untrackedResourceForeground#56d4dd
  • icon.foreground#8b949e
  • input.background#c6c9ce
  • input.border#30363d
  • input.foreground#000000
  • input.placeholderForeground#2e3135
  • keybindingLabel.foreground#c9d1d9
  • list.activeSelectionBackground#6e768166
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#388bfd26
  • list.focusForeground#c9d1d9
  • list.highlightForeground#58a6ff
  • list.hoverBackground#6e76811a
  • list.hoverForeground#c9d1d9
  • list.inactiveFocusBackground#388bfd26
  • list.inactiveSelectionBackground#6e768166
  • list.inactiveSelectionForeground#c9d1d9
  • minimapSlider.activeBackground#8b949e47
  • minimapSlider.background#8b949e33
  • minimapSlider.hoverBackground#8b949e3d
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#8b949e
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#ffd1dc
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#f2d15f
  • panel.background#204b81
  • panel.border#30363d
  • panelInput.border#30363d
  • panelTitle.activeBorder#f78166
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#30363d
  • pickerGroup.foreground#8b949e
  • progressBar.background#1f6feb
  • quickInput.background#161b22
  • quickInput.foreground#c9d1d9
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#8b949e47
  • scrollbarSlider.background#8b949e33
  • scrollbarSlider.hoverBackground#8b949e3d
  • settings.headerForeground#c9d1d9
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#204b81
  • sideBar.border#555555
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#010409
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.background#000000
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#30363d
  • statusBar.debuggingBackground#b76100
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#1f6feb80
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.activeBackground#c9d1d91f
  • statusBarItem.focusBorder#1f6feb
  • statusBarItem.hoverBackground#c9d1d914
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#30363d
  • statusBarItem.remoteForeground#c9d1d9
  • symbolIcon.arrayForeground#ffd1dc
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#ffd1dc
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constructorForeground#d2a8ff
  • symbolIcon.enumeratorForeground#ffd1dc
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#ffd1dc
  • symbolIcon.fileForeground#f2d15f
  • symbolIcon.folderForeground#f2d15f
  • symbolIcon.functionForeground#bc8cff
  • symbolIcon.interfaceForeground#ffd1dc
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ffd1dc
  • symbolIcon.methodForeground#bc8cff
  • symbolIcon.moduleForeground#ffd1dc
  • symbolIcon.namespaceForeground#ffd1dc
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#58a6ff
  • symbolIcon.objectForeground#ffd1dc
  • symbolIcon.operatorForeground#79c0ff
  • symbolIcon.packageForeground#ffd1dc
  • symbolIcon.propertyForeground#ffd1dc
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79c0ff
  • symbolIcon.structForeground#ffd1dc
  • symbolIcon.textForeground#79c0ff
  • symbolIcon.typeParameterForeground#79c0ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#ffd1dc
  • tab.activeBackground#0d1117
  • tab.activeBorder#f78166
  • tab.activeBorderTop#f78166
  • tab.activeForeground#c9d1d9
  • tab.activeModifiedBorder#f78166
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#7ee787
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffb3b3
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f2d15f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#56d4dd
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ffd1dc
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#f2d15f
  • terminal.foreground#c9d1d9
  • textBlockQuote.background#010409
  • textBlockQuote.border#30363d
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#58a6ff
  • textLink.foreground#58a6ff
  • textPreformat.background#6e768166
  • textPreformat.foreground#8b949e
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#00ccff
  • titleBar.activeForeground#000000
  • titleBar.border#30363d
  • titleBar.inactiveBackground#010409
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#DDE7EF
constant.other.placeholder, constant.character#ffd1dc
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#A5D6FF
entity.name, meta.export.default, meta.definition.variable#ffd1dc
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#DDE7EF
entity.name.function#E2C5FF
entity.name.tag, support.class.component#A5D6FF
keyword#ffd1dc
storage, storage.type#ffd1dc
storage.modifier.package, storage.modifier.import, storage.type.java#DDE7EF
string, string punctuation.section.embedded source#A5D6FF
support#A5D6FF
meta.property-name#A5D6FF
variable#ffd1dc
variable.other#DDE7EF
invalid.broken#ffd1dc
invalid.deprecated#ffd1dc
invalid.illegal#ffd1dc
invalid.unimplemented#ffd1dc
carriage-return#F0F6FCunderline
message.error#ffd1dc
string variable#A5D6FF
source.regexp, string.regexp#A5D6FF
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#A5D6FF
string.regexp constant.character.escape#A5D6FFbold
support.constant#A5D6FF
support.variable#A5D6FF
support.type.property-name.json#A5D6FF
meta.module-reference#A5D6FF
punctuation.definition.list.begin.markdown#ffd1dc
markup.heading, markup.heading entity.name#A5D6FFbold
markup.quote#A5D6FF
markup.italic#DDE7EFitalic
markup.bold#DDE7EFbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#A5D6FF
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffd1dc
punctuation.section.embedded#ffd1dc
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#A5D6FF
markup.changed, punctuation.definition.changed#ffd1dc
markup.ignored, markup.untracked#DDE7EF
meta.diff.range#E2C5FFbold
meta.diff.header#A5D6FF
meta.separator#A5D6FFbold
meta.output#A5D6FF
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#DDE7EF
brackethighlighter.unmatched#ffd1dc
constant.other.reference.link, string.other.link#A5D6FF
token.info-token#C2F2FF
token.warn-token#ffd1dc
token.error-token#ffd1dc
token.debug-token#F0D6FF