How to Force GitHub Actions to Light Theme Using Tampermonkey

Introduction

I'm not a fan of dark mode. Due to my astigmatism, the text appears blurry, and high-contrast themes are extremely straining on my eyes.

One of the painful is GitHub Actions console.

The text is a very bright white, and the font appears small and bold, making it very difficult to look at. Debugging or any prolonged work becomes unbearable as I can't stare at the screen for long periods.

Even after selecting the Light theme in Theme preferences, this issue wasn't resolved.
https://github.com/settings/appearance

To solve this, I decided to use Tampermonkey to force GitHub Actions pages to use the Light Theme. Here’s what the final result looks like.

What is Tampermonkey

Tampermonkey is a browser extension that allows you to run custom JavaScript on any website. In short, it's a user script.
https://www.tampermonkey.net/

It supports almost all browsers. As a Chrome user, I’ll show you how to set it up on Chrome.

Setting

Here's the downloaded URL: https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja

After downloading, launched the extension.

Create a new style by clicking on + button.

Now, let's create the style.

Here's snippet.

// ==UserScript==
// @name         Remove data-dark-theme attributes
// @namespace    http://tampermonkey.net/
// @version      2024-06-23
// @description  Remove data-dark-theme attributes from GitHub Actions console
// @author       masayoshi haruta
// @match        https://github.com/*/*/actions/runs/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to remove data-dark-theme attribute from all elements
    function removeDataDarkThemeAttributes() {
        // Get all elements with the data-dark-theme attribute
        var elements = document.querySelectorAll('[data-dark-theme]');

        // Loop through the elements and remove the attribute
        elements.forEach(function(element) {
            element.removeAttribute('data-dark-theme');
        });
    }

    // Run the function once the DOM is fully loaded
    document.addEventListener('DOMContentLoaded', removeDataDarkThemeAttributes);

    removeDataDarkThemeAttributes()
})();

Header

Fill in the properties in the header section. These fields are intuitive and easy to fill out. One key point is using @match with a regular expression to apply the user script to all GitHub Actions run pages, https://github.com/*/*/actions/runs/*

If you have any questions, please refer this. https://www.tampermonkey.net/documentation.php?locale=en

Script

The script is straightforward, removing the dark theme attribute from all elements after the DOM is fully loaded.

Finally, save the script with Command+S to complete.

When you access the page, you can confirm that Tampermonkey is applied.

Appendix

That concludes the Tampermonkey setup. However, I’d like to add a note about the green color seen in the screenshot. You might wonder how the green color is assigned and if white text becomes hard to read with the light theme.

I used Stylus to adjust the colors, and forcefully changing white text to black. While I think this isn’t the cleanest method, it’s effective.

.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
    background: #99ffcc 
}

.color-text-white {
    color: black  !important;
}

If you are new to Stylus, please refer to the following article. It describes the installation procedure and I guess it's useful.

How to Customize Slack Fonts Using Stylus for Improved Readability

Masayoshi Haruta ・ Jun 29

#stylus #css #slack

Happy CI/CD running!