Is it possible to add to existing daisyUI themes?

[spences10]

So, like, with Tailwind if you want to add a custom font family you can spread it into the config, is it possible to do that with daisyUI?

With Tailwind:

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

Anyone got an example of how to do it with daisyUI??

[saadeghi]

I think you can require a theme like this, then spread it and change some values:

const {
  "[data-theme=dark]": darkTheme,
} = require("daisyui/src/colors/themes");

module.exports = {
  //...
  daisyui: {
    themes: [
      {
        dark: {
          ...darkTheme,
          primary: "#FF0000",
        },
      },
    ],
  },
};

UPDATE: daisyui/colors/themes file is now moved to daisyui/src/colors/themes

[saadeghi]

Try this syntax: https://play.tailwindcss.com/HlHMlVa654?file=config

[spences10]

Sweet! Soo, in your example @saadeghi there's just one font family per theme, can that be expanded?

[saadeghi]

Theme config (including colors, fonts, etc) applies to the :root element (or the element with data-theme attribute)
You can still use font family utility classes for one element. Or you can add nested style to the theme config to set a font for a specific element on a specific theme.

[saadeghi]

example: https://play.tailwindcss.com/ZchptpPFEK?file=config

[spences10]

Brilliant, tank you 🙏