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#40F0FF
  • activityBar.background#000000
  • activityBar.border#000000
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0D7A9E
  • activityBarBadge.foreground#E0FBFF
  • badge.background#0A1524
  • badge.foreground#B8F0FF
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#0D7A9E
  • button.fontWeight700
  • button.foreground#E0FBFF
  • button.hoverBackground#1290B8
  • button.secondaryBackground#444d56
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#586069
  • checkbox.background#444d56
  • checkbox.border#000000
  • debugConsole.errorForeground#ffa198
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#e3b341
  • debugConsole.warningForeground#d29922
  • debugConsoleInputIcon.foreground#40F0FF
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#4AC8F0
  • debugTokenExpression.error#ff7265
  • debugTokenExpression.name#40F0FF
  • debugTokenExpression.number#7CE8F2
  • debugTokenExpression.string#A8F5FF
  • debugTokenExpression.value#A8F5FF
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedLineBackground#0D7A9E28
  • diffEditor.insertedTextBackground#2BC8E833
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#000000
  • dropdown.border#242429
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#2BC8E855
  • editor.findMatchHighlightBackground#2BC8E82A
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#2BC8E822
  • editor.lineHighlightBackground#060B11
  • editor.linkedEditingBackground#2BC8E822
  • editor.selectionBackground#2BC8E844
  • editor.selectionHighlightBackground#40F0FF3D
  • editor.selectionHighlightBorder#17C8E500
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#2BC8E81F
  • editor.wordHighlightBorder#2BC8E899
  • editor.wordHighlightStrongBackground#40F0FF2B
  • editor.wordHighlightStrongBorder#40F0FF88
  • editorBracketHighlight.foreground1#40F0FF
  • editorBracketHighlight.foreground2#A8F5FF
  • editorBracketHighlight.foreground3#C084FC
  • editorBracketHighlight.foreground4#7CF5FF
  • editorBracketHighlight.foreground5#3DB8E8
  • editorBracketHighlight.foreground6#B8F0FF
  • editorBracketHighlight.unexpectedBracket.foreground#7d8590
  • editorBracketMatch.background#2BC8E838
  • editorBracketMatch.border#40F0FFAA
  • editorCursor.foreground#40F0FF
  • editorError.foreground#f97583
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#40F0FF
  • editorGutter.deletedBackground#FF7B8A
  • editorGutter.modifiedBackground#3DB8E8
  • editorIndentGuide.activeBackground#000000
  • editorIndentGuide.background#000000
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#7d8590
  • editorInlayHint.paramBackground#8b949e33
  • editorInlayHint.paramForeground#7d8590
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#7d8590
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#324550
  • editorOverviewRuler.border#000000
  • editorWarning.foreground#A5B4FC
  • editorWhitespace.foreground#444d56
  • editorWidget.background#000000
  • errorForeground#f97583
  • focusBorder#40F0FF
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#40F0FF
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ff4a5c
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#3DB8E8
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#7CE8F2
  • icon.foreground#7d8590
  • input.background#000000
  • input.border#000000
  • input.foreground#e1e4e8
  • input.placeholderForeground#959da5
  • keybindingLabel.foreground#e6edf3
  • list.activeSelectionBackground#12253D
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#144A5C
  • list.focusForeground#E0FBFF
  • list.highlightForeground#40F0FF
  • list.hoverBackground#060606
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#0C1D2D
  • list.inactiveSelectionBackground#0A1821
  • list.inactiveSelectionForeground#e1e4e8
  • minimapSlider.activeBackground#31313147
  • minimapSlider.background#31313133
  • minimapSlider.hoverBackground#3131313d
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#959da5
  • notifications.background#000000
  • notifications.border#000000
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#ff7d8a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffbdbd
  • panel.background#000000
  • panel.border#000000
  • panelInput.border#151618
  • panelTitle.activeBorder#40F0FF
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#00000088
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#2BC8E8
  • quickInput.background#000000
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#31313188
  • scrollbarSlider.background#31313133
  • scrollbarSlider.hoverBackground#31313144
  • settings.dropdownBackground#000000
  • settings.headerForeground#e1e4e8
  • settings.modifiedItemIndicator#40F0FF
  • sideBar.background#000000
  • sideBar.border#000000
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#0a0a0a
  • statusBar.debuggingForeground#fff
  • statusBar.focusBorder#2BC8E8
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#e6edf31f
  • statusBarItem.focusBorder#40F0FF
  • statusBarItem.hoverBackground#e6edf314
  • statusBarItem.prominentBackground#000000
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#d1d5da
  • symbolIcon.arrayForeground#ff9448
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#ff8f40
  • symbolIcon.colorForeground#79b8ff
  • symbolIcon.constantForeground#aff5b4#7ee787#56d364#3fb950#2ea043#238636#196c2e#0f5323#033a16#04260f
  • symbolIcon.constructorForeground#C084FC
  • symbolIcon.enumeratorForeground#ff9040
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#ff9143
  • symbolIcon.fileForeground#ffbd2e
  • symbolIcon.folderForeground#ffbd2d
  • symbolIcon.functionForeground#40F0FF
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#40F0FF
  • symbolIcon.moduleForeground#ff7b72
  • symbolIcon.namespaceForeground#ff7b72
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#3fb950
  • symbolIcon.objectForeground#f0883e
  • symbolIcon.operatorForeground#79b8ff
  • symbolIcon.packageForeground#f0883e
  • symbolIcon.propertyForeground#f0883e
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79b8ff
  • symbolIcon.structForeground#f0883e
  • symbolIcon.textForeground#79b8ff
  • symbolIcon.typeParameterForeground#79b8ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#f0883e
  • tab.activeBackground#000000
  • tab.activeBorder#000000
  • tab.activeBorderTop#40F0FF
  • tab.activeForeground#e1e4e8
  • tab.border#000000
  • tab.hoverBackground#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#000000
  • tab.unfocusedActiveBorderTop#000000
  • tab.unfocusedHoverBackground#000000
  • terminal.ansiBlack#586069
  • terminal.ansiBlue#C084FC
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#7DE8FF
  • terminal.ansiBrightCyan#8CF5FF
  • terminal.ansiBrightGreen#7CF5FF
  • terminal.ansiBrightMagenta#A8F5FF
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#f3ff9a
  • terminal.ansiCyan#5CE8F5
  • terminal.ansiGreen#40F0FF
  • terminal.ansiMagenta#B794F6
  • terminal.ansiRed#ff808c
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#feffe8
  • terminal.foreground#d1d5da
  • terminal.tab.activeBorder#40F0FF
  • terminalCursor.background#586069
  • terminalCursor.foreground#40F0FF
  • textBlockQuote.background#000000
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#A8F5FF
  • textLink.foreground#40F0FF
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#0D7A9E
  • welcomePage.buttonHoverBackground#1290B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#64748Bitalic
constant.other.placeholder, constant.character#ff7b72
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#5CE8F5
entity, entity.name#C084FC
entity.name, meta.export.default, meta.definition.variable#A5B4FC
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#e6edf3
entity.name.function#C084FC
entity.name.tag, support.class.component#40F0FF
keyword#ff7b72
storage, storage.type#ff7b72
storage.modifier.package, storage.modifier.import, storage.type.java#e6edf3
string, string punctuation.section.embedded source#A8F5FF
support#5CE8F5
meta.property-name#5CE8F5
variable#A5B4FC
variable.other#e6edf3
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#f0f6fcitalic underline
message.error#ffa198
string variable#5CE8F5
source.regexp, string.regexp#A8F5FF
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#A8F5FF
string.regexp constant.character.escape#40F0FFbold
support.constant#5CE8F5
support.variable#5CE8F5
support.type.property-name.json#40F0FF
meta.module-reference#5CE8F5
punctuation.definition.list.begin.markdown#A5B4FC
markup.heading, markup.heading entity.name#5CE8F5bold
markup.quote#40F0FF
markup.italic#e6edf3italic
markup.bold#e6edf3bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#5CE8F5
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#40F0FF
markup.changed, punctuation.definition.changed#A5B4FC
markup.ignored, markup.untracked#161b22
meta.diff.range#C084FCbold
meta.diff.header#5CE8F5
meta.separator#5CE8F5bold
meta.output#5CE8F5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8b949e
brackethighlighter.unmatched#ffa198
constant.other.reference.link, string.other.link#A8F5FF