Table text is not readable when dark mode is disabled

[jyelland]

Have you checked that your issue isn't already filed?

• I read through FAQ and searched through the past issues, none of which addressed my issue.
• Yes, I have checked that this issue isn't already filed.

Bug description

When dark mode is disabled, white text is displayed on white table backgrounds

How to reproduce the bug

Steps to reproduce:

1. Fork the repo (c5d0e92)
2. Change line 399 of _config.yml : enable darkmode: true -> enable darkmode: false
3. Change line 21 url to https://jyelland.github.io
4. Commit and push to deploy site via Github Actions
5. View live site at https://jyelland.github.io/al-folio/
6. Confirm that dates and non-hyperlink text in "news" and "latest posts" are white-on-white (ctrl-A below)

Error messages and logs

The error message you got, with the full traceback if available. Please paste it between these triple backticks.

What operating system are you using?

Linux, Mac

Where are you seeing the problem on?

Deployed site, Running locally with Docker (docker compose)

More info

As far as I can tell, the problem is that when dark mode is disabled, some tables are given class table-dark. If I manually change table-dark to table using Inspect in Firefox, text changes from white to black. However, it does not occur when I build locally using docker compose on MacOS—text is black on white. I wonder if this is related to #1134?

[george-gca]

This is weird. Can you look more into it, like what changes happen when enable darkmode: false?

[jyelland]

I have a lead on what is happening, but no understanding of why. In Firefox, if I open the site in either a private window, or on my laptop where I have set "Never remember history", tables get class table-dark even if enable darkmode: false. This also happens in Chrome and Brave, with default settings. However, it does not happen in Firefox with default settings: table text is black-on-white when enable darkmode: false. So it seems to be browser-specific, and maybe to do with privacy settings...

[george-gca]

I'd suggest also searching in our code and check what else this setting affects. But if I am going to guess, this probably happens because of how the classes are loaded during the first load. Probably the answer to all this lies in our assets/js/theme.js.

[khamkarsuraj]

How to reproduce the bug
Steps to reproduce:

Fork the repo (c5d0e92)
Change line 399 of _config.yml : enable darkmode: true -> enable darkmode: false

I attempted to reproduce the issue, but it seems to be working fine on my end.
@george-gca, are you able to replicate it?

[george-gca]

Yes, simply disabling dark mode and running on dev mode is enough. Now, for some unknown reason whenever I put console.log(...); in my js code is not printing to neither Chrome, Firefox, or Brave console, so it's being impossible to debug this.

Since my default system setting is dark, I suspect the theme is getting the system setting and applying table-dark class to all tables. But I can't debug it.

[iseesaw]

Hey, I'm seeing the same thing. With enable darkmode: false set, the news content isn't readable for me when my system is using dark mode.