Github Actions Logs in Light Mode Looks Like Dark Mode

[fw-aaron]

Select Topic Area

Bug

Body

https://github.com/orgs/community/discussions/22208 shows the basic state of the situation. Using any light mode theme, the logs have a dark background and light text which is antithetical to light mode. When I click "view raw logs", the browser shows a light background and dark text which is better, but it would be nice if I could see them properly without having to resort to raw logs.

[ghostinhershell]

Hi there @fw-aaron,

Thanks so much for reaching out about this. I see that this is an older conversation, so I'll follow-up with the team to check on the status of this particular request.

[cehfisher]

Hi @fw-aaron - I believe this color contrast issue was resolved. Please review this comment from another issue that is a duplicate. Thanks! (cc @queenofcorgis)

[fw-aaron]

Thank you for contacting me back! The issue is not resolved as the light mode is still ignored in the "main" area of Microsoft Github Actions window. See this image:

The red arrows point to the area I'm talking about. Maybe I was unclear in the original comment, but hopefully this image clears things up. The text in that area (what I might call the "main" area of this page) is "white on black" which would be appropriate for "dark mode", but doesn't match a "light mode" them. I can't find any way to make that black box match its surroundings.

[cehfisher]

Thank you @fw-aaron for letting us know that this is a different issue than the one that was resolved. I will follow-up internally with the accessibility team on next steps. We really appreciate the time you took to give us feedback!

[sitase]

Month and a half later, do you have any feedback from the a11y team?

[cehfisher]

Hello @sitase - the issue has been reported internally and work is in progress. Theme changes can take some time. Thank you for your patience.

[fw-aaron]

...work is in progress. Theme changes can take some time.

That's great! Is there a concrete plan already? Is light mode going to keep the light background all over the page? Is dark mode going to have a dark background all over the page? Maybe some other solution I can't currently imagine? Thanks a ton!

[lakesare]

@cehfisher, I'd like to note that this is not merely a UI issue, this is an accessibility issue.

I have a hard time actually seeing anything in the github actions pane because it's white-on-black text.
I have to copy&paste results of the action log to be able to read it.

[pascal-hofmann]

Hi,
I also have the same issue. My eyes have a hard time adjusting to the mixed light/dark themed page and in general I have issues reading things in dark mode.

It would be great to get this fixed.

[zlobober]

Hi,
Recently I started using light themes because of deterioration of vision, and the current state of the action page in the light scheme is really annoying. Having a mixture of massive amount of dark-themed information on a light-themed page is even worse than either of consistent dark and light themes.
I'd highly appreciate if this issue was addressed soon.

[fw-aaron]

My situation is different. I love "dark" theme, however lots of products and web pages don't support a dark theme, and of those that do, 1) it takes some time to set it up on each computer I use or create, and 2) it often works imperfectly. Nearly everything supports light theme, so I invert the colors on my monitor to make sure everything is good. I can change the inversion with a key press so I can see pictures and videos (although I'm getting better at seeing them inverted without the need to un-invert ^_^). Obviously having a page that is half light theme and half dark theme breaks everyone's preference.

[noah56]

This has bothered me enough that I've found a solution for myself until this gets actually fixed by Github.
I'm using Arc browser, which has a boost feature to allow users to modify styling of webpages with CSS and JS. I created a boost with the following JS:

document.addEventListener('DOMContentLoaded', function() {
    const element = document.querySelector('#logs');
    if (element) {
        element.setAttribute('data-color-mode', 'light');
    }
});

A message to the GitHub devs: Please allow the data-color-mode of logs to respect the user's light/dark mode preferences.

For Chrome/Firefox users, I'm sure there's a way to run JS on page load, perhaps with an extension.
See screenshot for new styling. Quite nice IMO:

[lakesare]

Oh that's quite exceptional. I expected this would warrant a ton of css changes instead of a simple toggle (this toggle does work for me). Thank you for looking into a fix!

[limitedAtonement]

I really should write my own browser extension that is sort of a catch-all for the various annoyances of sites with which I interact. @noah56 I owe you a beer or two.

[jvincent-siplay]

Adding that script to Greasemonkey in Firefox works great, thank you!!

I also added this custom CSS (using the Stylus extension) to fix the white text on light grey (visible in that screenshot above the line "succeeded 10 hours ago"):

#logs[data-color-mode="light"] .color-text-white {
    color: var(--fgColor-default) !important;
}

[kobenguyent]

another approach is using chrome devtools snippets

// Select the target element
const logsElement = document.getElementById("logs");

// Check if the element exists
if (logsElement) {
    // Change `data-color-mode` to 'light'
    logsElement.setAttribute("data-color-mode", "light");

    // Optional: Change any other styles or attributes if necessary
    logsElement.style.backgroundColor = "#ffffff"; // Set a light background color
    logsElement.style.color = "#000000"; // Set a dark text color
    
    console.log("Color mode changed to light.");
} else {
    console.error("Element with id 'logs' not found.");
}