Vibhav Gaur

Simple dark mode for Overcast on desktop

Overcast is the best podcast app out there. It sucks for Android users because its only available on iPhone, iPad, and Apple watch. But it has a web interface which runs on any browser. Seriously, its great, so check it out.

I like to have everything on my screen have a dark theme, I am not sure why everything doesn’t at least offer a dark theme. This is a quick post about how you can make the Overcast desktop website have a dark mode. Its a very simple CSS injection and I did it in Chrome, but it should be a fairly similar process for other browsers. You will need an extension for your browser that lets you inject some CSS or JavaScript when your browser loads a website — like Page Manipulator for Chrome. You can look up similar extensions for your browser.

Once you have a way of injecting some CSS into a webpage, simply inject the following CSS when you load the Overcast website:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

body{
    color: #fc7e0f;
    background-color: black;
}

.episodecell{
    color: white;
}

.feedcell{
    color: white;
}

.userdeletedepisode{
    color: white;
}

I just looked at the HTML for the Overcast website and made a note of the elements whose colors would need to be changed. The code above is simply changing the colors of the background to black and changing the text for all the important stuff to white — pick whatever colors you like, I like black and white. And I’ve used the same orange/pumpkin color for the headings in the body; looks pretty good imo. It would be good if Marco offered this from the website itself, but its really easy to do so its not a big deal at all.