Customize Default Theme Tabler Colors

[mariovillani]

Hello,
what is the cleanest way to customize default colors defined for Theme Tabler? File is this one:

https://github.com/Laravel-Backpack/theme-tabler/blob/main/resources/assets/css/colors.css

Is creating a new theme the correct way, following the guide: https://backpackforlaravel.com/docs/6.x/add-ons-tutorial-how-to-create-a-theme?
I was looking for a less invasive solution. Thank you in advance!

[karandatwani92]

Hey @mariovillani

Steps

1. Publish the theme config php artisan vendor:publish --tag="theme-tabler-config"
2. Alter styles attribute of config/backpack/theme-tabler.php

/**
     * Here you can easily load your own extra css styles.
     * Note: if you want to customize the style to create your own custom skin colors:
     *   - make a copy of the file "vendor/backpack/theme-tabler/resources/assets/css/colors.css" into your project
     *   - adjust colors variables as you wish
     *   - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css')," with the path to the file created above
     *   - boom!
     */
    'styles' => [
        base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
        base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
    ],

[blondie63]

Hi @karandatwani92 Is it better to copy color.css to /resources/asset/css or public/assets/css ?

[mariovillani]

@karandatwani92 thanks for the answer. i've copied the two files under /resources/css and cleaned up the file contents (i like the uncustomized Tabler theme version) so to have a native theme.

When testing in local environment, CSS files get replaced by the blank ones i've chosen.
When in production environment, CSS files are the vendor ones/default ones.

Am i doing something wrong? I've also updated basset cache using basset:clear, basset:cache, optimize and optimize:clear but does not work.

[mariovillani]

@karandatwani92 maybe i'm experiencing some related to Laravel-Backpack/basset#103? Can't understand what is going on.

[pxpm]

Is it possible that you have the configs cached in production ?
Do a php artisan optimize:clear before doing the php artisan basset:clear && php artisan basset:check

Cheers

[karandatwani92]

Hey @mariovillani

I tested it on production; it is working for me.
One difference is in my steps -
I just cleared styles, as you wanted to remove customizations:

'styles' => [
],

[mariovillani]

@karandatwani92 Nevermind, i've manually deleted basset generated assets and refreshed the folder, relinking again the storage and thus solving the issue. Seems like basset:fresh command is not working for me.