This content originally appeared on DEV Community and was authored by Masayoshi Haruta
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.
Happy CI/CD running!
This content originally appeared on DEV Community and was authored by Masayoshi Haruta
Masayoshi Haruta | Sciencx (2024-06-29T04:23:06+00:00) How to Force GitHub Actions to Light Theme Using Tampermonkey. Retrieved from https://www.scien.cx/2024/06/29/how-to-force-github-actions-to-light-theme-using-tampermonkey/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.