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#FFE566
  • activityBar.background#000000
  • activityBar.border#000000
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#F5E84A
  • activityBarBadge.foreground#0A0900
  • badge.background#1A1608
  • badge.foreground#FFF8C8
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#C4A800
  • button.fontWeight700
  • button.foreground#0A0900
  • button.hoverBackground#E0C41A
  • 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#FFE566
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#F5E84A
  • debugTokenExpression.error#ff7265
  • debugTokenExpression.name#FFE566
  • debugTokenExpression.number#FFE566
  • debugTokenExpression.string#FFF5A0
  • debugTokenExpression.value#FFF5A0
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedLineBackground#C4A80028
  • diffEditor.insertedTextBackground#F5E84A33
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#000000
  • dropdown.border#242429
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#F5E84A55
  • editor.findMatchHighlightBackground#F5E84A2A
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#F5E84A22
  • editor.lineHighlightBackground#0F0D06
  • editor.linkedEditingBackground#F5E84A22
  • editor.selectionBackground#F5E84A44
  • editor.selectionHighlightBackground#FFE5663D
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#F5E84A1F
  • editor.wordHighlightBorder#F5E84A99
  • editor.wordHighlightStrongBackground#FFE5662B
  • editor.wordHighlightStrongBorder#FFE56688
  • editorBracketHighlight.foreground1#FFE566
  • editorBracketHighlight.foreground2#FFF5A0
  • editorBracketHighlight.foreground3#E8D44A
  • editorBracketHighlight.foreground4#FFF06A
  • editorBracketHighlight.foreground5#F5E84A
  • editorBracketHighlight.foreground6#FFF8C8
  • editorBracketHighlight.unexpectedBracket.foreground#7d8590
  • editorBracketMatch.background#F5E84A38
  • editorBracketMatch.border#FFE566AA
  • editorCursor.foreground#FFE566
  • editorError.foreground#f97583
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#FFE566
  • editorGutter.deletedBackground#FF7B8A
  • editorGutter.modifiedBackground#E0C41A
  • 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#FFE566
  • editorWhitespace.foreground#444d56
  • editorWidget.background#000000
  • errorForeground#f97583
  • focusBorder#FFE566
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#FFE566
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ff4a5c
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#E0C41A
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#FFF06A
  • icon.foreground#7d8590
  • input.background#000000
  • input.border#000000
  • input.foreground#e1e4e8
  • input.placeholderForeground#959da5
  • keybindingLabel.foreground#e6edf3
  • list.activeSelectionBackground#3D3512
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#5C4F14
  • list.focusForeground#FFF8C8
  • list.highlightForeground#FFE566
  • list.hoverBackground#060606
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#24200E
  • list.inactiveSelectionBackground#1A1608
  • 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#FFE566
  • 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#F5E84A
  • 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#FFE566
  • 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#F5E84A
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#e6edf31f
  • statusBarItem.focusBorder#FFE566
  • 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#E8D44A
  • symbolIcon.enumeratorForeground#ff9040
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#ff9143
  • symbolIcon.fileForeground#ffbd2e
  • symbolIcon.folderForeground#ffbd2d
  • symbolIcon.functionForeground#FFE566
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#FFE566
  • 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#FFE566
  • 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#E8D44A
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#FFE566
  • terminal.ansiBrightCyan#FFF5A0
  • terminal.ansiBrightGreen#FFF06A
  • terminal.ansiBrightMagenta#FFF5A0
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#FFF8C8
  • terminal.ansiCyan#E8D97A
  • terminal.ansiGreen#F5E84A
  • terminal.ansiMagenta#D4B84A
  • terminal.ansiRed#ff808c
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#FFE566
  • terminal.foreground#d1d5da
  • terminal.tab.activeBorder#FFE566
  • terminalCursor.background#586069
  • terminalCursor.foreground#FFE566
  • textBlockQuote.background#000000
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#FFF5A0
  • textLink.foreground#FFE566
  • 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#C4A800
  • welcomePage.buttonHoverBackground#E0C41A

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