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#5EEFC4
  • activityBar.background#000000
  • activityBar.border#000000
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#168F72
  • activityBarBadge.foreground#E8FFF7
  • badge.background#0A241D
  • badge.foreground#B8FFE8
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#168F72
  • button.fontWeight700
  • button.foreground#E8FFF7
  • button.hoverBackground#20AE8A
  • 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#5EEFC4
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#4AE6A8
  • debugTokenExpression.error#ff7265
  • debugTokenExpression.name#5EEFC4
  • debugTokenExpression.number#7CF2B2
  • debugTokenExpression.string#9AF5D5
  • debugTokenExpression.value#9AF5D5
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedLineBackground#168F7228
  • diffEditor.insertedTextBackground#2DD4A733
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#000000
  • dropdown.border#242429
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#2DD4A755
  • editor.findMatchHighlightBackground#2DD4A72A
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#2DD4A722
  • editor.lineHighlightBackground#06110E
  • editor.linkedEditingBackground#2DD4A722
  • editor.selectionBackground#2DD4A744
  • editor.selectionHighlightBackground#5EEFC43D
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#2DD4A71F
  • editor.wordHighlightBorder#2DD4A799
  • editor.wordHighlightStrongBackground#5EEFC42B
  • editor.wordHighlightStrongBorder#5EEFC488
  • editorBracketHighlight.foreground1#5EEFC4
  • editorBracketHighlight.foreground2#9AF5D5
  • editorBracketHighlight.foreground3#62C7B5
  • editorBracketHighlight.foreground4#7CFFD5
  • editorBracketHighlight.foreground5#42D3A7
  • editorBracketHighlight.foreground6#B8FFE8
  • editorBracketHighlight.unexpectedBracket.foreground#7d8590
  • editorBracketMatch.background#2DD4A738
  • editorBracketMatch.border#5EEFC4AA
  • editorCursor.foreground#5EEFC4
  • editorError.foreground#f97583
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#5EEFC4
  • editorGutter.deletedBackground#FF7B8A
  • editorGutter.modifiedBackground#42D3A7
  • 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#D3E87A
  • editorWhitespace.foreground#444d56
  • editorWidget.background#000000
  • errorForeground#f97583
  • focusBorder#5EEFC4
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#5EEFC4
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ff4a5c
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#42D3A7
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#7CF2B2
  • icon.foreground#7d8590
  • input.background#000000
  • input.border#000000
  • input.foreground#e1e4e8
  • input.placeholderForeground#959da5
  • keybindingLabel.foreground#e6edf3
  • list.activeSelectionBackground#123D32
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#145C4A
  • list.focusForeground#E8FFF7
  • list.highlightForeground#5EEFC4
  • list.hoverBackground#060606
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#0C2D25
  • list.inactiveSelectionBackground#0A211B
  • 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#5EEFC4
  • 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#2DD4A7
  • 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#5EEFC4
  • 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#2DD4A7
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#e6edf31f
  • statusBarItem.focusBorder#5EEFC4
  • 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#62C7B5
  • symbolIcon.enumeratorForeground#ff9040
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#ff9143
  • symbolIcon.fileForeground#ffbd2e
  • symbolIcon.folderForeground#ffbd2d
  • symbolIcon.functionForeground#5EEFC4
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#5EEFC4
  • 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#5EEFC4
  • 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#62C7B5
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#7DE3D0
  • terminal.ansiBrightCyan#8CF5E3
  • terminal.ansiBrightGreen#7CFFD5
  • terminal.ansiBrightMagenta#9AF5D5
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#f3ff9a
  • terminal.ansiCyan#5CE6D0
  • terminal.ansiGreen#5EEFC4
  • terminal.ansiMagenta#7AB8A8
  • terminal.ansiRed#ff808c
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#feffe8
  • terminal.foreground#d1d5da
  • terminal.tab.activeBorder#5EEFC4
  • terminalCursor.background#586069
  • terminalCursor.foreground#5EEFC4
  • textBlockQuote.background#000000
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#9AF5D5
  • textLink.foreground#5EEFC4
  • 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#168F72
  • welcomePage.buttonHoverBackground#20AE8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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