[PM-5539] Migrate ThemingService (#8219)

* Update ThemingService

* Finish ThemingService

* Lint

* More Tests & Docs

* Refactor to ThemeStateService

* Rename File

* Fix Import

* Remove `type` added to imports

* Update InitServices

* Fix Test

* Remove Unreferenced Code

* Remove Unneeded Null Check

* Add Ticket Link

* Add Back THEMING_DISK

* Fix Desktop

* Create SYSTEM_THEME_OBSERVABLE

* Fix Browser Injection

* Update Desktop Manual Access

* Fix Default Theme

* Update Test

apps/web/src/theme.ts

@@ -0,0 +1,37 @@
+// Set theme on page load
+// This is done outside the Angular app to avoid a flash of unthemed content before it loads
+const setTheme = () => {
+  const getLegacyTheme = (): string | null => {
+    // MANUAL-STATE-ACCESS: Calling global to get setting before migration
+    // has had a chance to run, can be remove in the future.
+    // Tracking Issue: https://bitwarden.atlassian.net/browse/PM-6676
+    const globalState = window.localStorage.getItem("global");
+
+    const parsedGlobalState = JSON.parse(globalState) as { theme?: string } | null;
+    return parsedGlobalState ? parsedGlobalState.theme : null;
+  };
+
+  const defaultTheme = "light";
+  const htmlEl = document.documentElement;
+  let theme = defaultTheme;
+
+  // First try the new state providers location, then the legacy location
+  const themeFromState =
+    window.localStorage.getItem("global_theming_selection") ?? getLegacyTheme();
+
+  if (themeFromState) {
+    if (themeFromState.indexOf("system") > -1) {
+      theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } else if (themeFromState.indexOf("dark") > -1) {
+      theme = "dark";
+    }
+  }
+
+  if (!htmlEl.classList.contains("theme_" + theme)) {
+    // The defaultTheme is also set in the html itself to make sure that some theming is always applied
+    htmlEl.classList.remove("theme_" + defaultTheme);
+    htmlEl.classList.add("theme_" + theme);
+  }
+};
+
+setTheme();