Dark themes with blue text bug

Yes, if you want to.
I just made with White Color (#ededed) because it's easier to work with all themes/colors.

1 Like

Okay, I tried it and for the App grid it works. But the Quick Settings, Calendar, the Icon Marker at the Taskbar and the Button on the Window when You turn off the Machine does still have this Issue.

Bildschirmfoto vom 2024-10-22 16-38-29

Any progress on fixing the blue accent color Ponce-De-Leon showed in the last reply?

I found some kind of Workaround ... it isn't really ideal but works for me:

1 Like

Thank you, but I think I will skip on any GDM themes, I don't wanna break something important.

What I wanted was a more consistent theme experience, so I installed adw gtk3 for older applications, and newer ones use GTK4 anyways. Problem was the shell theme - the closest one to classic Libadwaita was ZorinGrey, but even that wasn't 100%. I found an extension called Custom Accent Colors that fixes this issue - gives me the classic Gnome shell theme and 9 accent colors. The CSS solution posted above worked like a charm for a lot of text and icons that were dark blue and unreadable - now they are white:

But as you can see, the highlighted day still has that blue gradient (my accent color is green at the moment), which doesn't bother me currently because it works well with green.

I hope this can be fixed eventually, but I would like the ability to include this gradient and change colors as I like, it looks really pretty!

1 Like

I managed to solve it somehow. In the custom/third-party gnome.shell.css, add the following in the end (included the fix from above too):

/* ---------- Add these lines to fix shell themes in Zorin OS ---------- */
/* ---------- It must be added in the end of the gnome-shell file (/home/user/.themes/my-theme-name/gnome-shell/gnome-shell.css) ---------- */
/* ---------- It will fix the blue font color in some dark custom themes and blue gradient issues in quick settings and elsewhere ---------- */

/* ---------- You must also add some SVG files inside your custom theme folder (/home/user/.themes/my-theme-name/gnome-shell/assets/) ---------- */
/* ---------- activities.svg and activities-dark.svg ---------- */

/* ---------- Start ---------- */
.message .message-body { color: #ededed;}

.datemenu-today-button .date-label {color: #ededed;font-weight: 700;}

.media-message-cover-icon.fallback {color: #ededed;background-color: rgba(189, 230, 251, 0.075);border: 1px solid transparent;border-radius: 8px;padding: 14px;}

.app-well-app .overview-icon, .grid-search-result .overview-icon {color: #ededed;}

.page-indicator .page-indicator-icon {background-color: #ededed;}

.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon {background-color: rgba(189, 230, 251, 0.075);}

.page-navigation-arrow>StIcon {background-color: whitesmoke;}

.message .message-secondary-bin>.event-time {color: rgba(189, 230, 251, 0.5);}

#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked, .icon-button:checked { transition-duration: 150ms; color: white; background-gradient-direction: none; box-shadow: none; }

#LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked, .flat.button:checked, .flat.icon-button:checked { transition-duration: 150ms; color: white; background-gradient-direction: none; box-shadow: none; }

.modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { transition-duration: 150ms; color: white; background-gradient-direction: none; box-shadow: none; }

.app-folder-dialog .folder-name-container .edit-folder-button:checked { transition-duration: 150ms; color: white; background-gradient-direction: none; box-shadow: none; }

.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { background-gradient-start: rgba(18, 51, 84, 0.05); background-gradient-end: transparent; background-gradient-direction: none; border-radius: 24px 0px 0px 24px; }

.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(18, 51, 84, 0.05); background-gradient-direction: none; border-radius: 0px 24px 24px 0px; }

 /*Screenshot tool*/
.screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { transition-duration: 150ms; color: white; background-gradient-direction: none; box-shadow: none; }
/* ---------- End of Screenshot tool ---------- */

/*Calendar*/
.calendar .calendar-today { font-weight: 800; color: white !important; background-gradient-direction: none; box-shadow: 0 2px 4px rgba(34, 197, 253, 0.2); }

.calendar .calendar-today:active, .calendar .calendar-today:selected { background-gradient-direction: none; color: inherit; box-shadow: 0 2px 4px rgba(34, 197, 253, 0.2); }
/* ---------- End of Calendar ---------- */

/*Quick settings*/
.quick-toggle:checked { transition-duration: 150ms; color: white; background-gradient-direction: none; box-shadow: none; }

.quick-toggle-menu .header .icon.active { color: white; background-gradient-direction: none; }
/* ---------- End of Quick settings ---------- */
/* ---------- End ---------- */

As for the end session button (when you log out or shutdown), you can modify the following css and add it to gnome-shell.css as well:

.end-session-dialog .modal-dialog-linked-button:last-child { color: white; background-color: #fa4444; background-gradient-direction: none; background-gradient-start: #ff2626; background-gradient-end: #ff5966; font-weight: bold !important; }

#dash .notification-badge, #dashtodockContainer .notification-badge, #dashtopanelScrollview .notification-badge, #zorintaskbarScrollview .notification-badge { color: white; background-color: #fa4444; background-gradient-direction: none; background-gradient-start: #ff2626; background-gradient-end: #ff5966; box-shadow: 0 2px 4px 0 rgba(250, 68, 68, 0.2); border-radius: 1em; font-weight: bold; text-align: center; }

I did not "fix" the end session buttons, but it can be done by setting background-gradient-direction to 'none' and then choosing a color you want the button to have.

2 Likes