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.activeBackgrounddefault
  • activityBar.activeBorder#f1d5d0
  • activityBar.background#fbf7f0
  • activityBar.border#9F9690
  • activityBar.foreground#000
  • activityBarBadge.background#D00100
  • activityBarTop.activeBackground#9F9690
  • activityBarTop.activeBorder#9F9690
  • button.background#c8b8b2
  • button.border#A09690
  • button.foreground#000000
  • button.hoverBackground#b2e4dc
  • commandCenter.activeBackground#efe9dd
  • commandCenter.background#efe9dd
  • commandCenter.foreground#000000
  • dropdown.background#efe9dd
  • dropdown.listBackground#efe9dd
  • editor.background#fbf7f0
  • editor.findMatchBackground#7EDFCE
  • editor.findMatchBorder#D00100
  • editor.findMatchHighlightBackground#7EDFCE
  • editor.foreground#000000
  • editor.lineHighlightBackground#f1d5d0
  • editor.selectionBackground#BFBCB7
  • editor.wordHighlightBackground#7EDFCE
  • editorCursor.foreground#D00100
  • editorGroup.border#9f9690
  • editorGroupHeader.border#9F9690
  • editorGroupHeader.tabsBackground#efe9dd
  • editorGutter.addedBackground#6cc06c
  • editorGutter.background#efe9dd
  • editorGutter.deletedBackground#d84a4f
  • editorGutter.modifiedBackground#c0b200
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • editorWidget.background#efe9dd
  • editorWidget.border#9f9690
  • editorWidget.foreground#000000
  • focusBorder#A09690
  • gitlens.trailingLineForegroundColor#6C6C6C
  • input.background#dfd5cf
  • input.border#9f9690
  • input.foreground#000
  • list.activeSelectionBackground#f1d5d0
  • list.activeSelectionForeground#000000
  • list.focusAndSelectionOutline#9f9690
  • list.focusForeground#000000
  • list.hoverBackground#F1D5D0
  • list.inactiveSelectionBackground#f1d5d0
  • menu.background#efe9dd
  • menu.border#9F9690
  • menu.foreground#000000
  • menu.selectionBackground#f1d5d0
  • panel.background#fbf7f0
  • panel.border#9F9690
  • peekView.border#9F9690
  • peekViewEditor.background#efe9dd
  • peekViewEditor.matchHighlightBackground#7EDFCE
  • peekViewResult.background#efe9dd
  • peekViewResult.fileForegrounddefault
  • peekViewTitle.background#efe9dd
  • scrollbarSlider.activeBackground#9f9690
  • scrollbarSlider.background#9f9690
  • scrollbarSlider.hoverBackground#9f9690
  • sideBar.background#efe9dd
  • sideBar.border#9f9690
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#DFD5CF
  • statusBar.background#EFE9DD
  • statusBar.border#545454
  • statusBar.debuggingBackground#f1d5d0
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBarItem.remoteBackground#0031a9
  • statusBarItem.remoteForeground#fbf7f0
  • tab.activeBackground#fbf7f0
  • tab.activeBorder#9F9690
  • tab.border#9F9690
  • tab.inactiveBackground#EFE9DD
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0031a9
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#3548cf
  • terminal.ansiBrightCyan#005f5f
  • terminal.ansiBrightGreen#00663f
  • terminal.ansiBrightMagenta#531ab6
  • terminal.ansiBrightRed#972500
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#884900
  • terminal.ansiCyan#005e8b
  • terminal.ansiGreen#006800
  • terminal.ansiMagenta#721045
  • terminal.ansiRed#a60000
  • terminal.ansiWhite#a6a6a6
  • terminal.ansiYellow#6f5500
  • terminal.background#fbf7f0
  • terminal.foreground#000000
  • terminal.selectionForeground#bfefff
  • titleBar.activeBackground#EFE9DD
  • titleBar.border#9F9690
  • widget.border#9F9690

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid.illegal, entity.name.exception#a60000
comment, punctuation.definition.comment, comment.block.preprocessor#7f0000italic
comment.documentation, comment.block.documentation#006800
constant.other.symbol#6f5500
constant.numeric, constant.character#884900
string.regexp, entity.name.section#306010
constant.character.escape, punctuation.definition.string.begin, punctuation.definition.string.end, string.quoted#306010
constant.language, support.constant#0000b0
entity.name.function, support.function, support.type#721045
entity.other.inherited-class, support.class#8f0075normal
keyword.operator, keyword, storage, storage.type, variable.language#531ab6
variable, support.variable, entity.name.tag, constant, meta.attribute.python#005e8b
entity.name.type, support.type.exception.python#005f5f
string.quoted.docstring.multi.python#005077
string, punctuation#000000
modus operandi tinted by akwigliz - VS Code Theme