Dark themes with blue text bug

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