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