[Resolved] Some of my CSS variables won’t work

[emanharout]

Hi support team,

This is a strange issue I’m experiencing. I have a pallet of colors I refer to via CSS variables. When I use certain variables for certain elements, it won’t work. Note these same variables work elsewhere just fine. In my browser’s inspector, I also see it recognizes all the variables too.

If I change the element to another variable or another color entirely, it works, but the variable itself won’t. Here’s a few examples:

.entry-title a,
.entry-title a:visited {
  color: var(--brand-gray-14); /*14+ won't work while in dark mode on my Mac. Light mode works though */
}

/* View button in "ABOUT" section of website */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
  color: var(--brand-gray-2);
  background-color: var(--brand-color-8);
  box-shadow: 0px 2px 4px var(--shadow-0); /* won't recognize this color in light or dark mode */
}

[Tom]

Hi there,

I don’t believe the theme would interfere with something like this.

Looking at your site, I’m not sure I’m actually seeing the issue. Did you resolve it?

[emanharout]

The shadow issue is resolved but referring to gray colors numbered 14+ still isn’t. It’s a head scratcher. The entry-title being set to anything 14 or above won’t actually switch colors despite the browser recognizing the stored colors.

Edit: Added private information that may help with replication on your end.

Edit #2: It appears the variables are recognized on Chrome and not for Safari. Is there something special I need to do to get Safari to recognize all variables? I’ve purged my cache, disabled CDN, and it’s still no dice on Safari.

Edit #3: Regarding viewing inline code on Safari while on Dark mode on macOS: It appears even if I replace the variable with the hsl value—e.g. background-color: hsl(267, 81%, 83%)—for code {...} it still uses a gray color. Chrome works with both the variable and hsl value, Safari works with neither. So it doesn’t seem to be a css-variable issue.
Moreover, when I change the HSL value’s hue to 40 or 300, the color appears in Safari! If I do 260—270, it reverts back to gray.

[David]

Hi there,

you have this CSS for your <code> blocks – which is very specific and overriding your variable CSS:

<pre><code>code[class*="language-"], pre[class*="language-"] {
    color: #ccc;
    background: #282936;
    text-shadow: none;
    font-family: Menlo,PT Mono,Consolas,Monaco,andale mono,ubuntu mono,monospace;
    font-size: .8125rem;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

I can’t see where that CSS is coming from as the SG Optimizer has cached your CSS.

[emanharout]

Apologies, had it on for a second to test a potential solution. I’ve since turned off SG Optimizer so 100% of my plugins (save GP) are deactivated.

I also added !important to the CSS to see if it helped but somehow Safari still rejects the color I’m setting.

If there’s anything else I can do to help identify this issue let me know. It’s strange that Safari suddenly works anytime I set a manual hsl value where the hue isn’t in the 260-270 range.

[emanharout]

Added a video in private information demoing the issue (please see private information). Note this issue isn’t confined to <code> elements. I can’t get certain colors to work while in dark mode on my Mac in Safari on seemingly random elements, even if I forgo CSS variables. At this point I’m hoping I can get a simply hard coded hsl color to actually work as a baby step.

[emanharout]

Closing this out and creating a new thread as I think I’ve gotten more insight and the nature of the issue is a bit different than what I originally thought.

[David]

No problems – i have replied to your other topic.

[Author]

Posts