DaisyUI 5 Hex to OKLCH Theme Conversion

DaisyUI 5 natively expects CSS variables (and performs best) using the OKLCH color space for accurate perceptual lightness and automatic shade interpolation. When migrating a legacy hex-based theme, you can accurately convert the colors programmatically using the culori library.

Procedure

1. Install culori temporarily in your working directory:

   npm install culori
   

2. Create a script (e.g., convert.js) to generate the CSS variables:

   const fs = require('fs');
   async function run() {
     const { converter } = await import('culori');
     const oklch = converter('oklch');
     
     // Your legacy hex colors
     const colors = {
       "primary": "#8b5cf6",
       "primary-content": "#ffffff",
       "base-100": "#0b0d19"
       // Add all other semantic colors...
     };
     
     for (const [key, hex] of Object.entries(colors)) {
       const color = oklch(hex);
       // Format to match DaisyUI 5 OKLCH expectations
       console.log(`  --color-${key}: oklch(${(color.l * 100).toFixed(2)}% ${color.c.toFixed(3)} ${color.h ? color.h.toFixed(2) : 0});`);
     }
   }
   run();
   

3. Run the script:

   node convert.js
   

4. Paste the output directly into the @plugin "daisyui/theme" block in your main CSS file (e.g., app.css).