Introducing Dark Mode
Introducing Dark Mode
WWDC 2018
![](https://cdn-images-1.medium.com/max/800/1*cIMOj4Nqy0upvO714P2gxQ.png)
![](https://cdn-images-1.medium.com/max/800/1*Q5La0fcqku6ZZvKytpFCGw.png)
Accent Color
![](https://cdn-images-1.medium.com/max/800/1*lobbd5ZW_7qB_tDmicdMJw.gif)
Button
![](https://cdn-images-1.medium.com/max/800/1*EzUVdKyekDapNT2se5udcQ.png)
![](https://cdn-images-1.medium.com/max/800/1*FZLsVH8eoZXuhvtvHZRB6g.png)
Border Shadow
![](https://cdn-images-1.medium.com/max/800/1*kGTuxPXrr1viSYmz0FcQFA.png)
Background Layers
![](https://cdn-images-1.medium.com/max/800/1*9nk61SzzOb_Cq0sjMCnmEQ.gif)
![](https://cdn-images-1.medium.com/max/800/1*w9uMHm2YlX59CJkxZjrdZA.gif)
Background Colors
![](https://cdn-images-1.medium.com/max/800/1*6dx94yyI0I94oEX2J1wNBg.png)
Working with Colors
![](https://cdn-images-1.medium.com/max/800/1*tCi8j175tv8Iks90uBI_6g.png)
![](https://cdn-images-1.medium.com/max/800/1*bQbhXJbt27n2sU6A6P7QTQ.png)
Designing with Vibrancy
![](https://cdn-images-1.medium.com/max/800/1*baG5RIUjC3n3RP_XLNFaRg.png)
![](https://cdn-images-1.medium.com/max/800/1*ZMfGBdZV3wjH0nItmQWXWA.png)
![](https://cdn-images-1.medium.com/max/800/1*UzAMWJY-ADr-1jAJSj6iNg.png)
Artistically Inverting Glyphs
![](https://cdn-images-1.medium.com/max/800/1*vVeQ_sWzx-OAzlwS0-zF_A.png)
![](https://cdn-images-1.medium.com/max/800/1*V98vQrqt2MfBpAd3KjURSw.gif)
![](https://cdn-images-1.medium.com/max/800/1*afqr1GM-NFx9suxvUASqLw.gif)
Adopting Dark Mode
![](https://cdn-images-1.medium.com/max/800/1*ebVon2v9oZOwcGD2qzvsFQ.png)
Asset Catalog Editor in Xcode
Assets.xcassets
- Meaningful names
- Multiple definitions
- Central location
![](https://cdn-images-1.medium.com/max/800/1*U8_S-TzzMFaj6sgzn4bVcg.png)
![](https://cdn-images-1.medium.com/max/800/1*zef7G_9buY4olf3-jf3BBw.png)
![](https://cdn-images-1.medium.com/max/800/1*ZcCMn_hAP6RTVRBnzAXm-w.png)
Dynamic System Colors
- Many NSColors are dynamic
- Color resolved at draw time
![](https://cdn-images-1.medium.com/max/800/1*F8oUXToExyyiFdm7umY3gg.png)
![](https://cdn-images-1.medium.com/max/800/1*1kW2JSm7TkY-rXqHnRLbIg.png)
![](https://cdn-images-1.medium.com/max/800/1*nALDq3hJ29j9hWwFNkdeHw.png)
![](https://cdn-images-1.medium.com/max/800/1*3kKbcnr6MmWgomjYzJoNEA.png)
Text
![](https://cdn-images-1.medium.com/max/800/1*-oKOA0D0tJY7myPY2NEHzA.png)
![](https://cdn-images-1.medium.com/max/800/1*V1Np_1gsivQPBEmqqTUJ9A.png)
Text View
![](https://cdn-images-1.medium.com/max/800/1*GjiQ-5CjqiiPPhYQjiMk2w.png)
![](https://cdn-images-1.medium.com/max/800/1*RmbpWUJ3AhVNjZI5KZY9ag.png)
![](https://cdn-images-1.medium.com/max/800/1*Rf7CId6d8wuWXquKPytVoQ.gif)
Accessibility
![](https://cdn-images-1.medium.com/max/800/1*Id8mWgV8TzWffD1c6lEAEw.png)
![](https://cdn-images-1.medium.com/max/800/1*7Q3qS8TJoyt2PQ5FIdXBiA.png)
Asset Catalog Editor in Xcode
Assets.xcassets
![](https://cdn-images-1.medium.com/max/800/1*p9RdDkE0fAypc62V7Cc5lg.png)
![](https://cdn-images-1.medium.com/max/800/1*nHcqYx_od520AQCFL485sw.png)
![](https://cdn-images-1.medium.com/max/800/1*PXym2jGr72rO0h3szTp_ew.png)
Template Images
- Transparency maintained
- Color ignored
- Bitmaps or PDFs
![](https://cdn-images-1.medium.com/max/800/1*miFpnnFChBpYabUrFw2xSw.png)
![](https://cdn-images-1.medium.com/max/800/1*yfVgpC7V1ZTpAB_1dySKCQ.png)
![](https://cdn-images-1.medium.com/max/800/1*vE7klTskbY0hvP_Vq6WIYQ.png)
![](https://cdn-images-1.medium.com/max/800/1*Qwda4rriMp3rPqUMtJYPjQ.png)
Content Tint Color ( new )
- Custom template tint colors
- NSImageView: Image
- NSButton: Image and title
![](https://cdn-images-1.medium.com/max/800/1*lEC-I_VredHU8JkmTDOlpQ.png)
![](https://cdn-images-1.medium.com/max/800/1*p2IWQhZk1B4H_F-lpq2TgA.png)
![](https://cdn-images-1.medium.com/max/800/1*_R28fB-9yK8vSYFCpYmKBw.png)
![](https://cdn-images-1.medium.com/max/800/1*hTbeaKoGHMsTae2wc4uktQ.png)
![](https://cdn-images-1.medium.com/max/800/1*NY-Vhli1T6UW9q2jU4viDw.png)
![](https://cdn-images-1.medium.com/max/800/1*YJgm9fQvfD7wdqKqTcvsOA.png)
Accent and Highlight Colors
controlAccentColor
— custom control accents ( new )
![](https://cdn-images-1.medium.com/max/800/1*Ra31Kf_gzhz95AcmXA_Ivg.png)
![](https://cdn-images-1.medium.com/max/800/1*cAx5fSO12dF37Zii2648cw.png)
![](https://cdn-images-1.medium.com/max/800/1*8HiKu8X7BhrTku3YFJbYnA.png)
selectedContentBackgroundColor
— background of table rows, etc
![](https://cdn-images-1.medium.com/max/800/1*GMKj5SdXqqCBacBF__zQVQ.png)
selectedTextBackgroundColor
— background of selected text
![](https://cdn-images-1.medium.com/max/800/1*bVMIltN-AQr6R3ivQhQRBA.png)
![](https://cdn-images-1.medium.com/max/800/1*bJIWRIwYDhsGwJCONbSGLA.png)
![](https://cdn-images-1.medium.com/max/800/1*4ysGeQvtZtWqFFIuc8LZqg.png)
![](https://cdn-images-1.medium.com/max/800/1*8DYTerCLxEzdfhaCw4unUg.png)
NSVisualEffectView
- Translucent blur materials
- Onto desktop and other windows
- Onto content in the window - Enables vibrant foreground blending
![](https://cdn-images-1.medium.com/max/800/1*apn2_mQDm7K5Xn96CvVfAw.png)
Materials
![](https://cdn-images-1.medium.com/max/800/1*OrMYqsn-K8z_Ek2i09XUnw.png)
Nonsemantic Materials
- Light
- Dark
- Medium Light
- Ultra Dark
Semantic Materials ( new )
![](https://cdn-images-1.medium.com/max/800/1*f9pczgJG9ndFVu4jkJ372A.png)
![](https://cdn-images-1.medium.com/max/800/1*wkLkJeeURVZi_iJ8MgOu9A.png)
![](https://cdn-images-1.medium.com/max/800/1*YlM8CC2Wy_IaFtMIBwMWOQ.png)
Desktop-Tinted Backgrounds
![](https://cdn-images-1.medium.com/max/800/1*ubcCo7s1JqnMaOtbKR2leQ.png)
![](https://cdn-images-1.medium.com/max/800/1*oQrf70kf4ydIkeNxJiRrJw.png)
![](https://cdn-images-1.medium.com/max/800/1*WmlTlSSuzaUEDa9AMsIRbg.png)
![](https://cdn-images-1.medium.com/max/800/1*74d4a4N8aAvWFJqDZEBS9w.png)
![](https://cdn-images-1.medium.com/max/800/1*wEymmQIgEuQyYJONMK8C-Q.png)
![](https://cdn-images-1.medium.com/max/800/1*Py6M_tg2PfqaxMbtoVeruw.png)
NSAppearance
- NSApplication follows the system
- Can be overridden by setting
appearance
![](https://cdn-images-1.medium.com/max/800/1*7bzk0e9KjV8tgaOAmDjBxg.png)
![](https://cdn-images-1.medium.com/max/800/1*ZKowpoO9OlNjo8rGCmdGxw.png)
![](https://cdn-images-1.medium.com/max/800/1*uEggJVjW_NcWCr1kbKWoKg.png)
![](https://cdn-images-1.medium.com/max/800/1*nZb-z9iqleeDMRx0rKhAsw.png)
![](https://cdn-images-1.medium.com/max/800/1*hI6kRhx_UaoaybJxp8KSPw.png)
- Drawing uses
view.effectiveAppearance
![](https://cdn-images-1.medium.com/max/800/1*7UqAzBFp5ocOHaQdrx7QYA.png)
![](https://cdn-images-1.medium.com/max/800/1*ucYPixnaL6KbuipOy7buAQ.png)
Always Dark Apps
- Media focused apps
- Color sensitive workflows
- Leave it as a choice
- System preference
- In app preference if needed - DO NOT Set Vibrant Dark appearance on app on window
→ USE Dark Aqua instead ⚠️
![](https://cdn-images-1.medium.com/max/800/1*_oCGJEvYNmeU1D8iapXL1g.png)
![](https://cdn-images-1.medium.com/max/800/1*qJjWVMVpu-5fU1_b8Az5xA.png)
![](https://cdn-images-1.medium.com/max/800/1*eTCjeeLL9sQlHGTqtgR-lw.png)
Steps to Look Great in Dark Mode
- Run your app from Xcode 10 on 10.14
- Replace static colors, images, materials
- System Colors
- Asset Catalog Colors - Remove accidental NSAppearance overrides
Advanced Dark Mode
- Advanced NSAppearance
- NSVisualEffectView and vibrant blending
- Custom view drawing
- View Debugger and Interface Builder
- Back deployment strategies
- Advance Dark Mode ( WWDC 2018 )