Bug with switching modes "dark, light" on Safari in Dashboard UI-Pro template

[shehab267]

Environment

Operating System: Darwin
Node Version: v18.16.0
Nuxt Version: 3.11.1
CLI Version: 3.11.0
Nitro Version: 2.9.4
Package Manager: [email protected]
Builder: -
User Config: extends, devtools, ssr, runtimeConfig, modules, css, ui, app, pinia, i18n, veeValidate, plugins
Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @vee-validate/[email protected], @pinia/[email protected], @nuxtjs/[email protected]
Build Modules: -

Version

v2.15.2

Reproduction

https://dashboard-template.nuxt.dev/

Description

Summary:
On the Dashboard UI-Pro template, there is a bug with switching between light and dark modes on Safari (both desktop and mobile). When switching modes, buttons, fields change with the selected mode, but the background doesn't change unless the page is refreshed.

Steps to Reproduce:
Open the Dashboard UI-Pro template on Safari.
Switch between light and dark modes using the provided toggle buttons.
Note that the buttons change with the selected mode, but the background doesn't change until the page is refreshed.

Expected Behavior:
The background should change immediately when switching between light and dark modes without requiring a page refresh.

Actual Behavior:
The background does not change when switching between light and dark modes unless the page is refreshed.

Additional Information:
This issue only occurs on Safari; it works fine on other browsers.

Additional context

[shehab267]

Hi, @moshetanzer @benjamincanac
I removed the HomeChart component as suggested, and the issue disappeared. Can we address and fix the issue within the component?

Awaiting your guidance on next steps.

[moshetanzer]

Hey @shehab267 great. Yeah. Will definitely take a better look. The problem seems to be a hydration type of issue. You still could keep the component. Just for now use only as a client side or fully server side. Need to check if issue is in the color module, nuxt ui, or general server component issue.

[shehab267]

Hey @shehab267 great. Yeah. Will definitely take a better look. The problem seems to be a hydration type of issue. You still could keep the component. Just for now use only as a client side or fully server side. Need to check if issue is in the color module, nuxt ui, or general server component issue.

Thanks for the info! I tried rendering the component on the client side only, but the issue still persists.

[moshetanzer]

Do you mind adding a reproduction of what exactly you did. Also did you test server side?

[Ctron-Dev]

hey i just tried it

homechart component when ran as server didn't render the data.

but after comenting out the library code "unovis/vue" the issue was gone

so i was trying to croner the issue and i am pretty much sure its from the library

this is the homechart componant after removing the library code

<script setup lang="ts">
import {
  eachDayOfInterval,
  eachWeekOfInterval,
  eachMonthOfInterval,
  format,
} from 'date-fns';

import type {Period, Range} from '~/types';

const cardRef = ref<HTMLElement | null>(null);

const props = defineProps({
  period: {
    type: String as PropType<Period>,
    required: true,
  },
  range: {
    type: Object as PropType<Range>,
    required: true,
  },
});

type DataRecord = {
  date: Date;
  amount: number;
};

const {width} = useElementSize(cardRef);

// We use `useAsyncData` here to have same random data on the client and server
const {data} = await useAsyncData<DataRecord[]>(
  async () => {
    const dates = {
      daily: eachDayOfInterval,
      weekly: eachWeekOfInterval,
      monthly: eachMonthOfInterval,
    }[props.period](props.range);

    const min = 1000;
    const max = 10000;

    return dates.map((date) => ({
      date,
      amount: Math.floor(Math.random() * (max - min + 1)) + min,
    }));
  },
  {
    watch: [() => props.period, () => props.range],
    default: () => [],
  },
);

const x = (_: DataRecord, i: number) => i;
const y = (d: DataRecord) => d.amount;

const total = computed(() =>
  data.value.reduce((acc: number, {amount}) => acc + amount, 0),
);

const formatNumber = new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
}).format;

const formatDate = (date: Date): string => {
  return {
    daily: format(date, 'd MMM'),
    weekly: format(date, 'd MMM'),
    monthly: format(date, 'MMM yyy'),
  }[props.period];
};

const xTicks = (i: number) => {
  if (i === 0 || i === data.value.length - 1 || !data.value[i]) {
    return '';
  }

  return formatDate(data.value[i].date);
};

const template = (d: DataRecord) =>
  `${formatDate(d.date)}: ${formatNumber(d.amount)}`;
</script>

<template>
  <UDashboardCard ref="cardRef" :ui="{body: {padding: '!pb-3 !px-0'} as any}">
    <template #header>
      <div>
        <p class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-400">
          Revenue
        </p>
        <p class="text-3xl font-semibold text-gray-900 dark:text-white">
          {{ formatNumber(total) }}
        </p>
      </div>
    </template>
  </UDashboardCard>
</template>

[shehab267]

Hi @moshetanzer,

I hope you are well. I am following up to inquire about any updates regarding this issue. Your assistance is much appreciated.

Thank you!