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#e6edf3
  • activityBar.inactiveForeground#7d8590
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#ffffff
  • badge.background#1f6feb
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7d8590
  • breadcrumb.focusForeground#e6edf3
  • breadcrumb.foreground#7d8590
  • breadcrumbPicker.background#161b22
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#161b22
  • checkbox.border#30363d
  • debugConsole.errorForeground#ffa198
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#e3b341
  • debugConsole.warningForeground#d29922
  • debugConsoleInputIcon.foreground#bc8cff
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#56d364
  • debugTokenExpression.error#ffa198
  • debugTokenExpression.name#79c0ff
  • debugTokenExpression.number#56d364
  • debugTokenExpression.string#a5d6ff
  • debugTokenExpression.value#a5d6ff
  • debugToolBar.background#161b22
  • descriptionForeground#7d8590
  • diffEditor.insertedLineBackground#23863626
  • diffEditor.insertedTextBackground#3fb9504d
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#ff7b724d
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#e6edf3
  • dropdown.listBackground#161b22
  • editor.background#0d1117
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#2ea04366
  • editor.foldBackground#6e76811a
  • editor.foreground#e6edf3
  • editor.inactiveSelectionBackground#2f81f712
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#2f81f712
  • editor.selectionBackground#2f81f733
  • editor.selectionHighlightBackground#3fb95040
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#6e768180
  • editor.wordHighlightBorder#6e768199
  • editor.wordHighlightStrongBackground#6e76814d
  • editor.wordHighlightStrongBorder#6e768199
  • editorBracketHighlight.foreground1#79c0ff
  • editorBracketHighlight.foreground2#56d364
  • editorBracketHighlight.foreground3#e3b341
  • editorBracketHighlight.foreground4#ffa198
  • editorBracketHighlight.foreground5#ff9bce
  • editorBracketHighlight.foreground6#d2a8ff
  • editorBracketHighlight.unexpectedBracket.foreground#7d8590
  • editorBracketMatch.background#3fb95040
  • editorBracketMatch.border#3fb95099
  • editorCursor.foreground#2f81f7
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#010409
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#e6edf33d
  • editorIndentGuide.background#e6edf31f
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#7d8590
  • editorInlayHint.paramBackground#8b949e33
  • editorInlayHint.paramForeground#7d8590
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#7d8590
  • editorLineNumber.activeForeground#e6edf3
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#484f58
  • editorWidget.background#161b22
  • errorForeground#f85149
  • focusBorder#1f6feb
  • foreground#e6edf3
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#7d8590
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#7d8590
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#e6edf3
  • input.placeholderForeground#6e7681
  • keybindingLabel.foreground#e6edf3
  • list.activeSelectionBackground#6e768166
  • list.activeSelectionForeground#e6edf3
  • list.focusBackground#388bfd26
  • list.focusForeground#e6edf3
  • list.highlightForeground#2f81f7
  • list.hoverBackground#6e76811a
  • list.hoverForeground#e6edf3
  • list.inactiveFocusBackground#388bfd26
  • list.inactiveSelectionBackground#6e768166
  • list.inactiveSelectionForeground#e6edf3
  • minimapSlider.activeBackground#8b949e47
  • minimapSlider.background#8b949e33
  • minimapSlider.hoverBackground#8b949e3d
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#7d8590
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#e6edf3
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#2f81f7
  • notificationsWarningIcon.foreground#d29922
  • panel.background#010409
  • panel.border#30363d
  • panelInput.border#30363d
  • panelTitle.activeBorder#f78166
  • panelTitle.activeForeground#e6edf3
  • panelTitle.inactiveForeground#7d8590
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#30363d
  • pickerGroup.foreground#7d8590
  • progressBar.background#1f6feb
  • quickInput.background#161b22
  • quickInput.foreground#e6edf3
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#8b949e47
  • scrollbarSlider.background#8b949e33
  • scrollbarSlider.hoverBackground#8b949e3d
  • settings.headerForeground#e6edf3
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#010409
  • sideBar.border#30363d
  • sideBar.foreground#e6edf3
  • sideBarSectionHeader.background#010409
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#e6edf3
  • sideBarTitle.foreground#e6edf3
  • statusBar.background#0d1117
  • statusBar.border#30363d
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#1f6feb80
  • statusBar.foreground#7d8590
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.activeBackground#e6edf31f
  • statusBarItem.focusBorder#1f6feb
  • statusBarItem.hoverBackground#e6edf314
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#30363d
  • statusBarItem.remoteForeground#e6edf3
  • symbolIcon.arrayForeground#f0883e
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#f0883e
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#3fb950
  • symbolIcon.constructorForeground#d2a8ff
  • symbolIcon.enumeratorForeground#f0883e
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#f0883e
  • symbolIcon.fileForeground#d29922
  • symbolIcon.folderForeground#d29922
  • symbolIcon.functionForeground#bc8cff
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#bc8cff
  • symbolIcon.moduleForeground#ff7b72
  • symbolIcon.namespaceForeground#ff7b72
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#3fb950
  • symbolIcon.objectForeground#f0883e
  • symbolIcon.operatorForeground#79c0ff
  • symbolIcon.packageForeground#f0883e
  • symbolIcon.propertyForeground#f0883e
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79c0ff
  • symbolIcon.structForeground#f0883e
  • symbolIcon.textForeground#79c0ff
  • symbolIcon.typeParameterForeground#79c0ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#f0883e
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#f78166
  • tab.activeForeground#e6edf3
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#7d8590
  • 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#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#e6edf3
  • textBlockQuote.background#010409
  • textBlockQuote.border#30363d
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#2f81f7
  • textLink.foreground#2f81f7
  • textPreformat.background#6e768166
  • textPreformat.foreground#7d8590
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#7d8590
  • titleBar.border#30363d
  • titleBar.inactiveBackground#010409
  • titleBar.inactiveForeground#7d8590
  • 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#8b949e
constant.other.placeholder, constant.character#ff7a80
constant, entity.name.constant, entity.name.decorator, entity.name.function.preprocessor, punctuation.definition.decorator.python, variable.language, entity#75bfff
variable.other.enummember#75bfffitalic
entity.name, meta.export.default, meta.definition.variable#ffa657
meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#e6edf3
entity.name.function, keyword.other.operator.overload, support.function#56da70
entity.name.function.member#56da70italic
entity.name.tag, support.class.component#7ee787
keyword#ff7a80
storage, storage.type#ff7a80
storage.modifier.package, storage.modifier.import, storage.type.java#e6edf3
string, string punctuation.section.embedded source#a5d6ff
support#75bfff
meta.property-name#75bfff
entity.name.namespace#ff9ec5
entity.name, entity.name.function.definition.special.member.destructor, entity.name.namespace.cpp, entity.name.scope-resolution, entity.name.type, storage.type.built-in, storage.type.built-in.primitive, support.class, support.type#c1b1ff
variable, support.variable#ff9566
variable.other.constant, support.constant#ff9566underline
variable.other.property#ff9566italic
variable.other.constant.property#ff9566italic underline
variable.parameter, variable.parameter.function, entity.name.section.latex#ff9566bold
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#f0f6fcitalic underline
message.error#ffa198
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#7ee787bold
support.type.property-name.json#7ee787
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#ffa657
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#7ee787
markup.italic#e6edf3italic
markup.bold#e6edf3bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79c0ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198
punctuation.section.embedded#ff7b72
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7ee787
markup.changed, punctuation.definition.changed#ffa657
markup.ignored, markup.untracked#161b22
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#8b949e
brackethighlighter.unmatched#ffa198
constant.other.reference.link, string.other.link#a5d6ff