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.underline—underline
markup.strikethrough—strikethrough
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—
A Colorful GitHub Theme Pack by Mark Miro - VS Code Theme