Use new activeThemeInjectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/extensions/renderer-api/theming.ts

@@ -3,11 +3,17 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import themeStoreInjectable from "../../renderer/themes/store.injectable";
+import activeThemeInjectable from "../../renderer/themes/active.injectable";
+import type { LensTheme } from "../../renderer/themes/store";
 import { asLegacyGlobalForExtensionApi } from "../as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
 
-const themeStore = asLegacyGlobalForExtensionApi(themeStoreInjectable);
+export const activeTheme = asLegacyGlobalForExtensionApi(activeThemeInjectable);
 
+/**
+ * @deprecated This hides the reactivity of active theme, use {@link activeTheme} instead
+ */
 export function getActiveTheme() {
-  return themeStore.activeTheme;
+  return activeTheme.get();
 }
+
+export type { LensTheme };

src/renderer/components/+cluster/cluster-issues.tsx

@@ -7,6 +7,7 @@ import styles from "./cluster-issues.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
+import type { IComputedValue } from "mobx";
 import { computed, makeObservable } from "mobx";
 import { Icon } from "../icon";
 import { SubHeader } from "../layout/sub-header";
@@ -14,11 +15,9 @@ import { Table, TableCell, TableHead, TableRow } from "../table";
 import { cssNames, prevDefault } from "../../utils";
 import type { ItemObject } from "../../../common/item.store";
 import { Spinner } from "../spinner";
-import type { ThemeStore } from "../../themes/store";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { KubeObjectAge } from "../kube-object/age";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
 import type { NodeStore } from "../+nodes/store";
 import type { EventStore } from "../+events/store";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
@@ -28,6 +27,8 @@ import type { PageParam } from "../../navigation";
 import type { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details.injectable";
 import kubeSelectedUrlParamInjectable from "../kube-detail-params/kube-selected-url.injectable";
 import toggleKubeDetailsPaneInjectable from "../kube-detail-params/toggle-details.injectable";
+import type { LensTheme } from "../../themes/store";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface ClusterIssuesProps {
   className?: string;
@@ -48,7 +49,7 @@ enum sortBy {
 }
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
   nodeStore: NodeStore;
   eventStore: EventStore;
   apiManager: ApiManager;
@@ -166,7 +167,7 @@ class NonInjectedClusterIssues extends React.Component<ClusterIssuesProps & Depe
           sortByDefault={{ sortBy: sortBy.object, orderBy: "asc" }}
           sortSyncWithUrl={false}
           getTableRow={this.getTableRow}
-          className={cssNames("box grow", this.props.themeStore.activeTheme.type)}
+          className={cssNames("box grow", this.props.activeTheme.get().type)}
         >
           <TableHead nowrap>
             <TableCell className="message">Message</TableCell>
@@ -191,7 +192,7 @@ class NonInjectedClusterIssues extends React.Component<ClusterIssuesProps & Depe
 export const ClusterIssues = withInjectables<Dependencies, ClusterIssuesProps>(NonInjectedClusterIssues, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
     apiManager: di.inject(apiManagerInjectable),
     eventStore: di.inject(eventStoreInjectable),
     nodeStore: di.inject(nodeStoreInjectable),

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -16,12 +16,13 @@ import type { PieChartData } from "../chart";
 import { PieChart } from "../chart";
 import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { bytesToUnits, cssNames } from "../../utils";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { getMetricLastPoints } from "../../../common/k8s-api/endpoints/metrics.api";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
 import nodeStoreInjectable from "../+nodes/store.injectable";
-import themeStoreInjectable from "../../themes/store.injectable";
+import type { IComputedValue } from "mobx";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 function createLabels(rawLabelData: [string, number | undefined][]): string[] {
   return rawLabelData.map(([key, value]) => `${key}: ${value?.toFixed(2) || "N/A"}`);
@@ -30,13 +31,13 @@ function createLabels(rawLabelData: [string, number | undefined][]): string[] {
 interface Dependencies {
   clusterOverviewStore: ClusterOverviewStore;
   nodeStore: NodeStore;
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedClusterPieCharts = observer(({
   clusterOverviewStore,
   nodeStore,
-  themeStore,
+  activeTheme,
 }: Dependencies) => {
   const renderLimitWarning = () => {
     return (
@@ -54,7 +55,7 @@ const NonInjectedClusterPieCharts = observer(({
     const { podUsage, podAllocatableCapacity, podCapacity } = data;
     const cpuLimitsOverload = cpuLimits > cpuAllocatableCapacity;
     const memoryLimitsOverload = memoryLimits > memoryAllocatableCapacity;
-    const defaultColor = themeStore.activeTheme.colors.pieChartDefaultColor;
+    const defaultColor = activeTheme.get().colors.pieChartDefaultColor;
 
     if (!memoryCapacity || !cpuCapacity || !podCapacity || !memoryAllocatableCapacity || !cpuAllocatableCapacity || !podAllocatableCapacity) return null;
     const cpuData: PieChartData = {
@@ -261,6 +262,6 @@ export const ClusterPieCharts = withInjectables<Dependencies>(NonInjectedCluster
   getProps: (di) => ({
     clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
     nodeStore: di.inject(nodeStoreInjectable),
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });

src/renderer/components/+helm-releases/release-details/release-details-model/release-details-model.injectable.tsx

@@ -3,13 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
-import type { IObservableValue } from "mobx";
+import type { IComputedValue, IObservableValue } from "mobx";
 import { runInAction, action, observable, computed } from "mobx";
 import type { TargetHelmRelease } from "../target-helm-release.injectable";
 import type { CallForHelmRelease, DetailedHelmRelease } from "./call-for-helm-release/call-for-helm-release.injectable";
 import callForHelmReleaseInjectable from "./call-for-helm-release/call-for-helm-release.injectable";
-import type { ThemeStore } from "../../../../themes/store";
-import themeStoreInjectable from "../../../../themes/store.injectable";
+import type { LensTheme } from "../../../../themes/store";
 import type { CallForHelmReleaseConfiguration } from "./call-for-helm-release-configuration/call-for-helm-release-configuration.injectable";
 import callForHelmReleaseConfigurationInjectable from "./call-for-helm-release-configuration/call-for-helm-release-configuration.injectable";
 import { toHelmRelease } from "../../releases.injectable";
@@ -31,6 +30,7 @@ import type { NavigateToHelmReleases } from "../../../../../common/front-end-rou
 import navigateToHelmReleasesInjectable from "../../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
 import assert from "assert";
 import withOrphanPromiseInjectable from "../../../../../common/utils/with-orphan-promise/with-orphan-promise.injectable";
+import activeThemeInjectable from "../../../../themes/active.injectable";
 
 const releaseDetailsModelInjectable = getInjectable({
   id: "release-details-model",
@@ -38,7 +38,7 @@ const releaseDetailsModelInjectable = getInjectable({
   instantiate: (di, targetRelease: TargetHelmRelease) => {
     const callForHelmRelease = di.inject(callForHelmReleaseInjectable);
     const callForHelmReleaseConfiguration = di.inject(callForHelmReleaseConfigurationInjectable);
-    const themeStore = di.inject(themeStoreInjectable);
+    const activeTheme = di.inject(activeThemeInjectable);
     const getResourceDetailsUrl = di.inject(getResourceDetailsUrlInjectable);
     const updateRelease = di.inject(updateReleaseInjectable);
     const showCheckedErrorNotification = di.inject(showCheckedErrorNotificationInjectable);
@@ -50,7 +50,7 @@ const releaseDetailsModelInjectable = getInjectable({
     const model = new ReleaseDetailsModel({
       callForHelmRelease,
       targetRelease,
-      themeStore,
+      activeTheme,
       callForHelmReleaseConfiguration,
       getResourceDetailsUrl,
       updateRelease,
@@ -92,7 +92,7 @@ export interface ConfigurationInput {
 interface Dependencies {
   callForHelmRelease: CallForHelmRelease;
   targetRelease: TargetHelmRelease;
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
   callForHelmReleaseConfiguration: CallForHelmReleaseConfiguration;
   getResourceDetailsUrl: GetResourceDetailsUrl;
   updateRelease: CallForHelmReleaseUpdate;
@@ -259,7 +259,7 @@ export class ReleaseDetailsModel {
   }
 
   @computed get activeTheme() {
-    return this.dependencies.themeStore.activeTheme.type;
+    return this.dependencies.activeTheme.get().type;
   }
 
   close = () => {

src/renderer/components/+nodes/node-charts.tsx

@@ -12,18 +12,19 @@ import { ResourceMetricsContext } from "../resource-metrics";
 import { observer } from "mobx-react";
 import { mapValues } from "lodash";
 import { type MetricsTab, metricTabOptions } from "../chart/options";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import type { IComputedValue } from "mobx";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface NodeChartsProps {}
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedNodeCharts = observer(({
-  themeStore,
+  activeTheme,
 }: Dependencies & NodeChartsProps) => {
   const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {};
 
@@ -31,7 +32,7 @@ const NonInjectedNodeCharts = observer(({
   if (isMetricsEmpty(metrics)) return <NoMetrics/>;
 
   const id = object.getId();
-  const { chartCapacityColor } = themeStore.activeTheme.colors;
+  const { chartCapacityColor } = activeTheme.get().colors;
   const {
     memoryUsage,
     workloadMemoryUsage,
@@ -162,6 +163,6 @@ const NonInjectedNodeCharts = observer(({
 export const NodeCharts = withInjectables<Dependencies, NodeChartsProps>(NonInjectedNodeCharts, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });

src/renderer/components/+storage-volume-claims/volume-claim-disk-chart.tsx

@@ -10,18 +10,19 @@ import { BarChart, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { ResourceMetricsContext } from "../resource-metrics";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import type { IComputedValue } from "mobx";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface VolumeClaimDiskChartProps {}
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedVolumeClaimDiskChart = observer(({
-  themeStore,
+  activeTheme,
 }: Dependencies & VolumeClaimDiskChartProps) => {
   const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {};
 
@@ -29,7 +30,7 @@ const NonInjectedVolumeClaimDiskChart = observer(({
   if (isMetricsEmpty(metrics)) return <NoMetrics/>;
 
   const id = object.getId();
-  const { chartCapacityColor } = themeStore.activeTheme.colors;
+  const { chartCapacityColor } = activeTheme.get().colors;
   const { diskUsage, diskCapacity } = metrics;
   const usage = normalizeMetrics(diskUsage).data.result[0].values;
   const capacity = normalizeMetrics(diskCapacity).data.result[0].values;
@@ -65,6 +66,6 @@ const NonInjectedVolumeClaimDiskChart = observer(({
 export const VolumeClaimDiskChart = withInjectables<Dependencies, VolumeClaimDiskChartProps>(NonInjectedVolumeClaimDiskChart, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });

src/renderer/components/+workloads-pods/container-charts.tsx

@@ -10,27 +10,28 @@ import { BarChart } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { ResourceMetricsContext } from "../resource-metrics";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { mapValues } from "lodash";
 import { type MetricsTab, metricTabOptions } from "../chart/options";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import activeThemeInjectable from "../../themes/active.injectable";
+import type { IComputedValue } from "mobx";
 
 export interface ContainerChartsProps {}
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedContainerCharts = observer(({
-  themeStore,
+  activeTheme,
 }: Dependencies & ContainerChartsProps) => {
   const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {};
 
   if (!metrics || !object || !tab) return null;
   if (isMetricsEmpty(metrics)) return <NoMetrics/>;
 
-  const { chartCapacityColor } = themeStore.activeTheme.colors;
+  const { chartCapacityColor } = activeTheme.get().colors;
   const {
     cpuUsage,
     cpuRequests,
@@ -127,6 +128,6 @@ const NonInjectedContainerCharts = observer(({
 export const ContainerCharts = withInjectables<Dependencies, ContainerChartsProps>(NonInjectedContainerCharts, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });

src/renderer/components/chart/bar-chart.tsx

@@ -13,11 +13,12 @@ import type { ChartProps } from "./chart";
 import { Chart, ChartKind } from "./chart";
 import { bytesToUnits, cssNames, isObject } from "../../utils";
 import { ZebraStripesPlugin } from "./zebra-stripes.plugin";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import assert from "assert";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import type { IComputedValue } from "mobx";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface BarChartProps extends ChartProps {
   name?: string;
@@ -27,11 +28,11 @@ export interface BarChartProps extends ChartProps {
 const getBarColor: Scriptable<string> = ({ dataset }) => Color(dataset?.borderColor).alpha(0.2).string();
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedBarChart = observer(({
-  themeStore,
+  activeTheme,
   name,
   data,
   className,
@@ -40,7 +41,7 @@ const NonInjectedBarChart = observer(({
   options: customOptions,
   ...settings
 }: Dependencies & BarChartProps) => {
-  const { textColorPrimary, borderFaintColor, chartStripesColor } = themeStore.activeTheme.colors;
+  const { textColorPrimary, borderFaintColor, chartStripesColor } = activeTheme.get().colors;
   const { datasets: rawDatasets = [], ...rest } = data;
   const datasets = rawDatasets
     .filter(set => set.data?.length)
@@ -168,7 +169,7 @@ const NonInjectedBarChart = observer(({
 export const BarChart = withInjectables<Dependencies, BarChartProps>(NonInjectedBarChart, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });
 

src/renderer/components/chart/pie-chart.tsx

@@ -11,9 +11,10 @@ import ChartJS from "chart.js";
 import type { ChartProps } from "./chart";
 import { Chart } from "./chart";
 import { cssNames } from "../../utils";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import type { IComputedValue } from "mobx";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface PieChartProps extends ChartProps {
 }
@@ -44,18 +45,18 @@ function getCutout(length: number | undefined): number {
 }
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedPieChart = observer(({
-  themeStore,
+  activeTheme,
   data,
   className,
   options,
   showChart,
   ...chartProps
 }: Dependencies & PieChartProps) => {
-  const { contentColor } = themeStore.activeTheme.colors;
+  const { contentColor } = activeTheme.get().colors;
   const opts: ChartOptions = {
     maintainAspectRatio: false,
     tooltips: {
@@ -113,7 +114,7 @@ const NonInjectedPieChart = observer(({
 export const PieChart = withInjectables<Dependencies, PieChartProps>(NonInjectedPieChart, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });
 

src/renderer/components/dock/terminal/view.tsx

@@ -10,13 +10,14 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../../utils";
 import type { Terminal } from "./terminal";
 import type { TerminalStore } from "./store";
-import type { ThemeStore } from "../../../themes/store";
+import type { LensTheme } from "../../../themes/store";
 import type { DockTab, DockStore } from "../dock/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import dockStoreInjectable from "../dock/store.injectable";
 import terminalStoreInjectable from "./store.injectable";
 import assert from "assert";
-import themeStoreInjectable from "../../../themes/store.injectable";
+import activeThemeInjectable from "../../../themes/active.injectable";
+import type { IComputedValue } from "mobx";
 
 export interface TerminalWindowProps {
   tab: DockTab;
@@ -25,7 +26,7 @@ export interface TerminalWindowProps {
 interface Dependencies {
   dockStore: DockStore;
   terminalStore: TerminalStore;
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 @observer
@@ -68,7 +69,7 @@ class NonInjectedTerminalWindow extends React.Component<TerminalWindowProps & De
   render() {
     return (
       <div
-        className={cssNames("TerminalWindow", this.props.themeStore.activeTheme.type)}
+        className={cssNames("TerminalWindow", this.props.activeTheme.get().type)}
         ref={elem => this.elem = elem}
       />
     );
@@ -80,7 +81,7 @@ export const TerminalWindow = withInjectables<Dependencies, TerminalWindowProps>
     ...props,
     dockStore: di.inject(dockStoreInjectable),
     terminalStore: di.inject(terminalStoreInjectable),
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });
 

src/renderer/components/item-object-list/content.tsx

@@ -7,6 +7,7 @@ import "./item-list-layout.scss";
 
 import type { ReactNode } from "react";
 import React from "react";
+import type { IComputedValue } from "mobx";
 import { computed, makeObservable } from "mobx";
 import { Observer, observer } from "mobx-react";
 import type { ConfirmDialogParams } from "../confirm-dialog";
@@ -20,18 +21,18 @@ import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
 import type { ItemObject } from "../../../common/item.store";
 import type { Filter, PageFiltersStore } from "./page-filters/store";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
 import type { UserStore } from "../../../common/user-store";
 import type { ItemListStore } from "./list-layout";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
 import userStoreInjectable from "../../../common/user-store/user-store.injectable";
 import pageFiltersStoreInjectable from "./page-filters/store.injectable";
 import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
 import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStores extends boolean> {
   getFilters: () => Filter[];
@@ -71,7 +72,7 @@ export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStor
 }
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
   userStore: UserStore;
   pageFiltersStore: PageFiltersStore;
   openConfirmDialog: OpenConfirmDialog;
@@ -291,10 +292,10 @@ class NonInjectedItemListLayoutContent<
   render() {
     const {
       store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks,
-      detailsItem, className, tableProps = {}, tableId, getItems, themeStore,
+      detailsItem, className, tableProps = {}, tableId, getItems, activeTheme,
     } = this.props;
     const selectedItemId = detailsItem && detailsItem.getId();
-    const classNames = cssNames(className, "box", "grow", themeStore.activeTheme.type);
+    const classNames = cssNames(className, "box", "grow", activeTheme.get().type);
     const items = getItems();
     const selectedItems = store.pickOnlySelected(items);
 
@@ -377,7 +378,7 @@ class NonInjectedItemListLayoutContent<
 export const ItemListLayoutContent = withInjectables<Dependencies, ItemListLayoutContentProps<ItemObject, boolean>>(NonInjectedItemListLayoutContent, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
     userStore: di.inject(userStoreInjectable),
     pageFiltersStore: di.inject(pageFiltersStoreInjectable),
     openConfirmDialog: di.inject(openConfirmDialogInjectable),

src/renderer/components/monaco-editor/monaco-editor.tsx

@@ -6,6 +6,7 @@
 import styles from "./monaco-editor.module.scss";
 import React from "react";
 import { observer } from "mobx-react";
+import type { IComputedValue } from "mobx";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { editor, Uri } from "monaco-editor";
 import type { MonacoTheme } from "./monaco-themes";
@@ -13,10 +14,10 @@ import { type MonacoValidator, monacoValidators } from "./monaco-validators";
 import { debounce, merge } from "lodash";
 import { autoBind, cssNames, disposer } from "../../utils";
 import type { UserStore } from "../../../common/user-store";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
 import userStoreInjectable from "../../../common/user-store/user-store.injectable";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export type MonacoEditorId = string;
 
@@ -39,8 +40,8 @@ export interface MonacoEditorProps {
 }
 
 interface Dependencies {
-  themeStore: ThemeStore;
   userStore: UserStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 export function createMonacoUri(id: MonacoEditorId): Uri {
@@ -83,7 +84,7 @@ class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Depend
   }
 
   @computed get theme() {
-    return this.props.theme ?? this.props.themeStore.activeTheme.monacoTheme;
+    return this.props.theme ?? this.props.activeTheme.get().monacoTheme;
   }
 
   @computed get model(): editor.ITextModel {
@@ -306,8 +307,8 @@ export const MonacoEditor = withInjectables<Dependencies, MonacoEditorProps, Mon
   {
     getProps: (di, props) => ({
       ...props,
-      themeStore: di.inject(themeStoreInjectable),
       userStore: di.inject(userStoreInjectable),
+      activeTheme: di.inject(activeThemeInjectable),
     }),
   },
 );

src/renderer/components/select/select.tsx

@@ -8,15 +8,15 @@
 import "./select.scss";
 
 import React from "react";
-import type { ObservableSet } from "mobx";
+import type { IComputedValue, ObservableSet } from "mobx";
 import { action, computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import ReactSelect, { components, createFilter } from "react-select";
 import type { Props as ReactSelectProps, GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { autoBind, cssNames } from "../../utils";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 const { Menu } = components;
 
@@ -80,7 +80,7 @@ const defaultFilter = createFilter({
 });
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 export function onMultiSelectFor<Value, Option extends SelectOption<Value>, Group extends GroupBase<Option> = GroupBase<Option>>(collection: Set<Value> | ObservableSet<Value>): SelectProps<Value, Option, true, Group>["onChange"] {
@@ -124,7 +124,7 @@ class NonInjectedSelect<
   }
 
   @computed get themeClass() {
-    const themeName = this.props.themeName || this.props.themeStore.activeTheme.type;
+    const themeName = this.props.themeName || this.props.activeTheme.get().type;
 
     return `theme-${themeName}`;
   }
@@ -248,7 +248,7 @@ class NonInjectedSelect<
 export const Select = withInjectables<Dependencies, SelectProps<unknown, SelectOption<unknown>, boolean>>(NonInjectedSelect, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 }) as <
   Value,