Changing the color on the flip clock screensaver, Fliqlo

I'm a fan of the flip clock screensaver, Fliqlo. I installed it back on October 9th 2016 after randomly seeing it on Pinterest. The photo which inspired me could've passed as a stock photo. It showcased a zen-like, minimalist computer desk. On it, an iMac displaying the flip clock. It took a bit of time Googling to finally find the website. Since then, it has been the only screensaver I use on my MacBook Pro.

Over the past two years of using it, my only critism is that the white letters give off too much light at night. My computer desk resides in my bedroom. I like being able to glance at my monitor to see the time if I happen to wake up in the middle of the night. The exuberant bightness compelled me to find a way to change it.

Being a Programmer, I was already familiar with how most Mac apps work. The app file is really a compressed directory, referred to as a package. Inside the package, I'd be able to sniff out any app resources, such as an html file and a corresponding css file. Files I could edit. It turns out that's exactally how Fliqlo is arranged.

Here's what I did:

Find Fliqlo.saver

I found where the screensaver lives. This is pretty easy to accomplish by doing a Finder search starting at Machintosh HD and searching for kind: MacOS Preference Screen Saver.

All screensavers live in /Library/Screen Savers/ on the Mac.

Show Package Contents

Right-click on the Filqlo.saver file and select the Show Package Contents menu item.

Find and Edit the CSS file

The CSS file is found in the Resources directory. Fullpath: /Library/Screen Savers/Fliqlo.saver/Contents/Resources/htdocs/fliqlo.min.css

Unminify the CSS

Since the CSS is minified, I had to expand it. In Sumblime Text it's pretty easy using Tools ▸ HTML/CSS/JS Prettify ▸ Prettify Code. Atom also has the Atom-Beautify plugin.

Code change

I simply change the .flip color value from white with 71.1% alpha

color: rgba(255, 255, 255, .711);

To red with 71.1% alpha

color: rgba(255, 0, 0, .711);

I could have also made the alpha lower (more transparent) which would dim the color even more.

Here's the full .flip definition:

.flip {
    width: 600px;
    height: 297px;
    box-sizing: content-box;
    color: rgba(255, 0, 0, .711);
    -webkit-transform: rotateX(0);
    -webkit-filter: brightness(100%);
    -webkit-animation-duration: .33s;
    -webkit-animation-timing-function: linear;
    -moz-transform: rotateX(0);
    -moz-filter: brightness(100%);
    -moz-animation-duration: .33s;
    -moz-animation-timing-function: linear;
    animation-duration: .33s;
    animation-timing-function: linear
}

Save and done

Save the modified CSS file and you're done!

Why red?

Many years ago I happened to read why red lights are used in submarines. It's the same reasoning. See also: Purkinje effect: Use of red lights