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#ffffff
  • dropdown.border#bfbfbf
  • dropdown.foreground#222222
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#a8ac94
  • editor.findMatchHighlightBackground#128cff44
  • 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
  • editorWidget.background#f2f2f2
  • 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#008E00
meta.preprocessor, keyword.control.import#7D4726
string#DF0002
constant.numeric#3A00DC
constant.language#C800A4
constant.character, constant.other#275A5E
variable.language, variable.other#C800A4
keyword#C800A4
storage#C900A4
entity.name.class#438288
markup.bold, markdown.bold#438288
markup.heading, markdown.heading#438288
markup.italic, markdown.italic#C900A4
markup.quote, markdown.quote#C900A4
entity.other.inherited-class
entity.name.function
variable.parameter
entity.name.tag#790EAD
entity.other.attribute-name#450084
support.function#450084
support.constant#450084
support.type, support.class#790EAD
support.other.variable#790EAD
invalid
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080

Shiki preview

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

Loading...