Dark mode overrides not working like I expected

[longrunningprocess]

daisyui: {
  themes: [
    {
      light: {
	  ...require('daisyui/src/colors/themes')['[data-theme=corporate]'],
	  primary: '#104060',
	  secondary: '#0a2440',
      }
    },
    {
      dark: {
	  ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
	  primary: '#0a2440',
	  secondary: '#104060',
      }
    },
  ],
},

Overriding a couple of colors in my light theme works great however if I want to swap those in the dark theme, it's not working the same. I've tried looking through docs (https://daisyui.com/docs/themes/) but can't seem to find what I need to get this to work the way I want.

light:

dark:

Thanks!

[longrunningprocess]

I'll read up more in https://daisyui.com/docs/colors/, maybe I should be setting `[primary|secondary]-content explicitly.

[saadeghi]

Your config is okay and this is the result you should be seeing: https://play.tailwindcss.com/kBllfeLRx4
I can't be sure unless I see your page but I guess you're using a theme only for a section (not the root element) and if that's the case, you should also add bg-base-100 text-base-content classes to give that section background color and text color of current theme.

[longrunningprocess]

I'm seeing the same thing as in your example, thank you for taking the time to show that.

I know where I'm getting a little confused:

Will be a readable tone of primary if not specified

I was seeing that happen in light mode, when I switched to dark mode I expected to see some shade of my dark.primary for the --pc but was seeing something more like white. I'm spending a little more time in the docs/colors so I can better understand what to expect. I just skimmed through it the first time but now as I'm reading it, I see I can control primary-content if I want to.

The @tailwindcss/typography plugin turns the text gray:

I was thinking it would change all content, even the content on my buttons but it's ok that it doesn't. It wouldn't look good anyway if it did.

And to answer your question, I am applying the theme to the root like this (Svelte):

onMount(() => dark_mode = window.matchMedia('(prefers-color-scheme: dark)').matches)

$: browser && document.documentElement.setAttribute('data-theme', dark_mode ? 'dark' : 'light')

[saadeghi]

Great 👍
Let me know if I can help