Theme support + default theme

IceCubesApp/App/IceCubesApp.swift

@@ -41,18 +41,15 @@ struct IceCubesApp: App {
             }
             .tag(tab)
             .badge(tab == .notifications ? watcher.unreadNotificationsCount : 0)
+            .toolbarBackground(theme.primaryBackgroundColor.opacity(0.50), for: .tabBar)
         }
       }
       .tint(theme.tintColor)
-      .onChange(of: appAccountsManager.currentClient) { newClient in
-        setNewClientsInEnv(client: newClient)
-        if newClient.isAuth {
-          watcher.watch(stream: .user)
-        }
-      }
       .onAppear {
         setNewClientsInEnv(client: appAccountsManager.currentClient)
+        setBarsColor(color: theme.primaryBackgroundColor)
       }
+      .preferredColorScheme(theme.colorScheme == "dark" ? .dark : .light)
       .environmentObject(appAccountsManager)
       .environmentObject(appAccountsManager.currentClient)
       .environmentObject(quickLook)
@@ -65,6 +62,15 @@ struct IceCubesApp: App {
     .onChange(of: scenePhase, perform: { scenePhase in
       handleScenePhase(scenePhase: scenePhase)
     })
+    .onChange(of: appAccountsManager.currentClient) { newClient in
+      setNewClientsInEnv(client: newClient)
+      if newClient.isAuth {
+        watcher.watch(stream: .user)
+      }
+    }
+    .onChange(of: theme.primaryBackgroundColor) { newValue in
+      setBarsColor(color: newValue)
+    }
   }
   
   private func setNewClientsInEnv(client: Client) {
@@ -85,4 +91,9 @@ struct IceCubesApp: App {
       break
     }
   }
+  
+  private func setBarsColor(color: Color) {
+    UINavigationBar.appearance().isTranslucent = true
+    UINavigationBar.appearance().barTintColor = UIColor(color)
+  }
 }

IceCubesApp/App/Tabs/Settings/IconSelectorView.swift

@@ -1,4 +1,5 @@
 import SwiftUI
+import DesignSystem
 
 struct IconSelectorView: View {
   enum Icon: String, CaseIterable, Identifiable {
@@ -39,6 +40,7 @@ struct IconSelectorView: View {
     }
   }
   
+  @EnvironmentObject private var theme: Theme
   @State private var currentIcon = UIApplication.shared.alternateIconName ?? Icon.primary.rawValue
   
   private let columns = [GridItem(.adaptive(minimum: 125, maximum: 1024))]
@@ -76,5 +78,6 @@ struct IconSelectorView: View {
       .padding(6)
       .navigationTitle("Icons")
     }
+    .background(theme.primaryBackgroundColor)
   }
 }

IceCubesApp/App/Tabs/Settings/SettingsTab.swift

@@ -30,6 +30,8 @@ struct SettingsTabs: View {
           await continueSignIn(url: url)
         }
       })
+      .scrollContentBackground(.hidden)
+      .background(theme.secondaryBackgroundColor)
       .navigationTitle(Text("Settings"))
       .navigationBarTitleDisplayMode(.inline)
     }
@@ -63,19 +65,33 @@ struct SettingsTabs: View {
         signInButton
       }
     }
+    .listRowBackground(theme.primaryBackgroundColor)
   }
   
   private var themeSection: some View {
     Section("Theme") {
+      Toggle("Prefer dark color scheme", isOn: .init(get: {
+        theme.colorScheme == "dark"
+      }, set: { newValue in
+        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)
       Button {
+        theme.colorScheme = "dark"
         theme.tintColor = .brand
-        theme.labelColor = .label
+        theme.primaryBackgroundColor = .primaryBackground
+        theme.secondaryBackgroundColor = .secondaryBackground
       } label: {
         Text("Restore default")
       }
-
     }
+    .listRowBackground(theme.primaryBackgroundColor)
   }
   
   @ViewBuilder
@@ -90,12 +106,14 @@ struct SettingsTabs: View {
         LabeledContent("Posts", value: "\(instanceData.stats.statusCount)")
         LabeledContent("Domains", value: "\(instanceData.stats.domainCount)")
       }
+      .listRowBackground(theme.primaryBackgroundColor)
       
       Section("Instance rules") {
         ForEach(instanceData.rules) { rule in
           Text(rule.text)
         }
       }
+      .listRowBackground(theme.primaryBackgroundColor)
     }
   }
   
@@ -117,6 +135,7 @@ struct SettingsTabs: View {
         Text("https://github.com/Dimillian/IceCubesApp")
       }
     }
+    .listRowBackground(theme.primaryBackgroundColor)
   }
   
   private var signInButton: some View {

Packages/Account/Sources/Account/AccountDetailView.swift

@@ -64,6 +64,7 @@ public struct AccountDetailView: View {
             makeTagsListView(tags: tags)
           }
         }
+        .background(theme.primaryBackgroundColor)
       }
     }
     .task {
@@ -196,9 +197,11 @@ public struct AccountDetailView: View {
             }
             .font(.body)
           }
-          .listRowBackground(field.verifiedAt != nil ? Color.green.opacity(0.15) : nil)
+          .listRowBackground(field.verifiedAt != nil ? Color.green.opacity(0.15) : theme.primaryBackgroundColor)
         }
       }
+      .scrollContentBackground(.hidden)
+      .background(theme.secondaryBackgroundColor)
       .navigationTitle("About")
     }
   }

Packages/Account/Sources/Account/AccountsLIst/AccountsListView.swift

@@ -3,8 +3,10 @@ import Network
 import Models
 import Env
 import Shimmer
+import DesignSystem
 
 public struct AccountsListView: View {
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var client: Client
   @StateObject private var viewModel: AccountsListViewModel
   @State private var didAppear: Bool = false
@@ -21,18 +23,21 @@ public struct AccountsListView: View {
           AccountsListRow(viewModel: .init(account: .placeholder(), relationShip: .placeholder()))
             .redacted(reason: .placeholder)
             .shimmering()
+            .listRowBackground(theme.primaryBackgroundColor)
         }
       case let .display(accounts, relationships, nextPageState):
         ForEach(accounts) { account in
           if let relationship = relationships.first(where: { $0.id == account.id }) {
             AccountsListRow(viewModel: .init(account: account,
                                              relationShip: relationship))
+            .listRowBackground(theme.primaryBackgroundColor)
           }
         }
         
         switch nextPageState {
         case .hasNextPage:
           loadingRow
+            .listRowBackground(theme.primaryBackgroundColor)
             .onAppear {
               Task {
                 await viewModel.fetchNextPage()
@@ -41,14 +46,18 @@ public struct AccountsListView: View {
           
         case .loadingNextPage:
           loadingRow
+            .listRowBackground(theme.primaryBackgroundColor)
         case .none:
           EmptyView()
         }
         
       case let .error(error):
         Text(error.localizedDescription)
+          .listRowBackground(theme.primaryBackgroundColor)
       }
     }
+    .scrollContentBackground(.hidden)
+    .background(theme.primaryBackgroundColor)
     .listStyle(.plain)
     .navigationTitle(viewModel.mode.title)
     .navigationBarTitleDisplayMode(.inline)

Packages/DesignSystem/Sources/DesignSystem/Resources/Colors.swift

@@ -2,15 +2,15 @@ import SwiftUI
 
 extension Color {
   public static var brand: Color {
-    Color("brand", bundle: .module)
+    Color(red: 187/255, green: 59/255, blue: 226/255)
   }
   
   public static var primaryBackground: Color {
-    Color("primaryBackground", bundle: .module)
+    Color(red: 16/255, green: 21/255, blue: 35/255)
   }
   
   public static var secondaryBackground: Color {
-    Color("secondaryBackground", bundle: .module)
+    Color(red: 30/255, green: 35/255, blue: 62/255)
   }
   
   public static var label: Color {

Packages/DesignSystem/Sources/DesignSystem/Resources/Colors.xcassets/brand.colorset/Contents.json

@@ -1,20 +0,0 @@
-{
-  "colors" : [
-    {
-      "color" : {
-        "color-space" : "srgb",
-        "components" : {
-          "alpha" : "1.000",
-          "blue" : "1.000",
-          "green" : "0.353",
-          "red" : "0.349"
-        }
-      },
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}

Packages/DesignSystem/Sources/DesignSystem/Resources/Colors.xcassets/primaryBackground.colorset/Contents.json

@@ -1,38 +0,0 @@
-{
-  "colors" : [
-    {
-      "color" : {
-        "color-space" : "srgb",
-        "components" : {
-          "alpha" : "1.000",
-          "blue" : "0x22",
-          "green" : "0x1B",
-          "red" : "0x19"
-        }
-      },
-      "idiom" : "universal"
-    },
-    {
-      "appearances" : [
-        {
-          "appearance" : "luminosity",
-          "value" : "dark"
-        }
-      ],
-      "color" : {
-        "color-space" : "srgb",
-        "components" : {
-          "alpha" : "1.000",
-          "blue" : "0x22",
-          "green" : "0x1B",
-          "red" : "0x19"
-        }
-      },
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}

Packages/DesignSystem/Sources/DesignSystem/Resources/Colors.xcassets/secondaryBackground.colorset/Contents.json

@@ -1,38 +0,0 @@
-{
-  "colors" : [
-    {
-      "color" : {
-        "color-space" : "srgb",
-        "components" : {
-          "alpha" : "1.000",
-          "blue" : "0x37",
-          "green" : "0x2C",
-          "red" : "0x28"
-        }
-      },
-      "idiom" : "universal"
-    },
-    {
-      "appearances" : [
-        {
-          "appearance" : "luminosity",
-          "value" : "dark"
-        }
-      ],
-      "color" : {
-        "color-space" : "srgb",
-        "components" : {
-          "alpha" : "1.000",
-          "blue" : "0x37",
-          "green" : "0x2C",
-          "red" : "0x28"
-        }
-      },
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}

Packages/DesignSystem/Sources/DesignSystem/Theme.swift

@@ -2,9 +2,10 @@ import SwiftUI
 
 public class Theme: ObservableObject {
   enum ThemeKey: String {
-    case tint, label, primaryBackground, secondaryBackground
+    case colorScheme, tint, label, primaryBackground, secondaryBackground
   }
   
+  @AppStorage(ThemeKey.colorScheme.rawValue) public var colorScheme: String = "dark"
   @AppStorage(ThemeKey.tint.rawValue) public var tintColor: Color = .brand
   @AppStorage(ThemeKey.primaryBackground.rawValue) public var primaryBackgroundColor: Color = .primaryBackground
   @AppStorage(ThemeKey.secondaryBackground.rawValue) public var secondaryBackgroundColor: Color = .secondaryBackground

Packages/Explore/Sources/Explore/ExploreView.swift

@@ -44,6 +44,8 @@ public struct ExploreView: View {
       }
     }
     .listStyle(.grouped)
+    .scrollContentBackground(.hidden)
+    .background(theme.secondaryBackgroundColor)
     .navigationTitle("Explore")
     .searchable(text: $viewModel.searchQuery,
                 tokens: $viewModel.tokens,
@@ -60,6 +62,7 @@ public struct ExploreView: View {
         .padding(.vertical, 8)
         .redacted(reason: .placeholder)
         .shimmering()
+        .listRowBackground(theme.primaryBackgroundColor)
     }
   }
   
@@ -70,6 +73,7 @@ public struct ExploreView: View {
         ForEach(results.accounts) { account in
           if let relationship = results.relationships.first(where: { $0.id == account.id }) {
             AccountsListRow(viewModel: .init(account: account, relationShip: relationship))
+              .listRowBackground(theme.primaryBackgroundColor)
           }
         }
       }
@@ -78,6 +82,7 @@ public struct ExploreView: View {
       Section("Tags") {
         ForEach(results.hashtags) { tag in
           TagRowView(tag: tag)
+            .listRowBackground(theme.primaryBackgroundColor)
             .padding(.vertical, 4)
         }
       }
@@ -86,6 +91,7 @@ public struct ExploreView: View {
       Section("Posts") {
         ForEach(results.statuses) { status in
           StatusRowView(viewModel: .init(status: status))
+            .listRowBackground(theme.primaryBackgroundColor)
             .padding(.vertical, 8)
         }
       }
@@ -98,6 +104,7 @@ public struct ExploreView: View {
         .prefix(upTo: viewModel.suggestedAccounts.count > 3 ? 3 : viewModel.suggestedAccounts.count)) { account in
         if let relationship = viewModel.suggestedAccountsRelationShips.first(where: { $0.id == account.id }) {
           AccountsListRow(viewModel: .init(account: account, relationShip: relationship))
+            .listRowBackground(theme.primaryBackgroundColor)
         }
       }
       NavigationLink {
@@ -105,6 +112,7 @@ public struct ExploreView: View {
           ForEach(viewModel.suggestedAccounts) { account in
             if let relationship = viewModel.suggestedAccountsRelationShips.first(where: { $0.id == account.id }) {
               AccountsListRow(viewModel: .init(account: account, relationShip: relationship))
+                .listRowBackground(theme.primaryBackgroundColor)
             }
           }
         }
@@ -115,6 +123,7 @@ public struct ExploreView: View {
         Text("See more")
           .foregroundColor(theme.tintColor)
       }
+      .listRowBackground(theme.primaryBackgroundColor)
     }
   }
   
@@ -123,12 +132,14 @@ public struct ExploreView: View {
       ForEach(viewModel.trendingTags
         .prefix(upTo: viewModel.trendingTags.count > 5 ? 5 : viewModel.trendingTags.count)) { tag in
         TagRowView(tag: tag)
+            .listRowBackground(theme.primaryBackgroundColor)
           .padding(.vertical, 4)
       }
       NavigationLink {
         List {
           ForEach(viewModel.trendingTags) { tag in
             TagRowView(tag: tag)
+              .listRowBackground(theme.primaryBackgroundColor)
               .padding(.vertical, 4)
           }
         }
@@ -139,6 +150,7 @@ public struct ExploreView: View {
         Text("See more")
           .foregroundColor(theme.tintColor)
       }
+      .listRowBackground(theme.primaryBackgroundColor)
     }
   }
   
@@ -147,6 +159,7 @@ public struct ExploreView: View {
       ForEach(viewModel.trendingStatuses
         .prefix(upTo: viewModel.trendingStatuses.count > 3 ? 3 : viewModel.trendingStatuses.count)) { status in
         StatusRowView(viewModel: .init(status: status, isEmbed: false))
+            .listRowBackground(theme.primaryBackgroundColor)
           .padding(.vertical, 8)
       }
       
@@ -154,6 +167,7 @@ public struct ExploreView: View {
         List {
           ForEach(viewModel.trendingStatuses) { status in
             StatusRowView(viewModel: .init(status: status, isEmbed: false))
+              .listRowBackground(theme.primaryBackgroundColor)
               .padding(.vertical, 8)
           }
         }
@@ -164,6 +178,7 @@ public struct ExploreView: View {
         Text("See more")
           .foregroundColor(theme.tintColor)
       }
+      .listRowBackground(theme.primaryBackgroundColor)
     }
   }
   
@@ -172,12 +187,14 @@ public struct ExploreView: View {
       ForEach(viewModel.trendingLinks
         .prefix(upTo: viewModel.trendingLinks.count > 3 ? 3 : viewModel.trendingLinks.count)) { card in
         StatusCardView(card: card)
+            .listRowBackground(theme.primaryBackgroundColor)
           .padding(.vertical, 8)
       }
       NavigationLink {
         List {
           ForEach(viewModel.trendingLinks) { card in
             StatusCardView(card: card)
+              .listRowBackground(theme.primaryBackgroundColor)
               .padding(.vertical, 8)
           }
         }
@@ -188,6 +205,7 @@ public struct ExploreView: View {
         Text("See more")
           .foregroundColor(theme.tintColor)
       }
+      .listRowBackground(theme.primaryBackgroundColor)
     }
   }
   

Packages/Notifications/Sources/Notifications/NotificationRowView.swift

@@ -76,7 +76,7 @@ struct NotificationRowView: View {
     if let status = notification.status {
       StatusRowView(viewModel: .init(status: status, isEmbed: true))
         .padding(8)
-        .background(Color.gray.opacity(0.10))
+        .background(theme.secondaryBackgroundColor)
         .overlay(
           RoundedRectangle(cornerRadius: 4)
             .stroke(.gray.opacity(0.35), lineWidth: 1)

Packages/Notifications/Sources/Notifications/NotificationsListView.swift

@@ -6,6 +6,7 @@ import DesignSystem
 import Env
 
 public struct NotificationsListView: View {
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var watcher: StreamWatcher
   @EnvironmentObject private var client: Client
   @StateObject private var viewModel = NotificationsViewModel()
@@ -34,10 +35,10 @@ public struct NotificationsListView: View {
       .padding(.horizontal, DS.Constants.layoutPadding)
       .padding(.top, DS.Constants.layoutPadding)
     }
+    .background(theme.primaryBackgroundColor)
     .task {
       viewModel.client = client
       await viewModel.fetchNotifications()
-      await viewModel.clear()
     }
     .refreshable {
       await viewModel.fetchNotifications()
@@ -71,6 +72,8 @@ public struct NotificationsListView: View {
       }
       
       switch nextPageState {
+      case .none:
+        EmptyView()
       case .hasNextPage:
         loadingRow
           .onAppear {

Packages/Notifications/Sources/Notifications/NotificationsViewModel.swift

@@ -7,7 +7,7 @@ import Models
 class NotificationsViewModel: ObservableObject {
   public enum State {
     public enum PagingState {
-      case hasNextPage, loadingNextPage
+      case none, hasNextPage, loadingNextPage
     }
     case loading
     case display(notifications: [Models.Notification], nextPageState: State.PagingState)
@@ -38,19 +38,23 @@ class NotificationsViewModel: ObservableObject {
   func fetchNotifications() async {
     guard let client else { return }
     do {
+      var nextPageState: State.PagingState = .hasNextPage
       if notifications.isEmpty {
         state = .loading
         notifications = try await client.get(endpoint: Notifications.notifications(sinceId: nil,
                                                                                    maxId: nil,
                                                                                    types: queryTypes))
+        nextPageState = notifications.count < 15 ? .none : .hasNextPage
       } else if let first = notifications.first {
         let newNotifications: [Models.Notification] =
         try await client.get(endpoint: Notifications.notifications(sinceId: first.id,
                                                                    maxId: nil,
                                                                    types: queryTypes))
+        nextPageState = newNotifications.count < 15 ? .none : .hasNextPage
         notifications.insert(contentsOf: newNotifications, at: 0)
       }
-      state = .display(notifications: notifications, nextPageState: .hasNextPage)
+      state = .display(notifications: notifications,
+                       nextPageState: notifications.isEmpty ? .none : nextPageState)
     } catch {
       state = .error(error: error)
     }
@@ -66,7 +70,7 @@ class NotificationsViewModel: ObservableObject {
                                                                  maxId: lastId,
                                                                  types: queryTypes))
       notifications.append(contentsOf: newNotifications)
-      state = .display(notifications: notifications, nextPageState: .hasNextPage)
+      state = .display(notifications: notifications, nextPageState: newNotifications.count < 15 ? .none : .hasNextPage)
     } catch {
       state = .error(error: error)
     }

Packages/Status/Sources/Status/Detail/StatusDetailVIew.swift

@@ -6,6 +6,7 @@ import Network
 import DesignSystem
 
 public struct StatusDetailView: View {
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var currentAccount: CurrentAccount
   @EnvironmentObject private var watcher: StreamWatcher
   @EnvironmentObject private var client: Client
@@ -57,6 +58,7 @@ public struct StatusDetailView: View {
         .padding(.horizontal, DS.Constants.layoutPadding)
         .padding(.top, DS.Constants.layoutPadding)
       }
+      .background(theme.primaryBackgroundColor)
       .task {
         guard !isLoaded else { return }
         isLoaded = true

Packages/Status/Sources/Status/Editor/StatusEditorView.swift

@@ -9,6 +9,7 @@ import PhotosUI
 import NukeUI
 
 public struct StatusEditorView: View {
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var quicklook: QuickLook
   @EnvironmentObject private var client: Client
   @EnvironmentObject private var currentInstance: CurrentInstance
@@ -52,6 +53,7 @@ public struct StatusEditorView: View {
           dismiss()
         }
       }
+      .background(theme.primaryBackgroundColor)
       .navigationTitle(viewModel.mode.title)
       .navigationBarTitleDisplayMode(.inline)
       .toolbar {
@@ -91,7 +93,7 @@ public struct StatusEditorView: View {
           .padding(.horizontal, DS.Constants.layoutPadding)
       }
       .frame(height: 35)
-      .background(Color.brand.opacity(0.20))
+      .background(theme.tintColor.opacity(0.20))
       .offset(y: -8)
     }
   }

Packages/Status/Sources/Status/Embed/StatusEmbededView.swift

@@ -4,6 +4,8 @@ import DesignSystem
 
 @MainActor
 public struct StatusEmbededView: View {
+  @EnvironmentObject private var theme: Theme
+  
   public let status: Status
   
   public init(status: Status) {
@@ -19,7 +21,7 @@ public struct StatusEmbededView: View {
       Spacer()
     }
     .padding(8)
-    .background(Color.gray.opacity(0.10))
+    .background(theme.secondaryBackgroundColor)
     .cornerRadius(4)
     .overlay(
       RoundedRectangle(cornerRadius: 4)

Packages/Status/Sources/Status/Poll/StatusPollView.swift

@@ -9,6 +9,7 @@ public struct StatusPollView: View {
     static let barHeight: CGFloat = 30
   }
   
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var client: Client
   @EnvironmentObject private var currentInstance: CurrentInstance
   @StateObject private var viewModel: StatusPollViewModel
@@ -40,7 +41,7 @@ public struct StatusPollView: View {
       ForEach(viewModel.poll.options) { option in
         HStack {
           makeBarView(for: option)
-          if !viewModel.votes.isEmpty {
+          if !viewModel.votes.isEmpty || viewModel.poll.expired {
             Spacer()
             Text("\(percentForOption(option: option)) %")
               .font(.subheadline)
@@ -97,14 +98,14 @@ public struct StatusPollView: View {
                 HStack {
                   let width = widthForOption(option: option, proxy: proxy)
                   Rectangle()
-                    .foregroundColor(Color.brand)
+                    .foregroundColor(theme.tintColor)
                     .frame(height: Constants.barHeight)
                     .frame(width: width)
                   Spacer()
                 }
               }
             }
-            .foregroundColor(Color.brand.opacity(0.40))
+            .foregroundColor(theme.tintColor.opacity(0.40))
             .frame(height: Constants.barHeight)
             .clipShape(RoundedRectangle(cornerRadius: 8))
           

Packages/Status/Sources/Status/Row/StatusActionsView.swift

@@ -6,6 +6,7 @@ import DesignSystem
 
 struct StatusActionsView: View {
   @Environment(\.openURL) private var openURL
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var routeurPath: RouterPath
   @ObservedObject var viewModel: StatusRowViewModel
   
@@ -41,14 +42,14 @@ struct StatusActionsView: View {
       }
     }
     
-    func tintColor(viewModel: StatusRowViewModel) -> Color? {
+    func tintColor(viewModel: StatusRowViewModel, theme: Theme) -> Color? {
       switch self {
       case .respond, .share:
         return nil
       case .favourite:
         return viewModel.isFavourited ? .yellow : nil
       case .boost:
-        return viewModel.isReblogged ? .brand : nil
+        return viewModel.isReblogged ? theme.tintColor : nil
       }
     }
   }
@@ -69,7 +70,7 @@ struct StatusActionsView: View {
             } label: {
               HStack(spacing: 2) {
                 Image(systemName: action.iconName(viewModel: viewModel))
-                  .foregroundColor(action.tintColor(viewModel: viewModel))
+                  .foregroundColor(action.tintColor(viewModel: viewModel, theme: theme))
                 if let count = action.count(viewModel: viewModel) {
                   Text("\(count)")
                     .font(.footnote)

Packages/Status/Sources/Status/Row/StatusCardView.swift

@@ -2,8 +2,10 @@ import SwiftUI
 import Models
 import Shimmer
 import NukeUI
+import DesignSystem
 
 public struct StatusCardView: View {
+  @EnvironmentObject private var theme: Theme
   @Environment(\.openURL) private var openURL
   let card: Card
   
@@ -49,7 +51,7 @@ public struct StatusCardView: View {
           Spacer()
         }.padding(8)
       }
-      .background(Color.gray.opacity(0.15))
+      .background(theme.secondaryBackgroundColor)
       .cornerRadius(16)
       .overlay(
         RoundedRectangle(cornerRadius: 16)

Packages/Timeline/Sources/Timeline/TimelineView.swift

@@ -12,6 +12,7 @@ public struct TimelineView: View {
   }
   
   @Environment(\.scenePhase) private var scenePhase
+  @EnvironmentObject private var theme: Theme
   @EnvironmentObject private var account: CurrentAccount
   @EnvironmentObject private var watcher: StreamWatcher
   @EnvironmentObject private var client: Client
@@ -36,6 +37,7 @@ public struct TimelineView: View {
           }
           .padding(.top, DS.Constants.layoutPadding)
         }
+        .background(theme.primaryBackgroundColor)
         if viewModel.pendingStatusesEnabled {
           makePendingNewPostsView(proxy: proxy)
         }
@@ -116,7 +118,7 @@ public struct TimelineView: View {
       }
       .padding(.horizontal, DS.Constants.layoutPadding)
       .padding(.vertical, 8)
-      .background(.gray.opacity(0.15))
+      .background(theme.secondaryBackgroundColor)
     }
   }
 }