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!