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;
}

[OothecaPickle]

here's a userscript that changes the theme of the log area and the color of the job title text

// ==UserScript==
// @name         GitHub Actions Log White Theme Fix
// @version      1.0
// @description  fix color of Actions log when using white theme
// @match        https://github.com/*/*/actions/runs/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    const element = document.querySelector('#logs')
    if (element) {
        element.setAttribute('data-color-mode', 'light')
    }
    GM_addStyle ( `
        #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.");
}

[phalicz-apptio]

GitHub team could you please officially fix it? Given the fix suggestions mentioned above it looks like a low hanging fruit.

It's a real accessibility issue for people who have trouble seeing white text on black background. Not everyone can install browser extensions to workaround it.

[cehfisher]

Hey @phalicz-apptio – the internal team is aware of this issue, but it looks like it’s a bit more complex to resolve. We’ll share updates as soon as we have more info. Thanks for your continued patience!

[timh1975]

I would find having light mode for GItHub actions highly beneficial as well. I've created a GitHub action as part of a undergaduate software engineering degree. Copying snippets in dark mode to a report makes it much harder to read.

[pfox-hpc]

Another 'me too' here. Please fix, I can't stand dark mode, very hard to read. Thanks!

[noah56]

Still not fixed... and I've stopped using Arc browser, so I went ahead and created a Chrome extension to solve this problem if anyone prefers a one click install solution. I've included the fixes mentioned above, setting data-color-mode to light and setting .color-text-white to --fgColor-default. Just modified a bit to work as a chrome extension.

It runs on the url pattern https://github.com/*/*/actions/runs/* on document_idle

Chrome web store link

Github repo

[cehfisher]

Hi @fw-aaron and everyone commenting/following this post – good news! The Actions log viewer now correctly respects the user's selected theme preference across all GitHub themes, including those designed to support users with color deficiency issues 🎉

Please help us retest this update by clearing your browser cache and giving it another try. If you’re still encountering issues, feel free to drop a comment here. Thanks again for your patience!

[leemeador]

I don't want dark everywhere. I want the workflow logs to have the dark background.

[cehfisher]

Thanks for the feedback, @peterpakos! We've shared your and @sebthom’s comments with the team that implemented the fix. If either of you could open a new discussion thread, that would be helpful, since this one will close once the original poster confirms the issue is resolved. Since this report dates back to 2023, starting a new thread helps keep everything on track and ensures feedback stays organized.

[limitedAtonement]

Looks good, thank you.

[fw-aaron]

Great. Thank you, Carrie. This looks right to me.

To those who don't like the more homogenous coloring scheme, you can set xrandr-invert-colors to a shortcut key in your window manager, or if you use Microsoft Windows, try https://zerowidthjoiner.net/negativescreen.

I can't imagine wanting some text to be white on black and some black on white in the same screen...either way, you'll have some portion of the screen scorching into your skull and the other part of your screen understated. If everything on the screen is either light or dark background, you can invert it to what you like using the tools mentioned above. Good luck out there!

[sebthom]

For anyone interested I created a CSS patch that can be applied with Stylus to revert this change. Might not be perfect but gets the job done for me https://gist.github.com/sebthom/2564ef486a913ed1b60e9dfb6ec6568f

[Callek]

Just wanted to come here and say "I see this fixed" -- however I'm a user with the opposite preference.

• I prefer light mode in general
• I really prefer my Console-Like logs in dark mode

This breaks my ease-of-reading for several CLI tools with color output in my github logs, since those tools expect a black (or at least dark) background.

I would enjoy a separate configuration option to allow me to keep all of github as light mode, but force dark mode for this.

Thank you for the consideration.

[cehfisher]

Thanks @Callek for sharing your perspective! As mentioned above, if you’re able to open a new discussion thread, that would be really helpful as this one will close once the original poster confirms the original issue is resolved. Starting a new thread helps us preserve feedback that might otherwise be lost. We'll also make sure to add your input to the team’s feedback on this bug fix!

[fw-aaron]

...CLI tools with color output...

That's an important consideration! If your Actions output has light colors, you can use dark mode to make the background dark, then the light-colored text will be easy to read again.

[Callek]

...CLI tools with color output...

That's an important consideration! If your Actions output has light colors, you can use dark mode to make the background dark, then the light-colored text will be easy to read again.

That is certainly an option, but flies in the face of my general preference for websites and code to be in a light background

[sebthom]

@Callek I am totally with you. As a quick workaround I am now applying this CSS using stylus which mostly reverts the change:

#logs * {
  color: white;
  background-color: #24292E;
}
#logs svg.octicon-check-circle-fill {
  fill: #1A7F37 !important;
}
#logs svg.octicon-x-circle-fill {
  fill: #D1242F !important;
}
#logs .log-line-warning, #logs .log-line-warning *  {
  background-color:#44402A;
}
#logs .color-fg-attention {
  color: #FFEA7F !important;
}
#logs .log-line-error, #logs .log-line-error *  {
  background-color:#3D282E;
}

I also created a gist for it https://gist.github.com/sebthom/2564ef486a913ed1b60e9dfb6ec6568f

[limitedAtonement]

... all of github as light mode, but force dark mode for this.

...my general preference for websites and code to be in a light background

I'm not suggesting that you permanently invert everything. I'm thinking that when you're looking at the Microsoft Github Actions window, press Super+m (or whatever your shortcut is), then when you're done, press it again to un-invert. You may find it convenient to invert anything you don't like. Personally, I use light mode (because there is almost always a light mode by default), then invert everything so that I'm basically in a complete dark mode with no exceptions because I work in a dark room where bright lights are unwelcome, and I don't have to configure anything. If I watch videos or need to see details on pictures, I can uninvert temporarily.

[Callek]

As requested upthread, I have created a new discussion for the UX breakage fixing this created.

https://github.com/orgs/community/discussions/163594

[cehfisher]

Thank you so much @Callek! We will close this issue out at EOD if the original poster @fw-aaron doesn't close it before then 😸

[NGPixel]

Why was this not rolled out behind an option in the user preferences? Like many users, I want the site in light mode but the console in dark mode.