How to Force GitHub Actions to Light Theme Using Tampermonkey
Tags: javascript, githubactions, tampermonkey
Published: 2024-06-29 04:23:06

#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.

![GitHub Actions console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmj9yrnotcstgsjlju3e.png)

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.

![After GitHub Actions console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1j4m6o5ovh90xr4tv7g.png)


##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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogv48pujm20hbfj82img.png)


Create a new style by clicking on `+` button.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyelv3px6fmqf9gplaup.png)

Now, let's create the style.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn7c4mjifp0itc32847d.png)

Here's snippet.
```javascript
// ==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.
![Applying Tampermonkey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15u3kk1tamdiinfpvvbv.png)


#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.

![how to attach light green color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2ricgycmukvwzar97fk.png)

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.

```css
.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.

{% embed https://dev.to/masayoshi644/how-to-customize-slack-fonts-using-stylus-for-improved-readability-706 %}

Happy CI/CD running!