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#00205A
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#388bfd66
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#58a6ff12
  • 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
  • editorIndentGuide.activeBackground#c9d1d93d
  • editorIndentGuide.background#c9d1d91f
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.paramBackground#8b949e33
  • editorInlayHint.paramForeground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#484f58
  • editorWidget.background#161b22
  • errorForeground#ffd1dc
  • 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#0d1117
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#6e7681
  • 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#010409
  • 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#00205A
  • 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.constantForeground#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
  • welcomePage.buttonBackground#21262d
  • welcomePage.buttonHoverBackground#30363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#9da7b3
constant.other.placeholder, constant.character#ffd1dc
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#79c0ff
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#c9d1d9
entity.name.function#d2a8ff
entity.name.tag, support.class.component#a5d6ff
keyword#ffd1dc
storage, storage.type#ffd1dc
storage.modifier.package, storage.modifier.import, storage.type.java#c9d1d9
string, string punctuation.section.embedded source#a5d6ff
support#79c0ff
meta.property-name#79c0ff
variable#ffd1dc
variable.other#c9d1d9
invalid.broken#ffd1dc
invalid.deprecated#ffd1dc
invalid.illegal#ffd1dc
invalid.unimplemented#ffd1dc
carriage-return#f0f6fcunderline
message.error#ffd1dc
string variable#79c0ff
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#79c0ff
support.variable#79c0ff
support.type.property-name.json#a5d6ff
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#ffd1dc
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#a5d6ff
markup.italic#c9d1d9italic
markup.bold#c9d1d9bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79c0ff
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#9da7b3
meta.diff.range#d2a8ffbold
meta.diff.header#79c0ff
meta.separator#79c0ffbold
meta.output#79c0ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#9da7b3
brackethighlighter.unmatched#ffd1dc
constant.other.reference.link, string.other.link#a5d6ff