docs: move fallback theme to avoid confusion (#38)

* docs: move fallback theme to avoid confusion

* docs(README): fix up some styling

* docs: adjust wording

README.md

@@ -52,37 +52,44 @@ 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
       catppuccin('frappe', 'pink'),
       // 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
 <div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-8">
@@ -96,6 +103,7 @@ Note: We do not recommend changing any colors other than the `primary` and `acce
   <button class="btn btn-error">Error</button>
 </div>
 ```
+
 You can find the example in the `example` folder.
 
 ## 💝 Thanks to

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',
     ],
   },
 }