Do not use --color-primary for hyperlinks and text buttons #1967

New Issue

OVERLORD · 2026-02-05T02:21:00+03:00

OVERLORD commented

2026-02-05 02:21:00 +03:00

Originally created by @Baptistou on GitHub (Dec 9, 2020).

Describe the feature you'd like
The light and dark themes are very beautiful. However, when I change the app color in Settings page, it affects negatively the UX of BookStack in one the two themes. Besides specific elements (hyperlinks and text buttons), other components are very well rendered.

If I choose a rather dark color, every hyperlinks are poorly visible in dark mode. On the contrary, if I choose a rather light color, every hyperlinks are poorly visible in light mode. Please, could it be possible to remove the CSS rule var(--color-primary) from these elements ?

I was able to identify these elements and to fix the problem with this following Custom CSS.

<style>
.dark-mode .card a, .dark-mode .activity-list a, .dark-mode .icon-list-item, .dark-mode .text-primary {
    color: #BBB !important;
}
</style>

Describe the benefits this feature would bring to BookStack users
Improve UX.

Additional context

The hyperlinks/buttons in the side bar are well rendered in light mode

But they are poorly visible in dark mode

The Custom CSS fixes the issue

Originally created by @Baptistou on GitHub (Dec 9, 2020). **Describe the feature you'd like** The light and dark themes are very beautiful. However, when I change the app color in *Settings* page, it affects negatively the UX of BookStack in one the two themes. Besides specific elements (hyperlinks and text buttons), other components are very well rendered. If I choose a rather dark color, every hyperlinks are poorly visible in dark mode. On the contrary, if I choose a rather light color, every hyperlinks are poorly visible in light mode. Please, could it be possible to remove the CSS rule ```var(--color-primary)``` from these elements ? I was able to identify these elements and to fix the problem with this following [Custom CSS](https://www.bookstackapp.com/docs/admin/visual-customisation/). ```html <style> .dark-mode .card a, .dark-mode .activity-list a, .dark-mode .icon-list-item, .dark-mode .text-primary { color: #BBB !important; } </style> ``` **Describe the benefits this feature would bring to BookStack users** Improve UX. **Additional context** 1. The hyperlinks/buttons in the side bar are well rendered in light mode ![image](https://user-images.githubusercontent.com/16428197/101641818-82132280-3a32-11eb-870b-cf6dabcff722.png) 2. But they are poorly visible in dark mode ![image](https://user-images.githubusercontent.com/16428197/101642034-cb637200-3a32-11eb-8d51-9e67430683fe.png) 3. The Custom CSS fixes the issue ![image](https://user-images.githubusercontent.com/16428197/101643151-1b8f0400-3a34-11eb-8974-746e9a48f347.png)

OVERLORD closed this issue

2026-02-05 02:21:03 +03:00

OVERLORD commented

2026-02-05 02:21:05 +03:00

@ssddanbrown commented on GitHub (Dec 10, 2020):

Thanks @Baptistou for the request.
I'm going to close this in favour of the existing issue #2314 since that issue has similar goals while offering an implementation idea that may more completely solve the core issue.

@ssddanbrown commented on GitHub (Dec 10, 2020): Thanks @Baptistou for the request. I'm going to close this in favour of the existing issue #2314 since that issue has similar goals while offering an implementation idea that may more completely solve the core issue.

OVERLORD commented

2026-02-05 02:21:07 +03:00

@Baptistou commented on GitHub (Dec 10, 2020):

Thanks @Baptistou for the request.
I'm going to close this in favour of the existing issue #2314 since that issue has similar goals while offering an implementation idea that may more completely solve the core issue.

I think they are two different features : the first is to provide two primary colors, one for light mode and one for dark mode, whereas the second is to remove the primary color from poorly visible hyperlinks while keeping the same color for the two modes. The idea here is that my organization is identified by a logo with a specific unique color that is applied to every apps, whatever the mode is.

@Baptistou commented on GitHub (Dec 10, 2020): > Thanks @Baptistou for the request. > I'm going to close this in favour of the existing issue #2314 since that issue has similar goals while offering an implementation idea that may more completely solve the core issue. I think they are two different features : the first is to provide two primary colors, one for light mode and one for dark mode, whereas the second is to remove the primary color from poorly visible hyperlinks while keeping the same color for the two modes. The idea here is that my organization is identified by a logo with a specific unique color that is applied to every apps, whatever the mode is.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1967