Dynamic color palette

[valentinomariotto]

Hi, thank you for this very helpful and useful package. This is a request for advice, which could also develop into a feature request.

I have an app with multiple subdomains, each one of which should be styled differently. Following the advice found on other issues here, I was thinking of booting different Adminlte config files depending on the domain name. But the color palette of bootstrap is limited, especially for items such as buttons: we have btn-primary or btn-danger or btn-outline-info classes, but we cannot use a btn-cyan class.

My question is, what would be the best way to dynamically change the Bootstrap color palette, WITHOUT RECOMPILING BS?

I'm considering using this BS extension, which allows the use of classes such as btn-teal https://github.com/robert1233/BootstrapColorsExtended

But I was wondering if the objective could be achieved more elegantly through some sass magic (I'm not familiar with that). In that case, could it be integrated into Larave-Adminlte and make the color set up configurable?

[dfsmania]

Hi @valentinomariotto , your best option here will be to add (or create your own) bootstrap extensions using the plugins configuration.

Take into consideration that this package uses the ColorlibHQ/AdminLTE, it just offers an easy integration on the Laravel Framework. You may find a good explanation about how this packages uses the recently mentioned one here.

After reading that explanation, you will note that another option may be to customize and rebuild your own version of the AdminLTE package (with a suitable color palette for your case) and then replace the distribution files that are installed by this package by your own customization.

Another tip that may help you, is that btn-teal do not exists on Bootstrap 4, but you can play with bg-teal on a button, which is added by the AdminLTE package. You can check the available set of AdminLTE colors here

[valentinomariotto]

Grazie mille Diego! I tried to put this in a middleware

        $accent = config('custom.accent_colors.' .$subdomain); //dd($accent);  //this array contains standard class colors "primary", "indigo", "teal"
        config([
            'adminlte.usermenu_header_class'    => 'bg-' .$accent,
            'adminlte.classes_auth_card'        => 'card-outline card-' .$accent,
            'adminlte.classes_auth_btn'         => 'btn-flat btn-' .$accent,
            'adminlte.classes_sidebar'          => 'elevation-4 sidebar-dark-' .$accent,
            'adminlte.classes_topnav'           => 'navbar-white navbar-light',
            'adminlte.accent'                   => $accent, // additional config item
        ]);

and then to reference config('adminlte.accent')wherever possible, in place of primary: <button class="btn bg-{{config('adminlte.accent')}}">click me</button>

There are still a number of elements which display the primary color (paginator, outlined buttons - which I use a lot, checkboxes and radios...). So this is not a viable solution for me.

Using the BS extension wouldn't solve the problem either. I think I will really have to change the color of the "primary" color and make a different theme (a different adminlte.css) for each subdomain.

I see that, once I understand how to compile sass, recompiling BS4 to make different themes should be quite straightforward. But the adminlte.css already is a compiled BS4 theme, correct? I think that issue #502 might hold the solution.. I'll have to figure out how to work with mix, sass, and specifically the adminlte3 sass file. I'll get back to this with an update, eventually

Cheers

[dfsmania]

Yeah, probably the issue #502 may be the way to follow, since @REJack is a maintainer of the AdminLTE package. Maybe he can give you a better insight on how to proceed with this work... I have never had the requirement to touch the color palette, so I'm not sure how to proceed, but different compilations of the AdminLTE distribution files may be the way to follow.

[valentinomariotto]

this is my solution https://stackoverflow.com/questions/75761294/how-i-created-themes-for-adminlte-3-bootstrap-4-for-a-laravel-app-using-vite

These are the relevant changes to this package:

// config/adminlte.php
'enabled_vite' => true,

//resources/views/vendor/adminlte/master.blade.php
    {{-- Base Stylesheets --}}
    @if(config('adminlte.enabled_vite'))
        @vite(['resources/sass/'.request()->subdomain.'.scss', 'resources/js/app.js'])
    @elseif(config('adminlte.enabled_laravel_mix'))
        <link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
    @else
        {{--<link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">--}}

        <link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">

        @if(config('adminlte.google_fonts.allowed', true))
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
        @endif

        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    @endif

<!-- then -->
    {{-- Base Scripts --}}
    @if(!config('adminlte.enabled_laravel_mix') && !config('adminlte.enabled_vite'))
        <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
        <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('vendor/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
        <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
    @elseif(config('adminlte.enabled_laravel_mix'))
        <script src="{{ mix(config('adminlte.laravel_mix_js_path', 'js/app.js')) }}"></script>
    @endif

[dfsmania]

@valentinomariotto Thanks for sharing it!