Skip to main content
CodingTheme

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.activeBorder#3E527B
  • activityBar.activeFocusBorder#C9D2FF
  • activityBar.background#5D6B99
  • activityBar.foreground#fff
  • activityBarBadge.background#3E527B
  • activityBarBadge.foreground#ffffff
  • button.background#5D6B99
  • button.foreground#fff
  • button.hoverBackground#40508D
  • diffEditor.insertedTextBackground#76923C4B
  • diffEditor.removedTextBackground#FF66664B
  • dropdown.background#ffffff
  • dropdown.border#BDC4D1
  • dropdown.foreground#717171
  • dropdown.listBackground#E9EEFF
  • editor.background#fff
  • editor.inactiveSelectionBackground#BFCDDB
  • editor.selectionBackground#0078D7
  • editorGroup.dropBackground#ff0000
  • editorGroup.emptyBackground#5D6B99
  • editorGroupHeader.noTabsBackground#E5EBFF
  • editorGroupHeader.tabsBackground#E5EBFF
  • editorGutter.background#fff
  • editorIndentGuide.activeBackground#808080
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.foreground#2B91AF
  • editorWhitespace.foreground#2B91AF
  • extensionButton.prominentBackground#5D6B99
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#40508D
  • focusBorder#D2A85E
  • foreground#1e1e1e
  • input.background#FCFCFC
  • input.border#BDC4D1
  • input.foreground#1e1e1e
  • input.placeholderForeground#717171
  • inputOption.activeBorder#E5C365
  • list.activeSelectionBackground#C4D5FF
  • list.activeSelectionForeground#1e1e1e
  • list.focusBackground#E6E7EF
  • list.hoverBackground#0000
  • list.inactiveFocusBackground#E6E7EF
  • list.inactiveSelectionBackground#E6E7EF
  • menu.background#E9EEFF
  • menu.foreground#1e1e1e
  • menu.selectionBackground#B4C8FF
  • menu.selectionForeground#1e1e1e
  • menu.separatorBackground#C0CAE9
  • menubar.selectionBackground#F0F9FF
  • menubar.selectionForeground#1e1e1e
  • notificationCenter.border#8E9BBC
  • notificationCenterHeader.background#E4E8FB
  • notificationCenterHeader.foreground#1e1e1e
  • notificationLink.foreground#5D6B99
  • notifications.background#fff
  • notifications.border#8E9BBC
  • notifications.foreground#1e1e1e
  • notificationToast.border#8E9BBC
  • panel.background#E5EBFF
  • scrollbar.shadow#dddddd00
  • sideBar.background#F7F9FE
  • sideBarSectionHeader.background#D9E0F8
  • statusBar.background#40508D
  • tab.activeBackground#fff
  • tab.activeBorder#fff
  • tab.activeBorderTop#F5CC84
  • tab.activeForeground#1e1e1e
  • tab.activeModifiedBorder#40568D
  • tab.border#E5EBFF
  • tab.hoverBackground#F5CC84
  • tab.inactiveBackground#BBC6F1
  • tab.inactiveForeground#40568D
  • terminal.background#F7F9FE
  • titleBar.activeBackground#E5EBFF
  • widget.shadow#0000007f
  • window.activeBorder#1F3C76
  • window.inactiveBorder#515151

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#008000
string#A31515
keyword, storage.type, storage.modifier, support.function, constant.language#00f
constant, keyword.operator#000
entity, storage, variable#000
entity.name, entity.type, support.type#2B91AF
meta.preprocessor, meta.preprocessor keyword#808080
meta.preprocessor#808080

Shiki preview

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

Loading...

WLA-DX for VSCode by Kroc Camen - VS Code Theme