Adding to the custom theme

[sarahk]

I've enjoyed playing around at https://daisyui.com/theme-generator/

I have added this to my theme

"base-100": "#fefcf4",
"base-200": "#fcf5dd",
'base-300': '#faeec6',

and these to tailwind's colours

"base-400": "#f8e7ae",
 'base-500': '#f6e097',

I'd expect these buttons to be coloured accordingly but they're all just my "neutral" colour

<button class="btn btn-base-100">Base 100</button>
<button class="btn btn-base-200">Base 200</button>
<button class="btn btn-base-300">Base 300</button>
<button class="btn btn-base-400">Base 400</button>
<button class="btn btn-base-500">Base 500</button>

Is my code wrong?

FWIW I tried to create a codesandbox: https://codesandbox.io/s/demo-colours-v1vd4q?file=/pages/index.js

[saadeghi]

That wouldn't work.
Button only can have the class names mentioned in the docs
base color is not for the background of the button. it's for the surface, and that's why btn doesn't have that color by default.
However, you can use any color for background, foreground or the border of the button like this:
https://play.tailwindcss.com/qwF9Q441lr

<div class="bg-blue-500 p-20">
  <button class="btn bg-base-100 text-base-content border-base-100 hover:bg-base-100 hover:text-base-content hover:border-base-100">Base 100</button>
  <button class="btn bg-base-200 text-base-content border-base-200 hover:bg-base-200 hover:text-base-content hover:border-base-200">Base 200</button>
  <button class="btn bg-base-300 text-base-content border-base-300 hover:bg-base-300 hover:text-base-content hover:border-base-300">Base 300</button>
</div>

And if you want to extend daisyUI colors, the best way would be extending Tailwind CSS color with custom variables, and then use those variables in daisyUI themes:
https://play.tailwindcss.com/LzYodJ0VMd?file=config

Let me know if you have any questions.