Next.js Discord

Discord Forum

Switch tailwindcss catppuccin flavour based on light mode or dark mode

Unanswered
Kaikadi posted this in #help-forum
Open in Discord
KaikadiOP
Hello I'm using nextjs and when setting defaultflavour in tailwind.config.ts, it makes the flavour for catppuccin constant. How can i make it change to mocha for dark and latte for light mode?

3 Replies

KaikadiOP
globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 76, 79, 105;
  --background-start-rgb: 239, 241, 245;
  --background-end-rgb: 239, 241, 245;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 205, 214, 244;
    --background-start-rgb: 30, 30, 46;
    --background-end-rgb: 30, 30, 46;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}
tailwind.config.ts:
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [require("@catppuccin/tailwindcss")({
    prefix: "ctp",
  }),
  ],
}
export default config
not-milo.tsx
You can use the dark: variant to set a different theme for dark mode.

<body class="latte dark:mocha">
  <h1 class="bg-base text-pink">Hello world!</h1>
</body>