Dark mode issues

[mirror176]

Recently had issues reading https://www.freshports.org/vuxml.php?package=qt5-webengine and the individual page linked at its bottom while viewing from Firefox dark theme. Text stays dark while background is dark without much contrast separation. Not sure why Firefox applies dark mode adjustments to background but not foreground for such a simple page but it appears correct for a moment when initially loading; aborting further loading (Esc. key) does not keep it that way even on a slow browser nor does it offer Firefox reader mode for that page.

What follows below is more 'i want dark mode' finishing design steps rather than something that actively made the page hard to use.

Google search bar doesn't change and brings in an area around it too which is also for light mode. Other sites have worked at how to control it as seen in https://support.google.com/programmable-search/thread/47599677/css-prefers-color-scheme-an-option-with-google-s-custom-search-engine?hl=en

Smaller details are our search box, buttons, combolists, radial lists, checkboxes, etc. (or whatever those elements are actually called).

Some artwork effort still needs to be done: search.jpg, vuxml-faded.gif (vuxml.gif looks finished), watch-add.gif don't have transparency and with black/dark against white background will need work to be seen properly. It looks like bug_report.gif is transparently backed done but again has black edges; likely scaling caused 3 legs to get gray which stand out in dark mode where none of the other edging does. gitlab.svg has its own gray box with rounded corners which seems out of place vs the other icons; the gray background is not a normal part of their logo based on what I see on their website's logo use in general. logs.gif seems decent enough already but could use touchups on object corners which stand out as pointy white pixels. Codeberg offers on their site https://design.codeberg.org/logo-kit/icon.svg and https://design.codeberg.org/logo-kit/icon_inverted.svg if we wanted to match their effort but its probably fine without the effort too if they don't care.

A larger area is freshports.jpg which would need a second copy made for dark mode (work to do considering black edge lines are part of the art) but could be cropped tighter left+right unless it was required for page layout for some reason. Not sure how much data could be saved if we can recreate the logo with vector art or (likely with loss of some style) more simplistic font calls but maybe 'smaller' content could be made. Could use a gradient/fade to leave image in original color without the obvious white box bounding it harshly against a dark page.

notbug.gif similarly could use a 'proper' dark mode rework so there aren't flickery white parts in it. More 'realistic' art will be harder to notice as dark bug on dark screen in dark room doesn't stand out too much so some art will be required for it to be anything but pointless or we can assume room is lit and accordingly it will appear a bit more.

[dlangille]

It would be great if people could

• create separate issues for each item mentioned
• do the work associated with them

[mirror176]

The first was what I considered an issue instead of a feature request. I don't have any worthwhile web development skills but could fumble around to maybe take a stab at it. I still don't even understand why the simple vulnerability pages would break as I thought it doesn't receive any css like pages before it but I don't understand how browsers are making dark mode changes happen.

I can make separate issues easy enough. Would you prefer the artwork be broken up to issues per icon/picture, as groups of art type (service icons, unrelated page graphics, etc.), and/or per type of issue with the art? Don't consider myself a great artist but I could tinker with some fixes (artists already did the hardest part).

Is there an easy way to find original sources of image files when they exist? I assume when .xcf is found in the image folder of this repo it was handcrafted for here but other things aren't clear if it was from here originally or not and when things like vuxml-faded.gif is formed from vuxml.gif or separate content.

[dlangille]

The original logo artwork is long gone.

For the vuxml icon, I think all I did was use gimp to change colors. I don't recall.

All the icons were fetched from image searches.

The reason I suggested different issues was only to let individuals pick up small tasks. I also want to be sure that I'm not asking you to do that. Anyone following along can step in, but please take up whatever tasks you want.

For HTML/CSS beyond my abilities, I've had good luck on Twitter/Mastodon by asking for help. If you get to that point, I can retweet or tweet on your behalf.