diff --git a/README.md b/README.md index 40919c4..1bd788b 100644 --- a/README.md +++ b/README.md @@ -52,8 +52,9 @@ module.exports = { content: ['./src/**/*.{js,ts}', 'index.html'], plugins: [require('daisyui')], daisyui: { + // The top value of this array will be used as the default theme + // You can use https://github.com/saadeghi/theme-change to switch between themes themes: [ - 'light', // You can simply select a catppuccin flavor with sane default colors catppuccin('latte'), // Or you can optionally specify accent colors @@ -61,28 +62,34 @@ module.exports = { // Or you can optionally customize more semantic colors catppuccin('macchiato', { primary: 'maroon' }), // Values not explicitly defined will use default values - catppuccin("mocha", { primary: 'sky', secondary: 'rosewater' }), + catppuccin('mocha', { primary: 'sky', secondary: 'rosewater' }), + // Fallback to default theme + 'light', ], }, }; ``` #### Available Catppuccin Flavors + - Latte, Frappe, Macchiato, Mocha #### Customizable Semantic Colors + - **Optional fields:** primary, secondary, accent, neutral, info Note: We do not recommend changing any colors other than the `primary` and `accent`, although we provide a way to do so #### Available Catppuccin Color Values + - **Accent Colors:** rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue, lavender - Can be assigned to `primary`, `secondary`, `accent` and `info` semantic color values - **Monochromatic Colors:** text, subtext1, subtext0, overlay2, overlay1, overlay0, surface2, surface1, surface0, base, mantle, crust - Can be assigned to `secondary` and `neutral` semantic colors values +### Example -### Using +You can use the following HTML to test the theme: ```html
@@ -96,6 +103,7 @@ Note: We do not recommend changing any colors other than the `primary` and `acce
``` + You can find the example in the `example` folder. ## 💝 Thanks to diff --git a/example/tailwind.config.js b/example/tailwind.config.js index 614993e..f648675 100644 --- a/example/tailwind.config.js +++ b/example/tailwind.config.js @@ -7,8 +7,9 @@ module.exports = { content: ['./src/**/*.{js,ts}', 'index.html'], plugins: [require('daisyui')], daisyui: { + // The top value of this array will be used as the default theme + // You can use https://github.com/saadeghi/theme-change to switch between themes themes: [ - 'light', // You can simply select a catppuccin flavor with sane default colors catppuccin('latte'), // Or you can optionally specify accent colors @@ -17,6 +18,8 @@ module.exports = { catppuccin('macchiato', { primary: 'maroon' }), // Values not explicitly defined will use default values catppuccin('mocha', { primary: 'sky', secondary: 'rosewater' }), + // Fallback to default theme + 'light', ], }, }