fix(Theme): fix slow app when the theme is changed

rotki · Jun 12, 2024 · c31931e · c31931e
1 parent e1c8b58
commit c31931e
Showing 1 changed file with 24 additions and 25 deletions.
diff --git a/src/composables/theme.ts b/src/composables/theme.ts
@@ -16,8 +16,8 @@ const config: Ref<ThemeConfig> = ref({ ...defaultTheme });
  * Theme manager
  * @returns {ThemeContent}
  */
-export function useRotkiTheme(): ThemeContent {
-  const { state, store, system } = useColorMode<ThemeMode>();
+export const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {
+  const { state, store } = useColorMode<ThemeMode>();
 
   /**
    * whether the current theme is controlled by system or user
@@ -33,8 +33,7 @@ export function useRotkiTheme(): ThemeContent {
    */
   const isLight: ComputedRef<boolean> = computed(
     () =>
-      (get(isAutoControlled) && get(system) === ThemeMode.light)
-      || get(state) === ThemeMode.light,
+      get(state) === ThemeMode.light,
   );
 
   /**
@@ -43,8 +42,7 @@ export function useRotkiTheme(): ThemeContent {
    */
   const isDark: ComputedRef<boolean> = computed(
     () =>
-      (get(isAutoControlled) && get(system) === ThemeMode.dark)
-      || get(state) === ThemeMode.dark,
+      get(state) === ThemeMode.dark,
   );
 
   /**
@@ -98,26 +96,27 @@ export function useRotkiTheme(): ThemeContent {
       watch(
         [isLight, theme],
         ([isLight, theme]) => {
-          const contextVariables = Object.entries(theme)
-            .map(([context, contextObject]: [string, ColorIntensity]) => ({
-              [`--rui-${context}-darker`]: contextObject.darker,
-              [`--rui-${context}-lighter`]: contextObject.lighter,
-              [`--rui-${context}-main`]: contextObject.DEFAULT,
-            }))
-            .reduce((acc, obj) => ({ ...acc, ...obj }), {});
+          const styleVariables = new Map();
 
+          // Compute context variables
+          Object.entries(theme).forEach(([context, contextObject]: [string, ColorIntensity]) => {
+            styleVariables.set(`--rui-${context}-darker`, contextObject.darker);
+            styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);
+            styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);
+          });
+
+          // Determine the theme mode
           const state = isLight ? ThemeMode.light : ThemeMode.dark;
-          const textColorsVariables = {
-            '--rui-text-disabled': `var(--rui-${state}-text-disabled)`,
-            '--rui-text-primary': `var(--rui-${state}-text-primary)`,
-            '--rui-text-secondary': `var(--rui-${state}-text-secondary)`,
-          };
-
-          Object.entries({
-            ...contextVariables,
-            ...textColorsVariables,
-          }).forEach(([variableName, value]) => {
-            document.documentElement.style.setProperty(variableName, value);
+
+          // Add text color variables
+          styleVariables.set('--rui-text-disabled', `var(--rui-${state}-text-disabled)`);
+          styleVariables.set('--rui-text-primary', `var(--rui-${state}-text-primary)`);
+          styleVariables.set('--rui-text-secondary', `var(--rui-${state}-text-secondary)`);
+
+          // Apply all style variables in one operation
+          const rootStyle = document.documentElement.style;
+          styleVariables.forEach((value, variableName) => {
+            rootStyle.setProperty(variableName, value);
           });
         },
         { immediate: true },
@@ -138,4 +137,4 @@ export function useRotkiTheme(): ThemeContent {
     theme,
     toggleThemeMode,
   };
-}
+});