# Change colors on mobile

**URL:** <https://forum.ghost.org/t/change-colors-on-mobile/12108>\
**Category:** Themes\
**Created:** [February 18, 2020, 8:55pm UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108 "2020-02-18T20:55:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arthur\_Carter](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/arthur_carter/32/6417_2.png) [@Arthur\_Carter](https://forum.ghost.org/u/Arthur_Carter)\
**Post date:** [February 18, 2020, 8:55pm UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108/1 "2020-02-18T20:55:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [February 18, 2020, 10:03pm UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108/2 "2020-02-18T22:03:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Arthur\_Carter](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/arthur_carter/32/6417_2.png) [@Arthur\_Carter](https://forum.ghost.org/u/Arthur_Carter)\
**Post date:** [February 18, 2020, 10:23pm UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108/3 "2020-02-18T22:23:03Z")

</div>

Hi, I created a test website on DigitalOcean to test at: [http://casperblue.devops10.com/](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%));
}

```

.  
.  
.  
.

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [February 18, 2020, 11:31pm UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108/4 "2020-02-18T23:31:59Z")

</div>

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

> <https://github.com/TryGhost/Casper/blob/main/assets/css/global.css>

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

> **[How to install Ghost locally on Mac, PC or Linux](https://ghost.org/docs/install/local/)**
>
> A detailed local install guide for how to install the Ghost publishing platform on your computer running Mac, PC or Linux. Ideal for Ghost theme development.

---

<div class="post-metadata">

**Author:** ![Arthur\_Carter](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/arthur_carter/32/6417_2.png) [@Arthur\_Carter](https://forum.ghost.org/u/Arthur_Carter)\
**Post date:** [February 19, 2020, 12:21am UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108/5 "2020-02-19T00:21:12Z")

</div>

> [@Arthur\_Carter](#):
>
> prefers-color-scheme: dark

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

Thank you

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [February 19, 2020, 1:46am UTC](https://forum.ghost.org/t/change-colors-on-mobile/12108/6 "2020-02-19T01:46:56Z")

</div>

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](https://github.com/TryGhost/Casper/blob/master/gulpfile.js#L15)