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#111218
  • activityBar.border#1e1f2c
  • activityBar.foreground#c0c0c8
  • activityBar.inactiveForeground#7a7e90
  • button.background#2c2d3c
  • button.foreground#e0e0e0
  • button.hoverBackground#35364b
  • button.secondaryBackground#1c1c28
  • descriptionForeground#9a9dac
  • editor.background#111218
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#1c1c28
  • editor.selectionBackground#2c2d3c
  • editorCursor.foreground#ffc87c
  • editorIndentGuide.activeBackground1#32344a
  • editorIndentGuide.activeBackground2#2b2d42
  • editorIndentGuide.activeBackground3#24263a
  • editorIndentGuide.background1#1e1f2c
  • editorIndentGuide.background2#191a26
  • editorIndentGuide.background3#14151f
  • editorLineNumber.activeForeground#c0c0c8
  • editorLineNumber.foreground#7a7e90
  • errorForeground#e37f69
  • focusBorder#7ac6c3
  • input.background#111218
  • input.border#1e1f2c
  • input.foreground#e0e0e0
  • input.placeholderForeground#7a7e90
  • list.activeSelectionBackground#2c2d3c
  • list.activeSelectionForeground#e0e0e0
  • list.dropBackground#b292f0
  • list.focusBackground#2c2d3c
  • list.hoverBackground#1c1c28
  • list.inactiveSelectionBackground#1e1f2c
  • menu.background#111218
  • menu.foreground#c0c0c8
  • menu.selectionBackground#2c2d3c
  • menu.separatorBackground#1e1f2c
  • panel.background#111218
  • panel.border#1e1f2c
  • panel.dropBorder#b292f0
  • sideBar.background#111218
  • sideBar.border#1e1f2c
  • sideBar.dropBackground#2c2d3c
  • sideBar.foreground#c0c0c8
  • statusBar.background#111218
  • statusBar.debuggingBackground#b292f0
  • statusBar.debuggingForeground#111218
  • statusBar.foreground#c0c0c8
  • statusBar.noFolderBackground#14151f
  • tab.activeBackground#111218
  • tab.activeForeground#e0e0e0
  • tab.border#1e1f2c
  • tab.hoverBackground#1c1c28
  • tab.inactiveBackground#111218
  • tab.inactiveForeground#7a7e90
  • tab.unfocusedActiveBackground#14151f
  • textLink.activeForeground#ffc87c
  • textLink.foreground#7ac6c3
  • titleBar.activeBackground#111218
  • titleBar.activeForeground#c0c0c8
  • titleBar.border#1e1f2c
  • titleBar.inactiveBackground#14151f
  • titleBar.inactiveForeground#7a7e90
  • tree.indentGuidesStroke#25263b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a7e90italic
string, string.quoted, string.interpolated#7acc90
keyword, keyword.control, keyword.operator, storage.type, storage.modifier#b292f0
entity.name.function, support.function, meta.function-call#66a6e0
variable, variable.other, variable.parameter#e0e0e0
constant.numeric, constant.language, constant.character#ffc87c
entity.name.type, entity.name.class, support.class#d18ce0
entity.name.type.interface#b292f0
support.type, entity.other.inherited-class#66a6e0
entity.name.namespace, entity.name.module#7ac6c3
punctuation, meta.brace, meta.bracket#e0e0e0
Umbra Themes by sanias - VS Code Theme