Skip to main content
Coding Theme

MacOS Modern Theme

Publisher: davidbwatersThemes in package: 11

MacOS Modern is a theme pack styled to match native MacOS as closely as possible. Use recommended settings in the README.md for best results.

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.activeBackground#d3d3d564
  • activityBar.activeBorder#128cff
  • activityBar.activeFocusBorder#128cff
  • activityBar.background#e6e6e5
  • activityBar.border#dcdcdb
  • activityBar.dropBorder#128cff
  • activityBar.foreground#128cff
  • activityBar.inactiveForeground#686969
  • activityBarBadge.background#128cff
  • badge.background#128cff
  • badge.foreground#ffffff
  • button.background#128cff
  • button.foreground#ffffff
  • button.hoverBackground#128cff
  • descriptionForeground#2e2e2e
  • dropdown.background#ffffff84
  • dropdown.border#bfbfbf
  • dropdown.foreground#222222
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#a8ac94
  • editor.findMatchHighlightBackground#1780fa44
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.foreground#000000
  • editor.lineHighlightBackground#eeeeee
  • editor.selectionBackground#b5d5ff
  • editorCursor.foreground#000000
  • editorGroup.border#e1e2e2
  • editorGroup.dropBackground#0369d922
  • editorGroup.emptyBackground#f7f7f6
  • editorGroupHeader.border#e1e2e2
  • editorGroupHeader.noTabsBackground#e9e9e8
  • editorGroupHeader.tabsBackground#e9e9e8
  • editorGroupHeader.tabsBorder#e1e2e2
  • editorIndentGuide.activeBackground#d7d8d7
  • editorIndentGuide.background#e5e5e5
  • editorLineNumber.activeForeground#666666
  • editorLineNumber.foreground#bbbbbb
  • editorWhitespace.foreground#bfbfbf
  • errorForeground#ff0000
  • focusBorder#ffffff
  • foreground#434343
  • input.background#fcfcfc
  • input.border#bfbfbf
  • input.foreground#222222
  • inputOption.activeBackground#E7E7E7
  • list.activeSelectionBackground#cedeef
  • list.activeSelectionForeground#2e2e2e
  • list.dropBackground#dedcde
  • list.errorForeground#2e2e2e
  • list.focusBackground#dedcdeaa
  • list.focusForeground#000000
  • list.highlightForeground#2e2e2e
  • list.hoverForeground#2e2e2e
  • list.inactiveFocusBackground#dbdbdb
  • list.inactiveSelectionBackground#dbdbdb
  • list.inactiveSelectionForeground#2e2d2e
  • list.invalidItemForeground#2e2e2e
  • list.warningForeground#2e2e2e
  • minimap.background#ffffff79
  • selection.background#cedeef
  • sideBar.background#f8f8f7
  • sideBar.border#e5e5e5
  • sideBar.dropBackground#f8f8f721
  • sideBar.foreground#434343
  • sideBarSectionHeader.background#f8f8f73f
  • sideBarSectionHeader.border#f9f5f500
  • sideBarSectionHeader.foreground#666666
  • sideBarTitle.foreground#444444
  • statusBar.background#f6f6f5
  • statusBar.border#dfdfde
  • statusBar.debuggingBackground#ededed
  • statusBar.foreground#666666
  • statusBar.noFolderBackground#ededed
  • tab.activeBackground#f7f7f6
  • tab.activeBorder#e1e2e2
  • tab.activeBorderTop#e2e2e2
  • tab.activeForeground#434343
  • tab.border#dad9d9
  • tab.inactiveBackground#e9e9e8
  • tab.inactiveForeground#686969
  • tab.unfocusedActiveBackground#f7f7f6
  • tab.unfocusedActiveBorder#e1e2e2
  • tab.unfocusedActiveForeground#434343
  • tab.unfocusedInactiveBackground#e9e9e8
  • tab.unfocusedInactiveForeground#686969
  • textBlockQuote.background#ff000000
  • textBlockQuote.border#ff000000
  • textCodeBlock.background#ff000000
  • titleBar.activeBackground#e7e7e6
  • titleBar.activeForeground#232323
  • titleBar.border#dcdcdb
  • titleBar.inactiveBackground#f7f7f6
  • titleBar.inactiveForeground#acacab
  • widget.shadow#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#546348
string#853e64
constant.numeric#323E7D
constant.language#323E7D
constant.character, constant.other#323E7D
variable
keyword#323E7D
storage#587EA8
storage.type#587EA8
entity.name.class#587EA8
entity.other.inherited-class#587EA8
entity.name.function#587EA8
variable.parameter#000000
markup.bold, markdown.bold#587EA8
markup.heading, markdown.heading#587EA8
markup.italic, markdown.italic#853e64
markup.quote, markdown.quote#853e64
entity.name.tag#587EA8
entity.other.attribute-name#B73999
support.function#587EA8
support.constant#587EA8
support.type, support.class#587EA8
support.other.variable#000000
invalid#255E22
invalid.deprecated#255E22

Shiki preview

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

Loading...