Skip to main content
Coding Theme

Color themes

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#282433
  • activityBar.foreground#e8d7f5
  • activityBarBadge.background#f7b3c3
  • activityBarBadge.foreground#282433
  • badge.background#f7b3c3
  • badge.foreground#282433
  • button.background#f7b3c3
  • button.foreground#282433
  • button.hoverBackground#f7b3c3cc
  • dropdown.background#332e3f
  • dropdown.border#3d3647
  • dropdown.foreground#e8d7f5
  • editor.background#282433
  • editor.findMatchBackground#3d3647
  • editor.findMatchBorder#f7b3c3
  • editor.findMatchHighlightBackground#3d364777
  • editor.findMatchHighlightBorder#f7b3c377
  • editor.foreground#e8d7f5
  • editor.lineHighlightBackground#332e3f
  • editor.selectionBackground#3d3647
  • editorCursor.foreground#e8d7f5
  • editorGroupHeader.noTabsBackground#282433
  • editorGroupHeader.tabsBackground#282433
  • editorHoverWidget.background#332e3f
  • editorHoverWidget.border#3d3647
  • editorHoverWidget.foreground#e8d7f5
  • editorHoverWidget.statusBarBackground#221e2c
  • editorWhitespace.foreground#3d3647
  • editorWidget.background#332e3f
  • editorWidget.border#3d3647
  • editorWidget.foreground#e8d7f5
  • input.background#332e3f
  • input.border#3d3647
  • input.foreground#e8d7f5
  • list.activeSelectionBackground#3d3647
  • list.activeSelectionForeground#e8d7f5
  • list.activeSelectionIconForeground#e8d7f5
  • list.dropBackground#3d3647
  • list.focusBackground#3d3647
  • list.focusForeground#e8d7f5
  • list.focusHighlightForeground#f7b3c3
  • list.highlightForeground#f7b3c3
  • list.hoverBackground#332e3f
  • list.hoverForeground#e8d7f5
  • list.inactiveSelectionBackground#332e3f
  • list.inactiveSelectionForeground#e8d7f5
  • list.inactiveSelectionIconForeground#e8d7f5
  • menu.background#332e3f
  • menu.foreground#e8d7f5
  • menu.selectionBackground#3d3647
  • menu.selectionForeground#e8d7f5
  • menu.separatorBackground#3d3647
  • menubar.selectionBackground#3d3647
  • menubar.selectionForeground#e8d7f5
  • notebook.cellEditorBackground#282433
  • notebook.cellHoverBackground#332e3f
  • notebook.cellInsertionIndicator#f7b3c3
  • notebook.cellStatusBarItemHoverBackground#3d3647
  • notebook.focusedCellBackground#332e3f
  • notebook.focusedEditorBorder#f7b3c3
  • notebookStatusErrorIcon.foreground#f7b3c3
  • notebookStatusRunningIcon.foreground#e8d7f5
  • notebookStatusSuccessIcon.foreground#a8d7cd
  • notifications.background#332e3f
  • notifications.border#3d3647
  • notifications.foreground#e8d7f5
  • progressBar.background#f7b3c3
  • quickInput.background#332e3f
  • quickInput.foreground#e8d7f5
  • quickInputList.focusBackground#3d3647
  • quickInputList.focusForeground#e8d7f5
  • scrollbarSlider.activeBackground#463d56
  • scrollbarSlider.background#3d3647cc
  • scrollbarSlider.hoverBackground#463d56cc
  • searchEditor.findMatchBackground#3d3647
  • searchEditor.findMatchBorder#f7b3c3
  • searchEditor.textInputBorder#3d3647
  • sideBar.background#282433
  • sideBar.foreground#e8d7f5
  • sideBarSectionHeader.background#282433
  • sideBarSectionHeader.border#3d3647
  • sideBarSectionHeader.foreground#e8d7f5
  • sideBarTitle.foreground#e8d7f5
  • statusBar.background#282433
  • statusBar.foreground#e8d7f5
  • statusBar.noFolderBackground#282433
  • tab.activeBackground#282433
  • tab.activeBorderTop#f7b3c3
  • tab.activeForeground#e8d7f5
  • tab.inactiveBackground#282433
  • tab.inactiveForeground#8b8198
  • titleBar.activeBackground#282433
  • titleBar.activeForeground#e8d7f5
  • tree.indentGuidesStroke#3d3647
  • tree.tableColumnsBorder#3d3647

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e8d7f5
comment#8b8198italic
string, punctuation.definition.string#f7b3c3
constant.numeric#f7b3c3
constant.language#f7b3c3bold
constant.character, constant.other#f7b3c3
variable#e8d7f5
keyword#a8d7cd
storage#c4b7e8
storage.type#c4b7e8
entity.name.class#a8d7cdbold
entity.other.inherited-class#a8d7cd
entity.name.function#f7b3c3
variable.parameter#e8d7f5
entity.name.tag, support.class.component#b094e3
entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#a8d7cd
meta.tag.attributes variable.other.readwrite, meta.tag.attributes variable.other.property#a8d7cditalic
meta.tag.attributes meta.embedded.expression variable.other.readwrite, meta.tag.attributes meta.embedded.expression variable.other.object#b094e3
support.function#f7b3c3bold
support.constant#f7b3c3bold
support.type, support.class#c4b7e8
support.other.variable#e8d7f5bold
invalid#282433
invalid.deprecated#282433
punctuation, keyword.operator#8b8198
entity.name.type, support.class, support.type, variable.other.object#b094e3
variable.other.property, variable.other.object.property#d8c7f5
meta.embedded.expression variable.other, meta.embedded.expression variable.other.object#d8c7f5
meta.embedded.expression variable.other.property, meta.embedded.expression variable.other.object.property#f7b3c3