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#272822
  • activityBar.foreground#ffffff
  • badge.background#7f5d38
  • banner.iconForeground#ff0000
  • button.background#6e6e6e
  • editor.background#272822
  • editor.findMatchBorder#FFE792
  • editor.findMatchHighlightBackground#5a5a5a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#272822
  • editor.selectionBackground#383830
  • editorCursor.foreground#d3af86
  • editorGroupHeader.tabsBackground#272822
  • editorHoverWidget.background#32332d
  • editorHoverWidget.foreground#ffffff
  • editorLightBulb.foreground#ff0000
  • editorLightBulbAutoFix.foreground#ff0000
  • editorLineNumber.activeForeground#adadad
  • editorSuggestWidget.background#32332d
  • editorSuggestWidget.highlightForeground#00ff00
  • editorSuggestWidget.selectedForeground#ffffff
  • editorWidget.background#838383
  • editorWidget.foreground#000000
  • focusBorder#C7CBD1
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#7e7e7e
  • gitDecoration.modifiedResourceForeground#017201
  • gitDecoration.renamedResourceForeground#ff0000
  • gitDecoration.stageDeletedResourceForeground#ff0000
  • gitDecoration.stageModifiedResourceForeground#017201
  • gitDecoration.submoduleResourceForeground#ff0000
  • gitDecoration.untrackedResourceForeground#ff0000
  • icon.foreground#FFFFFF
  • input.background#FFFFFF
  • input.foreground#000000
  • input.placeholderForeground#727070
  • inputOption.activeBackground#E4E6E9
  • inputOption.activeBorder#acacac
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#555555
  • inputValidation.errorBorder#555555
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#686c61
  • list.focusBackground#C7CBD1
  • list.focusForeground#000000
  • list.focusHighlightForeground#00ff00
  • list.focusOutline#000
  • list.highlightForeground#ffffff
  • list.hoverBackground#aaa9a9
  • list.inactiveFocusOutline#000000
  • list.inactiveSelectionBackground#aaa9a9
  • list.inactiveSelectionIconForeground#dad7d7
  • listFilterWidget.background#bbbbbb
  • listFilterWidget.noMatchesOutline#810303
  • menu.background#f2f2f2
  • menu.foreground#000000
  • minimap.selectionHighlight#84613daa
  • panel.background#302f2f
  • peekView.border#adadad
  • peekViewEditor.background#20201e
  • peekViewEditor.matchHighlightBackground#84613daa
  • peekViewResult.background#4e4e4d
  • peekViewResult.lineForeground#f88307
  • peekViewTitle.background#616161
  • pickerGroup.border#e3b583
  • ports.iconRunningProcessForeground#369432
  • problemsErrorIcon.foreground#ff0000
  • problemsInfoIcon.foreground#ff0000
  • problemsWarningIcon.foreground#ff0000
  • progressBar.background#7f5d38
  • quickInput.foreground#FFFFFF
  • quickInputList.focusBackground#585c57
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusIconForeground#ffffff
  • selection.background#9ebccc
  • sideBar.background#EBEDEF
  • sideBar.dropBackground#C7CBD1
  • sideBar.foreground#000
  • sideBarSectionHeader.background#C7CBD1
  • statusBar.background#ABB1BA
  • statusBar.debuggingBackground#423523
  • statusBar.foreground#000
  • statusBar.noFolderBackground#ff0000
  • statusBarItem.remoteBackground#6e583b
  • tab.activeBackground#272822
  • tab.inactiveBackground#41423D
  • tab.lastPinnedBorder#51412c
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#d3af86—
meta.embedded, source.groovy.embedded#ffffff—
variable.parameter.function#d3af86—
comment, punctuation.definition.comment#22a7b3—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d3af86—
none#d3af86—
keyword.operator#e79720—
keyword, keyword.control, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.using, keyword.other.operator#E79720—
variable#dc3958—
entity.name.function, meta.require, support.function.any-method#ffffff—
support, support.class, entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.type.property-name, support.constant.property-value#66D9EF—
keyword.other.special-method#8ab1b0—
storage#98676aitalic
storage.type#C73B40—
variable#FD971Fitalic
variable.parameter#FD971Fitalic
variable.other.readwrite, variable.other.constant#94F069italic
variable.other.property, meta.function-call#a3c5f1italic
support.function#7e602c—
string, constant.other.symbol, entity.other.inherited-class, variable.parameter.url#FF73A4—
constant.numeric#AE81FF—
none#AE81FF—
none#AE81FF—
constant#AE81FF—
entity.name.tag#FD8A20—
entity.other.attribute-name, support.constant.color#A6CE28—
entity.other.attribute-name.id, punctuation.definition.entity#A6CE28—
meta.selector, punctuation.accessor#ffffff—
none#AE81FF—
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#8ab1b0bold
keyword.other.unit#AE81FF—
markup.bold, punctuation.definition.bold#f06431bold
markup.italic, punctuation.definition.italic#98676aitalic
markup.inline.raw#FF73A4—
string.other.link#dc3958—
meta.link, support.function.url#66D9EF—
markup.list#dc3958—
markup.quote#AE81FF—
meta.separator#d3af86—
markup.inserted#FF73A4—
markup.deleted#dc3958—
markup.changed#98676a—
constant.other.color#AE81FF—
string.regexp#7e602c—
constant.character.escape#7e602c—
punctuation.section.embedded, variable.interpolation#088649—
invalid#dc3958—
Joker Dark Theme by Joker0o0 - VS Code Theme