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#031c1f
  • activityBar.border#0c141f
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#B59E7A
  • activityBarBadge.foreground#000
  • button.background#052c31
  • button.hoverBackground#b59e7a00
  • checkbox.border#B59E7A
  • debugExceptionWidget.border#B59E7A
  • debugToolBar.border#B59E7A
  • dropdown.background#2A343E
  • dropdown.border#B59E7A
  • dropdown.listBackground#042327
  • editor.background#031c1f
  • editor.findMatchHighlightBackground#63878a8e
  • editor.foreground#bdb395
  • editor.lineHighlightBackground#FFFFFF00
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#0000FF
  • editor.selectionBackground#0000FF
  • editor.selectionForeground#e0dede
  • editor.selectionHighlightBackground#63878a8e
  • editorCursor.background#000
  • editorCursor.foreground#86E08F
  • editorGroup.border#052c31
  • 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#63878a1a
  • menu.border#b59e7a8a
  • menu.foreground#ccc
  • menu.selectionBackground#b59e7a65
  • panel.border#b59e7a4b
  • panel.dropBackground#63878a1a
  • panelSection.dropBackground#63878af1
  • panelTitle.activeForeground#bdb395
  • panelTitle.inactiveForeground#ccc
  • peekView.border#052c31
  • 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#031c1f
  • sideBar.dropBackground#63878af1
  • sideBar.foreground#CCC
  • sideBarSectionHeader.background#093136
  • sideBarSectionHeader.foreground#bdb395
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#B59E7A
  • statusBar.border#B59E7A
  • statusBar.debuggingBorder#B59E7A
  • statusBar.foreground#000
  • statusBar.noFolderBackground#B59E7A
  • tab.activeBackground#093136
  • tab.activeForeground#FFF
  • tab.border#052c31
  • tab.hoverBackground#093136
  • tab.inactiveBackground#042327
  • tab.inactiveForeground#CCC
  • tab.unfocusedActiveBackground#b59e7a65
  • tab.unfocusedActiveForeground#cccccc94
  • titleBar.activeBackground#031c1f
  • titleBar.border#052c31
  • titleBar.inactiveBackground#0c141f
  • window.activeBorder#09363b

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, meta.item-access.python#bdb395
storage.type.function, constant.numeric, entity.name.type, entity.name.type.param, variable.parameter, entity.name.scope-resolution, variable.object.property, variable.language.this, support.function.builtin.python, variable.language.python#b7cadd
entity.name.tag.html, entity.other.attribute-name.class.css, entity.name.type.mod.rust, entity.name.function.python, meta.object-literal.key, storage.modifier.ts, entity.name.type.struct, storage.type.annotation.java, entity.name.type.class#9DE3C0
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, meta.item-access.arguments.python, entity.other.attribute-name.html#b7cadd
constant.language#70c5bf

Shiki preview

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

Loading...

j_blow by u2018166490288 - VS Code Theme