Skip to main content
Coding Theme

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.background#262626
  • activityBar.border#1d1d1d
  • activityBar.foreground#efe8e4
  • activityBar.inactiveForeground#efe8e444
  • activityBarBadge.background#1d1d1d
  • activityBarBadge.foreground#efe8e4
  • activityErrorBadge.foreground#e45877
  • activityWarningBadge.foreground#e6d158
  • badge.background#1d1d1d
  • badge.foreground#efe8e4
  • breadcrumb.activeSelectionForeground#efe8e4
  • breadcrumb.background#2d2d2d
  • breadcrumb.focusForeground#efe8e4
  • breadcrumb.foreground#efe8e4bb
  • button.background#7e7edd
  • button.foreground#efe8e4
  • button.hoverBackground#6e6ed9
  • button.secondaryBackground#1d1d1d
  • button.secondaryForeground#efe8e4
  • button.secondaryHoverBackground#1d1d1d
  • checkbox.background#262626
  • checkbox.border#1d1d1d
  • checkbox.foreground#efe8e4
  • debugConsole.errorForeground#e45877
  • debugConsole.infoForeground#efe8e4bb
  • debugConsole.sourceForeground#efe8e4bb
  • debugConsole.warningForeground#e6d158
  • debugExceptionWidget.background#262626
  • debugExceptionWidget.border#00000000
  • debugIcon.continueForeground#11a8cd
  • debugIcon.disconnectForeground#cd3131
  • debugIcon.pauseForeground#11a8cd
  • debugIcon.restartForeground#0dbc79
  • debugIcon.startForeground#0dbc79
  • debugIcon.stepBackForeground#bc3fbc
  • debugIcon.stepIntoForeground#bc3fbc
  • debugIcon.stepOutForeground#bc3fbc
  • debugIcon.stepOverForeground#bc3fbc
  • debugIcon.stopForeground#cd3131
  • debugToolBar.background#262626
  • debugToolBar.border#00000000
  • diffEditor.border#1d1d1d
  • diffEditor.insertedLineBackground#67d77c11
  • diffEditor.insertedTextBackground#67d77c11
  • diffEditor.removedLineBackground#bf4c3311
  • diffEditor.removedTextBackground#bf4c3311
  • disabledForeground#efe8e488
  • dropdown.background#262626
  • dropdown.border#1d1d1d
  • dropdown.foreground#efe8e4
  • editor.background#2d2d2d
  • editor.findMatchBackground#f4ef8b44
  • editor.findMatchHighlightBackground#f4ba8b44
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#00000000
  • editor.foreground#efe8e4bb
  • editor.hoverHighlightBackground#efe8e411
  • editor.inactiveSelectionBackground#efe8e411
  • editor.lineHighlightBackground#efe8e411
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#7e7edd33
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#efe8e4bb
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#7e7edd88
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#7e7edd
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#efe8e4bb
  • editorCodeLens.foreground#efe8e444
  • editorCursor.background#1d1d1d
  • editorCursor.foreground#efe8e4
  • editorError.foreground#e45877
  • editorGroup.border#1d1d1d
  • editorGroup.emptyBackground#2d2d2d
  • editorGroupHeader.border#1d1d1d
  • editorGroupHeader.tabsBackground#262626
  • editorGroupHeader.tabsBorder#1d1d1d
  • editorGutter.addedBackground#7bdc95
  • editorGutter.commentRangeForeground#efe8e488
  • editorGutter.deletedBackground#bf6f33
  • editorGutter.foldingControlForeground#efe8e4bb
  • editorGutter.modifiedBackground#988fe1
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#1d1d1d
  • editorHoverWidget.foreground#efe8e4
  • editorIndentGuide.activeBackground1#7e7edd
  • editorIndentGuide.background1#efe8e444
  • editorInfo.foreground#84ecdd
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#cbb7dc88
  • editorLineNumber.activeForeground#efe8e4
  • editorLineNumber.foreground#efe8e488
  • editorLink.activeForeground#7e7edd
  • editorMarkerNavigation.background#262626
  • editorMarkerNavigationError.background#e45877
  • editorMarkerNavigationInfo.background#84ecdd
  • editorMarkerNavigationWarning.background#e6d158
  • editorOverviewRuler.border#1d1d1d
  • editorOverviewRuler.commonContentForeground#13c7e444
  • editorOverviewRuler.currentContentForeground#00ffc844
  • editorOverviewRuler.incomingContentForeground#4995ff44
  • editorOverviewRuler.wordHighlightForeground#7e7edd88
  • editorOverviewRuler.wordHighlightStrongForeground#7e7eddbb
  • editorRuler.foreground#efe8e422
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#1d1d1d
  • editorSuggestWidget.foreground#efe8e4
  • editorSuggestWidget.highlightForeground#7e7edd
  • editorSuggestWidget.selectedBackground#7e7edd33
  • editorWarning.foreground#e6d158
  • editorWhitespace.foreground#efe8e444
  • editorWidget.background#262626
  • editorWidget.foreground#efe8e4
  • editorWidget.resizeBorder#efe8e444
  • errorForeground#e45877
  • focusBorder#7e7edd
  • foreground#efe8e4
  • gitDecoration.addedResourceForeground#b5f8f0
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#efe8e488
  • gitDecoration.ignoredResourceForeground#efe8e488
  • gitDecoration.modifiedResourceForeground#efe8e4
  • gitDecoration.renamedResourceForeground#988fe1
  • gitDecoration.stageDeletedResourceForeground#efe8e488
  • gitDecoration.stageModifiedResourceForeground#efe8e4
  • gitDecoration.submoduleResourceForeground#84ecdd
  • gitDecoration.untrackedResourceForeground#b5f8f0
  • icon.foreground#cccccc
  • input.background#2d2d2d
  • input.border#1d1d1d
  • input.foreground#efe8e4
  • input.placeholderForeground#efe8e444
  • inputOption.activeBackground#7e7edd
  • inputOption.activeBorder#7e7edd
  • inputOption.activeForeground#efe8e4
  • inputOption.hoverBackground#7e7edd33
  • inputValidation.errorBackground#262626
  • inputValidation.errorBorder#e45877
  • inputValidation.errorForeground#efe8e4
  • inputValidation.infoBackground#262626
  • inputValidation.infoBorder#84ecdd
  • inputValidation.infoForeground#efe8e4
  • inputValidation.warningBackground#262626
  • inputValidation.warningBorder#e6d158
  • inputValidation.warningForeground#efe8e4
  • list.activeSelectionBackground#7e7edd33
  • list.dropBackground#7e7edd33
  • list.errorForeground#e45877
  • list.focusForeground#efe8e4
  • list.highlightForeground#7e7edd
  • list.hoverBackground#7e7edd11
  • list.inactiveSelectionBackground#7e7edd33
  • list.warningForeground#e6d158
  • listFilterWidget.background#1d1d1d
  • listFilterWidget.noMatchesOutline#f48771
  • listFilterWidget.outline#7e7edd
  • menu.selectionBackground#7e7edd33
  • menu.separatorBackground#1d1d1d
  • menubar.selectionBackground#262626
  • merge.commonContentBackground#13c7e422
  • merge.commonHeaderBackground#13c7e444
  • merge.currentContentBackground#00ffc822
  • merge.currentHeaderBackground#00ffc844
  • merge.incomingContentBackground#4995ff22
  • merge.incomingHeaderBackground#4995ff44
  • minimap.background#2d2d2d
  • minimap.errorHighlight#e45877
  • minimap.findMatchHighlight#f4c38b66
  • minimap.selectionHighlight#7e7edd33
  • minimap.warningHighlight#e6d158
  • minimapGutter.addedBackground#7bdc95
  • minimapGutter.deletedBackground#bf6f33
  • minimapGutter.modifiedBackground#988fe1
  • notificationCenter.border#1d1d1d
  • notificationCenterHeader.background#2d2d2d
  • notificationCenterHeader.foreground#efe8e4
  • notifications.background#262626
  • notifications.border#1d1d1d
  • notifications.foreground#efe8e4
  • notificationToast.border#1d1d1d
  • panel.background#262626
  • panel.border#1d1d1d
  • panel.dropBorder#efe8e4
  • panelSection.border#1d1d1d
  • panelTitle.activeBorder#7e7edd
  • panelTitle.activeForeground#efe8e4
  • panelTitle.inactiveForeground#efe8e488
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1d1d1d
  • pickerGroup.foreground#7e7edd
  • progressBar.background#7e7edd
  • scrollbarSlider.activeBackground#efe8e488
  • scrollbarSlider.background#efe8e422
  • scrollbarSlider.hoverBackground#efe8e444
  • selection.background#7e7edd
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#cccccc
  • sideBar.background#262626
  • sideBar.border#1d1d1d
  • sideBar.dropBackground#7e7edd33
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#1d1d1d
  • sideBarTitle.foreground#efe8e4
  • statusBar.background#262626
  • statusBar.border#1d1d1d
  • statusBar.debuggingBackground#262626
  • statusBar.focusBorder#7e7edd
  • statusBar.foreground#efe8e4
  • statusBar.noFolderBackground#262626
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.errorBackground#00000000
  • statusBarItem.errorForeground#e45877
  • statusBarItem.focusBorder#7e7edd
  • statusBarItem.hoverBackground#1d1d1d
  • statusBarItem.prominentBackground#00000000
  • statusBarItem.prominentForeground#84ecdd
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#7e7edd
  • statusBarItem.warningBackground#00000000
  • statusBarItem.warningForeground#e6d158
  • tab.activeBackground#2d2d2d
  • tab.activeBorder#2d2d2d
  • tab.activeBorderTop#00000000
  • tab.activeForeground#efe8e4
  • tab.border#1d1d1d
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#efe8e488
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#efe8e4
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#bab5b2
  • terminal.ansiYellow#e5e510
  • terminal.border#1d1d1d
  • terminal.foreground#bab5b2
  • textLink.activeForeground#6e6ed9
  • textLink.foreground#7e7edd
  • titleBar.activeBackground#1d1d1d
  • titleBar.activeForeground#efe8e4
  • titleBar.inactiveBackground#1d1d1d
  • titleBar.inactiveForeground#efe8e444
  • tree.indentGuidesStroke#efe8e444
  • walkThrough.embeddedEditorBackground#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#efe8e4bb
variable#efe8e4—
invalid#FF5370—
variable.language#c48bf4italic
entity.name.function.macro#c48bf4—
keyword, storage.type, storage.modifier#aa8bf4
keyword.operator#c48bf4italic
keyword.operator.arithmetic, keyword.operator.math, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.ternary, keyword.operator.namespace, keyword.operator.access, keyword.operator.key-value, keyword.operator.arrow, keyword.operator.optional, keyword.operator.type, meta.selector keyword.operator, punctuation.accessor, punctuation.semi#efe8e4bb
comment#cbb7dcbbitalic
comment.line.shebang—
punctuation.separator#efe8e4bb—
punctuation.definition.parameters#efe8e4—
entity.name.function, variable.function, support.function, keyword.other.special-method#bac7f8—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, constant.other, keyword.other.unit#f4aa8b—
string, constant.other.symbol, constant.other.key#def48b—
entity.name.type, entity.name.namespace, entity.other.inherited-class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types#f6a2dd
support.type#b5f8f0—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370—
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF—
constant.character.escape, punctuation.definition.template-expression, punctuation.section.embedded#f6a2dd—
*url*, *link*, *uri*—underline
comment.block.documentation—
comment.block.documentation storage.type#aa8bf4bbitalic
comment.block.documentation entity.name.type#f6a2ddbb—
comment.block.documentation variable#bac7f8bb—
comment.block.documentation entity.name.type punctuation#f6a2dd44—
comment.block.documentation variable punctuation, comment.block.documentation variable keyword.operator.assignment#bac7f844—
markup.deleted#bf6f33—
markup.inserted#7bdc95—
markup.changed#988fe1—
string.regexp#83ebda—
constant.other.character-class.regexp, constant.other.character-class.set.regexp#f4aa8b—
constant.character.escape.backslash.regexp#f48bde—
punctuation.definition.group#def48b—
punctuation.definition.group.no-capture.regexp——
punctuation.definition.group.regexp variable.other—
string.regexp keyword.operator#aa8bf4
entity.name.tag, meta.tag.sgml#f6a2dd—
entity.other.attribute-name#bac7f8—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#efe8e488—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#efe8e4—
entity.other.attribute-name.class#bac7f8—
entity.other.attribute-name.id#def48b—
meta.attribute-selector, meta.attribute-selector keyword.operator#bac7f888—
source.js meta.import keyword.control.as, source.ts meta.import keyword.control.as, source.tsx meta.import keyword.control.as, source.js meta.import keyword.control.from, source.ts meta.import keyword.control.from, source.tsx meta.import keyword.control.from, source.js meta.import keyword.control.with, source.ts meta.import keyword.control.with, source.tsx meta.import keyword.control.with, source.js meta.import keyword.control.assert, source.ts meta.import keyword.control.assert, source.tsx meta.import keyword.control.assert—italic
source.js tag.decorator entity.name.tag, source.ts tag.decorator entity.name.tag, source.tsx tag.decorator entity.name.tag, source.js tag.decorator punctuation.definition.tag, source.ts tag.decorator punctuation.definition.tag, source.tsx tag.decorator punctuation.definition.tag#82AAFFitalic
source.ts meta.field.declaration, source.tsx meta.field.declaration—italic
source.ts keyword.control.as, source.tsx keyword.control.as, source.ts keyword.operator.type.asserts, source.tsx keyword.operator.type.asserts#c48bf4italic
support.type.property-name.json, entity.name.tag.yaml#bac7f8—
source.lua keyword.operator.logical#c48bf4italic
markup.heading#f6a2dd—
punctuation.definition.heading#f6a2dd88bold
markup.italic—italic
markup.bold, markup.bold string—bold
markup.bold markup.italic, markup.italic markup.bold—italic bold
markup.underline—underline
markup.strikethrough—strikethrough
markup.quote punctuation.definition#efe8e488
markup.quote#efe8e4italic
string.other.link.title.markdown#f6a2dd—
meta.link punctuation.definition#f6a2dd88—
string.other.link.description.title.markdown, meta.link punctuation.definition.string#efe8e4—
meta.link markup.underline.link.markdown#def48b—
constant.other.reference.link.markdown#b5f8f0—
markup.inline.raw, markup.raw.block, markup.fenced_code#efe8e4—
markup.fenced_code punctuation.definition.markdown, markup.fenced_code fenced_code.block.language.markdown#efe8e488—
meta.separator#efe8e4bold
markup.table#efe8e4—
source.python keyword.operator.logical#c48bf4italic
meta.attribute.rust#f4aa8b—
punctuation.definition.attribute.rust, keyword.operator.attribute.inner.rust, punctuation.brackets.attribute.rust, meta.attribute.rust keyword.operator.assignment, meta.attribute.rust punctuation.comma, meta.attribute.rust punctuation.brackets.round#f4aa8baa
entity.name.namespace.rust#f4aa8bitalic
meta.use.rust#f4aa8bitalic
meta.use.rust keyword.operator.math, meta.use.rust variable.language.self#efe8e4italic
meta.use.rust punctuation#efe8e4bb
meta.use.rust entity.name.namespace.rust#efe8e4bbitalic
Erin's Theme by eritbh - VS Code Theme