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#b3c250
  • activityBar.border#5eff00
  • activityBar.foreground#5eff00
  • activityBarBadge.background#7e8531
  • activityBarBadge.foreground#b3c250
  • badge.background#b3c250
  • badge.foreground#7e8531
  • editor.background#b3c250
  • editor.findMatchBackground#86715c
  • editor.findMatchBorder#b3c250
  • editor.findMatchHighlightBackground#86715c00
  • editor.findMatchHighlightBorder#b3c250
  • editor.foreground#86715c
  • editor.lineHighlightBackground#b3c250
  • editor.selectionBackground#00000030
  • editor.selectionHighlightBackground#b3c25000
  • editor.selectionHighlightBorder#86715c
  • editorBracketMatch.background#b3c250
  • editorBracketMatch.border#86715c
  • editorCursor.foreground#b3c250
  • editorError.foreground#b3c250
  • editorGroup.border#86715c
  • editorGroupHeader.tabsBackground#b3c250
  • editorGutter.addedBackground#86715c
  • editorGutter.deletedBackground#b3c250
  • editorGutter.modifiedBackground#86715c
  • editorHoverWidget.background#b3c250
  • editorHoverWidget.border#86715c
  • editorInfo.foreground#b3c250
  • editorLineNumber.activeForeground#86715c
  • editorLineNumber.foreground#c0d729
  • editorLink.activeForeground#86715c
  • editorMarkerNavigation.background#b3c250
  • editorOverviewRuler.border#86715c
  • editorOverviewRuler.errorForeground#b3c250
  • editorOverviewRuler.findMatchForeground#86715c10
  • editorOverviewRuler.infoForeground#86715c
  • editorOverviewRuler.warningForeground#b3c250
  • editorRuler.foreground#86715c
  • editorSuggestWidget.background#86715c
  • editorSuggestWidget.border#b3c250
  • editorSuggestWidget.foreground#86715c
  • editorSuggestWidget.highlightForeground#b3c250
  • editorSuggestWidget.selectedBackground#00000020
  • editorWarning.foreground#86715c
  • editorWhitespace.foreground#b3c250
  • editorWidget.background#86715c
  • editorWidget.border#b3c250
  • editorWidget.resizeBorder#86715c
  • list.activeSelectionBackground#04ff00
  • list.activeSelectionForeground#b3c250
  • list.focusBackground#048913
  • list.hoverBackground#b3c250
  • list.hoverForeground#86715c
  • list.inactiveFocusBackground#000306
  • list.inactiveSelectionBackground#b3c250
  • list.inactiveSelectionForeground#b3c250
  • menu.background#b3c250
  • menu.border#7e8531
  • menu.foreground#b3c250
  • menu.selectionBackground#7e8531
  • menu.selectionBorder#b3c250
  • menu.selectionForeground#161616
  • menu.separatorBackground#b3c250
  • menubar.selectionBackground#7e8531
  • menubar.selectionBorder#b3c250
  • menubar.selectionForeground#7e8531
  • peekViewEditor.background#7e8531
  • peekViewEditor.matchHighlightBackground#7e8531
  • peekViewResult.matchHighlightBackground#b3c250
  • scrollbar.shadow#7e8531
  • scrollbarSlider.activeBackground#7e8531
  • scrollbarSlider.background#7e8531
  • scrollbarSlider.hoverBackground#161616
  • sideBar.background#b3c250
  • sideBar.border#c6d527
  • sideBar.foreground#86715c
  • sideBarSectionHeader.background#909090
  • sideBarSectionHeader.border#b3c250
  • sideBarSectionHeader.foreground#86715c
  • sideBarTitle.foreground#86715c
  • statusBar.background#b3c250
  • statusBar.border#41d65a
  • statusBar.debuggingBackground#884c41
  • statusBar.debuggingForeground#67ff01
  • statusBar.foreground#7e8531
  • statusBar.noFolderBackground#528a49
  • tab.activeBackground#5eff00
  • tab.activeBorder#5eff00
  • tab.activeForeground#7e8531
  • tab.activeModifiedBorder#161616
  • tab.border#b3c250
  • tab.inactiveBackground#7e8531
  • tab.inactiveForeground#1f210a
  • tab.unfocusedActiveBackground#161616
  • tab.unfocusedActiveBorder#7e8531
  • tab.unfocusedActiveForeground#7e8531
  • tab.unfocusedInactiveBackground#b3c250
  • tab.unfocusedInactiveForeground#7e8531
  • terminal.ansiBlack#7e8531
  • terminal.ansiBlue#b3c250
  • terminal.ansiBrightBlack#7e8531
  • terminal.ansiBrightBlue#b3c250
  • terminal.ansiBrightCyan#161616
  • terminal.ansiBrightGreen#b3c250
  • terminal.ansiBrightMagenta#7e8531
  • terminal.ansiBrightRed#b3c250
  • terminal.ansiBrightWhite#7e8531
  • terminal.ansiBrightYellow#b3c250
  • terminal.ansiCyan#7e8531
  • terminal.ansiGreen#b3c250
  • terminal.ansiMagenta#161616
  • terminal.ansiRed#b3c250
  • terminal.ansiWhite#7e8531
  • terminal.ansiYellow#b3c250
  • terminalCursor.background#b3c250
  • terminalCursor.foreground#7e8531
  • titleBar.activeBackground#b3c250
  • titleBar.activeForeground#7e8531
  • titleBar.border#b3c250
  • titleBar.inactiveBackground#7e8531
  • titleBar.inactiveForeground#161616
  • window.activeBorder#c25250
  • window.inactiveBorder#7e8531

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7e8531bold italic
comment.block.preprocessor#b3c250bold italic
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type#448C27
invalid.illegal#b3c250
keyword.operator#586502
keyword, storage#818756
storage.type, support.type#e00013
constant.language, support.constant, variable.language#c1d15c
variable, support.variable#4dfd02
entity.name.function, support.function#799a68bold italic
entity.name.type, entity.other.inherited-class, support.class#91f866bold italic
entity.name.exception#4dfd02
entity.name.sectionbold italic
constant.numeric, constant.character, constant#4dfd02
string#4dfd02
constant.character.escape#4dfd02
string.regexp#448C27
constant.other.symbol#448C27
punctuation#000000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#000000
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#5c0b0bae
entity.name.tag#448C27
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#6c2a1dbold italic
constant.character.entity, punctuation.definition.entity#af6728
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#448C27
meta.property-name, support.type.property-name#448C27
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold italic
markup.changed#448C27
markup.deleted#448C27
markup.italicbold italic
markup.error#448C27
markup.inserted#448C27
meta.link#448C27
markup.output, markup.raw#777777
markup.prompt#448C27
markup.heading#448C27
markup.boldbold italic
markup.traceback#448C27
markup.underlineunderline
markup.quote#448C27
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#448C27bold italic
meta.diff.range, meta.diff.index, meta.separator#448C27
meta.diff.header.from-file#448C27
meta.diff.header.to-file#448C27
Shrek 5 by Oliver Jessner - VS Code Theme