Make base store non Singleton (#6690)

* Remove Singleton from BaseStore to remove global shared state Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove more usages of Singleton Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace use of legacy global execHelm with injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove last use of legacy global execHelm Signed-off-by: Sebastian Malton <sebastian@malton.name> * Extract BaseStore deps into constructor argument Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce method to make store migrations injectable - Use it for ClusterStore Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch HotbarStore to injectable migrations Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch UserStore to injectable migrations Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move migration utils into common/utils/ Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch WeblinkStore to injectable migrations Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error in base-store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove tests that reference lastSeenVersion - That value is not used anywhere in code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove usage of legacy global .getInstance Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove usage of legacy global ClusterStore.getInstance Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add simple migrations dependency for stores without any preexisting migrations Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix messed up import Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add typing to transient injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Cleanup formatting Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix typing in tests to satisfy requirement to have cacheFile Signed-off-by: Sebastian Malton <sebastian@malton.name> * More consistent use of BaseStore.displayName Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add catching of error while starting main application Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move initializing sentry to runnable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove unneeded appPathsInjectionToken - Only had once impl, which was in common anyway Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add support for multiple "runAfter" runnables - Needed so that several dependencies can be declared Signed-off-by: Sebastian Malton <sebastian@malton.name> * Use multiple runAfter support to fix crash on renderer Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove traces Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add global override to fix tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix base store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix runManyFor tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix hotbar store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix user store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add global override for getConfigurationFileModel to fix tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove overrides for configuration stores - Now that there is an override for getConfiguration Signed-off-by: Sebastian Malton <sebastian@malton.name> * Overhaul FS fakes with full in-memory filesystem - This increases our confidence in fs related logic Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove use of global shared Electron.App Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add fake access support Signed-off-by: Sebastian Malton <sebastian@malton.name> * Handle copy as part of fake FS Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add ensureDir/Sync support to fake FS Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Use pathExistsSync instead of fsInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add createReadStream to fake FS Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add stat to fake FS Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test failures due to incomplete overrides Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fully injectable-ize BaseStore so that ApplicationBuilder tests work Signed-off-by: Sebastian Malton <sebastian@malton.name> * Consolidate more bootstrapping into startFrame Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move initializing CatalogCategories to runnable in bootstrap Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert contextMenuOpen initializers into runnables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert navigateForExtension init to runnable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make cluster state sync fully injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move init hotbar store into runnables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make LensTheme fully injectable and runnable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Cleanup old code from missed from previous commit Signed-off-by: Sebastian Malton <sebastian@malton.name> * Manually split out terminal color names and fully type LensTheme Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix old imports Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove unnecessart awaits Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fully cherry pick injectablizing custom monaco themes Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix duplicate mock warning Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix incorrectly fully cherry picking new runnable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Complete cherry-pick of current cluster injcetablization Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix override file name Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix injecting before app paths are set up Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix injecting before app paths are set up Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix ordering of runnable and order of injection Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all renderer runnables to late-inject style - To help fix issues around injection time Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix react-beautiful-dnd mocks Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update and fix WriteJson(Sync) to fix error in tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix HotbarStore.load being called twice is being buggy Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update listing-active-helm-repositories-in-preferences snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix sidebar-and-tab-navigation-tests - Move enabling extensions in tests to a proper location - Fix flushing promises Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove props from dnd mock to make snapshot diffs smaller Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix import Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests by overriding things that are no longer overriden by default - NOTE: They are overridden when using ApplicationBuilder Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix hotbar store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix cluster store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix extension-loader tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix extension-discovery tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix cluster-role-dialog tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix user store tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix kubeconfig sync tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix sidebar and tab tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove unused code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix pick paths import type error and simplify signature Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error in legacy ipc registration Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove another use of legacy requestOpenPathPicker Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace use of legacy global PathPicker.Pick Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix usage in light of changed prop names Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix catalog tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix more type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test flakiness by removing side effects from userStore preferences Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix loading Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix crash Signed-off-by: Sebastian Malton <sebastian@malton.name> * Cherry pick updated startFrameInjectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add tests to verify runMany behaviour in new possible incorrect configuration Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix init ordering during start frame Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix cluster state sync Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots after removing side-effects Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add override for technical test Signed-off-by: Sebastian Malton <sebastian@malton.name> * Correctly mark currentlyInClusterFrame as causedSideEffects Signed-off-by: Sebastian Malton <sebastian@malton.name> * Better formatting Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix behaviour regression Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add better logging Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix BaseStore sync Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update last snapshot Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add global override for randomBytes Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make startMainApplication not an injection time side effect Signed-off-by: Sebastian Malton <sebastian@malton.name> * Choose better names for start-frame runnable tokens Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove duplication of code in RunManyFor Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add unit tests and fix handling empty runAfter array Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace use of mobx from runManyFor with custom barrier Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add missing test Signed-off-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-12-15 17:07:19 +02:00
1 parent 7c5faaaf1d
commit 25f37ac1d1
@@ -5,8 +5,8 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import type { IComputedValue } from "mobx";
 import { computed } from "mobx";
-import type { LensThemeType } from "./store";
-import themeStoreInjectable from "./store.injectable";
+import activeThemeInjectable from "./active.injectable";
+import type { LensThemeType } from "./lens-theme";

 export type ActiveThemeType = IComputedValue<LensThemeType>;

@@ -14,9 +14,9 @@ const activeThemeTypeInjectable = getInjectable({
  id: "active-theme-type",

  instantiate: (di) => {
-    const store = di.inject(themeStoreInjectable);
+    const activeTheme = di.inject(activeThemeInjectable);

-    return computed(() => store.activeTheme.type);
+    return computed(() => activeTheme.get().type);
  },
 });

@@ -3,15 +3,37 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
+import assert from "assert";
 import { computed } from "mobx";
-import themeStoreInjectable from "./store.injectable";
+import lensColorThemePreferenceInjectable from "../../common/user-store/lens-color-theme.injectable";
+import { lensThemeDeclarationInjectionToken } from "./declaration";
+import defaultLensThemeInjectable from "./default-theme.injectable";
+import systemThemeConfigurationInjectable from "./system-theme.injectable";
+import lensThemesInjectable from "./themes.injectable";

 const activeThemeInjectable = getInjectable({
  id: "active-theme",
  instantiate: (di) => {
-    const store = di.inject(themeStoreInjectable);
+    const lensThemes = di.inject(lensThemesInjectable);
+    const themeDecls = di.injectMany(lensThemeDeclarationInjectionToken);
+    const lensColorThemePreference = di.inject(lensColorThemePreferenceInjectable);
+    const systemThemeConfiguration = di.inject(systemThemeConfigurationInjectable);
+    const defaultLensTheme = di.inject(defaultLensThemeInjectable);

-    return computed(() => store.activeTheme);
+    return computed(() => {
+      const pref = lensColorThemePreference.get();
+
+      if (pref.useSystemTheme) {
+        const systemThemeType = systemThemeConfiguration.get();
+        const matchingTheme = themeDecls.find(theme => theme.type === systemThemeType);
+
+        assert(matchingTheme, `Missing theme declaration for system theme "${systemThemeType}"`);
+
+        return matchingTheme;
+      }
+
+      return lensThemes.get(pref.lensThemeId) ?? defaultLensTheme;
+    });
  },
 });

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import loggerInjectable from "../../common/logger.injectable";
+import userStoreInjectable from "../../common/user-store/user-store.injectable";
+import { object } from "../utils";
+import type { LensTheme } from "./lens-theme";
+
+export type ApplyLensTheme = (theme: LensTheme) => void;
+
+const applyLensThemeInjectable = getInjectable({
+  id: "apply-lens-theme",
+  instantiate: (di): ApplyLensTheme => {
+    const logger = di.inject(loggerInjectable);
+    const userStore = di.inject(userStoreInjectable);
+
+    return (theme) => {
+      try {
+        const colors = object.entries(theme.colors);
+
+        for (const [name, value] of colors) {
+          document.documentElement.style.setProperty(`--${name}`, value);
+        }
+
+        // Adding universal theme flag which can be used in component styles
+        document.body.classList.toggle("theme-light", theme.type === "light");
+      } catch (error) {
+        logger.error("[THEME]: Failed to apply active theme", error);
+        userStore.resetTheme();
+      }
+    };
+  },
+  causesSideEffects: true,
+});
+
+export default applyLensThemeInjectable;
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getGlobalOverride } from "../../common/test-utils/get-global-override";
+import applyLensThemeInjectable from "./apply-lens-theme.injectable";
+
+export default getGlobalOverride(applyLensThemeInjectable, () => () => {});
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { ReadonlyDeep } from "type-fest";
+import type { LensTheme } from "./lens-theme";
+
+export const lensThemeDeclarationInjectionToken = getInjectionToken<ReadonlyDeep<LensTheme>>({
+  id: "lens-theme-declaration",
+});
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { lensThemeDeclarationInjectionToken } from "./declaration";
+
+const defaultLensThemeInjectable = getInjectable({
+  id: "default-lens-theme",
+  instantiate: (di) => {
+    const themes = di.injectMany(lensThemeDeclarationInjectionToken);
+    const [defaultTheme, ...rest] = themes.filter(theme => theme.isDefault);
+
+    if (rest.length > 0) {
+      throw new Error("Multiple LensTheme's are declared as the default");
+    }
+
+    if (!defaultTheme) {
+      throw new Error("No LensTheme is declared as the default");
+    }
+
+    return defaultTheme;
+  },
+});
+
+export default defaultLensThemeInjectable;
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { lensThemeDeclarationInjectionToken } from "./declaration";
+
+const lensDarkThemeInjectable = getInjectable({
+  id: "lens-dark-theme",
+  instantiate: () => ({
+    name: "Dark",
+    type: "dark" as const,
+    description: "Original Lens dark theme",
+    author: "Mirantis",
+    monacoTheme: "clouds-midnight" as const,
+    colors: {
+      blue: "#3d90ce",
+      magenta: "#c93dce",
+      golden: "#ffc63d",
+      halfGray: "#87909c80",
+      primary: "#3d90ce",
+      textColorPrimary: "#8e9297",
+      textColorSecondary: "#a0a0a0",
+      textColorTertiary: "#909ba6",
+      textColorAccent: "#ffffff",
+      textColorDimmed: "#8e92978c",
+      borderColor: "#4c5053",
+      borderFaintColor: "#373a3e",
+      mainBackground: "#1e2124",
+      secondaryBackground: "#1e2125",
+      contentColor: "#262b2f",
+      layoutBackground: "#2e3136",
+      layoutTabsBackground: "#252729",
+      layoutTabsActiveColor: "#ffffff",
+      layoutTabsLineColor: "#87909c80",
+      sidebarBackground: "#36393e",
+      sidebarLogoBackground: "#414448",
+      sidebarActiveColor: "#ffffff",
+      sidebarSubmenuActiveColor: "#ffffff",
+      sidebarItemHoverBackground: "#3a3e44",
+      badgeBackgroundColor: "#ffba44",
+      buttonPrimaryBackground: "#3d90ce",
+      buttonDefaultBackground: "#414448",
+      buttonLightBackground: "#f1f1f1",
+      buttonAccentBackground: "#e85555",
+      buttonDisabledBackground: "#808080",
+      tableBgcStripe: "#2a2d33",
+      tableBgcSelected: "#383c42",
+      tableHeaderBackground: "#262b2f",
+      tableHeaderColor: "#ffffff",
+      tableSelectedRowColor: "#ffffff",
+      helmLogoBackground: "#ffffff",
+      helmStableRepo: "#3d90ce",
+      helmIncubatorRepo: "#ff7043",
+      helmDescriptionHr: "#41474a",
+      helmDescriptionBlockquoteColor: "#bbb",
+      helmDescriptionBlockquoteBorder: "#8a8f93",
+      helmDescriptionBlockquoteBackground: "#3b4348",
+      helmDescriptionHeaders: "#3e4147",
+      helmDescriptionH6: "#6a737d",
+      helmDescriptionTdBorder: "#47494a",
+      helmDescriptionTrBackground: "#1c2125",
+      helmDescriptionCodeBackground: "#ffffff1a",
+      helmDescriptionPreBackground: "#1b1f21",
+      helmDescriptionPreColor: "#b4b5b4",
+      colorSuccess: "#43a047",
+      colorOk: "#4caf50",
+      colorInfo: "#3d90ce",
+      colorError: "#ce3933",
+      colorSoftError: "#e85555",
+      colorWarning: "#ff9800",
+      colorVague: "#36393e",
+      colorTerminated: "#4c5053",
+      dockHeadBackground: "#2e3136",
+      dockInfoBackground: "#1e2125",
+      dockInfoBorderColor: "#303136",
+      dockEditorBackground: "#000000",
+      dockEditorTag: "#8e97a3",
+      dockEditorKeyword: "#ffffff",
+      dockEditorComment: "#808080",
+      dockEditorActiveLineBackground: "#3a3d41",
+      dockBadgeBackground: "#36393e",
+      dockTabBorderColor: "#43424d",
+      dockTabActiveBackground: "#3a3e45",
+      logsBackground: "#000000",
+      logsForeground: "#ffffff",
+      logRowHoverBackground: "#35373a",
+      dialogTextColor: "#87909c",
+      dialogBackground: "#ffffff",
+      dialogHeaderBackground: "#36393e",
+      dialogFooterBackground: "#f4f4f4",
+      drawerTogglerBackground: "#2f343a",
+      drawerTitleText: "#ffffff",
+      drawerSubtitleBackground: "#373a3e",
+      drawerItemNameColor: "#87909c",
+      drawerItemValueColor: "#a0a0a0",
+      clusterMenuBackground: "#252729",
+      clusterMenuBorderColor: "#252729",
+      clusterMenuCellBackground: "#2e3136",
+      clusterSettingsBackground: "#1e2124",
+      addClusterIconColor: "#252729",
+      boxShadow: "#0000003a",
+      iconActiveColor: "#ffffff",
+      iconActiveBackground: "#ffffff18",
+      filterAreaBackground: "#23272b",
+      chartLiveBarBackground: "#00000033",
+      chartStripesColor: "#ffffff08",
+      chartCapacityColor: "#4c545f",
+      pieChartDefaultColor: "#30353a",
+      inputOptionHoverColor: "#87909c",
+      inputControlBackground: "#1e2125",
+      inputControlBorder: "#414448",
+      inputControlHoverBorder: "#474a4f",
+      lineProgressBackground: "#414448",
+      radioActiveBackground: "#36393e",
+      menuActiveBackground: "#3d90ce",
+      menuSelectedOptionBgc: "#36393e",
+      canvasBackground: "#24292e",
+      scrollBarColor: "#5f6064",
+      settingsBackground: "#262b2e",
+      settingsColor: "#909ba6",
+      navSelectedBackground: "#262b2e",
+      navHoverColor: "#dcddde",
+      hrColor: "#ffffff0f",
+      tooltipBackground: "#18191c",
+    },
+    terminalColors: {
+      background: "#000000",
+      foreground: "#ffffff",
+      cursor: "#ffffff",
+      cursorAccent: "#000000",
+      selection: "#ffffff77",
+      black: "#2e3436",
+      red: "#cc0000",
+      green: "#4e9a06",
+      yellow: "#c4a000",
+      blue: "#3465a4",
+      magenta: "#75507b",
+      cyan: "#06989a",
+      white: "#d3d7cf",
+      brightBlack: "#555753",
+      brightRed: "#ef2929",
+      brightGreen: "#8ae234",
+      brightYellow: "#fce94f",
+      brightBlue: "#729fcf",
+      brightMagenta: "#ad7fa8",
+      brightCyan: "#34e2e2",
+      brightWhite: "#eeeeec",
+    },
+    isDefault: true,
+  }),
+  injectionToken: lensThemeDeclarationInjectionToken,
+});
+
+export default lensDarkThemeInjectable;
+
@@ -1,148 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { LensTheme } from "./store";
-
-const lensDarkTheme: LensTheme = {
-  "name": "Dark",
-  "type": "dark",
-  "description": "Original Lens dark theme",
-  "author": "Mirantis",
-  "monacoTheme": "clouds-midnight",
-  "colors": {
-    "blue": "#3d90ce",
-    "magenta": "#c93dce",
-    "golden": "#ffc63d",
-    "halfGray": "#87909c80",
-    "primary": "#3d90ce",
-    "textColorPrimary": "#8e9297",
-    "textColorSecondary": "#a0a0a0",
-    "textColorTertiary": "#909ba6",
-    "textColorAccent": "#ffffff",
-    "textColorDimmed": "#8e92978c",
-    "borderColor": "#4c5053",
-    "borderFaintColor": "#373a3e",
-    "mainBackground": "#1e2124",
-    "secondaryBackground": "#1e2125",
-    "contentColor": "#262b2f",
-    "layoutBackground": "#2e3136",
-    "layoutTabsBackground": "#252729",
-    "layoutTabsActiveColor": "#ffffff",
-    "layoutTabsLineColor": "#87909c80",
-    "sidebarBackground": "#36393e",
-    "sidebarLogoBackground": "#414448",
-    "sidebarActiveColor": "#ffffff",
-    "sidebarSubmenuActiveColor": "#ffffff",
-    "sidebarItemHoverBackground": "#3a3e44",
-    "badgeBackgroundColor": "#ffba44",
-    "buttonPrimaryBackground": "#3d90ce",
-    "buttonDefaultBackground": "#414448",
-    "buttonLightBackground": "#f1f1f1",
-    "buttonAccentBackground": "#e85555",
-    "buttonDisabledBackground": "#808080",
-    "tableBgcStripe": "#2a2d33",
-    "tableBgcSelected": "#383c42",
-    "tableHeaderBackground": "#262b2f",
-    "tableHeaderColor": "#ffffff",
-    "tableSelectedRowColor": "#ffffff",
-    "helmLogoBackground": "#ffffff",
-    "helmStableRepo": "#3d90ce",
-    "helmIncubatorRepo": "#ff7043",
-    "helmDescriptionHr": "#41474a",
-    "helmDescriptionBlockquoteColor": "#bbb",
-    "helmDescriptionBlockquoteBorder": "#8a8f93",
-    "helmDescriptionBlockquoteBackground": "#3b4348",
-    "helmDescriptionHeaders": "#3e4147",
-    "helmDescriptionH6": "#6a737d",
-    "helmDescriptionTdBorder": "#47494a",
-    "helmDescriptionTrBackground": "#1c2125",
-    "helmDescriptionCodeBackground": "#ffffff1a",
-    "helmDescriptionPreBackground": "#1b1f21",
-    "helmDescriptionPreColor": "#b4b5b4",
-    "colorSuccess": "#43a047",
-    "colorOk": "#4caf50",
-    "colorInfo": "#3d90ce",
-    "colorError": "#ce3933",
-    "colorSoftError": "#e85555",
-    "colorWarning": "#ff9800",
-    "colorVague": "#36393e",
-    "colorTerminated": "#4c5053",
-    "dockHeadBackground": "#2e3136",
-    "dockInfoBackground": "#1e2125",
-    "dockInfoBorderColor": "#303136",
-    "dockEditorBackground": "#000000",
-    "dockEditorTag": "#8e97a3",
-    "dockEditorKeyword": "#ffffff",
-    "dockEditorComment": "#808080",
-    "dockEditorActiveLineBackground": "#3a3d41",
-    "dockBadgeBackground": "#36393e",
-    "dockTabBorderColor": "#43424d",
-    "dockTabActiveBackground": "#3a3e45",
-    "logsBackground": "#000000",
-    "logsForeground": "#ffffff",
-    "logRowHoverBackground": "#35373a",
-    "terminalBackground": "#000000",
-    "terminalForeground": "#ffffff",
-    "terminalCursor": "#ffffff",
-    "terminalCursorAccent": "#000000",
-    "terminalSelection": "#ffffff77",
-    "terminalBlack": "#2e3436",
-    "terminalRed": "#cc0000",
-    "terminalGreen": "#4e9a06",
-    "terminalYellow": "#c4a000",
-    "terminalBlue": "#3465a4",
-    "terminalMagenta": "#75507b",
-    "terminalCyan": "#06989a",
-    "terminalWhite": "#d3d7cf",
-    "terminalBrightBlack": "#555753",
-    "terminalBrightRed": "#ef2929",
-    "terminalBrightGreen": "#8ae234",
-    "terminalBrightYellow": "#fce94f",
-    "terminalBrightBlue": "#729fcf",
-    "terminalBrightMagenta": "#ad7fa8",
-    "terminalBrightCyan": "#34e2e2",
-    "terminalBrightWhite": "#eeeeec",
-    "dialogTextColor": "#87909c",
-    "dialogBackground": "#ffffff",
-    "dialogHeaderBackground": "#36393e",
-    "dialogFooterBackground": "#f4f4f4",
-    "drawerTogglerBackground": "#2f343a",
-    "drawerTitleText": "#ffffff",
-    "drawerSubtitleBackground": "#373a3e",
-    "drawerItemNameColor": "#87909c",
-    "drawerItemValueColor": "#a0a0a0",
-    "clusterMenuBackground": "#252729",
-    "clusterMenuBorderColor": "#252729",
-    "clusterMenuCellBackground": "#2e3136",
-    "clusterSettingsBackground": "#1e2124",
-    "addClusterIconColor": "#252729",
-    "boxShadow": "#0000003a",
-    "iconActiveColor": "#ffffff",
-    "iconActiveBackground": "#ffffff18",
-    "filterAreaBackground": "#23272b",
-    "chartLiveBarBackground": "#00000033",
-    "chartStripesColor": "#ffffff08",
-    "chartCapacityColor": "#4c545f",
-    "pieChartDefaultColor": "#30353a",
-    "inputOptionHoverColor": "#87909c",
-    "inputControlBackground": "#1e2125",
-    "inputControlBorder": "#414448",
-    "inputControlHoverBorder": "#474a4f",
-    "lineProgressBackground": "#414448",
-    "radioActiveBackground": "#36393e",
-    "menuActiveBackground": "#3d90ce",
-    "menuSelectedOptionBgc": "#36393e",
-    "canvasBackground": "#24292e",
-    "scrollBarColor": "#5f6064",
-    "settingsBackground": "#262b2e",
-    "settingsColor": "#909ba6",
-    "navSelectedBackground": "#262b2e",
-    "navHoverColor": "#dcddde",
-    "hrColor": "#ffffff0f",
-    "tooltipBackground": "#18191c",
-  },
-};
-
-export default lensDarkTheme;
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { lensThemeDeclarationInjectionToken } from "./declaration";
+
+const lensLightThemeInjectable = getInjectable({
+  id: "lens-light-theme",
+  instantiate: () => ({
+    name: "Light",
+    type: "light" as const,
+    description: "Original Lens light theme",
+    author: "Mirantis",
+    monacoTheme: "vs" as const,
+    colors: {
+      blue: "#3d90ce",
+      magenta: "#c93dce",
+      golden: "#ffc63d",
+      halfGray: "#87909c80",
+      primary: "#3d90ce",
+      textColorPrimary: "#555555",
+      textColorSecondary: "#51575d",
+      textColorTertiary: "#555555",
+      textColorAccent: "#222222",
+      textColorDimmed: "#5557598c",
+      borderColor: "#c9cfd3",
+      borderFaintColor: "#dfdfdf",
+      mainBackground: "#f1f1f1",
+      secondaryBackground: "#f2f3f5",
+      contentColor: "#ffffff",
+      layoutBackground: "#e8e8e8",
+      layoutTabsBackground: "#f8f8f8",
+      layoutTabsActiveColor: "#333333",
+      layoutTabsLineColor: "#87909c80",
+      sidebarLogoBackground: "#f1f1f1",
+      sidebarActiveColor: "#ffffff",
+      sidebarSubmenuActiveColor: "#3d90ce",
+      sidebarBackground: "#e8e8e8",
+      sidebarItemHoverBackground: "#f0f2f5",
+      badgeBackgroundColor: "#ffba44",
+      buttonPrimaryBackground: "#3d90ce",
+      buttonDefaultBackground: "#414448",
+      buttonLightBackground: "#f1f1f1",
+      buttonAccentBackground: "#e85555",
+      buttonDisabledBackground: "#808080",
+      tableBgcStripe: "#f8f8f8",
+      tableBgcSelected: "#f4f5f5",
+      tableHeaderBackground: "#f1f1f1",
+      tableHeaderColor: "#555555",
+      tableSelectedRowColor: "#222222",
+      helmLogoBackground: "#ffffff",
+      helmStableRepo: "#3d90ce",
+      helmIncubatorRepo: "#ff7043",
+      helmDescriptionHr: "#dddddd",
+      helmDescriptionBlockquoteColor: "#555555",
+      helmDescriptionBlockquoteBorder: "#8a8f93",
+      helmDescriptionBlockquoteBackground: "#eeeeee",
+      helmDescriptionHeaders: "#3e4147",
+      helmDescriptionH6: "#6a737d",
+      helmDescriptionTdBorder: "#c6c6c6",
+      helmDescriptionTrBackground: "#1c2125",
+      helmDescriptionCodeBackground: "#ffffff1a",
+      helmDescriptionPreBackground: "#eeeeee",
+      helmDescriptionPreColor: "#555555",
+      colorSuccess: "#206923",
+      colorOk: "#399c3d",
+      colorInfo: "#2d71a4",
+      colorError: "#ce3933",
+      colorSoftError: "#e85555",
+      colorWarning: "#ff9800",
+      colorVague: "#ededed",
+      colorTerminated: "#9dabb5",
+      dockHeadBackground: "#e8e8e8",
+      dockInfoBackground: "#f3f3f3",
+      dockInfoBorderColor: "#c9cfd3",
+      dockEditorBackground: "#24292e",
+      dockEditorTag: "#8e97a3",
+      dockEditorKeyword: "#ffffff",
+      dockEditorComment: "#808080",
+      dockEditorActiveLineBackground: "#3a3d41",
+      dockBadgeBackground: "#dedede",
+      dockTabBorderColor: "#d5d4de",
+      dockTabActiveBackground: "#ffffff",
+      logsBackground: "#24292e",
+      logsForeground: "#ffffff",
+      logRowHoverBackground: "#35373a",
+      dialogTextColor: "#87909c",
+      dialogBackground: "#ffffff",
+      dialogHeaderBackground: "#36393e",
+      dialogFooterBackground: "#f4f4f4",
+      drawerTogglerBackground: "#eaeced",
+      drawerTitleText: "#ffffff",
+      drawerSubtitleBackground: "#f1f1f1",
+      drawerItemNameColor: "#727272",
+      drawerItemValueColor: "#555555",
+      clusterMenuBackground: "#d7d8da",
+      clusterMenuBorderColor: "#c9cfd3",
+      clusterMenuCellBackground: "#bbbbbb",
+      clusterSettingsBackground: "#ffffff",
+      addClusterIconColor: "#8d8d8d",
+      boxShadow: "#0000003a",
+      iconActiveColor: "#ffffff",
+      iconActiveBackground: "#a6a6a694",
+      filterAreaBackground: "#f7f7f7",
+      chartLiveBarBackground: "#00000033",
+      chartStripesColor: "#00000009",
+      chartCapacityColor: "#cccccc",
+      pieChartDefaultColor: "#efefef",
+      inputOptionHoverColor: "#ffffff",
+      inputControlBackground: "#f6f6f7",
+      inputControlBorder: "#cccdcf",
+      inputControlHoverBorder: "#b9bbbe",
+      lineProgressBackground: "#e8e8e8",
+      radioActiveBackground: "#f1f1f1",
+      menuActiveBackground: "#3d90ce",
+      menuSelectedOptionBgc: "#e8e8e8",
+      canvasBackground: "#24292e",
+      scrollBarColor: "#bbbbbb",
+      settingsBackground: "#ffffff",
+      settingsColor: "#555555",
+      navSelectedBackground: "#ffffff",
+      navHoverColor: "#2e3135",
+      hrColor: "#06060714",
+      tooltipBackground: "#ffffff",
+    },
+    terminalColors: {
+      background: "#ffffff",
+      foreground: "#2d2d2d",
+      cursor: "#2d2d2d",
+      cursorAccent: "#ffffff",
+      selection: "#bfbfbf",
+      black: "#2d2d2d",
+      red: "#cd3734 ",
+      green: "#18cf12",
+      yellow: "#acb300",
+      blue: "#3d90ce",
+      magenta: "#c100cd",
+      cyan: "#07c4b9",
+      white: "#d3d7cf",
+      brightBlack: "#a8a8a8",
+      brightRed: "#ff6259",
+      brightGreen: "#5cdb59",
+      brightYellow: "#f8c000",
+      brightBlue: "#008db6",
+      brightMagenta: "#ee55f8",
+      brightCyan: "#50e8df",
+      brightWhite: "#eeeeec",
+    },
+  }),
+  injectionToken: lensThemeDeclarationInjectionToken,
+});
+
+export default lensLightThemeInjectable;
@@ -1,147 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import type { LensTheme } from "./store";
-
-const lensLightTheme: LensTheme = {
-  "name": "Light",
-  "type": "light",
-  "description": "Original Lens light theme",
-  "author": "Mirantis",
-  "monacoTheme": "vs",
-  "colors": {
-    "blue": "#3d90ce",
-    "magenta": "#c93dce",
-    "golden": "#ffc63d",
-    "halfGray": "#87909c80",
-    "primary": "#3d90ce",
-    "textColorPrimary": "#555555",
-    "textColorSecondary": "#51575d",
-    "textColorTertiary": "#555555",
-    "textColorAccent": "#222222",
-    "textColorDimmed": "#5557598c",
-    "borderColor": "#c9cfd3",
-    "borderFaintColor": "#dfdfdf",
-    "mainBackground": "#f1f1f1",
-    "secondaryBackground": "#f2f3f5",
-    "contentColor": "#ffffff",
-    "layoutBackground": "#e8e8e8",
-    "layoutTabsBackground": "#f8f8f8",
-    "layoutTabsActiveColor": "#333333",
-    "layoutTabsLineColor": "#87909c80",
-    "sidebarLogoBackground": "#f1f1f1",
-    "sidebarActiveColor": "#ffffff",
-    "sidebarSubmenuActiveColor": "#3d90ce",
-    "sidebarBackground": "#e8e8e8",
-    "sidebarItemHoverBackground": "#f0f2f5",
-    "badgeBackgroundColor": "#ffba44",
-    "buttonPrimaryBackground": "#3d90ce",
-    "buttonDefaultBackground": "#414448",
-    "buttonLightBackground": "#f1f1f1",
-    "buttonAccentBackground": "#e85555",
-    "buttonDisabledBackground": "#808080",
-    "tableBgcStripe": "#f8f8f8",
-    "tableBgcSelected": "#f4f5f5",
-    "tableHeaderBackground": "#f1f1f1",
-    "tableHeaderColor": "#555555",
-    "tableSelectedRowColor": "#222222",
-    "helmLogoBackground": "#ffffff",
-    "helmStableRepo": "#3d90ce",
-    "helmIncubatorRepo": "#ff7043",
-    "helmDescriptionHr": "#dddddd",
-    "helmDescriptionBlockquoteColor": "#555555",
-    "helmDescriptionBlockquoteBorder": "#8a8f93",
-    "helmDescriptionBlockquoteBackground": "#eeeeee",
-    "helmDescriptionHeaders": "#3e4147",
-    "helmDescriptionH6": "#6a737d",
-    "helmDescriptionTdBorder": "#c6c6c6",
-    "helmDescriptionTrBackground": "#1c2125",
-    "helmDescriptionCodeBackground": "#ffffff1a",
-    "helmDescriptionPreBackground": "#eeeeee",
-    "helmDescriptionPreColor": "#555555",
-    "colorSuccess": "#206923",
-    "colorOk": "#399c3d",
-    "colorInfo": "#2d71a4",
-    "colorError": "#ce3933",
-    "colorSoftError": "#e85555",
-    "colorWarning": "#ff9800",
-    "colorVague": "#ededed",
-    "colorTerminated": "#9dabb5",
-    "dockHeadBackground": "#e8e8e8",
-    "dockInfoBackground": "#f3f3f3",
-    "dockInfoBorderColor": "#c9cfd3",
-    "dockEditorBackground": "#24292e",
-    "dockEditorTag": "#8e97a3",
-    "dockEditorKeyword": "#ffffff",
-    "dockEditorComment": "#808080",
-    "dockEditorActiveLineBackground": "#3a3d41",
-    "dockBadgeBackground": "#dedede",
-    "dockTabBorderColor": "#d5d4de",
-    "dockTabActiveBackground": "#ffffff",
-    "logsBackground": "#24292e",
-    "logsForeground": "#ffffff",
-    "logRowHoverBackground": "#35373a",
-    "terminalBackground": "#ffffff",
-    "terminalForeground": "#2d2d2d",
-    "terminalCursor": "#2d2d2d",
-    "terminalCursorAccent": "#ffffff",
-    "terminalSelection": "#bfbfbf",
-    "terminalBlack": "#2d2d2d",
-    "terminalRed": "#cd3734 ",
-    "terminalGreen": "#18cf12",
-    "terminalYellow": "#acb300",
-    "terminalBlue": "#3d90ce",
-    "terminalMagenta": "#c100cd",
-    "terminalCyan": "#07c4b9",
-    "terminalWhite": "#d3d7cf",
-    "terminalBrightBlack": "#a8a8a8",
-    "terminalBrightRed": "#ff6259",
-    "terminalBrightGreen": "#5cdb59",
-    "terminalBrightYellow": "#f8c000",
-    "terminalBrightBlue": "#008db6",
-    "terminalBrightMagenta": "#ee55f8",
-    "terminalBrightCyan": "#50e8df",
-    "terminalBrightWhite": "#eeeeec",
-    "dialogTextColor": "#87909c",
-    "dialogBackground": "#ffffff",
-    "dialogHeaderBackground": "#36393e",
-    "dialogFooterBackground": "#f4f4f4",
-    "drawerTogglerBackground": "#eaeced",
-    "drawerTitleText": "#ffffff",
-    "drawerSubtitleBackground": "#f1f1f1",
-    "drawerItemNameColor": "#727272",
-    "drawerItemValueColor": "#555555",
-    "clusterMenuBackground": "#d7d8da",
-    "clusterMenuBorderColor": "#c9cfd3",
-    "clusterMenuCellBackground": "#bbbbbb",
-    "clusterSettingsBackground": "#ffffff",
-    "addClusterIconColor": "#8d8d8d",
-    "boxShadow": "#0000003a",
-    "iconActiveColor": "#ffffff",
-    "iconActiveBackground": "#a6a6a694",
-    "filterAreaBackground": "#f7f7f7",
-    "chartLiveBarBackground": "#00000033",
-    "chartStripesColor": "#00000009",
-    "chartCapacityColor": "#cccccc",
-    "pieChartDefaultColor": "#efefef",
-    "inputOptionHoverColor": "#ffffff",
-    "inputControlBackground": "#f6f6f7",
-    "inputControlBorder": "#cccdcf",
-    "inputControlHoverBorder": "#b9bbbe",
-    "lineProgressBackground": "#e8e8e8",
-    "radioActiveBackground": "#f1f1f1",
-    "menuActiveBackground": "#3d90ce",
-    "menuSelectedOptionBgc": "#e8e8e8",
-    "canvasBackground": "#24292e",
-    "scrollBarColor": "#bbbbbb",
-    "settingsBackground": "#ffffff",
-    "settingsColor": "#555555",
-    "navSelectedBackground": "#ffffff",
-    "navHoverColor": "#2e3135",
-    "hrColor": "#06060714",
-    "tooltipBackground": "#ffffff",
-  },
-};
-
-export default lensLightTheme;
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { MonacoTheme } from "../components/monaco-editor";
+
+export type ThemeId = string;
+export type LensThemeType = "dark" | "light";
+export interface LensTheme {
+  name: string;
+  type: LensThemeType;
+  colors: Record<LensColorName, string>;
+  terminalColors: Partial<Record<TerminalColorName, string>>;
+  description: string;
+  author: string;
+  monacoTheme: MonacoTheme;
+  isDefault?: boolean;
+}
+
+export type TerminalColorName =
+  | "foreground"
+  | "background"
+  | "cursor"
+  | "cursorAccent"
+  | "selection"
+  | "selectionForeground"
+  | "black"
+  | "red"
+  | "green"
+  | "yellow"
+  | "blue"
+  | "magenta"
+  | "cyan"
+  | "white"
+  | "brightBlack"
+  | "brightRed"
+  | "brightGreen"
+  | "brightYellow"
+  | "brightBlue"
+  | "brightMagenta"
+  | "brightCyan"
+  | "brightWhite";
+
+export type LensColorName =
+  | "blue"
+  | "magenta"
+  | "golden"
+  | "halfGray"
+  | "primary"
+  | "textColorPrimary"
+  | "textColorSecondary"
+  | "textColorTertiary"
+  | "textColorAccent"
+  | "textColorDimmed"
+  | "borderColor"
+  | "borderFaintColor"
+  | "mainBackground"
+  | "secondaryBackground"
+  | "contentColor"
+  | "layoutBackground"
+  | "layoutTabsBackground"
+  | "layoutTabsActiveColor"
+  | "layoutTabsLineColor"
+  | "sidebarLogoBackground"
+  | "sidebarActiveColor"
+  | "sidebarSubmenuActiveColor"
+  | "sidebarBackground"
+  | "sidebarItemHoverBackground"
+  | "badgeBackgroundColor"
+  | "buttonPrimaryBackground"
+  | "buttonDefaultBackground"
+  | "buttonLightBackground"
+  | "buttonAccentBackground"
+  | "buttonDisabledBackground"
+  | "tableBgcStripe"
+  | "tableBgcSelected"
+  | "tableHeaderBackground"
+  | "tableHeaderColor"
+  | "tableSelectedRowColor"
+  | "helmLogoBackground"
+  | "helmStableRepo"
+  | "helmIncubatorRepo"
+  | "helmDescriptionHr"
+  | "helmDescriptionBlockquoteColor"
+  | "helmDescriptionBlockquoteBorder"
+  | "helmDescriptionBlockquoteBackground"
+  | "helmDescriptionHeaders"
+  | "helmDescriptionH6"
+  | "helmDescriptionTdBorder"
+  | "helmDescriptionTrBackground"
+  | "helmDescriptionCodeBackground"
+  | "helmDescriptionPreBackground"
+  | "helmDescriptionPreColor"
+  | "colorSuccess"
+  | "colorOk"
+  | "colorInfo"
+  | "colorError"
+  | "colorSoftError"
+  | "colorWarning"
+  | "colorVague"
+  | "colorTerminated"
+  | "dockHeadBackground"
+  | "dockInfoBackground"
+  | "dockInfoBorderColor"
+  | "dockEditorBackground"
+  | "dockEditorTag"
+  | "dockEditorKeyword"
+  | "dockEditorComment"
+  | "dockEditorActiveLineBackground"
+  | "dockBadgeBackground"
+  | "dockTabBorderColor"
+  | "dockTabActiveBackground"
+  | "logsBackground"
+  | "logsForeground"
+  | "logRowHoverBackground"
+  | "dialogTextColor"
+  | "dialogBackground"
+  | "dialogHeaderBackground"
+  | "dialogFooterBackground"
+  | "drawerTogglerBackground"
+  | "drawerTitleText"
+  | "drawerSubtitleBackground"
+  | "drawerItemNameColor"
+  | "drawerItemValueColor"
+  | "clusterMenuBackground"
+  | "clusterMenuBorderColor"
+  | "clusterMenuCellBackground"
+  | "clusterSettingsBackground"
+  | "addClusterIconColor"
+  | "boxShadow"
+  | "iconActiveColor"
+  | "iconActiveBackground"
+  | "filterAreaBackground"
+  | "chartLiveBarBackground"
+  | "chartStripesColor"
+  | "chartCapacityColor"
+  | "pieChartDefaultColor"
+  | "inputOptionHoverColor"
+  | "inputControlBackground"
+  | "inputControlBorder"
+  | "inputControlHoverBorder"
+  | "lineProgressBackground"
+  | "radioActiveBackground"
+  | "menuActiveBackground"
+  | "menuSelectedOptionBgc"
+  | "canvasBackground"
+  | "scrollBarColor"
+  | "settingsBackground"
+  | "settingsColor"
+  | "navSelectedBackground"
+  | "navHoverColor"
+  | "hrColor"
+  | "tooltipBackground";
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { reaction } from "mobx";
+import initializeSystemThemeTypeInjectable from "../../features/theme/system-type/renderer/initialize.injectable";
+import { beforeFrameStartsInjectionToken } from "../before-frame-starts/tokens";
+import initUserStoreInjectable from "../stores/init-user-store.injectable";
+import activeThemeInjectable from "./active.injectable";
+import applyLensThemeInjectable from "./apply-lens-theme.injectable";
+
+const setupApplyActiveThemeInjectable = getInjectable({
+  id: "setup-apply-active-theme",
+  instantiate: (di) => ({
+    id: "setup-apply-active-theme",
+    run: () => {
+      const activeTheme = di.inject(activeThemeInjectable);
+      const applyLensTheme = di.inject(applyLensThemeInjectable);
+
+      reaction(
+        () => activeTheme.get(),
+        applyLensTheme,
+        {
+          fireImmediately: true,
+        },
+      );
+    },
+    runAfter: [
+      di.inject(initializeSystemThemeTypeInjectable),
+      di.inject(initUserStoreInjectable),
+    ],
+  }),
+  injectionToken: beforeFrameStartsInjectionToken,
+});
+
+export default setupApplyActiveThemeInjectable;
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import userStoreInjectable from "../../common/user-store/user-store.injectable";
-import ipcRendererInjectable from "../utils/channel/ipc-renderer.injectable";
-import { ThemeStore } from "./store";
-
-const themeStoreInjectable = getInjectable({
-  id: "theme-store",
-
-  instantiate: (di) => new ThemeStore({
-    ipcRenderer: di.inject(ipcRendererInjectable),
-    userStore: di.inject(userStoreInjectable),
-  }),
-});
-
-export default themeStoreInjectable;
@@ -1,150 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { comparer, computed, makeObservable, observable, reaction } from "mobx";
-import { autoBind } from "../utils";
-import logger from "../../main/logger";
-import lensDarkTheme from "./lens-dark";
-import lensLightTheme from "./lens-light";
-import type { MonacoTheme } from "../components/monaco-editor";
-import { defaultThemeId } from "../../common/vars";
-import { camelCase } from "lodash";
-import type { IpcRenderer } from "electron";
-import { getNativeThemeChannel, setNativeThemeChannel } from "../../common/ipc/native-theme";
-import type { ReadonlyDeep } from "type-fest/source/readonly-deep";
-import assert from "assert";
-
-export type ThemeId = string;
-export type LensThemeType = "dark" | "light";
-export interface LensTheme {
-  name: string;
-  type: LensThemeType;
-  colors: Record<string, string>;
-  description: string;
-  author: string;
-  monacoTheme: MonacoTheme;
-}
-
-interface Dependencies {
-  readonly userStore: {
-    colorTheme: string;
-    terminalTheme: ThemeId;
-    resetTheme(): void;
-  };
-  readonly ipcRenderer: IpcRenderer;
-}
-
-export class ThemeStore {
-  private terminalColorPrefix = "terminal";
-
-  #themes = observable.map<ThemeId, LensTheme>({
-    "lens-dark": lensDarkTheme,
-    "lens-light": lensLightTheme,
-  });
-
-  @observable private osNativeThemeType: "dark" | "light" | undefined;
-
-  @computed private get colorThemePreference(): ThemeId | "system" {
-    return this.dependencies.userStore.colorTheme;
-  }
-
-  @computed private get activeThemeId(): ThemeId {
-    if (this.colorThemePreference === "system") {
-      if (this.osNativeThemeType) {
-        return `lens-${this.osNativeThemeType}`;
-      } else {
-        return defaultThemeId;
-      }
-    } else {
-      return this.colorThemePreference;
-    }
-  }
-
-  @computed private get terminalThemeId(): ThemeId {
-    return this.dependencies.userStore.terminalTheme;
-  }
-
-  private readonly defaultTheme: LensTheme;
-
-  @computed get activeTheme(): LensTheme {
-    return this.themes.get(this.activeThemeId) ?? this.defaultTheme;
-  }
-
-  @computed private get terminalColors(): [string, string][] {
-    const theme = this.themes.get(this.terminalThemeId) ?? this.activeTheme;
-
-    return Object
-      .entries(theme.colors)
-      .filter(([name]) => name.startsWith(this.terminalColorPrefix));
-  }
-
-  // Replacing keys stored in styles to format accepted by terminal
-  // E.g. terminalBrightBlack -> brightBlack
-  @computed get xtermColors(): Record<string, string> {
-    return Object.fromEntries(
-      this.terminalColors.map(([name, color]) => [
-        camelCase(name.replace(this.terminalColorPrefix, "")),
-        color,
-      ]),
-    );
-  }
-
-  get themes() {
-    return this.#themes as ReadonlyDeep<Map<string, LensTheme>>;
-  }
-
-  constructor(protected readonly dependencies: Dependencies) {
-    makeObservable(this);
-    autoBind(this);
-    this.init();
-
-    const defaultTheme = this.#themes.get(defaultThemeId);
-
-    assert(defaultTheme, `${defaultThemeId} is invalid as there is no corresponding theme`);
-
-    this.defaultTheme = defaultTheme;
-  }
-
-  async init() {
-    this.osNativeThemeType = await this.dependencies.ipcRenderer.invoke(getNativeThemeChannel);
-    this.dependencies.ipcRenderer.on(setNativeThemeChannel, (event, theme: "dark" | "light") => {
-      this.osNativeThemeType = theme;
-    });
-
-    // auto-apply active theme
-    reaction(() => ({
-      themeId: this.activeThemeId,
-      terminalThemeId: this.terminalThemeId,
-    }), () => {
-      try {
-        this.applyActiveTheme();
-      } catch (err) {
-        logger.error(`Failed to apply active theme: ${err}`);
-        this.dependencies.userStore.resetTheme();
-      }
-    }, {
-      fireImmediately: true,
-      equals: comparer.shallow,
-    });
-  }
-
-  getThemeById(themeId: ThemeId): LensTheme | undefined {
-    return this.themes.get(themeId);
-  }
-
-  protected applyActiveTheme() {
-    const colors = Object.entries({
-      ...this.activeTheme.colors,
-      ...Object.fromEntries(this.terminalColors),
-    });
-
-    colors.forEach(([name, value]) => {
-      document.documentElement.style.setProperty(`--${name}`, value);
-    });
-
-    // Adding universal theme flag which can be used in component styles
-    document.body.classList.toggle("theme-light", this.activeTheme.type === "light");
-  }
-}
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+
+const systemThemeConfigurationInjectable = getInjectable({
+  id: "system-theme-configuration",
+  instantiate: () => observable.box<"dark" | "light">("dark"),
+});
+
+export default systemThemeConfigurationInjectable;
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import terminalThemePreferenceInjectable from "../../common/user-store/terminal-theme.injectable";
+import activeThemeInjectable from "./active.injectable";
+import lensThemesInjectable from "./themes.injectable";
+
+const xtermColorThemeInjectable = getInjectable({
+  id: "terminal-colors",
+  instantiate: (di) => {
+    const activeTheme = di.inject(activeThemeInjectable);
+    const terminalThemePreference = di.inject(terminalThemePreferenceInjectable);
+    const themes = di.inject(lensThemesInjectable);
+
+    const terminalTheme = computed(() => {
+      const themePref = terminalThemePreference.get();
+
+      if (themePref.matchLensTheme) {
+        return activeTheme.get();
+      }
+
+      return themes.get(themePref.themeId) ?? activeTheme.get();
+    });
+
+    return computed(() => terminalTheme.get().terminalColors);
+  },
+});
+
+export default xtermColorThemeInjectable;
@@ -1,138 +0,0 @@
-
-/*
-    Generated Lens theme CSS-variables, don't edit manually.
-    To refresh file run $: yarn run ts-node build/build_theme_vars.ts
-*/
-
-:root {
--blue: #3d90ce;
--magenta: #c93dce;
--golden: #ffc63d;
--halfGray: #87909c80;
--primary: #3d90ce;
--textColorPrimary: #8e9297;
--textColorSecondary: #a0a0a0;
--textColorTertiary: #909ba6;
--textColorAccent: #ffffff;
--textColorDimmed: #8e92978c;
--borderColor: #4c5053;
--borderFaintColor: #373a3e;
--mainBackground: #1e2124;
--secondaryBackground: #1e2125;
--contentColor: #262b2f;
--layoutBackground: #2e3136;
--layoutTabsBackground: #252729;
--layoutTabsActiveColor: #ffffff;
--layoutTabsLineColor: #87909c80;
--sidebarBackground: #36393e;
--sidebarLogoBackground: #414448;
--sidebarActiveColor: #ffffff;
--sidebarSubmenuActiveColor: #ffffff;
--sidebarItemHoverBackground: #3a3e44;
--badgeBackgroundColor: #ffba44;
--buttonPrimaryBackground: #3d90ce;
--buttonDefaultBackground: #414448;
--buttonLightBackground: #f1f1f1;
--buttonAccentBackground: #e85555;
--buttonDisabledBackground: #808080;
--tableBgcStripe: #2a2d33;
--tableBgcSelected: #383c42;
--tableHeaderBackground: #262b2f;
--tableHeaderColor: #ffffff;
--tableSelectedRowColor: #ffffff;
--helmLogoBackground: #ffffff;
--helmStableRepo: #3d90ce;
--helmIncubatorRepo: #ff7043;
--helmDescriptionHr: #41474a;
--helmDescriptionBlockquoteColor: #bbb;
--helmDescriptionBlockquoteBorder: #8a8f93;
--helmDescriptionBlockquoteBackground: #3b4348;
--helmDescriptionHeaders: #3e4147;
--helmDescriptionH6: #6a737d;
--helmDescriptionTdBorder: #47494a;
--helmDescriptionTrBackground: #1c2125;
--helmDescriptionCodeBackground: #ffffff1a;
--helmDescriptionPreBackground: #1b1f21;
--helmDescriptionPreColor: #b4b5b4;
--colorSuccess: #43a047;
--colorOk: #4caf50;
--colorInfo: #3d90ce;
--colorError: #ce3933;
--colorSoftError: #e85555;
--colorWarning: #ff9800;
--colorVague: #36393e;
--colorTerminated: #4c5053;
--dockHeadBackground: #2e3136;
--dockInfoBackground: #1e2125;
--dockInfoBorderColor: #303136;
--dockEditorBackground: #000000;
--dockEditorTag: #8e97a3;
--dockEditorKeyword: #ffffff;
--dockEditorComment: #808080;
--dockEditorActiveLineBackground: #3a3d41;
--dockBadgeBackground: #36393e;
--dockTabBorderColor: #43424d;
--dockTabActiveBackground: #3a3e45;
--logsBackground: #000000;
--logsForeground: #ffffff;
--logRowHoverBackground: #35373a;
--terminalBackground: #000000;
--terminalForeground: #ffffff;
--terminalCursor: #ffffff;
--terminalCursorAccent: #000000;
--terminalSelection: #ffffff77;
--terminalBlack: #2e3436;
--terminalRed: #cc0000;
--terminalGreen: #4e9a06;
--terminalYellow: #c4a000;
--terminalBlue: #3465a4;
--terminalMagenta: #75507b;
--terminalCyan: #06989a;
--terminalWhite: #d3d7cf;
--terminalBrightBlack: #555753;
--terminalBrightRed: #ef2929;
--terminalBrightGreen: #8ae234;
--terminalBrightYellow: #fce94f;
--terminalBrightBlue: #729fcf;
--terminalBrightMagenta: #ad7fa8;
--terminalBrightCyan: #34e2e2;
--terminalBrightWhite: #eeeeec;
--dialogTextColor: #87909c;
--dialogBackground: #ffffff;
--dialogHeaderBackground: #36393e;
--dialogFooterBackground: #f4f4f4;
--drawerTogglerBackground: #2f343a;
--drawerTitleText: #ffffff;
--drawerSubtitleBackground: #373a3e;
--drawerItemNameColor: #87909c;
--drawerItemValueColor: #a0a0a0;
--clusterMenuBackground: #252729;
--clusterMenuBorderColor: #252729;
--clusterMenuCellBackground: #2e3136;
--clusterSettingsBackground: #1e2124;
--addClusterIconColor: #252729;
--boxShadow: #0000003a;
--iconActiveColor: #ffffff;
--iconActiveBackground: #ffffff18;
--filterAreaBackground: #23272b;
--chartLiveBarBackground: #00000033;
--chartStripesColor: #ffffff08;
--chartCapacityColor: #4c545f;
--pieChartDefaultColor: #30353a;
--inputOptionHoverColor: #87909c;
--inputControlBackground: #1e2125;
--inputControlBorder: #414448;
--inputControlHoverBorder: #474a4f;
--lineProgressBackground: #414448;
--radioActiveBackground: #36393e;
--menuActiveBackground: #3d90ce;
--menuSelectedOptionBgc: #36393e;
--canvasBackground: #24292e;
--scrollBarColor: #5f6064;
--settingsBackground: #262b2e;
--settingsColor: #909ba6;
--navSelectedBackground: #262b2e;
--navHoverColor: #dcddde;
--hrColor: #ffffff0f;
--tooltipBackground: #18191c;
-}
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { lensThemeDeclarationInjectionToken } from "./declaration";
+
+const lensThemesInjectable = getInjectable({
+  id: "lens-themes",
+  instantiate: (di) => {
+    const themes = di.injectMany(lensThemeDeclarationInjectionToken);
+
+    return new Map(themes.map(theme => [theme.name, theme]));
+  },
+});
+
+export default lensThemesInjectable;