angulartypescriptcolorstailwind-cssdaisyui

Using Daisy UI Colors in TypeScript


How can I use a Daisy-UI color (eg. bg-base-100) in typescript (not a utility class)? I use them in html, but cannot access them from typescript.


Solution

  • DaisyUI is based on CSS variables, as you can see in their docs. You can get the values for their CSS variables via JavaScript. For example, here is how you can get the value for the base-100 color from the --b1 variable:

    const base100 = window.getComputedStyle(document.body).getPropertyValue('--b1');
    console.log(base100); // -> 100% 0 0
    

    This returns the OKLCH value of the color.