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#fd8c73
  • activityBar.background#f5f5f5
  • activityBar.border#d8ccb8
  • activityBar.foreground#2f2513
  • activityBar.inactiveForeground#69583b
  • activityBarBadge.background#0969da
  • activityBarBadge.foreground#f5f5f5
  • badge.background#0969da
  • badge.foreground#f5f5f5
  • breadcrumb.activeSelectionForeground#69583b
  • breadcrumb.focusForeground#2f2513
  • breadcrumb.foreground#69583b
  • breadcrumbPicker.background#f5f5f5
  • button.background#2da44e
  • button.foreground#ffffff
  • button.hoverBackground#2c974b
  • button.secondaryBackground#e7e2da
  • button.secondaryForeground#2f2513
  • button.secondaryHoverBackground#edeae5
  • checkbox.background#f1eee8
  • checkbox.border#d8ccb8
  • debugConsole.errorForeground#e1000d
  • debugConsole.infoForeground#69583b
  • debugConsole.sourceForeground#a95f00
  • debugConsole.warningForeground#8c4400
  • debugConsoleInputIcon.foreground#6b1ed2
  • debugIcon.breakpointForeground#cf222e
  • debugTokenExpression.boolean#006906
  • debugTokenExpression.error#b5000e
  • debugTokenExpression.name#0048c8
  • debugTokenExpression.number#006906
  • debugTokenExpression.string#002881
  • debugTokenExpression.value#002881
  • debugToolBar.background#f5f5f5
  • descriptionForeground#69583b
  • diffEditor.insertedLineBackground#8df7a94d
  • diffEditor.insertedTextBackground#3be57680
  • diffEditor.removedLineBackground#ffc0bc4d
  • diffEditor.removedTextBackground#ff6b7366
  • disabledForeground#5d5d5d80
  • dropdown.background#f5f5f5
  • dropdown.border#d8ccb8
  • dropdown.foreground#2f2513
  • dropdown.listBackground#f5f5f5
  • editor.background#f5f5f5
  • editor.findMatchBackground#bf8700
  • editor.findMatchHighlightBackground#ffdf3880
  • editor.focusedStackFrameHighlightBackground#4ac26b66
  • editor.foldBackground#806e521a
  • editor.foreground#2f2513
  • editor.lineHighlightBackground#eae3d880
  • editor.linkedEditingBackground#0969da12
  • editor.selectionHighlightBackground#00c95340
  • editor.stackFrameHighlightBackground#d4a72c66
  • editor.wordHighlightBackground#eae3d880
  • editor.wordHighlightBorder#bdad9399
  • editor.wordHighlightStrongBackground#bdad934d
  • editor.wordHighlightStrongBorder#bdad9399
  • editorBracketHighlight.foreground1#0061f5
  • editorBracketHighlight.foreground2#008517
  • editorBracketHighlight.foreground3#a95f00
  • editorBracketHighlight.foreground4#e1000d
  • editorBracketHighlight.foreground5#cf018e
  • editorBracketHighlight.foreground6#873bf8
  • editorBracketHighlight.unexpectedBracket.foreground#69583b
  • editorBracketMatch.background#00c95340
  • editorBracketMatch.border#00c95399
  • editorCursor.foreground#0969da
  • editorGroup.border#d8ccb8
  • editorGroupHeader.tabsBackground#f1eee8
  • editorGroupHeader.tabsBorder#d8ccb8
  • editorGutter.addedBackground#4ac26b66
  • editorGutter.deletedBackground#ff818266
  • editorGutter.modifiedBackground#d4a72c66
  • editorHoverWidget.border#c0c0c0
  • editorIndentGuide.activeBackground#2f25133d
  • editorIndentGuide.background#2f25131f
  • editorInlayHint.background#bdad9333
  • editorInlayHint.foreground#69583b
  • editorInlayHint.paramBackground#bdad9333
  • editorInlayHint.paramForeground#69583b
  • editorInlayHint.typeBackground#bdad9333
  • editorInlayHint.typeForeground#69583b
  • editorLineNumber.activeForeground#2f2513
  • editorLineNumber.foreground#9d8b6f
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#bdad93
  • editorWidget.background#f5f5f5
  • errorForeground#cf222e
  • focusBorder#0969da
  • foreground#2f2513
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#bc4c00
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#806e52
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#69583b
  • gitDecoration.untrackedResourceForeground#1a7f37
  • icon.foreground#69583b
  • input.background#f5f5f5
  • input.border#d8ccb8
  • input.foreground#2f2513
  • input.placeholderForeground#806e52
  • keybindingLabel.foreground#2f2513
  • list.activeSelectionBackground#bdad9333
  • list.activeSelectionForeground#2f2513
  • list.focusBackground#ddf4ff
  • list.focusForeground#2f2513
  • list.highlightForeground#0969da
  • list.hoverBackground#eae3d880
  • list.hoverForeground#2f2513
  • list.inactiveFocusBackground#ddf4ff
  • list.inactiveSelectionBackground#bdad9333
  • list.inactiveSelectionForeground#2f2513
  • minimapSlider.activeBackground#9d8b6f47
  • minimapSlider.background#9d8b6f33
  • minimapSlider.hoverBackground#9d8b6f3d
  • notificationCenterHeader.background#f1eee8
  • notificationCenterHeader.foreground#69583b
  • notifications.background#f5f5f5
  • notifications.border#d8ccb8
  • notifications.foreground#2f2513
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0969da
  • notificationsWarningIcon.foreground#9a6700
  • panel.background#f1eee8
  • panel.border#d8ccb8
  • panelInput.border#d8ccb8
  • panelTitle.activeBorder#fd8c73
  • panelTitle.activeForeground#2f2513
  • panelTitle.inactiveForeground#69583b
  • pickerGroup.border#d8ccb8
  • pickerGroup.foreground#69583b
  • progressBar.background#0969da
  • quickInput.background#f5f5f5
  • quickInput.foreground#2f2513
  • scrollbar.shadow#806e5233
  • scrollbarSlider.activeBackground#9d8b6f47
  • scrollbarSlider.background#9d8b6f33
  • scrollbarSlider.hoverBackground#9d8b6f3d
  • settings.headerForeground#2f2513
  • settings.modifiedItemIndicator#d4a72c66
  • sideBar.background#f1eee8
  • sideBar.border#d8ccb8
  • sideBar.foreground#2f2513
  • sideBarSectionHeader.background#f1eee8
  • sideBarSectionHeader.border#d8ccb8
  • sideBarSectionHeader.foreground#2f2513
  • sideBarTitle.foreground#2f2513
  • statusBar.background#f5f5f5
  • statusBar.border#d8ccb8
  • statusBar.debuggingBackground#cf222e
  • statusBar.debuggingForeground#f5f5f5
  • statusBar.focusBorder#0969da80
  • statusBar.foreground#69583b
  • statusBar.noFolderBackground#f5f5f5
  • statusBarItem.activeBackground#2f25131f
  • statusBarItem.focusBorder#0969da
  • statusBarItem.hoverBackground#2f251314
  • statusBarItem.prominentBackground#bdad9333
  • statusBarItem.remoteBackground#eae3d8
  • statusBarItem.remoteForeground#2f2513
  • symbolIcon.arrayForeground#a71b00
  • symbolIcon.booleanForeground#0048c8
  • symbolIcon.classForeground#a71b00
  • symbolIcon.colorForeground#002881
  • symbolIcon.constantForeground#006906
  • symbolIcon.constructorForeground#43008f
  • symbolIcon.enumeratorForeground#a71b00
  • symbolIcon.enumeratorMemberForeground#0048c8
  • symbolIcon.eventForeground#69583b
  • symbolIcon.fieldForeground#a71b00
  • symbolIcon.fileForeground#8c4400
  • symbolIcon.folderForeground#8c4400
  • symbolIcon.functionForeground#6b1ed2
  • symbolIcon.interfaceForeground#a71b00
  • symbolIcon.keyForeground#0048c8
  • symbolIcon.keywordForeground#b5000e
  • symbolIcon.methodForeground#6b1ed2
  • symbolIcon.moduleForeground#b5000e
  • symbolIcon.namespaceForeground#b5000e
  • symbolIcon.nullForeground#0048c8
  • symbolIcon.numberForeground#006906
  • symbolIcon.objectForeground#a71b00
  • symbolIcon.operatorForeground#002881
  • symbolIcon.packageForeground#a71b00
  • symbolIcon.propertyForeground#a71b00
  • symbolIcon.referenceForeground#0048c8
  • symbolIcon.snippetForeground#0048c8
  • symbolIcon.stringForeground#002881
  • symbolIcon.structForeground#a71b00
  • symbolIcon.textForeground#002881
  • symbolIcon.typeParameterForeground#002881
  • symbolIcon.unitForeground#0048c8
  • symbolIcon.variableForeground#a71b00
  • tab.activeBackground#f5f5f5
  • tab.activeBorder#f5f5f5
  • tab.activeBorderTop#fd8c73
  • tab.activeForeground#2f2513
  • tab.border#d8ccb8
  • tab.hoverBackground#f5f5f5
  • tab.inactiveBackground#f1eee8
  • tab.inactiveForeground#69583b
  • tab.unfocusedActiveBorder#f5f5f5
  • tab.unfocusedActiveBorderTop#d8ccb8
  • tab.unfocusedHoverBackground#eae3d880
  • terminal.ansiBlack#2f2513
  • terminal.ansiBlue#0061f5
  • terminal.ansiBrightBlack#69583b
  • terminal.ansiBrightBlue#0086ff
  • terminal.ansiBrightCyan#0097bd
  • terminal.ansiBrightGreen#008517
  • terminal.ansiBrightMagenta#a966ff
  • terminal.ansiBrightRed#b5000e
  • terminal.ansiBrightWhite#9d8b6f
  • terminal.ansiBrightYellow#723200
  • terminal.ansiCyan#00838f
  • terminal.ansiGreen#006906
  • terminal.ansiMagenta#873bf8
  • terminal.ansiRed#e1000d
  • terminal.ansiWhite#806e52
  • terminal.ansiYellow#5b2200
  • terminal.foreground#2f2513
  • textBlockQuote.background#f1eee8
  • textBlockQuote.border#d8ccb8
  • textCodeBlock.background#bdad9333
  • textLink.activeForeground#0969da
  • textLink.foreground#0969da
  • textPreformat.background#bdad9333
  • textPreformat.foreground#69583b
  • textSeparator.foreground#ded3c2
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#69583b
  • titleBar.border#d8ccb8
  • titleBar.inactiveBackground#f1eee8
  • titleBar.inactiveForeground#69583b
  • tree.indentGuidesStroke#ded3c2
  • welcomePage.buttonBackground#f1eee8
  • welcomePage.buttonHoverBackground#edeae5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#806e52
constant.other.placeholder, constant.character#e1000d
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#0048c8
entity.name, meta.export.default, meta.definition.variable#a71b00
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#2f2513
entity.name.function#873bf8
entity.name.tag, support.class.component#006906
keyword#e1000d
storage, storage.type#e1000d
storage.modifier.package, storage.modifier.import, storage.type.java#2f2513
string, string punctuation.section.embedded source#002881
support#0048c8
meta.property-name#0048c8
variable#a71b00
variable.other#2f2513
invalid.broken#920009italic
invalid.deprecated#920009italic
invalid.illegal#920009italic
invalid.unimplemented#920009italic
carriage-return#f1eee8italic underline
message.error#920009
string variable#0048c8
source.regexp, string.regexp#002881
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#002881
string.regexp constant.character.escape#006906bold
support.constant#0048c8
support.variable#0048c8
support.type.property-name.json#006906
meta.module-reference#0048c8
punctuation.definition.list.begin.markdown#a71b00
markup.heading, markup.heading entity.name#0048c8bold
markup.quote#006906
markup.italic#2f2513italic
markup.bold#2f2513bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#0048c8
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#920009
punctuation.section.embedded#e1000d
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#006906
markup.changed, punctuation.definition.changed#a71b00
markup.ignored, markup.untracked#eae3d8
meta.diff.range#873bf8bold
meta.diff.header#0048c8
meta.separator#0048c8bold
meta.output#0048c8
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#69583b
brackethighlighter.unmatched#920009
constant.other.reference.link, string.other.link#002881