How to customize/ovrride the --menu-active-fg/bg value in the theme files?

[frankchen211]

Variable --menu-active-fg/bg is refer to --color-neutral-content/--color-neutral in menu component, how to specify new values instead of changing --color-neutral-content/--color-neutral?

This is not working.

@plugin "daisyui/theme" {
  name: "valentine";
  --menu-active-fg: oklch(58% 0.233 277.117);
}

[jamesladd]

I too would like to know how to override the colors for menu-active

[pdanpdan]

Set the value on your element: https://play.tailwindcss.com/XVWm7f7QlK?file=css

[jamesladd]

Thank you for the play example to show how this should work.

However, I'm using tailwind css first which mean i dont have a CSS file as such, not do I @import tailwindcss
I use

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.1.16/dist/index.global.min.js" integrity="sha384-hexzD4m33RNzdvbV2ZW2FJcYlGemNPAdBKQsEcc389OUSwlT9xpg4BeEtiCeylHY" crossorigin="anonymous"></script>

Is there a way to get the same outcome with this approach ?

[pdanpdan]

Write the css rule in your stylesheet
Or in a style block

[mirismaili]

Maybe the best way:

@plugin "daisyui/theme" {
  name: light;
  /* ... */
  --color-menu-active-bg: oklch(55% 0.3 240);
  --color-menu-active-fg: oklch(98% 0.01 240);
}
@plugin "daisyui/theme" {
  name: 'dark';
  /* ... */
  color-scheme: dark;
  --color-menu-active-bg: oklch(70% 0.15 240);
  --color-menu-active-fg: oklch(95% 0.01 240);
}

.menu {
  --menu-active-bg: var(--color-menu-active-bg);
  --menu-active-fg: var(--color-menu-active-fg);
}