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#ef5b48
  • activityBar.background#ffffff
  • activityBar.border#20252c
  • activityBar.foreground#0e1116
  • activityBar.inactiveForeground#0e1116
  • activityBarBadge.background#0349b4
  • activityBarBadge.foreground#ffffff
  • badge.background#0349b4
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#0e1116
  • breadcrumb.focusForeground#0e1116
  • breadcrumb.foreground#0e1116
  • breadcrumbPicker.background#ffffff
  • button.background#055d20
  • button.foreground#ffffff
  • button.hoverBackground#024c1a
  • button.secondaryBackground#acb6c0
  • button.secondaryForeground#0e1116
  • button.secondaryHoverBackground#ced5dc
  • checkbox.background#e7ecf0
  • checkbox.border#20252c
  • debugConsole.errorForeground#a0111f
  • debugConsole.infoForeground#4b535d
  • debugConsole.sourceForeground#744500
  • debugConsole.warningForeground#603700
  • debugConsoleInputIcon.foreground#512598
  • debugIcon.breakpointForeground#a0111f
  • debugTokenExpression.boolean#024c1a
  • debugTokenExpression.error#86061d
  • debugTokenExpression.name#023b95
  • debugTokenExpression.number#024c1a
  • debugTokenExpression.string#032563
  • debugTokenExpression.value#032563
  • debugToolBar.background#ffffff
  • descriptionForeground#0e1116
  • diffEditor.insertedLineBackground#82e5964d
  • diffEditor.insertedTextBackground#43c66380
  • diffEditor.removedLineBackground#ffc1bc4d
  • diffEditor.removedTextBackground#ee5a5d66
  • dropdown.background#ffffff
  • dropdown.border#20252c
  • dropdown.foreground#0e1116
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#744500
  • editor.findMatchHighlightBackground#f0ce5380
  • editor.focusedStackFrameHighlightBackground#26a148
  • editor.foldBackground#66707b1a
  • editor.foreground#0e1116
  • editor.inactiveSelectionBackground#66707b
  • editor.lineHighlightBackground#e7ecf0
  • editor.linkedEditingBackground#0349b412
  • editor.selectionBackground#0e1116
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#26a14840
  • editor.stackFrameHighlightBackground#b58407
  • editor.wordHighlightBackground#e7ecf080
  • editor.wordHighlightBorder#acb6c099
  • editor.wordHighlightStrongBackground#acb6c04d
  • editor.wordHighlightStrongBorder#acb6c099
  • editorBracketHighlight.foreground1#0349b4
  • editorBracketHighlight.foreground2#055d20
  • editorBracketHighlight.foreground3#744500
  • editorBracketHighlight.foreground4#a0111f
  • editorBracketHighlight.foreground5#971368
  • editorBracketHighlight.foreground6#622cbc
  • editorBracketHighlight.unexpectedBracket.foreground#0e1116
  • editorBracketMatch.background#26a14840
  • editorBracketMatch.border#26a14899
  • editorCursor.foreground#0349b4
  • editorGroup.border#20252c
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#20252c
  • editorGutter.addedBackground#26a148
  • editorGutter.deletedBackground#ee5a5d
  • editorGutter.modifiedBackground#b58407
  • editorIndentGuide.activeBackground#0e11163d
  • editorIndentGuide.background#0e11161f
  • editorInlayHint.background#acb6c033
  • editorInlayHint.foreground#0e1116
  • editorInlayHint.paramBackground#acb6c033
  • editorInlayHint.paramForeground#0e1116
  • editorInlayHint.typeBackground#acb6c033
  • editorInlayHint.typeForeground#0e1116
  • editorLineNumber.activeForeground#0e1116
  • editorLineNumber.foreground#88929d
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#acb6c0
  • editorWidget.background#ffffff
  • errorForeground#a0111f
  • focusBorder#0349b4
  • foreground#0e1116
  • gitDecoration.addedResourceForeground#055d20
  • gitDecoration.conflictingResourceForeground#873800
  • gitDecoration.deletedResourceForeground#a0111f
  • gitDecoration.ignoredResourceForeground#66707b
  • gitDecoration.modifiedResourceForeground#744500
  • gitDecoration.submoduleResourceForeground#0e1116
  • gitDecoration.untrackedResourceForeground#055d20
  • icon.foreground#0e1116
  • input.background#ffffff
  • input.border#20252c
  • input.foreground#0e1116
  • input.placeholderForeground#66707b
  • keybindingLabel.foreground#0e1116
  • list.activeSelectionBackground#acb6c033
  • list.activeSelectionForeground#0e1116
  • list.focusBackground#dff7ff
  • list.focusForeground#0e1116
  • list.highlightForeground#0349b4
  • list.hoverBackground#e7ecf0
  • list.hoverForeground#0e1116
  • list.inactiveFocusBackground#dff7ff
  • list.inactiveSelectionBackground#acb6c033
  • list.inactiveSelectionForeground#0e1116
  • minimapSlider.activeBackground#88929d47
  • minimapSlider.background#88929d33
  • minimapSlider.hoverBackground#88929d3d
  • notificationCenterHeader.background#e7ecf0
  • notificationCenterHeader.foreground#0e1116
  • notifications.background#ffffff
  • notifications.border#20252c
  • notifications.foreground#0e1116
  • notificationsErrorIcon.foreground#a0111f
  • notificationsInfoIcon.foreground#0349b4
  • notificationsWarningIcon.foreground#744500
  • panel.background#ffffff
  • panel.border#20252c
  • panelInput.border#20252c
  • panelTitle.activeBorder#ef5b48
  • panelTitle.activeForeground#0e1116
  • panelTitle.inactiveForeground#0e1116
  • pickerGroup.border#20252c
  • pickerGroup.foreground#0e1116
  • progressBar.background#0349b4
  • quickInput.background#ffffff
  • quickInput.foreground#0e1116
  • scrollbar.shadow#66707b33
  • scrollbarSlider.activeBackground#88929d47
  • scrollbarSlider.background#88929d33
  • scrollbarSlider.hoverBackground#88929d3d
  • settings.headerForeground#0e1116
  • settings.modifiedItemIndicator#b58407
  • sideBar.background#ffffff
  • sideBar.border#20252c
  • sideBar.foreground#0e1116
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#20252c
  • sideBarSectionHeader.foreground#0e1116
  • sideBarTitle.foreground#0e1116
  • statusBar.background#ffffff
  • statusBar.border#20252c
  • statusBar.debuggingBackground#a0111f
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0349b480
  • statusBar.foreground#0e1116
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#0e11161f
  • statusBarItem.focusBorder#0349b4
  • statusBarItem.hoverBackground#0e111614
  • statusBarItem.prominentBackground#acb6c033
  • statusBarItem.remoteBackground#e7ecf0
  • statusBarItem.remoteForeground#0e1116
  • symbolIcon.arrayForeground#702c00
  • symbolIcon.booleanForeground#023b95
  • symbolIcon.classForeground#702c00
  • symbolIcon.colorForeground#032563
  • symbolIcon.constantForeground#024c1a
  • symbolIcon.constructorForeground#341763
  • symbolIcon.enumeratorForeground#702c00
  • symbolIcon.enumeratorMemberForeground#023b95
  • symbolIcon.eventForeground#4b535d
  • symbolIcon.fieldForeground#702c00
  • symbolIcon.fileForeground#603700
  • symbolIcon.folderForeground#603700
  • symbolIcon.functionForeground#512598
  • symbolIcon.interfaceForeground#702c00
  • symbolIcon.keyForeground#023b95
  • symbolIcon.keywordForeground#86061d
  • symbolIcon.methodForeground#512598
  • symbolIcon.moduleForeground#86061d
  • symbolIcon.namespaceForeground#86061d
  • symbolIcon.nullForeground#023b95
  • symbolIcon.numberForeground#024c1a
  • symbolIcon.objectForeground#702c00
  • symbolIcon.operatorForeground#032563
  • symbolIcon.packageForeground#702c00
  • symbolIcon.propertyForeground#702c00
  • symbolIcon.referenceForeground#023b95
  • symbolIcon.snippetForeground#023b95
  • symbolIcon.stringForeground#032563
  • symbolIcon.structForeground#702c00
  • symbolIcon.textForeground#032563
  • symbolIcon.typeParameterForeground#032563
  • symbolIcon.unitForeground#023b95
  • symbolIcon.variableForeground#702c00
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#ef5b48
  • tab.activeForeground#0e1116
  • tab.border#20252c
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#0e1116
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#20252c
  • tab.unfocusedHoverBackground#e7ecf0
  • terminal.ansiBlack#0e1116
  • terminal.ansiBlue#0349b4
  • terminal.ansiBrightBlack#4b535d
  • terminal.ansiBrightBlue#1168e3
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#055d20
  • terminal.ansiBrightMagenta#844ae7
  • terminal.ansiBrightRed#86061d
  • terminal.ansiBrightWhite#88929d
  • terminal.ansiBrightYellow#4e2c00
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#024c1a
  • terminal.ansiMagenta#622cbc
  • terminal.ansiRed#a0111f
  • terminal.ansiWhite#66707b
  • terminal.ansiYellow#3f2200
  • terminal.foreground#0e1116
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#20252c
  • textCodeBlock.background#acb6c033
  • textLink.activeForeground#0349b4
  • textLink.foreground#0349b4
  • textPreformat.background#acb6c033
  • textPreformat.foreground#0e1116
  • textSeparator.foreground#88929d
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#0e1116
  • titleBar.border#20252c
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#0e1116
  • tree.indentGuidesStroke#88929d
  • welcomePage.buttonBackground#e7ecf0
  • welcomePage.buttonHoverBackground#ced5dc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#66707b—
constant.other.placeholder, constant.character#a0111f—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#023b95—
entity.name, meta.export.default, meta.definition.variable#702c00—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#0e1116—
entity.name.function#622cbc—
entity.name.tag, support.class.component#024c1a—
keyword#a0111f—
storage, storage.type#a0111f—
storage.modifier.package, storage.modifier.import, storage.type.java#0e1116—
string, string punctuation.section.embedded source#032563—
support#023b95—
meta.property-name#023b95—
variable#702c00—
variable.other#0e1116—
invalid.broken#6e011aitalic
invalid.deprecated#6e011aitalic
invalid.illegal#6e011aitalic
invalid.unimplemented#6e011aitalic
carriage-return#ffffffitalic underline
message.error#6e011a—
string variable#023b95—
source.regexp, string.regexp#032563—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032563—
string.regexp constant.character.escape#024c1abold
support.constant#023b95—
support.variable#023b95—
support.type.property-name.json#024c1a—
meta.module-reference#023b95—
punctuation.definition.list.begin.markdown#702c00—
markup.heading, markup.heading entity.name#023b95bold
markup.quote#024c1a—
markup.italic#0e1116italic
markup.bold#0e1116bold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#023b95—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#6e011a—
punctuation.section.embedded#a0111f—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#024c1a—
markup.changed, punctuation.definition.changed#702c00—
markup.ignored, markup.untracked#e7ecf0—
meta.diff.range#622cbcbold
meta.diff.header#023b95—
meta.separator#023b95bold
meta.output#023b95—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#4b535d—
brackethighlighter.unmatched#6e011a—
constant.other.reference.link, string.other.link#032563—
Datarose: GitHub Theme by Datarose - VS Code Theme