Tabler 'auth_layout' => 'illustration' & logo

[blondie63]

I'm using BKP6 and Tabler theme
I've set 'auth_layout' => 'illustration'
I'm using an svg logo and i need to have different logo file for dark & light mode
Do i need to override theme views or is there a better method ?

Thanks

[karandatwani92]

Hey @blondie63

Usually, we change the logo inside config/backpack/ui.php.

To change the logo via the client-side color mode switcher, I tried it this way:

1. Copy the switch_theme.blade.php file to override.

# create the custom directory if it's not already there
mkdir -p resources/views/vendor/backpack/theme-tabler

# copy the blade file inside the folder we created above
cp -i vendor/backpack/theme-tabler/resources/views/layouts/partials/switch_theme.blade.php resources/views/vendor/backpack/theme-tabler/layouts/partials/switch_theme.blade.php

2. Add the following script at the end of the file.

@foreach(backpack_theme_config('options.colorModes') as $mode => $icon)
@php
    $description = trans('backpack.theme-tabler::theme-tabler.color-mode-description', [
        'mode' => trans('backpack.theme-tabler::theme-tabler.color-mode-'.$mode),
    ]);
@endphp
<button
-    onclick="colorMode.switch();"
+    onclick="colorMode.switch();changeLogo();"
    class="btn-link text-secondary border-none decoration-none shadow-none nav-link d-none show-theme-{{ $mode }}"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    aria-label="{{ $description }}"
    data-bs-original-title="{{ $description }}">
    <i class="la {{ $icon }} fs-2 m-0"></i>
</button>
@endforeach

+@section('after_scripts')
+    <script>
+        function changeLogo(){
+            var logo = document.getElementsByClassName('project-logo');
+            // get theme mode
+            var themeMode = colorMode.get();
+            switch(themeMode){
+                case 'light':
+                    logo[0].src = "/assets/img/backpack_logo.svg";
+                    break;
+                case 'dark':
+                    logo[0].src = "/assets/img/backpack_logo2.svg";
+                    break;
+                default:
+                    logo[0].src = "/assets/img/backpack_logo.svg";
+            }
+        }
+        changeLogo();
+    </script>
+@endsection

For more customization, you can publish theme-tabler-config and config.

php artisan vendor:publish --tag="theme-tabler-config"

[blondie63]

Thanks so much !
Best regards

Mauro