Applying transition-colors to light / dark theme

[vitorCamarotto]

Description

Hi, I'm having a hard time applying transition to dark / light background.

My main.css file is as follows.

Changing the background color from slate to stone, for example, works fine.

The problem is just for the light / dark theme transition.

:root {
  --ui-bg: var(--ui-color-neutral-100);
}

.dark {
  --ui-bg: var(--ui-color-neutral-900);
}

@layer base {
  body {
    @apply transition-colors duration-1000;
  }
}

Here is the function that changes the theme:

const isDark = computed({
  get() {
    return colorMode.value === 'dark';
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
  },
});

Any help would be appreciated, thanks!

[benjamincanac]

This might happen because @nuxt/ui disabled @nuxtjs/color-mode transitions: https://github.com/nuxt/ui/blob/v3/src/module.ts#L97

You should be able to re-enable it in your nuxt.config.ts.

[vitorCamarotto]

@benjamincanac Thanks for the response!

I tried enabling it, didn't work:

export default defineNuxtConfig({
  colorMode: {
    preference: 'dark',
    disableTransition: false
  },
})

Maybe it's because --ui-bg variable is being redefined when changing the theme from light to dark on :root and .dark... Since the selector doesn't remain the same, CSS can't really trigger an animation?

Not sure if that would make sense

And just trying to make sure it's not a mistake by my side: the following computed works as expected on the body background (triggers animation).

const neutral = computed({
  get() {
    return appConfig.ui.colors.neutral;
  },
  set(option) {
    appConfig.ui.colors.neutral = option;
    window.localStorage.setItem('nuxt-ui-neutral', appConfig.ui.colors.neutral);
  },
});

[IliasPavlakos]

Same here, cant make this work. It's minor but would be nice to have.

[benjamincanac]

Does it work when using bg-light dark:bg-black on your body? 🤔

[IliasPavlakos]

@benjamincanac Tried it but still doent work, the transition is not applied when changing from light to dark and back (setting the theme preference with @nuxtjs/color-mode.)

From what i tested, changing light/dark mode doesnt apply the transition but changing just the bg color while in the same mode the transition works.

[vitorCamarotto]

I tried what you suggested, it did not work:

// no transition

@layer base {
  body {
    @apply bg-white dark:bg-black transition-all duration-1000;
  }
}

Note that changing the secondary color while on the same mode does work, as @IliasPavlakos stated.

// transition works fine i.e.
// changing secondary color from Stone to Slate

@layer base {
  body {
    @apply transition-all duration-1000;
  }
}

[KonradHEXANT]

Same here. No transition of colors when switching modes. It's unpleasant to switch from dark to light without any transition. It's just a switch. BAM! And your eyes receive full-blown white BG in the face ;-)

It would be nice to have some degree of softening the blow ;-)

[benjamincanac]

@HugoRCD Can your work on the portfolio template solve this? 🤔

[abhishekvash]

@HugoRCD Any updates on this?

[HugoRCD]

@abhishekvash On the portfolio template I used the view-transition so it's not really a color transition, that's why it works, but I'll have to look at it because I don't see why the "basic" colors transition doesn't work

[Uniixon]

First of all, same issue here.

This might happen because @nuxt/ui disabled @nuxtjs/color-mode transitions: https://github.com/nuxt/ui/blob/v3/src/module.ts#L107

You should be able to re-enable it in your nuxt.config.ts.

I tested this by changing that line to disableTransition: false, and the color transition worked smoothly again.

However, this setting doesn't seem to be configurable via nuxt.config.ts. It would be very helpful if disableTransition could be made configurable so that transitions can be enabled without modifying the package code.

Also worth noting: once transitions are enabled, they work perfectly with Nuxt UI color like bg-(--ui-bg).

[jeanprbt]

@HugoRCD any updates on this ?

[HugoRCD]

@jeanprbt I've tried a few local tests and so far I've got some elements that manage to transition by reactivating the disableTransition of colorMode but I still don't understand why they don't all do it and why it renders so badly 🤔 https://github.com/user-attachments/assets/f5aaed85-85d0-421c-a006-6ce8af742626

[jeanprbt]

@benjamincanac @HugoRCD What was the initial reason why disableTransition is set to false by @nuxt/ui, and would it be possible to add this as a setting in nuxt.config.ts?

For now, as a fix, I don't use @nuxtjs/color-mode anymore to manage light/dark toggling but I rely on tailwind manual toggling and I use the following trick to toggle dark mode manually (of course, can be extended to follow system preferences using prefers-color-scheme). Transitions work again and I can use the wonderful components from @nuxt/ui library!

const isDark = ref(false);
const toggleDarkMode = () => isDark.value = !isDark.value;
watch(isDark, (newValue) => {
    document.documentElement.classList.toggle('dark', newValue)
});

[benjamincanac]

@jeanprbt This is set by default to avoid weird transitions when switching between light and dark mode, like: https://github.com/user-attachments/assets/4e8d2cb1-d673-4ed0-9f73-275f9a10d593

I thought it was possible to re-enable this option in your nuxt.config.ts but realized there was a bug in options merging, pushed this to fix it: https://github.com/nuxt/ui/commit/78f92a24f8ac5cd0cf1e1c5b55dfc8476612bf93

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  colorMode: {
    disableTransition: false
  },
})

[benjamincanac]

I believe we can close this since https://github.com/nuxt/ui/commit/78f92a24f8ac5cd0cf1e1c5b55dfc8476612bf93 fixes the issue. Sorry for not finding this earlier, I was convinced the installModule was merging with user's config.