Programmatically Change Theme Colors

[eerickson5]

I'm working on a mockup where users can type in a color value and that color then becomes the primary color throughout the application.

Based on some digging it looks like DaisyUI stores the primary color values as --p in a custom css property. However, when I check getComputedStyle(document.documentElement).getPropertyValue('--p') the value is empty.

It makes sense then that running document.documentElement.style.setProperty('--p', colorCode) also yields no change.

I've tried --primary-color, --primary, and --color-primary all with the same result.

I've even gone down the list of properties in Chrome debug mode but I've never seen anything related to "primary".

Are the CSS primary/secondary/etc properties held elsewhere? Is it even possible to change them without restarting the application?

[saadeghi]

Try

getComputedStyle(document.querySelector(':root')).getPropertyValue('--p')

Demo https://codepen.io/saadeghi/pen/XWvamwj?editors=0010

Let me know if you have a question.

[eerickson5]

That was it! Thanks for the help! Also I was trying to run it in a Vue Pinia store and it wouldn't work, but it is working in the script of the component itself. Interesting