Change colors on mobile

Themes
1

Hi, I changed the colors on desktop display for Casper Theme, but when I look at the site on a mobile device it still is the “original” dark colors.

Q: What is controlling colors used on mobile displays? Can someone point me in the right direction please…

Thank you in advance

2

Hey @Arthur_Carter, do you have a link to the site so we can debug it? :slight_smile:

3

Hi, I created a test website on DigitalOcean to test at: http://casperblue.devops10.com/
The purpose was to change the Casper Theme to a Dark Blue color using Code Injection before I made the changes permanent in the source “screen.css” code.
I may have found the issue: Dark mode using @media tag and rewrites a lot of colors…Also, line 2834 does not seem right? comment below…

/*-------------- 12. Dark Mode ------------ */
@media (prefers-color-scheme: dark) {
body {
color: rgba(255, 255, 255, 0.75);
background: var(–darkmode);
}

img {
    opacity: 0.9;
}

.site-header-background:before {
    background: rgba(0,0,0,0.6);
}

  {
    background: var(--darkmode);  //line 2834 does not seem right? whats being defined here?
}

.post-card,
.post-card:hover {
    border-bottom-color: color(var(--darkmode) l(+8%));
}

.
.
.
.

4

The theme colors for Can be found in the global.css file, see here on GitHub:

I think you’re better off doing more advanced theme development locally. We’ve got some documentation here on how to develop themes locally:

5

Understood, just one last thing, what is the “l” referring to? l(+2%)
–darkmode: color(var(–darkgrey) l(+2%));

Thank you

6

It’s a lightness adjustment for the current color. 0% means black and 100% means white and it’s making current darkgrey color slightly darker. Then it’s used with postcss-color-function plugin to generate the color. Casper/gulpfile.js at main · TryGhost/Casper · GitHub

2 Likes