menu refactor + web account switcher (#7307)

* add account switcher, migrate context menus to overflow menu system, update version filter controls, only pad instance icons

* app account switcher, improve some context menus, theme stuff

* prepr

* handle reauthentication

* fix a couple sign in issues, admin page cleanup, fix org status badges, fix official account badge, open in local keybind, publish plus icons

* rename generic menus to ButtonMenu (& types)

* fix hydration issue w/ dropdowns + middleware error

apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue

@@ -8,7 +8,7 @@ import {
 } from '@modrinth/ui'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import { type ColorTheme, useTheme } from '@/composables/use-theme.ts'
+import { type ColorTheme, isDarkTheme, useTheme } from '@/composables/use-theme.ts'
 import { type AppSettings, get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
 import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
@@ -60,6 +60,9 @@ const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
 
 		await set(nextSettings)
 		settings.value = nextSettings
+		if (isDarkTheme(value.theme)) {
+			theme.preferredDark = value.theme
+		}
 		theme.preferred = value.theme
 		theme.syncAcrossDevices = value.syncAcrossDevices
 		theme.advancedRendering = value.advancedRendering
@@ -73,6 +76,10 @@ const themeOptions = computed(() =>
 	),
 )
 
+const preferredDarkTheme = computed(() =>
+	isDarkTheme(current.value.theme) ? current.value.theme : theme.preferredDark,
+)
+
 function setTheme(value: ColorTheme): void {
 	current.value.theme = value
 }
@@ -126,7 +133,8 @@ provideAppearanceSettings({
 	theme: {
 		current: computed(() => current.value.theme),
 		options: themeOptions,
-		system: computed(() => theme.native),
+		system: computed(() => (theme.native === 'light' ? 'light' : preferredDarkTheme.value)),
+		preferredDark: preferredDarkTheme,
 		set: setTheme,
 		syncAcrossDevices: {
 			value: computed(() => current.value.syncAcrossDevices),