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#f0f6fc
  • badge.background#1f6feb
  • badge.foreground#f0f6fc
  • breadcrumb.activeSelectionForeground#8b949e
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • 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#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#161b22
  • editor.background#0d1117
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#2ea04366
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#58a6ff12
  • 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#8b949e
  • editorBracketMatch.background#3fb95040
  • editorBracketMatch.border#3fb95099
  • editorCursor.foreground#58a6ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#010409
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • 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#f85149
  • focusBorder#1f6feb
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#8b949e
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#8b949e
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • 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
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#8b949e
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#d29922
  • 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#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.headerForeground#8b949e
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#010409
  • sideBar.border#30363d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#010409
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#30363d
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#f0f6fc
  • 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#f0883e
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#f0883e
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#aff5b4#7ee787#56d364#3fb950#2ea043#238636#196c2e#0f5323#033a16#04260f
  • 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#c9d1d9
  • 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#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#c9d1d9
  • textBlockQuote.background#010409
  • textBlockQuote.border#30363d
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#58a6ff
  • textLink.foreground#58a6ff
  • textPreformat.foreground#8b949e
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#8b949e
  • 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#8b949e
constant, entity.name.constant, variable.other.constant, variable.language, entity, constant.language.null.cs, keyword.other.this.cs#33a0ff
entity.name.function.operator.member#FF7066
entity.name, meta.export.default, meta.definition.variable, entity.name.type.cs#00cc00
entity.name.variable.parameter.cs#FFA657
entity.name.variable.local.cs, entity.name.variable.field.cs, entity.name.variable.property.cs#F0F2F4
entity.name.function.preprocessor#33a0ff
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#c9d1d9
entity.name.function, entity.name.function.cs, support.function.magic.python, meta.function-call.generic#bb80ff
constant.numeric#33A0FF
entity.name.tag, support.class.component#7ee787
storage.type.cs#00CC00
keyword#ff7066
keyword.other.unit#33A0FF
storage, storage.type#ff7066
storage.modifier.package, storage.modifier.import, storage.type.java#c9d1d9
string, punctuation.definition.string, string punctuation.section.embedded source, storage.type.string.python#ffe14d
constant.other.placeholder#ffa657
support#FFE14D
meta.property-name#79c0ff
variable#ffa657
variable.other#f0f2f4
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#0d1117italic underline
message.error#ffa198
string source#c9d1d9
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.constant#79c0ff
support.variable#79c0ff
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#ffa657
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#7ee787
markup.italic#c9d1d9italic
markup.bold#c9d1d9bold
markup.raw#79c0ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198
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#a5d6ffunderline