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#656f81
  • 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#818c96
  • editorLineNumber.foreground#d4d4d4
  • editorWhitespace.foreground#d4d4d4
  • 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#89c0b4
meta.preprocessor, keyword.control.import#ef8776
string#ee81b0
constant.numeric#8adcfb
constant.language#ee81b0
constant.character, constant.other#89c0b4
variable.language, variable.other#ee81b0
keyword#ee81b0
storage#ee81b0
entity.name.class#89c0b4
markup.bold, markdown.bold#89c0b4
markup.heading, markdown.heading#89c0b4
markup.italic, markdown.italic#ee81b0
markup.quote, markdown.quote#ee81b0
entity.other.inherited-class
entity.name.function
variable.parameter
entity.name.tag#aa83e4
entity.other.attribute-name#aa83e4
support.function#aa83e4
support.constant#aa83e4
support.type, support.class#aa83e4
support.other.variable#aa83e4
invalid
token.info-token#8adcfb
token.warn-token#d5c985
token.error-token#ee81b0
token.debug-token#aa83e4

Shiki preview

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

Loading...