Skip to main content
CodingTheme

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.activeBackground#b59e7a65
  • activityBar.activeBorder#B59E7A
  • activityBar.background#042327
  • activityBar.border#0c141f
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#B59E7A
  • activityBarBadge.foreground#000
  • button.background#b59e7aa4
  • button.hoverBackground#B59E7A
  • checkbox.border#B59E7A
  • contrastBorder#B59E7A
  • debugExceptionWidget.border#B59E7A
  • debugToolBar.border#B59E7A
  • dropdown.background#2A343E
  • dropdown.border#B59E7A
  • dropdown.listBackground#042327
  • editor.background#042327
  • editor.findMatchHighlightBackground#63878a8e
  • editor.foreground#bdb395
  • editor.lineHighlightBackground#FFFFFF00
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#0000FF
  • editor.selectionBackground#0000FF
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#63878a8e
  • editorBracketHighlight.foreground1#B59E7A
  • editorBracketHighlight.foreground2#B59E7A
  • editorBracketHighlight.foreground3#B59E7A
  • editorBracketHighlight.foreground4#B59E7A
  • editorBracketHighlight.foreground5#B59E7A
  • editorBracketHighlight.foreground6#B59E7A
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#B59E7A00
  • editorBracketMatch.border#B59E7A
  • editorCursor.background#000
  • editorCursor.foreground#86E08F
  • editorGroup.border#B59E7A
  • editorGroup.dropBackground#63878a1a
  • editorGroupHeader.tabsBackground#042327
  • editorLineNumber.activeForeground#b59E7A
  • editorLineNumber.foreground#b59e7a65
  • editorSuggestWidget.background#042327
  • editorSuggestWidget.foreground#ccc
  • editorSuggestWidget.highlightForeground#bdb395
  • editorSuggestWidget.selectedBackground#b59e7a65
  • focusBorder#FFFFFF00
  • input.background#2A343E
  • input.border#B59E7A
  • list.activeSelectionBackground#B59E7A
  • list.dropBackground#63878a1a
  • list.focusBackground#b59e7aa4
  • list.highlightForeground#bdb395
  • list.hoverBackground#b59e7a65
  • list.inactiveSelectionBackground#b59e7aa4
  • menu.border#B59E7A
  • menu.foreground#ccc
  • menu.selectionBackground#b59e7a65
  • panel.border#B59E7A
  • panel.dropBackground#63878a1a
  • panelSection.dropBackground#63878a1a
  • panelTitle.activeForeground#bdb395
  • panelTitle.inactiveForeground#ccc
  • peekView.border#B59E7A
  • peekViewEditor.background#0c141f
  • peekViewEditor.matchHighlightBackground#63878a8e
  • peekViewResult.background#0c141f
  • peekViewResult.selectionBackground#B59E7A
  • quickInput.list.focusBackground#b59e7aa4
  • quickInputList.focusBackground#b59e7aa4
  • scrollbarSlider.background#b59e7aa4
  • scrollbarSlider.hoverBackground#B59E7A
  • sideBar.background#042327
  • sideBar.dropBackground#63878a1a
  • sideBar.foreground#CCC
  • sideBarSectionHeader.background#B59E7A
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#B59E7A
  • statusBar.border#B59E7A
  • statusBar.debuggingBorder#B59E7A
  • statusBar.foreground#000
  • statusBar.noFolderBackground#B59E7A
  • tab.activeBackground#B59E7A
  • tab.activeForeground#FFF
  • tab.border#B59E7A
  • tab.hoverBackground#b59e7aa4
  • tab.inactiveBackground#042327
  • tab.inactiveForeground#CCC
  • tab.unfocusedActiveBackground#b59e7a65
  • tab.unfocusedActiveForeground#cccccc94
  • titleBar.activeBackground#052c31
  • titleBar.border#B59E7A
  • titleBar.inactiveBackground#0c141f
  • window.activeBorder#B59E7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid.illegal#FF0000
meta.function, storage.type.function, string meta.method-call, string variable.other, variable.other.object, meta.function-call, support.function#bdb395
comment, punctuation.definition.comment#31B72C
keyword.control, keyword.operator.logical, keyword.operator.new#CCC
variable.name, entity.name.variable.parameter#A5B5BC
storage.type, keyword.type, meta.return-type#9DE3C0
string#2ca198
variable.parameter, entity.name.variable#CBE0F5
constant.language#70c5bf

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Naysayer88 by davidfreer - VS Code Theme