[Bug] "switch" field 'color' option is not working in theme-tabler

[kiddtang]

Bug report

What I did

try to use "switch" field

[
    'name' => 'enabled',
    'label' => 'Enabled',
    'type' => 'switch',
    'default' => true,
    'color'    => '#00ff00',
],

What I expected to happen

it should be in color '#00ff00',

What happened

<label class="form-switch switch switch-sm switch-label switch-pill switch-#00ff00 mb-0" style="--bg-color: #00ff00;">
            <input type="hidden" name="enabled" value="1">
            <input type="checkbox" data-init-function="bpFieldInitSwitch" checked="true" class="switch-input form-check-input" id="switch_enabled_770978383386580500" data-initialized="true">
            <span class="switch-slider" data-checked="" data-unchecked="">
            </span>
        </label>

the style style="--bg-color: #00ff00;" is in the field DOM but not reflected correctly.

What I've already tried to fix it

Override the styles

.form-check-input:checked {
  background-color: var(--bg-color, var(--tblr-primary)) !important;
}

but this only work if the color is defined in hex, not string 'primary'.

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there?
Yes

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:
backpack/basset: 1.3.6
backpack/crud: 6.7.43
backpack/filemanager: 3.0.10
backpack/generators: v4.0.7
backpack/permissionmanager: 7.2.1
backpack/pro: 2.2.29
backpack/settings: 3.1.1
backpack/theme-tabler: 1.2.15

[karandatwani92]

Hey @pxpm

The attribute color works only in coreUi-v2 and not in coreUi-v4 or Tabler.

---

Hey @kiddtang Thanks for reporting the issue.

How are you? I'm excited to see your upcoming articles and contributions. Thanks Man 🙋‍♂️

[kiddtang]

Hey @pxpm

The attribute color works only in coreUi-v2 and not in coreUi-v4 or Tabler.

Hey @kiddtang Thanks for reporting the issue.

How are you? I'm excited to see your upcoming articles and contributions. Thanks Man 🙋‍♂️

@karandatwani92 busy building new application with backpack v6 and come across this issue... :-)

[pxpm]

Thanks @kiddtang thanks for the report.
I've just merged #5736, I will tag a new version with the fixes later today 👍

Cheers

[kiddtang]

@karandatwani92 just found out

    'onLabel' => '✓',
    'offLabel' => '✕',

these are not working for theme-tabler too
Only coreui-v2 handling data-checked & data-unchecked?

<span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>

Do you want to just update the documentation with these compatibility notes, or should it be fixed for other themes as well?

[pxpm]

Hey @kiddtang just released fixes versions for themes and crud.
Please let me know if it works for you 👍

[kiddtang]

@pxpm oh yeah... i didn't notice you fixed the on/off label too...
it is working perfectly!

but i found there is some "cosmetic" offset after updates

here is what i try to align by myself

.form-switch.switch {
  width: 3em;
  height: auto;
}

.switch-input.form-check-input {
  width: 2.6em;
  height: 1.125rem;
}

thanks again.

[pxpm]

Thanks @kiddtang fixed in theme-tabler 1.2.17 👍

Cheers