JBThemeSelector is a beautiful, dynamic theme selector for iOS and macOS.

Give your users a feel of the themes that are available to them – before they're even applied.

Table of Contents

1. Implementation

   1. Overview
   2. Theme
   3. Theme Selector

2. Progress & TODO

   1. Overview
   2. Up Next
   3. Second Priority
   4. Packages

3. Additional Information

   1. Known Errors
   2. References
   3. Requirements
   4. Licensing

As of right now, this project is more of a POC. I do plan on implementing a simplified integration process, as well as creating packages for a quick and easy setup process.

---

Implementation

I am currently in the middle of exam season, with a few more assignments to hand-in before I can officially call it a semester. Furthermore, I have a number of projects in the works that are close to production (one of which is where I got the inspiration to create this standalone project). However, the lovely people of Reddit requested that I release the base code as soon as possible, regardless of the code's current state.

If anyone would like to help out, I would be more than happy to accept pull requests!

Overview

Initially, I was planning on adding a full-on theme library – including UI elements, colors, the works. However, once Big Sur was released, I knew that Apple's UI standards were heading in a different direction. A number of applications (Music, Safari, Outlook, etc.) have opted for the VisualEffectView theming scheme. Thus, I decided to go the same route and allow Big Sur to decide.

Theme

Theme implementation for AppKit's NSVisualEffectView with Material:

enum Theme {

  case solid      // Opaque Background
  case misty      // Half & Half (Middle)
  case glass      // Translucent Blur
  
  var material: NSVisualEffectView.Material {
    switch self {
    case .solid: return .windowBackground
    case .misty: return .underWindowBackground
    case .glass: return .fullScreenUI
    }
  }
}

Use Cases

Setting VisualEffectView's material property:

visualEffectView.material = theme.material

Additional Theme Properties

var isTransparent: Bool {
  switch self {
  case .solid: return false
  case .misty: return true
  case .glass: return true
  }
}

var backgroundColor: NSColor {
  switch self {
  case .solid: .white // .black
  case .misty: .clear
  case .glass: .clear
}

Use Cases

Setting the view's background (with NSView+BackgroundColor extension):

view.backgroundColor = theme.backgroundColor

Setting the VisualEffectView display (.solid = isHidden) ? !isHidden:

visualEffectView.isHidden = !theme.isTransparent

Full Example Usage

macOS: Setting the View and VisualEffectView properties.

func set(_ theme: Theme) {
  view.backgroundColor = theme.backgroundColor
  visualEffectView.isHidden = !theme.isTransparent
  visualEffectView.material = theme.material
}

Set new theme with: set(.theme)

Note: If you need a more technical method of handling the macOS system appearance change, checkout NSView's hasDarkAppearance extension. You can use it to specify certain properties, depending on if macOS is in default (light) or dark mode.

Theme Selector

As I mentioned above, the project itself is not easy to import. Most of the UI presentation has been done through Storyboards. For now, you can follow these steps to import ThemeSelector:

(Back to studying, brb!)

TODO

Progress

• Implement macOS interface
  • Storyboard
  • Programmatic
  • Swift UI
• Implement iOS interface
  • Storyboard
  • Programmatic
  • Swift UI

Up Next

• Create custom class for mini views
• Add how-to for implementation
• Add how-to for creating mini view thumbnails
• Simplify and improve code

Second Priority

• Add more thumbnail view types
• CollectionView for adjustible number of windows
• Single cross-platform project
• More efficient use of VisualEffectView

Packages

• Create Swift Package
• Create Podfile (?)

Known Errors

None as of yet.

References

None as of yet.

Requirements

• Requires macOS 10.14 or later.
• Requires iOS 11 or later

Please note that the app is being built with Swift 5.3

MIT License

Copyright © 2021 Justin Bush. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.