Add a Bootstrap-like theme

[rackycz]

I use Bootstrap5 in my PHP8 & VueJS3 applications and I would like to switch to daisyUI. It would be nice if users could see at least identical colors as they are used to see in Bootstrap, so the migration to daisyUI is not so shocking to them. Would it be possible to introduce a new theme or at least create a page in documentation how to do it?

PS: Bootstrap colors seem to be warmer, cleaner and more exact so more users/customers could potentially like their color palette. See attachment.

[pdanpdan]

have you tried search in daisyui site?
https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme
https://daisyui.com/theme-generator/

[rackycz]

Thanks for the links, will check them. The generator was unknown to me.
My current solution is below.
PS: My goal was not to create my own custom theme. I am un-important person. I wish everyone had the theme at their fingertips.

    <!-- Tailwind CSS browser build + daisyUI -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <style>
        /*
          Bootstrap-like palette for daisyUI's light theme.
          These CSS variables are used by daisyUI components such as btn-primary,
          btn-success, alerts, badges, and other semantic color classes.
        */
        :root,
        [data-theme="light"] {
            color-scheme: light;
            --color-base-100: #ffffff;
            --color-base-200: #f8f9fa;
            --color-base-300: #dee2e6;
            --color-base-content: #212529;

            --color-primary: #0d6efd;
            --color-primary-content: #ffffff;
            --color-secondary: #6c757d;
            --color-secondary-content: #ffffff;
            --color-accent: #f8f9fa;
            --color-accent-content: #000000;
            --color-neutral: #212529;
            --color-neutral-content: #ffffff;
            --color-info: #0dcaf0;
            --color-info-content: #000000;
            --color-success: #198754;
            --color-success-content: #ffffff;
            --color-warning: #ffc107;
            --color-warning-content: #000000;
            --color-error: #dc3545;
            --color-error-content: #ffffff;

            --radius-selector: 0.375rem;
            --radius-field: 0.375rem;
            --radius-box: 0.5rem;
        }
    </style>