feat: custom color theme

Author: gambhirsharma

packages/core/src/features/preferences/renderer/preference-items/application/theme/theme.module.scss

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Freelens Authors. All rights reserved.
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+@use "../../../../../../renderer/components/vars" as *;
+
+$accent-teal: #00a7a0;
+$accent-green: #4caf50;
+$accent-blue: #2196f3;
+$accent-orange: #ff9800;
+
+.selectRow {
+  display: flex;
+  gap: $unit;
+}
+
+.themeSelect {
+  flex: 9;
+}
+
+.accentSelect {
+  flex: 1;
+}
+
+.colorPreview {
+  display: flex;
+  align-items: center;
+  gap: $unit;
+  margin-top: $unit;
+}
+
+.resetButton {
+  padding: 6px 12px;
+  font-size: 12px;
+  border: 1px solid var(--borderColor);
+  border-radius: $radius;
+  background-color: var(--secondaryBackground);
+  color: var(--textColorPrimary);
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: var(--layoutTabsBackground);
+    border-color: var(--primary);
+    color: var(--textColorPrimary);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+}
+

packages/core/src/features/preferences/renderer/preference-items/application/theme/theme.tsx

@@ -13,6 +13,8 @@ import { lensThemeDeclarationInjectionToken } from "../../../../../../renderer/t
 import defaultLensThemeInjectable from "../../../../../../renderer/themes/default-theme.injectable";
 import userPreferencesStateInjectable from "../../../../../user-preferences/common/state.injectable";
 
+import styles from "./theme.module.scss";
+
 import type { LensTheme } from "../../../../../../renderer/themes/lens-theme";
 import type { UserPreferencesState } from "../../../../../user-preferences/common/state.injectable";
 
@@ -34,16 +36,61 @@ const NonInjectedTheme = observer(({ state, themes, defaultTheme }: Dependencies
     })),
   ];
 
+  const accentColorOptions = [
+    { value: "#00a7a0", label: "Teal" },
+    { value: "#4caf50", label: "Green" },
+    { value: "#2196f3", label: "Blue" },
+    { value: "#ff9800", label: "Orange" },
+  ];
+
+  const currentColor = state.customAccentColor || "#00a7a0";
+
+  const ColorSwatch = ({ color }: { color: string }) => (
+    <div style={{ backgroundColor: color, width: '20px', height: '20px', borderRadius: '2px' }} />
+  );
+
+  const ColorOption = ({ option }: { option: { value: string; label: string } }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <ColorSwatch color={option.value} />
+      <span>{option.label}</span>
+    </div>
+  );
+
   return (
     <section id="appearance">
       <SubTitle title="Theme" />
-      <Select
-        id="theme-input"
-        options={themeOptions}
-        value={state.colorTheme}
-        onChange={(value) => (state.colorTheme = value?.value ?? defaultTheme.name)}
-        themeName="lens"
-      />
+      <div className={styles.selectRow}>
+        <Select
+          className={styles.themeSelect}
+          id="theme-input"
+          options={themeOptions}
+          value={state.colorTheme}
+          onChange={(value) => (state.colorTheme = value?.value ?? defaultTheme.name)}
+          themeName="lens"
+        />
+
+        <Select
+          className={styles.accentSelect}
+          id="accent-color-select"
+          options={accentColorOptions}
+          value={currentColor}
+          onChange={(value) => (state.customAccentColor = value?.value)}
+          formatOptionLabel={(option) => <ColorOption option={option} />}
+          themeName="lens"
+        />
+      </div>
+
+      <div className={styles.colorPreview}>
+        {currentColor !== "#00a7a0" && (
+          <button
+            onClick={() => (state.customAccentColor = undefined)}
+            className={styles.resetButton}
+            title="Reset to default color"
+          >
+            Reset to Default
+          </button>
+        )}
+      </div>
     </section>
   );
 });

packages/core/src/features/theme/active-theme/common/channel.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Freelens Authors. All rights reserved.
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { MessageChannel } from "@freelensapp/messaging";
+import type { LensTheme } from "../../../../renderer/themes/lens-theme";
+
+export const activeThemeUpdateChannel: MessageChannel<LensTheme> = {
+  id: "active-theme-update",
+};

packages/core/src/features/theme/active-theme/renderer/update-listener.injectable.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Freelens Authors. All rights reserved.
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getMessageChannelListenerInjectable } from "@freelensapp/messaging";
+import applyLensThemeInjectable from "../../../../renderer/themes/apply-lens-theme.injectable";
+import { activeThemeUpdateChannel } from "../common/channel";
+
+const activeThemeUpdateListenerInjectable = getMessageChannelListenerInjectable({
+  channel: activeThemeUpdateChannel,
+  id: "renderer",
+  getHandler: (di) => {
+    const applyLensTheme = di.inject(applyLensThemeInjectable);
+
+    return (theme) => {
+      // Store theme globally in cluster frames for persistence
+      if (!process.isMainFrame) {
+        (window as any).__lastReceivedTheme = theme;
+      }
+
+      applyLensTheme(theme);
+    };
+  },
+});
+
+export default activeThemeUpdateListenerInjectable;

packages/core/src/features/user-preferences/common/custom-accent-color.injectable.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Freelens Authors. All rights reserved.
+ * 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 userPreferencesStateInjectable from "./state.injectable";
+
+const customAccentColorInjectable = getInjectable({
+  id: "custom-accent-color",
+  instantiate: (di) => {
+    const state = di.inject(userPreferencesStateInjectable);
+
+    return computed(() => state.customAccentColor);
+  },
+});
+
+export default customAccentColorInjectable;

packages/core/src/features/user-preferences/common/preference-descriptors.injectable.ts

@@ -50,6 +50,10 @@ const userPreferenceDescriptorsInjectable = getInjectable({
         fromStore: (val) => val || defaultThemeId,
         toStore: (val) => (!val || val === defaultThemeId ? undefined : val),
       }),
+      customAccentColor: getPreferenceDescriptor<string | undefined>({
+        fromStore: (val) => val,
+        toStore: (val) => val || undefined,
+      }),
       terminalTheme: getPreferenceDescriptor<string>({
         fromStore: (val) => val || "",
         toStore: (val) => val || undefined,

packages/core/src/features/user-preferences/common/storage.injectable.ts

@@ -39,6 +39,7 @@ const userPreferencesPersistentStorageInjectable = getInjectable({
         state.allowErrorReporting = descriptors.allowErrorReporting.fromStore(preferences.allowErrorReporting);
         state.allowUntrustedCAs = descriptors.allowUntrustedCAs.fromStore(preferences.allowUntrustedCAs);
         state.colorTheme = descriptors.colorTheme.fromStore(preferences.colorTheme);
+        state.customAccentColor = descriptors.customAccentColor.fromStore(preferences.customAccentColor);
         state.downloadBinariesPath = descriptors.downloadBinariesPath.fromStore(preferences.downloadBinariesPath);
         state.downloadKubectlBinaries = descriptors.downloadKubectlBinaries.fromStore(
           preferences.downloadKubectlBinaries,
@@ -64,6 +65,7 @@ const userPreferencesPersistentStorageInjectable = getInjectable({
             allowErrorReporting: descriptors.allowErrorReporting.toStore(state.allowErrorReporting),
             allowUntrustedCAs: descriptors.allowUntrustedCAs.toStore(state.allowUntrustedCAs),
             colorTheme: descriptors.colorTheme.toStore(state.colorTheme),
+            customAccentColor: descriptors.customAccentColor.toStore(state.customAccentColor),
             downloadBinariesPath: descriptors.downloadBinariesPath.toStore(state.downloadBinariesPath),
             downloadKubectlBinaries: descriptors.downloadKubectlBinaries.toStore(state.downloadKubectlBinaries),
             downloadMirror: descriptors.downloadMirror.toStore(state.downloadMirror),

packages/core/src/renderer/frames/cluster-frame/copy-theme-from-parent.injectable.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Freelens Authors. All rights reserved.
+ * 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 { beforeClusterFrameStartsFirstInjectionToken } from "../../before-frame-starts/tokens";
+import applyLensThemeInjectable from "../../themes/apply-lens-theme.injectable";
+
+/**
+ * Ensures cluster frames preserve theme CSS variables by:
+ * 1. Storing the last received theme in a global variable
+ * 2. Reapplying it when the document is ready
+ * 3. Watching for potential CSS variable resets with delayed reapplication
+ */
+const ensureThemeReadyInjectable = getInjectable({
+  id: "ensure-theme-ready-in-cluster-frame",
+  instantiate: (di) => ({
+    run: () => {
+      const applyLensTheme = di.inject(applyLensThemeInjectable);
+
+      // Store the last received theme globally in the iframe
+      // This will be set by the update listener
+      (window as any).__lastReceivedTheme = null;
+
+      // Function to apply stored theme
+      const applyStoredTheme = () => {
+        const theme = (window as any).__lastReceivedTheme;
+        if (theme) {
+          applyLensTheme(theme);
+        }
+      };
+
+      // Apply theme when document is fully ready
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', applyStoredTheme);
+      }
+
+      // Watch for potential CSS variable resets
+      // Some frameworks might clear styles, so we reapply after delays
+      setTimeout(() => {
+        const primaryVar = getComputedStyle(document.documentElement)
+          .getPropertyValue('--primary')
+          .trim();
+
+        if (!primaryVar && (window as any).__lastReceivedTheme) {
+          applyStoredTheme();
+        }
+      }, 200);
+
+      setTimeout(() => {
+        const primaryVar = getComputedStyle(document.documentElement)
+          .getPropertyValue('--primary')
+          .trim();
+
+        if (!primaryVar && (window as any).__lastReceivedTheme) {
+          applyStoredTheme();
+        }
+      }, 500);
+    },
+  }),
+  injectionToken: beforeClusterFrameStartsFirstInjectionToken,
+});
+
+export default ensureThemeReadyInjectable;

packages/core/src/renderer/themes/active.injectable.ts

@@ -8,11 +8,14 @@ import { getInjectable } from "@ogre-tools/injectable";
 import assert from "assert";
 import { computed } from "mobx";
 import lensColorThemePreferenceInjectable from "../../features/user-preferences/common/lens-color-theme.injectable";
+import customAccentColorInjectable from "../../features/user-preferences/common/custom-accent-color.injectable";
 import { lensThemeDeclarationInjectionToken } from "./declaration";
 import defaultLensThemeInjectable from "./default-theme.injectable";
 import systemThemeConfigurationInjectable from "./system-theme.injectable";
 import lensThemesInjectable from "./themes.injectable";
 
+import type { LensTheme } from "./lens-theme";
+
 const activeThemeInjectable = getInjectable({
   id: "active-theme",
   instantiate: (di) => {
@@ -21,20 +24,46 @@ const activeThemeInjectable = getInjectable({
     const lensColorThemePreference = di.inject(lensColorThemePreferenceInjectable);
     const systemThemeConfiguration = di.inject(systemThemeConfigurationInjectable);
     const defaultLensTheme = di.inject(defaultLensThemeInjectable);
+    const customAccentColor = di.inject(customAccentColorInjectable);
 
     return computed(() => {
       const pref = lensColorThemePreference.get();
+      let baseTheme: LensTheme;
 
       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;
+        baseTheme = matchingTheme;
+      } else {
+        baseTheme = lensThemes.get(pref.lensThemeId) ?? defaultLensTheme;
+      }
+
+      const accentColor = customAccentColor.get();
+
+      if (!accentColor) {
+        return baseTheme;
       }
 
-      return lensThemes.get(pref.lensThemeId) ?? defaultLensTheme;
+      // Override all colors that use the primary accent color
+      // This ensures both root and iframe get the same theme with accent color applied
+      return {
+        ...baseTheme,
+        colors: {
+          ...baseTheme.colors,
+          blue: accentColor,
+          primary: accentColor,
+          buttonPrimaryBackground: accentColor,
+          menuActiveBackground: accentColor,
+          helmStableRepo: accentColor,
+          colorInfo: accentColor,
+          sidebarSubmenuActiveColor: accentColor,
+          // Keep sidebarActiveColor white for better contrast
+          sidebarActiveColor: "#ffffff",
+        },
+      };
     });
   },
 });

packages/core/src/renderer/themes/apply-lens-theme.injectable.ts

@@ -23,6 +23,7 @@ const applyLensThemeInjectable = getInjectable({
       try {
         const colors = object.entries(theme.colors);
 
+        // Set each CSS variable on document.documentElement
         for (const [name, value] of colors) {
           document.documentElement.style.setProperty(`--${name}`, value);
         }