[Bug] Switch color broken

[NuktukDev]

Bug report

The switch background color was broken 4 days ago.

What I did

I used the switch.

What I expected to happen

It would take the default background color defined by tabler.

What happened

It shows a blank color.

What I've already tried to fix it

I fixed it already.

Is it a bug in the latest version of Backpack?

Yes.

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

Backpack, Laravel, PHP, DB version

Latest backpack, laravel 10, php 8.

When I run php artisan backpack:version the output is:

backpack/basset: 1.3.6
backpack/crud: 6.7.50
backpack/generators: v4.0.7
backpack/medialibrary-uploaders: 1.2.1
backpack/pro: 2.2.32
backpack/theme-tabler: 1.2.17

Additional Information

There is a class switch-{{ $field['color'] }} that doesn't make sense to me, I removed it.

Here's some more info that could be helpful in reproducing or debugging:

• Environment details (e.g., operating system, web server, browser): ??
• Relevant error logs or screenshots (if any): ??

Note: Issues that cannot be reproduced or lack necessary details to diagnose could be closed.

[backpack-ai-bot]

🚨 Bot is not sure about this answer. Please verify. 🚨

Thank you for reporting this issue with the switch background color in Backpack. Based on the information provided in the knowledge sources, I don't have specific details about this particular bug. However, I can provide some general guidance based on similar issues reported for Backpack.

It seems that you've encountered a visual bug related to the switch component in the Tabler theme for Backpack. These types of UI issues are sometimes related to CSS conflicts or missing style definitions.

You mentioned that you've already fixed the issue by removing a class switch-{{ $field['color'] }}. This approach of customizing the view or CSS is often a valid workaround for such issues.

For future reference, when encountering UI bugs in Backpack, especially with the Tabler theme, it's worth checking the following:

1. Ensure that all theme assets are loading correctly. As seen in a similar issue Github Issue #1007, sometimes theme files fail to load, causing visual glitches.

2. Check if the issue is specific to the dark mode or light mode. Some color-related bugs in Backpack have been reported to affect only one mode Github Issue #852.

3. Make sure you're using the latest versions of Backpack and its theme packages. Sometimes, these issues are fixed in newer releases.

Since you've already fixed the issue, it would be helpful to report this to the Backpack team, preferably with details on how you fixed it. This could help them improve the theme for future releases.

If you encounter similar issues in the future, you can try clearing your Laravel cache and recompiling assets:

php artisan config:clear
php artisan cache:clear
php artisan view:clear

Also, setting BASSET_DEV_MODE=true in your .env file can sometimes help with asset-related issues during development.

If the problem persists after updates and cache clearing, it's best to report it to the Backpack team with as much detail as possible, including screenshots and steps to reproduce the issue.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): [Bug] inconsistency look field Color
Github Issue (closed): [Bug] editable_switch
Github Issue (closed): [Bug] DataTable row colors are changed and a little broken now
Github Issue (closed): color_picker doesn't work
Github Issue (closed): [Bug] Error displayed for select, select2,...
Github Issue (closed): [Bug] Cancel button interface error
Github Issue (closed): [Bug] Upgrade BackPack v5 to v6
Github Issue (closed): [Bug] Noty CSS ?
Github Issue (closed): [Bug] Actions Dropdown changes back to line buttons after editable switch is toggled
Github Issue (closed): [Bug] Getting started not readable in dark mode
Github Issue (closed): [Bug] Can't see what you're typing (Dark theme, Filter feature, Select2 type)
Github Issue (closed): [Bug] Save Buttons without text-white class
Github Issue (closed): [Bug] Make Tabler the default theme again
Github Issue (closed): Impossible to create color_picker fields with different configuration
Github Issue (closed): [Bug] 419 PAGE EXPIRED when I try to login through 127.0.0.1:8000/admin/login

[NuktukDev]

#5757

no idea how to link this pull request to this issue, but here is my fix.

[jcastroa87]

Hello @NuktukDev

Can you please share a screenshot?, I check our switch in a new installation and our demo and is working as expected.

Which theme did you try?

Cheers.

[dawolf]

I noticed the same behaviour.
Switch looked ok, now after updating backpack/crud and pro

backpack/crud: 6.7.50
backpack/devtools: 3.1.3
backpack/editable-columns: 3.0.9
backpack/filemanager: 3.0.10
backpack/generators: v4.0.5
backpack/medialibrary-uploaders: 1.2.0
backpack/permissionmanager: 7.2.0
backpack/pro: 2.2.32

The switch is just invisible:

If you click and toggle it off it shows the outlines:

[jcastroa87]

Thank you both I found the issue, I will check @NuktukDev PR or try to fix it in a new one.

Thanks again.

Cheers.

[jcastroa87]

The PR is created here

Meanwhile, you can try it on your side to confirm this is fixed.

If everything is ok, will be merged on next release.

Let continue the conversation in the PR, i will close this issue now.

Cheers.