Rewrite cosmetics and theme preferences (#1292)

- Cosmetics and theme preferences are now only stored in cookies instead
  of a combination of both cookies and state.

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.

apps/frontend/nuxt.config.ts

@@ -392,6 +392,14 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
+  routeRules: {
+    "/**": {
+      headers: {
+        "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
+        "Critical-CH": "Sec-CH-Prefers-Color-Scheme",
+      },
+    },
+  },
   compatibilityDate: "2024-07-03",
 });
 

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -162,7 +162,7 @@
                     <div
                       :style="{
                         '--color-brand': isUsingProjectColors
-                          ? intToRgba(project.color, project.id, theme ?? undefined)
+                          ? intToRgba(project.color, project.id, theme.active ?? undefined)
                           : getDefaultColor(project.id),
                       }"
                       class="legend__item__color"

apps/frontend/src/composables/cosmetics.js

@@ -1,52 +0,0 @@
-export const useCosmetics = () =>
-  useState("cosmetics", () => {
-    const cosmetics = useCookie("cosmetics", {
-      maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: "lax",
-      secure: true,
-      httpOnly: false,
-      path: "/",
-    });
-
-    if (!cosmetics.value) {
-      cosmetics.value = {
-        searchLayout: false,
-        projectLayout: false,
-        advancedRendering: true,
-        externalLinksNewTab: true,
-        notUsingBlockers: false,
-        hideModrinthAppPromos: false,
-        preferredDarkTheme: "dark",
-        searchDisplayMode: {
-          mod: "list",
-          plugin: "list",
-          resourcepack: "gallery",
-          modpack: "list",
-          shader: "gallery",
-          datapack: "list",
-          user: "list",
-          collection: "list",
-        },
-        hideStagingBanner: false,
-      };
-    }
-
-    return cosmetics.value;
-  });
-
-export const saveCosmetics = () => {
-  const cosmetics = useCosmetics();
-
-  console.log("SAVING COSMETICS:");
-  console.log(cosmetics);
-
-  const cosmeticsCookie = useCookie("cosmetics", {
-    maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
-    secure: true,
-    httpOnly: false,
-    path: "/",
-  });
-
-  cosmeticsCookie.value = cosmetics.value;
-};

apps/frontend/src/composables/nuxt-accessors.ts

@@ -0,0 +1,7 @@
+export function useTheme() {
+  return useNuxtApp().$theme;
+}
+
+export function useCosmetics() {
+  return useNuxtApp().$cosmetics;
+}

apps/frontend/src/composables/theme.js

@@ -1,58 +0,0 @@
-export const useTheme = () =>
-  useState("theme", () => {
-    const colorMode = useCookie("color-mode", {
-      maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: "lax",
-      secure: true,
-      httpOnly: false,
-      path: "/",
-    });
-
-    if (!colorMode.value) {
-      colorMode.value = {
-        value: "dark",
-        preference: "system",
-      };
-    }
-
-    if (colorMode.value.preference !== "system") {
-      colorMode.value.value = colorMode.value.preference;
-    }
-
-    return colorMode.value;
-  });
-
-export const updateTheme = (value, updatePreference = false) => {
-  const theme = useTheme();
-  const cosmetics = useCosmetics();
-
-  const themeCookie = useCookie("color-mode", {
-    maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
-    secure: true,
-    httpOnly: false,
-    path: "/",
-  });
-
-  if (value === "system") {
-    theme.value.preference = "system";
-
-    const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
-    if (colorSchemeQueryList.matches) {
-      theme.value.value = "light";
-    } else {
-      theme.value.value = cosmetics.value.preferredDarkTheme;
-    }
-  } else {
-    theme.value.value = value;
-    if (updatePreference) theme.value.preference = value;
-  }
-
-  if (import.meta.client) {
-    document.documentElement.className = `${theme.value.value}-mode`;
-  }
-
-  themeCookie.value = theme.value;
-};
-
-export const DARK_THEMES = ["dark", "oled", "retro"];

apps/frontend/src/composables/vue.ts

@@ -0,0 +1,14 @@
+/**
+ * Creates a computed reference that uses a provide getter function called with an argument representing the current mount state of the component.
+ * @param getter A getter function that will run with `mounted` argument representing whether or not the component is mounted.
+ * @returns A computed reference that changes when component becomes mounted or unmounted.
+ */
+export function useMountedValue<T>(getter: (isMounted: boolean) => T) {
+  const mounted = ref(getCurrentInstance()?.isMounted ?? false);
+
+  onMounted(() => (mounted.value = true));
+
+  onUnmounted(() => (mounted.value = false));
+
+  return computed(() => getter(mounted.value));
+}

apps/frontend/src/layouts/default.vue

@@ -62,7 +62,7 @@
                 :title="formatMessage(messages.changeTheme)"
                 @click="changeTheme"
               >
-                <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
+                <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
                 <SunIcon v-else aria-hidden="true" />
               </button>
               <div
@@ -242,7 +242,7 @@
               {{ formatMessage(commonMessages.settingsLabel) }}
             </NuxtLink>
             <button class="iconified-button" @click="changeTheme">
-              <MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
+              <MoonIcon v-if="$theme.active === 'light'" class="icon" />
               <SunIcon v-else class="icon" />
               <span class="dropdown-item__text">
                 {{ formatMessage(messages.changeTheme) }}
@@ -403,7 +403,7 @@
           {{ formatMessage(messages.getModrinthApp) }}
         </nuxt-link>
         <button class="iconified-button raised-button" @click="changeTheme">
-          <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
+          <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
           <SunIcon v-else aria-hidden="true" />
           {{ formatMessage(messages.changeTheme) }}
         </button>
@@ -449,7 +449,6 @@ import ModalCreation from "~/components/ui/ModalCreation.vue";
 import Avatar from "~/components/ui/Avatar.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import { commonMessages } from "~/utils/common-messages.ts";
-import { DARK_THEMES } from "~/composables/theme.js";
 
 const { formatMessage } = useVIntl();
 
@@ -738,18 +737,11 @@ function toggleBrowseMenu() {
     isMobileMenuOpen.value = false;
   }
 }
-function changeTheme() {
+
-  updateTheme(
+const { cycle: changeTheme } = useTheme();
-    DARK_THEMES.includes(app.$colorMode.value)
-      ? "light"
-      : cosmetics.value.preferredDarkTheme ?? "dark",
-    true,
-  );
-}
 
 function hideStagingBanner() {
   cosmetics.value.hideStagingBanner = true;
-  saveCosmetics();
 }
 </script>
 

apps/frontend/src/pages/app.vue

@@ -896,7 +896,7 @@ useSeoMeta({
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$colorMode.value === 'light'"
+        v-if="$theme.active === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

apps/frontend/src/pages/auth/reset-password.vue

@@ -26,7 +26,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
         />
 
         <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">

apps/frontend/src/pages/auth/sign-in.vue

@@ -85,7 +85,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
         />
 
         <button

apps/frontend/src/pages/auth/sign-up.vue

@@ -110,7 +110,7 @@
         ref="turnstile"
         v-model="token"
         class="turnstile"
-        :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
       />
 
       <button

apps/frontend/src/pages/collection/[id].vue

@@ -487,7 +487,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.collection,
     tags.value.projectViewModes,
   );
-  saveCosmetics();
 }
 
 let collection, refreshCollection, creator, projects, refreshProjects;

apps/frontend/src/pages/index.vue

@@ -199,7 +199,7 @@
           <div class="blob-demonstration gradient-border">
             <div class="launcher-view">
               <img
-                v-if="$colorMode.value === 'light'"
+                v-if="$theme.active === 'light'"
                 src="https://cdn.modrinth.com/landing-new/launcher-light.webp"
                 alt="launcher graphic"
                 class="minecraft-screen"
@@ -407,7 +407,7 @@
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$colorMode.value === 'light'"
+        v-if="$theme.active === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -763,7 +763,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode[projectType.value.id],
     tags.value.projectViewModes,
   );
-  saveCosmetics();
   setClosestMaxResults();
 }
 

apps/frontend/src/pages/settings/index.vue

@@ -21,7 +21,7 @@
           v-for="option in themeOptions"
           :key="option"
           class="preview-radio button-base"
-          :class="{ selected: theme.preference === option }"
+          :class="{ selected: theme.preferred === option }"
           @click="() => updateColorTheme(option)"
         >
           <div class="preview" :class="`${option === 'system' ? systemTheme : option}-mode`">
@@ -32,7 +32,7 @@
             </div>
           </div>
           <div class="label">
-            <RadioButtonChecked v-if="theme.preference === option" class="radio" />
+            <RadioButtonChecked v-if="theme.preferred === option" class="radio" />
             <RadioButtonIcon v-else class="radio" />
             {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
             <SunIcon
@@ -153,7 +153,6 @@
           v-model="cosmetics.advancedRendering"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -170,7 +169,6 @@
           v-model="cosmetics.externalLinksNewTab"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -187,7 +185,6 @@
           v-model="cosmetics.hideModrinthAppPromos"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -204,7 +201,6 @@
           v-model="cosmetics.searchLayout"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -221,19 +217,19 @@
           v-model="cosmetics.projectLayout"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
     </section>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CodeIcon, RadioButtonIcon, RadioButtonChecked, SunIcon, MoonIcon } from "@modrinth/assets";
 import { Button } from "@modrinth/ui";
 import { formatProjectType } from "~/plugins/shorthands.js";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
-import { DARK_THEMES } from "~/composables/theme.js";
+import { DarkThemes, type Theme } from "~/plugins/theme.ts";
+import type { DisplayLocation } from "~/plugins/cosmetics";
 
 useHead({
   title: "Display settings - Modrinth",
@@ -330,6 +326,10 @@ const projectListLayouts = defineMessages({
     id: "settings.display.project-list-layouts.user",
     defaultMessage: "User profile pages",
   },
+  collection: {
+    id: "settings.display.project-list.layouts.collection",
+    defaultMessage: "Collection",
+  },
 });
 
 const toggleFeatures = defineMessages({
@@ -390,45 +390,32 @@ const cosmetics = useCosmetics();
 const flags = useFeatureFlags();
 const tags = useTags();
 
-const systemTheme = ref("light");
-
 const theme = useTheme();
 
+// On the server the value of native theme can be 'unknown'. To ensure we're
+// hydrating correctly, we need to make sure we aren't using 'unknown' or
+// otherwise wait until we are mounted and supposedly hydrated at this point...
+
+const systemTheme = useMountedValue((mounted) => {
+  if (import.meta.server && theme.native !== "unknown") return theme.native;
+
+  return mounted ? theme.native : theme.active;
+});
+
 const themeOptions = computed(() => {
-  const options = ["system", "light", "dark", "oled"];
+  const options: Theme[] = ["system", "light", "dark", "oled"];
-  if (flags.value.developerMode || theme.value.preference === "retro") {
+  if (flags.value.developerMode || theme.preferred === "retro") {
     options.push("retro");
   }
   return options;
 });
 
-onMounted(() => {
+function updateColorTheme(value: Theme) {
-  updateSystemTheme();
+  if (DarkThemes.includes(value)) {
-  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (event) => {
-    setSystemTheme(event.matches);
-  });
-});
-
-function updateSystemTheme() {
-  const query = window.matchMedia("(prefers-color-scheme: light)");
-  setSystemTheme(query.matches);
-}
-
-function setSystemTheme(light) {
-  if (light) {
-    systemTheme.value = "light";
-  } else {
-    systemTheme.value = cosmetics.value.preferredDarkTheme ?? "dark";
-  }
-}
-
-function updateColorTheme(value) {
-  if (DARK_THEMES.includes(value)) {
     cosmetics.value.preferredDarkTheme = value;
-    saveCosmetics();
-    updateSystemTheme();
   }
-  updateTheme(value, true);
+
+  theme.preferred = value;
 }
 
 function disableDeveloperMode() {
@@ -445,16 +432,18 @@ function disableDeveloperMode() {
 const listTypes = computed(() => {
   const types = tags.value.projectTypes.map((type) => {
     return {
-      id: type.id,
+      id: type.id as DisplayLocation,
       name: formatProjectType(type.id) + "s",
       display: "the " + formatProjectType(type.id).toLowerCase() + "s search page",
     };
   });
+
   types.push({
-    id: "user",
+    id: "user" as DisplayLocation,
     name: "User profiles",
     display: "user pages",
   });
+
   return types;
 });
 </script>

apps/frontend/src/pages/user/[id].vue

@@ -489,7 +489,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.user,
     tags.value.projectViewModes,
   );
-  saveCosmetics();
 }
 </script>
 <script>

apps/frontend/src/plugins/1.theme.js

@@ -1,27 +0,0 @@
-export default defineNuxtPlugin(async (nuxtApp) => {
-  await useAuth();
-  await useUser();
-  const themeStore = useTheme();
-  const cosmetics = useCosmetics();
-
-  nuxtApp.hook("app:mounted", () => {
-    if (import.meta.client && themeStore.value.preference === "system") {
-      const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
-
-      const setColorScheme = (e) => {
-        if (themeStore.value.preference === "system") {
-          if (e.matches) {
-            updateTheme("light");
-          } else {
-            updateTheme(cosmetics.value.preferredDarkTheme ?? "dark");
-          }
-        }
-      };
-
-      setColorScheme(colorSchemeQueryList);
-      colorSchemeQueryList.addEventListener("change", setColorScheme);
-    }
-  });
-
-  nuxtApp.provide("colorMode", themeStore.value);
-});

apps/frontend/src/plugins/cosmetics.ts

@@ -0,0 +1,57 @@
+import type { Theme } from "./theme.ts";
+
+export type DisplayMode = "list" | "gallery" | "grid";
+
+export type DisplayLocation =
+  | "mod"
+  | "plugin"
+  | "resourcepack"
+  | "modpack"
+  | "shader"
+  | "datapack"
+  | "user"
+  | "collection";
+
+export interface Cosmetics {
+  searchLayout: boolean;
+  projectLayout: boolean;
+  advancedRendering: boolean;
+  externalLinksNewTab: boolean;
+  notUsingBlockers: boolean;
+  hideModrinthAppPromos: boolean;
+  preferredDarkTheme: Theme;
+  searchDisplayMode: Record<DisplayLocation, DisplayMode>;
+  hideStagingBanner: boolean;
+}
+
+export default defineNuxtPlugin(() => {
+  const cosmetics = useCookie<Cosmetics>("cosmetics", {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: "lax",
+    secure: true,
+    httpOnly: false,
+    path: "/",
+    default: () => ({
+      searchLayout: false,
+      projectLayout: false,
+      advancedRendering: true,
+      externalLinksNewTab: true,
+      notUsingBlockers: false,
+      hideModrinthAppPromos: false,
+      preferredDarkTheme: "dark",
+      searchDisplayMode: {
+        mod: "list",
+        plugin: "list",
+        resourcepack: "gallery",
+        modpack: "list",
+        shader: "gallery",
+        datapack: "list",
+        user: "list",
+        collection: "list",
+      },
+      hideStagingBanner: false,
+    }),
+  });
+
+  return { provide: { cosmetics } };
+});

apps/frontend/src/plugins/theme.ts

@@ -0,0 +1,130 @@
+import { ref, computed } from "vue";
+
+export type Theme = "system" | "light" | "dark" | "oled" | "retro";
+
+export const DarkThemes: Theme[] = ["dark", "oled", "retro"];
+
+export type SystemTheme = "unknown" | "light" | "dark";
+
+function useNativeTheme() {
+  if (import.meta.server) {
+    let clientHint;
+
+    switch (useRequestHeader("Sec-CH-Prefers-Color-Scheme")) {
+      case "light":
+        clientHint = "light";
+        break;
+      case "dark":
+        clientHint = "dark";
+        break;
+      default:
+        clientHint = "unknown";
+    }
+
+    return computed(() => clientHint as SystemTheme);
+  }
+
+  const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
+
+  const isLight = ref(lightPreference.matches);
+
+  const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches);
+
+  lightPreference.addEventListener("change", onPreferenceChange);
+
+  onScopeDispose(() => lightPreference.removeEventListener("change", onPreferenceChange));
+
+  return computed<SystemTheme>(() => (isLight.value ? "light" : "dark"));
+}
+
+interface ThemeSettings {
+  preference: Theme;
+  value: Exclude<Theme, "system">;
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const $nativeTheme = useNativeTheme();
+
+  const $themeSettings = useCookie<ThemeSettings>("color-mode", {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: "lax",
+    secure: true,
+    httpOnly: false,
+    path: "/",
+    default: () => ({
+      preference: "system",
+      // if we have a client hint - use the associated theme, otherwise use dark
+      // theme, because it's worse to have a bright flash in the dark than just
+      // darkened screen in the light
+      value: $nativeTheme.value === "unknown" ? "dark" : $nativeTheme.value,
+    }),
+  });
+
+  const $preferredTheme = toRef($themeSettings.value, "preference");
+
+  const $cosmetics = useCosmetics();
+
+  const $activeTheme = toRef($themeSettings.value, "value");
+
+  useHead({ htmlAttrs: { class: () => [`${$activeTheme.value}-mode`] } });
+
+  function syncTheme() {
+    const preferredTheme = $preferredTheme.value;
+
+    if (preferredTheme === "system") {
+      const nativeTheme = $nativeTheme.value;
+
+      if (nativeTheme === "unknown" || nativeTheme === "dark") {
+        let { preferredDarkTheme } = $cosmetics.value;
+        if (preferredDarkTheme === "system") {
+          // fail safe in case the user is messing with internals
+          preferredDarkTheme = "dark";
+        }
+
+        $activeTheme.value = preferredDarkTheme;
+      } else {
+        $activeTheme.value = nativeTheme;
+      }
+
+      return;
+    }
+
+    $activeTheme.value = preferredTheme;
+  }
+
+  if (
+    import.meta.server &&
+    $preferredTheme.value === "system" &&
+    $nativeTheme.value !== "unknown"
+  ) {
+    // take advantage of the client hint
+    syncTheme();
+  }
+
+  if (import.meta.client) {
+    const $clientReady = ref(false);
+
+    nuxtApp.hook("app:suspense:resolve", () => {
+      $clientReady.value = true;
+    });
+
+    watchEffect(() => $clientReady.value && syncTheme());
+  }
+
+  function cycle() {
+    $preferredTheme.value = DarkThemes.includes($activeTheme.value)
+      ? "light"
+      : $cosmetics.value.preferredDarkTheme;
+  }
+
+  return {
+    provide: {
+      theme: reactive({
+        preferred: $preferredTheme,
+        active: $activeTheme,
+        native: $nativeTheme,
+        cycle,
+      }),
+    },
+  };
+});

apps/frontend/src/server/plugins/theme.js

@@ -1,38 +0,0 @@
-export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook("render:html", (html, { event }) => {
-    try {
-      const cookies = parseCookies(event);
-
-      if (cookies && cookies["color-mode"]) {
-        const theme = JSON.parse(cookies["color-mode"]);
-
-        html.htmlAttrs.push(`class="${theme.value}-mode"`);
-      } else {
-        html.htmlAttrs.push(`class="dark-mode"`);
-      }
-
-      // Reset cookie attributes to correct ones
-      if (cookies) {
-        const opts = {
-          maxAge: 60 * 60 * 24 * 365 * 10,
-          sameSite: "lax",
-          secure: true,
-          httpOnly: false,
-          path: "/",
-        };
-
-        if (cookies["auth-token"]) {
-          setCookie(event, "auth-token", cookies["auth-token"], opts);
-        }
-        if (cookies["color-mode"]) {
-          setCookie(event, "color-mode", cookies["color-mode"], opts);
-        }
-        if (cookies.cosmetics) {
-          setCookie(event, "cosmetics", cookies.cosmetics, opts);
-        }
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  });
-});

apps/frontend/src/utils/analytics.js

@@ -152,7 +152,7 @@ export const analyticsSetToCSVString = (analytics) => {
   return [header, ...data].join(newline);
 };
 
-export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName) => {
+export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
   if (!category || !projects) {
     return emptyAnalytics;
   }
@@ -219,10 +219,9 @@ export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, cha
         },
       ],
       colors: projectData.map((_, i) => {
-        const theme = useTheme();
         const project = chartData[i];
 
-        return intToRgba(project.color, project.id, theme.value);
+        return intToRgba(project.color, project.id, theme);
       }),
       defaultColors: projectData.map((_, i) => {
         const project = chartData[i];
@@ -282,10 +281,10 @@ const sortTimestamp = ([a], [b]) => a - b;
 const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100];
 
 const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount);
-const processNumberAnalytics = (c, projects) =>
+const processNumberAnalytics = (c, projects, theme) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads");
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads", theme);
-const processRevAnalytics = (c, projects) =>
+const processRevAnalytics = (c, projects, theme) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue");
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue", theme);
 
 const useFetchAnalytics = (
   url,
@@ -328,10 +327,12 @@ export const useFetchAllAnalytics = (
     viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
   }));
 
+  const theme = useTheme();
+
   const totalData = computed(() => ({
-    downloads: processNumberAnalytics(downloadData.value, projects.value),
+    downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
-    views: processNumberAnalytics(viewData.value, projects.value),
+    views: processNumberAnalytics(viewData.value, projects.value, theme.active),
-    revenue: processRevAnalytics(revenueData.value, projects.value),
+    revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
   }));
 
   const fetchData = async (query) => {