Dark vs Light mode Logo Swap

[ArkansasDev]

Describe the feature you'd like

Looking to easily swap out the logo for our bookstack based on which mode is enabled dark vs light I've tried implementing different methods none worked

<a href="https://docs.arkansas.dev" data-shortcut="home_view" class="logo">
    <!-- Light Theme Logo -->
    <img class="logo-image light-logo" src="https://docs.arkansas.dev/uploads/images/system/2023-11/ARK-Digital-Light.png" alt="Light Theme Logo" style="display: none;">

    <!-- Dark Theme Logo -->
    <img class="logo-image dark-logo" src="https://docs.arkansas.dev/uploads/images/system/2023-11/ARK-Digital-Dark.png" alt="Dark Theme Logo">
</a>
<style>
  .light-logo {
    display: none;
  }
  .dark-logo {
    display: block;
  }
</style>
<script>
  function toggleLogos() {
    var isDarkTheme = /* Your condition to detect dark theme */;
    document.querySelector('.light-logo').style.display = isDarkTheme ? 'none' : 'block';
    document.querySelector('.dark-logo').style.display = isDarkTheme ? 'block' : 'none';
  }

  // Run this function when the theme is switched
  // You might need to attach this to a theme toggle button or a similar trigger
  toggleLogos();
</script>

<?php if (/* condition to check if dark theme is active */) { ?>
    <img src="path/to/dark-logo.png" alt="Dark Logo">
<?php } else { ?>
    <img src="path/to/light-logo.png" alt="Light Logo">
<?php } ?>

<script>
  function updateLogo() {
    var logoImage = document.querySelector('.logo-image');
    var isDarkMode = document.body.classList.contains('dark-mode-class'); // Replace with the actual class BookStack uses

    if (isDarkMode) {
      logoImage.src = 'path/to/dark-logo.png';
    } else {
      logoImage.src = 'path/to/light-logo.png';
    }
  }

Describe the benefits this would bring to existing BookStack users

Visual appearance

Can the goal of this request already be achieved via other means?

Not sure

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

Under 3 months

Additional context

1 month

[ArkansasDev]

Thanks Dan

[Man-in-Black]

I've done it for a picture on the default.blade.php with the following code: ` @if(setting()->getForCurrentUser('dark-mode-enabled'))

@else

@endif `

it works fine so far, the image will change if I switch to dark-mode and vice-versa. But my changes are part of the visual theme system.

But you could also change the header.blade.php and apply the changes for the logo, this should also work fine.

[ArkansasDev]

I tried, this but with some issues when applying, I assume it has to do with something the way bookstack handles the default image any other clean suggestions?

[ssddanbrown]

On the current version of BookStack, you can use the visual theme system, and within your theme folder just create a layouts/parts/header-logo.blade.php file with the following:

<a href="{{ url('/') }}" data-shortcut="home_view" class="logo">
    @if(setting('app-logo', '') !== 'none')
        @php
            $isDark = setting()->getForCurrentUser('dark-mode-enabled');
            $logo = setting('app-logo', '');
            if ($isDark && $logo) {
                $logo = str_replace('light', 'dark', $logo);
            }
        @endphp
        <img class="logo-image"
             src="{{ !$logo ? url('/logo.png') : url($logo) }}"
             alt="Logo">
    @endif
    @if (setting('app-name-header'))
        <span class="logo-text">{{ setting('app-name') }}</span>
    @endif
</a>

Then upload an app logo with light in the image name somewhere (in lower case), then manually place a dark variant in the same upload location, with light replaced with dark.

[ssddanbrown]

Since a couple of options have been provided here, with no further follow-up since the last, I'll go ahead and close this off.