refactor(theme-service,settings-service): Theme names and functionality

packages/frontend/src/app/components/color-scheme-switcher/color-scheme-switcher.component.html

···
   title="Change color scheme"
   aria-label="Change color scheme"
   [ngClass]="iconClass"
-  matTooltip="{{ colorThemeData[theme()] }} mode"
+  matTooltip="{{ lightDarkModeData[theme()] }} mode"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
···
   </svg>
 </button>
 <mat-menu #themeMenu="matMenu">
-  @for (entry of colorThemeData | keyvalue: null; track entry.key) {
+  @for (entry of lightDarkModeData | keyvalue: null; track entry.key) {
     <button
       class="theme-selector-button"
       [class.selected]="theme() === entry.key"
···
   class="theme-toggle"
   title="Toggle theme"
   aria-label="Toggle theme"
-  matTooltip="{{ colorSchemeData[colorScheme()].name }} theme"
+  matTooltip="{{ themeData[colorScheme()].name }} theme"
 >
   <fa-icon [icon]="paletteIcon"></fa-icon>
 </button>
···
         (click)="setColorScheme(variant)"
         [class.selected]="colorScheme() === variant"
       >
-        {{ $any(colorSchemeData)[variant].name }}
+        {{ $any(themeData)[variant].name }}
       </button>
     }
   </ng-template>

packages/frontend/src/app/components/color-scheme-switcher/color-scheme-switcher.component.ts

···
 import {
   AdditionalStyleMode,
   additionalStyleModesData,
-  ColorScheme,
-  colorSchemeData,
-  colorSchemeGroupList,
-  ColorSchemeGroupList,
-  ColorTheme,
-  colorThemeData,
+  Theme,
+  themeData,
+  themeGroupList,
+  ThemeGroupList,
+  LightDarkMode,
+  lightDarkModeData,
   ThemeService
 } from 'src/app/services/theme.service'
 
···
   styleUrl: './color-scheme-switcher.component.scss'
 })
 export class ColorSchemeSwitcherComponent {
-  colorScheme: Signal<ColorScheme>
-  theme: Signal<ColorTheme>
+  colorScheme: Signal<Theme>
+  theme: Signal<LightDarkMode>
   additionalStyleModes: { [key in AdditionalStyleMode]: WritableSignal<boolean> }
 
   // Data copies
-  colorSchemeData = colorSchemeData
-  colorThemeData = colorThemeData
+  themeData = themeData
+  lightDarkModeData = lightDarkModeData
   additionalStyleModesData = additionalStyleModesData
 
   // Function copies
···
   toggleAdditionalStyleMode: Function
 
   // Theme categories
-  colorSchemeGroupList: ColorSchemeGroupList
+  colorSchemeGroupList: ThemeGroupList
 
   // Icons
   paletteIcon = faPalette
···
   iconClass = ''
 
   constructor(themeService: ThemeService) {
-    this.colorScheme = themeService.colorScheme
-    this.theme = themeService.theme
+    this.colorScheme = themeService.theme
+    this.theme = themeService.lightDarkMode
     this.additionalStyleModes = themeService.additionalStyleModes
 
-    this.setColorScheme = themeService.setColorScheme.bind(themeService)
-    this.setTheme = themeService.setTheme.bind(themeService)
+    this.setColorScheme = themeService.setTheme.bind(themeService)
+    this.setTheme = themeService.setLightDarkMode.bind(themeService)
     this.toggleAdditionalStyleMode = themeService.toggleAdditionalStyleMode.bind(themeService)
 
-    this.colorSchemeGroupList = colorSchemeGroupList
+    this.colorSchemeGroupList = themeGroupList
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.updateIconTheme.bind(this))
   }

packages/frontend/src/app/components/setting-theme-switcher/setting-theme-switcher.component.html

···
 <mat-form-field class="block w-full mat-form-field-no-padding" floatLabel="always">
   <mat-label>{{ 'settings.theme' | translate }}</mat-label>
-  <mat-select [value]="colorScheme()" (selectionChange)="setColorScheme($event)">
+  <mat-select [value]="colorScheme()" (selectionChange)="setTheme($event)">
     @for (group of colorSchemeGroupList | KeyValue; track $index) {
       <mat-optgroup [label]="group.value.name" class="theme-group">
         @for (entry of group.value.entries; track $index) {
···
 <p class="setting-description">{{ 'settings.themeDescription' | translate }}</p>
 <mat-form-field class="block w-full mat-form-field-no-padding" floatLabel="always">
   <mat-label>{{ 'settings.lightDarkMode' | translate }}</mat-label>
-  <mat-select [value]="colorTheme()" (selectionChange)="setColorTheme($event)">
+  <mat-select [value]="lightDarkMode()" (selectionChange)="setLightDarkMode($event)">
     @for (entry of colorThemeData | KeyValue; track $index) {
       <mat-option [value]="entry.key">{{ entry.value }}</mat-option>
     }

packages/frontend/src/app/components/setting-theme-switcher/setting-theme-switcher.component.ts

···
 import {
   AdditionalStyleMode,
   additionalStyleModesData,
-  ColorScheme,
-  colorSchemeData,
-  colorSchemeGroupList,
-  ColorTheme,
-  colorThemeData,
+  Theme,
+  themeData,
+  themeGroupList,
+  LightDarkMode,
+  lightDarkModeData,
   ThemeService
 } from 'src/app/services/theme.service'
 
···
 })
 export class SettingThemeSwitcherComponent {
   // light/dark
-  colorTheme: WritableSignal<ColorTheme>
-  colorThemeData = colorThemeData
+  lightDarkMode: WritableSignal<LightDarkMode>
+  colorThemeData = lightDarkModeData
 
   // colors
-  colorScheme: WritableSignal<ColorScheme>
-  colorSchemeData = colorSchemeData
-  colorSchemeGroupList = colorSchemeGroupList
+  colorScheme: WritableSignal<Theme>
+  colorSchemeData = themeData
+  colorSchemeGroupList = themeGroupList
 
   // style modes
   additionalStyleModes
   additionalStyleModesSelect
   additionalStyleModesData = additionalStyleModesData
-  setAdditionalStyleMode
 
   constructor(private themeService: ThemeService) {
-    this.colorTheme = themeService.theme
+    this.lightDarkMode = themeService.lightDarkMode
 
-    this.colorScheme = themeService.colorScheme
+    this.colorScheme = themeService.theme
 
     this.additionalStyleModes = themeService.additionalStyleModes
     this.additionalStyleModesSelect = Object.entries(this.additionalStyleModes)
       .filter(([_, enabled]) => enabled())
       .map(([val, _]) => val) as AdditionalStyleMode[]
-    this.setAdditionalStyleMode = themeService.setAdditionalStyleMode
   }
 
-  setColorTheme(event: MatSelectChange) {
-    this.themeService.setTheme(event.value)
+  setLightDarkMode(event: MatSelectChange) {
+    this.themeService.setLightDarkMode(event.value)
   }
-  setColorScheme(event: MatSelectChange) {
-    this.themeService.setColorScheme(event.value)
+  setTheme(event: MatSelectChange) {
+    console.log('setting theme to', event.value)
+    this.themeService.setTheme(event.value)
   }
   setAdditionalStyleModes(event: MatSelectChange) {
     this.additionalStyleModesSelect = event.value as AdditionalStyleMode[]
···
     const allModes = Object.keys(this.additionalStyleModesData) as AdditionalStyleMode[]
     const enabledModes = this.additionalStyleModesSelect
     const disabledModes = allModes.filter((mode) => !this.additionalStyleModesSelect.includes(mode))
-    enabledModes.forEach((mode) => this.setAdditionalStyleMode(mode, true))
-    disabledModes.forEach((mode) => this.setAdditionalStyleMode(mode, false))
+    enabledModes.forEach((mode) => this.additionalStyleModes[mode].set(true))
+    disabledModes.forEach((mode) => this.additionalStyleModes[mode].set(false))
+    this.themeService.syncAdditionalStyleMode()
   }
 }

packages/frontend/src/app/pages/profile/edit-profile/edit-profile.component.ts

···
 import {
   AdditionalStyleMode,
   additionalStyleModesData,
-  ColorScheme,
-  colorSchemeData,
-  ColorSchemeGroupList,
-  colorSchemeGroupList,
-  ColorTheme,
-  colorThemeData,
+  Theme,
+  themeData,
+  ThemeGroupList,
+  themeGroupList,
+  LightDarkMode,
+  lightDarkModeData,
   ThemeService
 } from 'src/app/services/theme.service'
 import { faPlus, faXmark } from '@fortawesome/free-solid-svg-icons'
···
   survivedTimeout: ReturnType<typeof setTimeout> | undefined
   lockout = false
 
-  colorScheme: Signal<ColorScheme>
+  colorScheme: Signal<Theme>
   colorSchemeSelect = ''
-  theme: Signal<ColorTheme>
+  theme: Signal<LightDarkMode>
   themeSelect = ''
   additionalStyleModes: { [key in AdditionalStyleMode]: WritableSignal<boolean> }
   additionalStyleModesSelect: AdditionalStyleMode[]
···
   appLanguage: string
 
   // Data copies
-  colorSchemeData = colorSchemeData
-  colorThemeData = colorThemeData
+  colorSchemeData = themeData
+  colorThemeData = lightDarkModeData
   additionalStyleModesData = additionalStyleModesData
 
   // Function copies
···
   setAdditionalStyleMode: Function
 
   // Theme categories
-  colorSchemeGroupList: ColorSchemeGroupList
+  colorSchemeGroupList: ThemeGroupList
 
   constructor(
     private jwtService: JwtService,
···
     private themeService: ThemeService,
     private translationService: TranslateService
   ) {
-    this.colorScheme = themeService.colorScheme
+    this.colorScheme = themeService.theme
     this.colorSchemeSelect = this.colorScheme()
-    this.theme = themeService.theme
+    this.theme = themeService.lightDarkMode
     this.themeSelect = this.theme()
     this.additionalStyleModes = themeService.additionalStyleModes
     this.additionalStyleModesSelect = Object.entries(this.additionalStyleModes)
       .filter(([_, enabled]) => enabled())
       .map(([val, _]) => val) as AdditionalStyleMode[]
 
-    this.setColorScheme = themeService.setColorScheme
-    this.setTheme = themeService.setTheme
+    this.setColorScheme = themeService.setTheme
+    this.setTheme = themeService.setLightDarkMode
     this.setAdditionalStyleMode = themeService.setAdditionalStyleMode
 
-    this.colorSchemeGroupList = colorSchemeGroupList
+    this.colorSchemeGroupList = themeGroupList
 
     this.themeService.setCustomCSS('')
 
···
       const alsoKnownAs = publicOptions.find((elem) => elem.optionName == 'fediverse.public.alsoKnownAs')
       try {
         this.editProfileForm.controls['alsoKnownAs'].patchValue(JSON.parse(alsoKnownAs?.optionValue || ''))
-      } catch (_) { }
+      } catch (_) {}
       const askLevel = publicOptions.find((elem) => elem.optionName == 'wafrn.public.asks')
       this.editProfileForm.controls['asksLevel'].patchValue(askLevel ? parseInt(askLevel.optionValue) : 2)
       this.editProfileForm.controls['forceClassicAudioPlayer'].patchValue(
···
       if (fediAttachments) {
         try {
           this.fediAttachments = JSON.parse(fediAttachments.optionValue)
-        } catch (error) { }
+        } catch (error) {}
       }
       const localStorageNotificationsFrom = localStorage.getItem('notificationsFrom')
       if (localStorageNotificationsFrom) {

packages/frontend/src/app/services/settings.service.ts

···
 import { UtilsService } from './utils.service'
 import { HttpClient } from '@angular/common/http'
 import { EnvironmentService } from './environment.service'
-import { catchError, debounceTime, fromEvent, lastValueFrom, of, timeout } from 'rxjs'
+import { catchError, debounceTime, filter, fromEvent, lastValueFrom, of, Subject, timeout } from 'rxjs'
 import { PostsService } from './posts.service'
 import { MessageService } from './message.service'
 import { LoginService } from './login.service'
···
 import { SettingDropListComponent } from '../components/setting-drop-list/setting-drop-list.component'
 import { SETTINGS_TOKEN } from '../pages/settings/settings.component'
 import { replyBarItems } from '../components/post-action-buttons/post-action-buttons.component'
+import { toObservable } from '@angular/core/rxjs-interop'
 
 // All setting keys for use throughout the app
 const settingKeyVariants = [
···
   'hideProfileNotLoggedIn',
   'disableEmailNotifications',
   // everything else - stored in the options table
+  'theme', // This and v
+  'lightDarkMode', // this option are weirdly named in localStorage because legacy reasons
+  'additionalStyleModes',
   'rssOptions',
   'alsoKnownAs',
   'forceClassicLogo',
···
 type SettingKeyTuple = typeof settingKeyVariants
 export type SettingKey = SettingKeyTuple[number]
 
-export type SettingFormTypes = 'checkbox' | 'select' | 'input' | 'textarea' | 'user' | 'list'
+// 'user' and 'raw' are modified by specific components
+export type SettingFormTypes = 'checkbox' | 'select' | 'input' | 'textarea' | 'user' | 'list' | 'raw'
 
 export type SettingListItem = {
   value: string
···
 
 // Setting type cannot be numbers because of a bug with mat-select
 // Simply write your numbers as strings (agony)
-export type SettingValueType = string | boolean | SettingListItem[]
+export type SettingValueType = string | boolean | SettingListItem[] | string[]
 export interface SettingDataEntry {
   key: SettingKey // Copy of key for components to use
   translationKey: string
···
       type: 'user',
       default: ''
     },
+    theme: {
+      key: 'theme',
+      translationKey: 'settings.theme',
+      serverKey: 'wafrn.colorScheme', // Legacy
+      localStorageKey: 'colorScheme', // Legacy
+      type: 'raw', // Not actually used
+      default: 'default',
+      convertFromStorage: this.convertRawStringFrom
+    },
+    lightDarkMode: {
+      key: 'lightDarkMode',
+      translationKey: 'settings.lightDarkMode',
+      serverKey: 'wafrn.theme', // Legacy
+      localStorageKey: 'theme', // Legacy
+      type: 'raw', // Not actually used
+      default: 'auto',
+      convertFromStorage: this.convertRawStringFrom
+    },
+    additionalStyleModes: {
+      key: 'additionalStyleModes',
+      translationKey: 'settings.additionalStyleModes',
+      serverKey: 'wafrn.additionalStyleModes',
+      localStorageKey: 'additionalStyleModes',
+      type: 'list',
+      default: [],
+      convertFromStorage: this.convertListFrom,
+      convertToStorage: this.convertListTo
+    },
     forceClassicLogo: {
       key: 'forceClassicLogo',
       translationKey: 'settings.forceClassicLogo',
···
       serverKey: 'wafrn.postReplyBarOrder',
       localStorageKey: 'postReplyBarOrder',
       type: 'list',
-      default: this.convertToListDefault([...replyBarItems]),
+      default: this.convertToOrderListDefault([...replyBarItems]),
       dropListData: {
         quote: { icon: faQuoteLeft, translationKey: 'settings.postReplyBarOrderOptions.quote' },
         rewoot: { icon: faRepeat, translationKey: 'settings.postReplyBarOrderOptions.rewoot' },
···
       serverKey: 'wafrn.postActionsButtonBarOrder',
       localStorageKey: 'postActionsButtonBarOrder',
       type: 'list',
-      default: this.convertToListDefault([...replyBarItems]),
+      default: this.convertToOrderListDefault([...replyBarItems]),
       dropListData: {
         // Duplicate from above
         quote: { icon: faQuoteLeft, translationKey: 'settings.postReplyBarOrderOptions.quote' },
···
 
   public settingsModified = signal(false)
   public settingsLoading = signal(false)
+  public settingsLoadedFromLogin = new Subject<void>()
 
   constructor(
     private dashboardService: DashboardService,
···
         }
       })
     }
+
+    // Update settings when logging in (and notify everyone)
+    toObservable(loginService.loggedIn)
+      .pipe(filter((logged) => logged))
+      .subscribe(() => {
+        this.values = this.getLocalStorageValues()
+        this.settingsLoadedFromLogin.next()
+      })
 
     // Update settings on other tabs change
     fromEvent(window, 'storage')
···
 
   async updateProfile(): Promise<boolean> {
     // Map the non-required options into a specific key of the payload
-    const options: { name: string; value: string }[] = Object.entries(this.data)
-      .filter(([_key, entry]) => entry.profileOption !== true && entry.serverKey !== undefined)
-      .map(([_key, entry]) => {
-        const rawValue = this.values[entry.key] ?? ''
-        let convertedValue: string = ''
-        if (entry.convertToStorage) {
-          convertedValue = entry.convertToStorage(rawValue)
-        } else {
-          convertedValue = this.values[entry.key]!.toString()
-        }
-
-        return { name: entry.serverKey!, value: convertedValue }
-      })
+    const options: { name: string; value: string }[] = this.getSettingsAsOptions()
 
     // Add Fediverse attachments
     // Ignore attachment if it doesn't have both fields
···
     }
   }
 
+  private getSettingsAsOptions(): { name: string; value: string }[] {
+    return Object.entries(this.data)
+      .filter(([_key, entry]) => entry.profileOption !== true && entry.serverKey !== undefined)
+      .map(([_key, entry]) => ({ name: entry.serverKey!, value: this.getSettingValueAsString(entry.key) }))
+  }
+
+  private getSettingValueAsString(key: SettingKey): string {
+    const value = this.values[key]
+    if (value === undefined) return ''
+    if (this.data[key].convertToStorage) {
+      return this.data[key].convertToStorage(value)
+    } else {
+      return value.toString()
+    }
+  }
+
   async updateMultipleAccountData() {
     // Update multiple account saved data
     const currentBlog = this.loginService.currentAccount()
···
     }
   }
 
+  /**
+   * @description Force updates a value, optionally writing it to localStorage and then to the server.
+   *
+   * Default is to update localStorage
+   *
+   * Used for when you need immediate setting propagation and saving like themes.
+   *
+   * @returns whether the server was able to save your value
+   */
+  async forceUpdateValue(keyOrKeys: SettingKey | SettingKey[], updateLocalStorage: boolean = true): Promise<boolean> {
+    let keyList: SettingKey[]
+    if (Array.isArray(keyOrKeys)) {
+      keyList = keyOrKeys
+    } else {
+      keyList = [keyOrKeys]
+    }
+
+    // Optionally write to localStorage
+    if (updateLocalStorage) {
+      keyList.forEach((key) => {
+        const localStorageKey = this.data[key].localStorageKey
+        const newValue = this.values[key]
+        if (localStorageKey && newValue !== undefined) {
+          localStorage.setItem(localStorageKey, this.getSettingValueAsString(key))
+        }
+      })
+    }
+
+    // Write options to the server
+    if (this.loginService.loggedIn()) {
+      const options: { name: string; value: string }[] = this.getSettingsAsOptions()
+      const res = await lastValueFrom(
+        this.http.post<{ success: boolean }>(`${EnvironmentService.environment.baseUrl}/editOptions`, { options }).pipe(
+          timeout(60000), // if it doesn't return in a full minute you've got problems
+          catchError((_err) => of({ success: false }))
+        )
+      )
+      if (res.success) {
+        return true
+      } else {
+        return false
+      }
+    }
+    return false
+  }
+
   makeInject(data: any) {
     return Injector.create({ providers: [{ provide: SETTINGS_TOKEN, useValue: data }] })
   }
 
   // Drop list conversion for default orderings
-  convertToListDefault(list: string[]): SettingListItem[] {
+  // ONLY for type SettingListItem type
+  convertToOrderListDefault(list: string[]): SettingListItem[] {
     return list.map((item) => ({
       value: item,
       enabled: true
···
     return `"${list}"`
   }
 
+  // Evil
+  convertRawStringFrom(value: string): string {
+    return value
+  }
+
   convertCommaListFrom(list: string): string {
     try {
       return JSON.parse(list).replaceAll(',', '\n')
···
     return `"${list.replaceAll('\n', ',')}"`
   }
 
+  // Generic for array-like types
   convertListFrom(list: string): SettingValueType {
     try {
       return JSON.parse(list)

packages/frontend/src/app/services/theme.service.ts

···
-import { effect, Injectable, signal, WritableSignal } from '@angular/core'
+import { Injectable, signal, WritableSignal } from '@angular/core'
 import { LoginService } from './login.service'
 import { HttpClient } from '@angular/common/http'
-import { debounceTime, filter, firstValueFrom, fromEvent, merge } from 'rxjs'
+import { debounceTime, filter, firstValueFrom, fromEvent, merge, tap } from 'rxjs'
 import { EnvironmentService } from './environment.service'
 import { toObservable } from '@angular/core/rxjs-interop'
+import { SettingListItem, SettingsService } from './settings.service'
 
 // !! NOTE FOR ADDING THEMES !! //
 //
 // If you want to add a theme, you must:
-// - Add it to `colorSchemeVariants`
-// - Fill out its `colorSchemeData` (name data and if the theme forces light/dark) entry
+// - Add it to `themeVariants`
+// - Fill out its `themeData` (name data and if the theme forces light/dark) entry
 //   - Compatibility allows you to force dark/light if you need.
 //   - Auto Reset makes the theme be reset to default on reload
 // - Add the theme as a CSS file in `/assets/themes/name.css`
 // - Add a link file to it in theme-manager.component.html
-// - Add your theme to a group in `colorSchemeGroupList`
+// - Add your theme to a group in `themeGroupList`
 
 // !! NOTE FOR ADDING MODES !! //
 //
 // If you want to add a style mode, you must:
 // - Add it to `additionalStyleModeVariants`
 // - Fill out its `additionalStyleModesData`
-//
-// Note: This uses the raw names of the mode setting.
-// DO NOT OVERRIDE OTHER LOCAL STORAGE ENTRIES! There is no check :3
+// - Add a link file to it in theme-manager.component.html
 
-const colorSchemeVariants = [
+const themeVariants = [
   'default',
   'tan',
   'green',
···
   'catppuccin_macchiato',
   'catppuccin_mocha'
 ] as const
-type ColorSchemeTuple = typeof colorSchemeVariants
-export type ColorScheme = ColorSchemeTuple[number]
+type ThemeTuple = typeof themeVariants
+export type Theme = ThemeTuple[number]
 
-type ColorSchemeData = {
-  [key in ColorScheme]: {
+type ThemeData = {
+  [key in Theme]: {
     name: string
     compatibility: 'light' | 'dark' | 'both'
     autoReset?: boolean
   }
 }
 
-export const colorSchemeData: ColorSchemeData = {
+export const themeData: ThemeData = {
   default: { name: 'Default', compatibility: 'both' },
   tan: { name: 'Tan', compatibility: 'both' },
   green: { name: 'Green', compatibility: 'both' },
···
   catppuccin_mocha: { name: 'Catppuccin Mocha', compatibility: 'both' }
 }
 
-const colorSchemeGroupVariants = [
-  'defaultThemes',
-  'computeryThemes',
-  'experimentalThemes',
-  'programmersThemes'
-] as const
-type ColorSchemeGroupTuple = typeof colorSchemeGroupVariants
-export type ColorSchemeGroup = ColorSchemeGroupTuple[number]
-export type ColorSchemeGroupList = {
-  [key in ColorSchemeGroup]: {
+const themeGroupVariants = ['defaultThemes', 'computeryThemes', 'experimentalThemes', 'programmersThemes'] as const
+type ThemeGroupTuple = typeof themeGroupVariants
+export type ThemeGroup = ThemeGroupTuple[number]
+export type ThemeGroupList = {
+  [key in ThemeGroup]: {
     name: string
-    entries: ColorScheme[]
+    entries: Theme[]
   }
 }
 
-export const colorSchemeGroupList: ColorSchemeGroupList = {
+export const themeGroupList: ThemeGroupList = {
   defaultThemes: {
     name: 'Default theme variants',
     entries: ['default', 'tan', 'green', 'gold', 'red', 'pink', 'purple', 'blue']
···
   }
 }
 
-const colorThemeVariants = ['light', 'dark', 'auto'] as const
-type ColorThemeTuple = typeof colorThemeVariants
-export type ColorTheme = ColorThemeTuple[number]
+const lightDarkModeVariants = ['light', 'dark', 'auto'] as const
+type lightDarkModeTuple = typeof lightDarkModeVariants
+export type LightDarkMode = lightDarkModeTuple[number]
 
-export type ColorThemeData = { [key in ColorTheme]: string }
-export const colorThemeData: ColorThemeData = {
+export type LightDarkModeData = { [key in LightDarkMode]: string }
+export const lightDarkModeData: LightDarkModeData = {
   light: 'Light',
   dark: 'Dark',
   auto: 'Auto'
 }
 
 // Verifying that a theme/scheme is real
-function isColorTheme(value: string): value is ColorTheme {
-  return colorThemeVariants.includes(value as ColorTheme)
+function isLightDarkMode(value: string | undefined): value is LightDarkMode {
+  return value !== undefined && lightDarkModeVariants.includes(value as LightDarkMode)
+}
+
+function isTheme(value: string | undefined): value is Theme {
+  return value !== undefined && themeVariants.includes(value as Theme)
 }
 
-function isColorScheme(value: string): value is ColorScheme {
-  return colorSchemeVariants.includes(value as ColorScheme)
+// Covers SettingListItem[] because type jank
+function isAdditionalStyleMode(value: string[] | SettingListItem[]): value is AdditionalStyleMode[] {
+  return !value.some((mode) => !additionalStyleModeVariants.includes(mode as AdditionalStyleMode))
 }
 
 // More styles!
···
   providedIn: 'root'
 })
 export class ThemeService {
-  public colorScheme = signal<ColorScheme>('default')
-  public theme = signal<ColorTheme>('auto')
+  public theme = signal<Theme>('default')
+  public lightDarkMode = signal<LightDarkMode>('auto')
   public additionalStyleModes: { [key in AdditionalStyleMode]: WritableSignal<boolean> } = {
     centerLayout: signal(false),
     topToolbar: signal(false),
···
 
   constructor(
     private loginService: LoginService,
-    private http: HttpClient
+    private http: HttpClient,
+    private settingService: SettingsService
   ) {
-    // Setup when logging in or out and run once (yay signals)
+    // Setup when logging out, completing setting sync, and also run once (yay signals)
     // Also watches change from other tabs
     merge(
-      toObservable(loginService.loggedIn),
+      toObservable(loginService.loggedIn).pipe(filter((logged) => !logged)),
+      this.settingService.settingsLoadedFromLogin.asObservable(),
       fromEvent(window, 'storage').pipe(
         filter((event) => ['theme', 'colorScheme'].includes((<StorageEvent>event).key ?? '')),
-        debounceTime(500)
+        debounceTime(200)
       )
     ).subscribe(() => this.setup())
   }
 
   setup() {
-    const savedScheme = localStorage?.getItem('colorScheme') ?? 'default'
-    if (isColorScheme(savedScheme)) this.setColorScheme(savedScheme)
+    const theme = this.settingService.values.theme
+    if (typeof theme === 'string' && isTheme(theme)) {
+      this.setTheme(theme)
+    }
 
-    const savedTheme = localStorage?.getItem('theme') ?? 'auto'
-    if (isColorTheme(savedTheme)) this.setTheme(savedTheme)
+    const darkLightMode = this.settingService.values.lightDarkMode
+    if (typeof darkLightMode === 'string' && isLightDarkMode(darkLightMode)) {
+      this.setLightDarkMode(darkLightMode)
+    }
 
-    Object.entries(this.additionalStyleModes).forEach(([mode, value]) => {
-      const savedMode = localStorage?.getItem(mode) ?? 'false'
-      value.set(savedMode === 'true')
-    })
+    const settingAdditionalStyleModes = this.settingService.values.additionalStyleModes
+    if (Array.isArray(settingAdditionalStyleModes) && isAdditionalStyleMode(settingAdditionalStyleModes)) {
+      additionalStyleModeVariants.forEach((mode) => {
+        const enabled = settingAdditionalStyleModes.includes(mode)
+        this.additionalStyleModes[mode].set(enabled)
+      })
+    }
 
     // Fan theme fallback for old browsers
     const chromeVersionForCompatibilityReasons = this.getChromeVersion()
     if (chromeVersionForCompatibilityReasons && chromeVersionForCompatibilityReasons < 122) {
       // we force the fan theme on old browsers
-      this.setColorScheme('fan', true)
+      this.setTheme('fan', true)
     }
   }
 
-  public setColorScheme = async (scheme: ColorScheme, doNotSavePreference = false) => {
-    this.colorScheme.set(scheme)
-    localStorage?.setItem('colorScheme', scheme)
+  public setTheme = async (theme: Theme, doNotSavePreference = false) => {
+    this.theme.set(theme)
+    this.settingService.values.theme = theme
 
-    // Forced theme
-    if (colorSchemeData[scheme]?.compatibility === 'light') await this.setTheme('light')
-    if (colorSchemeData[scheme]?.compatibility === 'dark') await this.setTheme('dark')
+    // Forced lightDarkMode
+    if (themeData[theme]?.compatibility === 'light') await this.setLightDarkMode('light')
+    if (themeData[theme]?.compatibility === 'dark') await this.setLightDarkMode('dark')
 
-    // User settings
-    if (doNotSavePreference) return
-    return await this.loginService.updateUserOptions([{ name: 'wafrn.colorScheme', value: scheme }])
+    this.settingService.forceUpdateValue('theme', !doNotSavePreference)
   }
 
-  public setTheme = async (theme: ColorTheme, doNotSavePreference = false) => {
-    this.theme.set(theme)
-    document.documentElement.setAttribute('data-theme', theme)
-    localStorage?.setItem('theme', theme)
+  public setLightDarkMode = async (lightDarkMode: LightDarkMode, doNotSavePreference = false) => {
+    this.lightDarkMode.set(lightDarkMode)
+    this.settingService.values.lightDarkMode = lightDarkMode
 
-    // User settings
-    if (doNotSavePreference) return
-    return await this.loginService.updateUserOptions([{ name: 'wafrn.theme', value: theme }])
+    document.documentElement.setAttribute('data-theme', lightDarkMode)
+    this.settingService.forceUpdateValue('lightDarkMode', !doNotSavePreference)
   }
 
+  // When setting additionalStyleMode either call the set method here or modify and call sync afterwards if modifying many settings at once.
   public setAdditionalStyleMode = async (mode: AdditionalStyleMode, value: boolean, doNotSavePreference = false) => {
     this.additionalStyleModes[mode].set(value)
-    localStorage?.setItem(mode, value.toString())
+    this.syncAdditionalStyleModeSettings()
+
+    this.settingService.forceUpdateValue('additionalStyleModes', !doNotSavePreference)
+  }
+
+  public syncAdditionalStyleMode() {
+    this.syncAdditionalStyleModeSettings()
+
+    this.settingService.forceUpdateValue('additionalStyleModes')
+  }
+
+  // Helper to sync up the settings service values and theme service values
+  private syncAdditionalStyleModeSettings() {
+    const modes = Object.entries(this.additionalStyleModes)
+      .filter(([_, enabled]) => enabled())
+      .map(([val, _]) => val)
 
-    // User settings
-    if (doNotSavePreference) return
-    return await this.loginService.updateUserOptions([{ name: `wafrn.${mode}`, value: value.toString() }])
+    this.settingService.values.additionalStyleModes = modes
   }
 
   public async toggleAdditionalStyleMode(mode: AdditionalStyleMode, doNotSavePreference = false) {

packages/frontend/src/app/theme-manager/theme-manager.component.ts

···
 import { Component, Signal, WritableSignal } from '@angular/core'
-import { AdditionalStyleMode, ColorScheme, ColorTheme, ThemeService } from '../services/theme.service'
+import { AdditionalStyleMode, Theme, LightDarkMode, ThemeService } from '../services/theme.service'
 
 @Component({
   selector: 'app-theme-manager',
···
   styleUrl: './theme-manager.component.scss'
 })
 export class ThemeManagerComponent {
-  colorScheme: Signal<ColorScheme>
-  theme: Signal<ColorTheme>
+  colorScheme: Signal<Theme>
+  theme: Signal<LightDarkMode>
   additionalStyleModes: { [key in AdditionalStyleMode]: WritableSignal<boolean> }
 
   constructor(themeService: ThemeService) {
-    this.colorScheme = themeService.colorScheme
-    this.theme = themeService.theme
+    this.colorScheme = themeService.theme
+    this.theme = themeService.lightDarkMode
     this.additionalStyleModes = themeService.additionalStyleModes
   }
 }