Removed toggle for selecting themes and replaced with picker. (#19)

* Removed toggle for selecting themes and replaced with picker.

* Synced stored and inmemory themeset.

* fixed default theme state

* Added desert dark and light theme

* fixed navigation bar background not changing in setttings tab after theme change.

* nemesis theme added

IceCubesApp/App/IceCubesApp.swift

@@ -49,7 +49,7 @@ struct IceCubesApp: App {
         setNewClientsInEnv(client: appAccountsManager.currentClient)
         setBarsColor(color: theme.primaryBackgroundColor)
       }
-      .preferredColorScheme(theme.colorScheme == "dark" ? .dark : .light)
+      .preferredColorScheme(theme.selectedScheme == ColorScheme.dark ? .dark : .light)
       .environmentObject(appAccountsManager)
       .environmentObject(appAccountsManager.currentClient)
       .environmentObject(quickLook)

IceCubesApp/App/Tabs/Settings/SettingsTab.swift

@@ -28,6 +28,7 @@ struct SettingsTabs: View {
       .background(theme.secondaryBackgroundColor)
       .navigationTitle(Text("Settings"))
       .navigationBarTitleDisplayMode(.inline)
+      .toolbarBackground(theme.primaryBackgroundColor, for: .navigationBar)
     }
     .onAppear {
       routeurPath.client = client
@@ -64,15 +65,11 @@ struct SettingsTabs: View {
   
   private var themeSection: some View {
     Section("Theme") {
-      Toggle("Prefer dark color scheme", isOn: .init(get: {
+      Picker("Theme", selection: $theme.selectedSet) {
-        theme.colorScheme == "dark"
+        ForEach(Theme.allColorSet, id: \.name.rawValue) { set in
-      }, set: { newValue in
+          Text(set.name.rawValue).tag(set.name)
-        if newValue {
+        }
-          theme.colorScheme = "dark"
-        } else {
-          theme.colorScheme = "light"
       }
-      }))
       ColorPicker("Tint color", selection: $theme.tintColor)
       ColorPicker("Background color", selection: $theme.primaryBackgroundColor)
       ColorPicker("Secondary Background color", selection: $theme.secondaryBackgroundColor)
@@ -82,11 +79,7 @@ struct SettingsTabs: View {
         }
       }
       Button {
-        theme.colorScheme = "dark"
+        theme.selectedSet = .iceCubeDark
-        theme.tintColor = .brand
-        theme.primaryBackgroundColor = .primaryBackground
-        theme.secondaryBackgroundColor = .secondaryBackground
-        theme.avatarPosition = .top
       } label: {
         Text("Restore default")
       }

Packages/DesignSystem/Sources/DesignSystem/ColorSet.swift

@@ -1,13 +1,29 @@
 import SwiftUI
-
 public protocol ColorSet {
+  var name: ColorSetName { get }
+  var scheme: ColorScheme { get }
   var tintColor: Color { get set }
   var primaryBackgroundColor: Color { get set }
   var secondaryBackgroundColor: Color { get set }
   var labelColor: Color { get set }
 }
 
-public struct DarkSet: ColorSet {
+public enum ColorScheme: String {
+  case dark, light
+}
+
+public enum ColorSetName: String {
+  case iceCubeDark = "Ice Cube - Dark"
+  case iceCubeLight = "Ice Cube - Light"
+  case desertDark = "Desert - Dark"
+  case desertLight = "Desert - Light"
+  case nemesisDark = "Nemesis - Dark"
+  case nemesisLight = "Nemesis - Light"
+}
+
+public struct IceCubeDark: ColorSet {
+  public var name: ColorSetName = .iceCubeDark
+  public var scheme: ColorScheme = .dark
   public var tintColor: Color = Color(red: 187/255, green: 59/255, blue: 226/255)
   public var primaryBackgroundColor: Color =  Color(red: 16/255, green: 21/255, blue: 35/255)
   public var secondaryBackgroundColor: Color = Color(red: 30/255, green: 35/255, blue: 62/255)
@@ -16,7 +32,9 @@ public struct DarkSet: ColorSet {
   public init() {}
 }
 
-public struct LightSet: ColorSet {
+public struct IceCubeLight: ColorSet {
+  public var name: ColorSetName = .iceCubeLight
+  public var scheme: ColorScheme = .light
   public var tintColor: Color = Color(red: 187/255, green: 59/255, blue: 226/255)
   public var primaryBackgroundColor: Color = .white
   public var secondaryBackgroundColor: Color = Color(hex:0xF0F1F2)
@@ -24,3 +42,50 @@ public struct LightSet: ColorSet {
   
   public init() {}
 }
+
+public struct DesertDark: ColorSet {
+  public var name: ColorSetName = .desertDark
+  public var scheme: ColorScheme = .dark
+  public var tintColor: Color = Color(hex: 0xdf915e)
+  public var primaryBackgroundColor: Color = Color(hex: 0x433744)
+  public var secondaryBackgroundColor: Color = Color(hex:0x654868)
+  public var labelColor: Color = .black
+  
+  public init() {}
+}
+
+public struct DesertLight: ColorSet {
+  public var name: ColorSetName = .desertLight
+  public var scheme: ColorScheme = .light
+  public var tintColor: Color = Color(hex: 0xdf915e)
+  public var primaryBackgroundColor: Color = Color(hex: 0xfcf2eb)
+  public var secondaryBackgroundColor: Color = Color(hex:0xeeede7)
+  public var labelColor: Color = .black
+  
+  public init() {}
+}
+
+public struct NemesisDark: ColorSet {
+  public var name: ColorSetName = .nemesisDark
+  public var scheme: ColorScheme = .dark
+  public var tintColor: Color = Color(hex: 0x17a2f2)
+  public var primaryBackgroundColor: Color = Color(hex: 0x000000)
+  public var secondaryBackgroundColor: Color = Color(hex:0x151e2b)
+  public var labelColor: Color = .black
+  
+  public init() {}
+}
+
+public struct NemesisLight: ColorSet {
+  public var name: ColorSetName = .nemesisLight
+  public var scheme: ColorScheme = .light
+  public var tintColor: Color = Color(hex: 0x17a2f2)
+  public var primaryBackgroundColor: Color = Color(hex: 0xffffff)
+  public var secondaryBackgroundColor: Color = Color(hex:0xe8ecef)
+  public var labelColor: Color = .black
+  
+  public init() {}
+}
+
+
+

Packages/DesignSystem/Sources/DesignSystem/Theme.swift

@@ -5,6 +5,7 @@ public class Theme: ObservableObject {
   enum ThemeKey: String {
     case colorScheme, tint, label, primaryBackground, secondaryBackground
     case avatarPosition
+    case selectedSet, selectedScheme
   }
   
   public enum AvatarPosition: String, CaseIterable {
@@ -20,30 +21,27 @@ public class Theme: ObservableObject {
     }
   }
   
-  @AppStorage("is_previously_set") var isSet: Bool = false
+  @AppStorage("is_previously_set") private var isSet: Bool = false
-  @AppStorage(ThemeKey.colorScheme.rawValue) public var colorScheme: String = "dark" {
+  @AppStorage(ThemeKey.selectedScheme.rawValue) public var selectedScheme: ColorScheme = .dark
-    didSet {
-      if colorScheme == "dark" {
-        setColor(set: DarkSet())
-      } else {
-        setColor(set: LightSet())
-      }
-    }
-  }
   @AppStorage(ThemeKey.tint.rawValue) public var tintColor: Color = .black
   @AppStorage(ThemeKey.primaryBackground.rawValue) public var primaryBackgroundColor: Color = .white
   @AppStorage(ThemeKey.secondaryBackground.rawValue) public var secondaryBackgroundColor: Color = .gray
   @AppStorage(ThemeKey.label.rawValue) public var labelColor: Color = .black
   @AppStorage(ThemeKey.avatarPosition.rawValue) var rawAvatarPosition: String = AvatarPosition.top.rawValue
-
+  @AppStorage(ThemeKey.selectedSet.rawValue) var storedSet: ColorSetName = .iceCubeDark
   @Published public var avatarPosition: AvatarPosition = .top
+  @Published public var selectedSet: ColorSetName = .iceCubeDark
   
   private var cancellables = Set<AnyCancellable>()
   
   public init() {
+    selectedSet = storedSet
+    
+    // If theme is never set before set the default store. This should only execute once after install.
+    
     if !isSet {
-      setColor(set: DarkSet())
+      setColor(withName: .iceCubeDark)
-      isSet.toggle()
+      isSet = true
     }
     
     avatarPosition = AvatarPosition(rawValue: rawAvatarPosition) ?? .top
@@ -55,12 +53,34 @@ public class Theme: ObservableObject {
         self?.rawAvatarPosition = position
       }
       .store(in: &cancellables)
+    
+    // Workaround, since @AppStorage can't be directly observed
+    $selectedSet
+      .dropFirst()
+      .sink { [weak self] colorSetName in
+        self?.setColor(withName: colorSetName)
+      }
+      .store(in: &cancellables)
   }
   
-  public func setColor(set: ColorSet) {
+  public static var allColorSet: [ColorSet] {
-    self.tintColor = set.tintColor
+    [
-    self.primaryBackgroundColor = set.primaryBackgroundColor
+      IceCubeDark(),
-    self.secondaryBackgroundColor = set.secondaryBackgroundColor
+      IceCubeLight(),
-    self.labelColor = set.labelColor
+      DesertDark(),
+      DesertLight(),
+      NemesisDark(),
+      NemesisLight()
+    ]
+  }
+  
+  public func setColor(withName name: ColorSetName) {
+    let colorSet = Theme.allColorSet.filter { $0.name == name }.first ?? IceCubeDark()
+    self.selectedScheme = colorSet.scheme
+    self.tintColor = colorSet.tintColor
+    self.primaryBackgroundColor = colorSet.primaryBackgroundColor
+    self.secondaryBackgroundColor = colorSet.secondaryBackgroundColor
+    self.labelColor = colorSet.labelColor
+    self.storedSet = name
   }
 }