Dark vs Light mode Logo Swap #4317

New Issue

OVERLORD · 2026-02-05T08:32:08+03:00

OVERLORD commented

2026-02-05 08:32:08 +03:00

Originally created by @ArkansasDev on GitHub (Nov 15, 2023).

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?

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

Originally created by @ArkansasDev on GitHub (Nov 15, 2023). ### 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">  <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;">  <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

OVERLORD added the 🔨 Feature Request 🖌️ View Customization labels 2026-02-05 08:32:08 +03:00

OVERLORD closed this issue

2026-02-05 08:32:14 +03:00

OVERLORD commented

2026-02-05 08:32:17 +03:00

@ArkansasDev commented on GitHub (Nov 15, 2023):

Thanks Dan

@ArkansasDev commented on GitHub (Nov 15, 2023): Thanks **Dan**

OVERLORD commented

2026-02-05 08:32:18 +03:00

@Man-in-Black commented on GitHub (Nov 16, 2023):

I've done it for a picture on the default.blade.php with the following code:
@if(setting()->getForCurrentUser('dark-mode-enabled')) <img src="data:image/jpeg;base64,{{ base64_encode(file_get_contents(theme_path('dark.JPG'))) }}" width=100%> @else <img src="data:image/jpeg;base64,{{ base64_encode(file_get_contents(theme_path('light.JPG'))) }}" width=100%> @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.

@Man-in-Black commented on GitHub (Nov 16, 2023): I've done it for a picture on the default.blade.php with the following code: ` @if(setting()->getForCurrentUser('dark-mode-enabled')) <img src="data:image/jpeg;base64,{{ base64_encode(file_get_contents(theme_path('dark.JPG'))) }}" width=100%> @else <img src="data:image/jpeg;base64,{{ base64_encode(file_get_contents(theme_path('light.JPG'))) }}" width=100%> @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.

OVERLORD commented

2026-02-05 08:32:22 +03:00

@ArkansasDev commented on GitHub (Nov 16, 2023):

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?

@ArkansasDev commented on GitHub (Nov 16, 2023): 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?

OVERLORD commented

2026-02-05 08:32:28 +03:00

@ssddanbrown commented on GitHub (Nov 17, 2023):

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 commented on GitHub (Nov 17, 2023): On the current version of BookStack, you can use the [visual theme system](https://github.com/BookStackApp/BookStack/blob/development/dev/docs/visual-theme-system.md), and within your theme folder just create a `layouts/parts/header-logo.blade.php` file with the following: ```blade.php <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`.

OVERLORD commented

2026-02-05 08:32:30 +03:00

@ssddanbrown commented on GitHub (Dec 20, 2023):

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.

@ssddanbrown commented on GitHub (Dec 20, 2023): 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.

OVERLORD referenced this issue

2026-02-05 10:29:49 +03:00

[PR #4317] [MERGED] Modify HttpFetchException flow to log the exception #6343

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4317