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;
  }
}

[KonradDRAST]

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 ;-)