Theme css overides toolbar link colours

Created on 8 August 2023, 11 months ago
Updated 10 August 2023, 11 months ago

Problem/Motivation

I've just set my link colour to white in my theme CSS, and now my admin tool bar is illegible - the text has all become white on a pale background. I can't think of any good reason to have theme CSS affecting the toolbar appearance. I'm currently working in Drupal 10.

🐛 Bug report
Status

Needs review

Version

3.4

Component

User interface

Created by

🇨🇦Canada OMD

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @OMD
  • 🇮🇳India swatidhurandhar

    Hi @OMD
    Can you provide more information on your theme and what css you wrote for changing link colours?
    Any css written in theme is globally applied, so if you have applied css in anchor tag than it might be overriding admin_toolbar anchor css.
    Thanks

  • 🇨🇦Canada OMD

    Just a basic link style, nothing fancy:

    a:link {
    text-decoration: none;
    color: white;
    }
    Shouldn't this module have it very own high specificity styles that are not affected by basic link styles as in above?

  • Status changed to Needs review 11 months ago
  • 🇮🇳India swatidhurandhar

    @OMD I was only able reproduce this issue for 1 admin link in D10 and tried debugging it. The stylings of admin_toolbar anchor are coming from core toolbar module, the css which you have added is overriding those. You have added a:link which applies styling for unvisited link and gets greater weightage( please refer screenshot). To resolve it, it is better to add style as below:
    a {
    text-decoration: none;
    color: white;
    }

    OR

    If you can not change it, then in your theme add below styling as well:
    .toolbar-tray a:link {
    color: #565656;
    }
    Thanks

  • 🇨🇦Canada OMD

    The toolbar.theme.css from Claro is the what is currently seems to be theming the admin toolbar links, so even compensating for that in my theme CSS which I've done, also icon width for the

  • is also being adversely affected, shown in this screen snap: https://www.dropbox.com/scl/fi/3emqee11rptchqhu5yit6/Screen-Shot-2023-08...

    Shouldn't this module's own CSS be more specific so it is not so easily and adversely overridden by the admin theme's CSS or the custom theme's CSS?

    I know I can fix it in my theme's styles but wouldn't it be more efficient for the module to come with a more robust CSS to start with, so every user who uses Claro admin theme, or a light link colour in their custom theme doesn't have to write CSS to compensate?

Production build 0.69.0 2024