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#221e2c
  • 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#221e2c
  • editorGroupHeader.tabsBackground#221e2c
  • 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#221e2c
  • sideBar.foreground#e8d7f5
  • sideBarSectionHeader.background#282433
  • sideBarSectionHeader.border#3d3647
  • sideBarSectionHeader.foreground#e8d7f5
  • sideBarTitle.foreground#e8d7f5
  • statusBar.background#221e2c
  • statusBar.foreground#e8d7f5
  • statusBar.noFolderBackground#221e2c
  • tab.activeBackground#282433
  • tab.activeBorderTop#f7b3c3
  • tab.activeForeground#e8d7f5
  • tab.inactiveBackground#221e2c
  • tab.inactiveForeground#8b8198
  • titleBar.activeBackground#221e2c
  • 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—