Off-Topic :  K-Meleon Web Browser Forum
All which isn't K-Meleon related. 
Dark Theme for K-meleon Forum
Posted by: JohnHell
Date: October 04, 2022 03:15PM

Ok, I think this can go live...

I have added a Dark Theme for the K-meleon Forum. I do emphasis there: Forum. As the forum is the only thing I have a little control over. But, still, the control is weak and so it has its drawback that I'll explain later.

I did this, not to follow the trends on setting a darker theme on sites to save battery on mobile devices or whatever, but... well, because I'm selfish tongue sticking out smiley

One of the first things I do most of the days is to have a look here from my mobile device to see if some disrespectful (but which one is respectful?) spammer (or any kind of mad user) has made the forum unpleasant. And doing that on an old mobile phone that can only run Opera Mini, and that means that the user hasn't control over the pages colors opposed as on desktop browser styles (which I already have for this site on K-meleon browser), is like setting a direct light beam to yours eyes early in the morning confused smiley (has anyone been awaken with a flashlight), so no funny and is worst while getting old, so I decided to go aboard this boat and trying to add a darker theme option to the forum.

I say go aboard because is not an easy endeavour when you don't have access to the server.


What have I done?

First of all, I didn't like the idea on rely on browsers. Despite modern browsers support the media query "@media (prefers-color-scheme: dark)", and I use on roytam's Newmoon, some sites... some sites don't look well on dark (sometimes even too dark) and I miss the option to switch back without switching the whole setting in the browser.

So, first task: let the user decide, let the user have an option. And as so, you should see a little icon at the top right of your screen with a Sun and a Moon (kind of resembling and eclipse, I would say) to give an idea of what can they do to switch between dark and light.

The feature is JavaScript/client-side based and uses a cookie. As so it has its drawback. The user must browse the forum with JavaScript enabled to enjoy it and also allow cookies.

Stats has shown that most of the visitors do have JavaScript enabled and allow cookies, but still is an user side feature and so becomes unpredictable.


Why I have set up this way? Did you read above that I have weak control of the site? I can manage the forum but I don't have control over server files and how they are served so I can't set HTTP cookies and control all server-side.

If you are curious, or want to edit your cookies, as deleting it, the cookie name is themeSettings and has a lifespan of half a year.

The lifespan is refreshed on each page load, but if you are away for more then six months, it will vanish. I think is fair enough.


If you are already playing with the switch button you'll find that the site looks dark greenish. The idea behind it to keep coherence and look as our little green lizard and the left side panel of the forum. But darker grinning smiley

At first, it will feel shocking (really, I bet it and assure you). As any change isn't easy to accept, please, before post any feedback here, just keep the theme for some time before you start to rant, but if you kind of like it and find some unmatching colors hard to read, don't hesitate to post your new colors.

The colors have been chosen the more carefully possible to allow good reading. In other words, I tried to keep accessibility for those with bad eyesight and so it complies, mostly, with Web Content Accessibility Guidelines (WCAG 2.0).

If you decide to give feedback on changing colors, please, think about this first. There are online tools that will help you to suggest a respectful color shift for those with disabilities.


Aside the colors, I also edited the logo to make a dark one and took the chance to make a secondary light logo for the responsive CSS layout.

The original logo, as GIF format, understandable because back then there wasn't good support for PNG, had the drawback that it couldn't be made with transparent background without artefacts (GIF wasn't good with round borders transparencies; even PNG isn't perfect), now, since I made the responsive design, it looked worst.

Take this screenshot as example. As you can see (original on the left), the full white background over a full green doesn't match well.

(If you think that is glowing in the middle, between the letters..., no, they are just your eyes/brain tricking you. The colors are the same.)

Again, as I don't have the original source, it is just an edit from the original and, obviously, doesn't look perfect.

To see the darker logo... well, just switch the theme and have a look to it!!!! winking smiley


Similarly, back on the Dark theme, happens to the post editor tools buttons (to set bold font, insert images, etc). They were made with a GIF format back then and on the dark theme don't look good, but I won't edit these ones. I have a limit on what I can do on the forum administration and I don't want to reach it for these little annoyances, but if you don't like it, I can revert easily to the almost white background for those buttons.


And I think I didn't miss anything else to say so... enjoy... if you like it... If you don't, you'll always have the light design.

Please provide screenshots if you report glitches smiling smiley



Edited 1 time(s). Last edit at 10/04/2022 03:22PM by JohnHell.

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: JohnHell
Date: October 13, 2022 01:23AM

I fixed a couple of secondary glitches I introduced with the changes and here there are two screenshots about how they look side by side, original and "dark themed":





Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: RJJIII
Date: October 23, 2022 04:18AM

This looks really good; thanks!

It works great in dark mode, but I've found bug using the old light mode. I've tried it for a while and find the same error on different browsers. If I switch to dark theme and back to light theme, I can't click the links in the side bar. I can switch back to dark and the links function again, but they don't function if in light mode.

When I inspect the links I get the #KmHeader div instead. If I go into the CSS under #KmHeader::after and remove content: ""; it works fine, but I don't know if that blank content needs to be there for another reason. Let me know if you need any more info to diagnose the bug.

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: JohnHell
Date: October 23, 2022 06:55PM

Thanks for the report.

A dumb mistake that has been already fixed. Only 20 days without the sidebar menu confused smiley (I should be very ashamed). The mistake might have come when I was testing the responsive layout.

That must be there as a preallocation/preload of the responsive logo and it is also where it is placed the darker logo.

I should preallocate/preload the darker logo as well, but that would delay the page load too much (thanks, SourceForge, for your slowness!).



Edited 2 time(s). Last edit at 10/23/2022 06:59PM by JohnHell.

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: RJJIII
Date: October 23, 2022 08:25PM

It works great now! Also, I like how the dark mode encorporates the KM green.

It's no big.

And that makes sense.

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: JohnHell
Date: October 23, 2022 09:44PM

Big, what?

I'm scratching my head trying to understand what you meant by "It's no big."

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: RJJIII
Date: October 23, 2022 09:53PM

Oh, lol, I mean it's not a big deal. People say it a bunch of ways in English. I think the equivalent idiom in Spanish is: No pasa nada.

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: JohnHell
Date: October 23, 2022 10:40PM

Ok, that makes sense now grinning smiley

I admit, first time I read that sort version of "it's not a big deal" smiling smiley

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: yawaw
Date: January 04, 2024 07:48PM

Moderation note: originally an unnecessary 1:1 quote of first post without adding anything else.



Edited 1 time(s). Last edit at 01/07/2024 11:34PM by JohnHell.

Options: ReplyQuote
Re: Dark Theme for K-meleon Forum
Posted by: JohnHell
Date: January 04, 2024 09:52PM

You quoted my post 1:1 and didn't tell anything else :-?


If you try to report that is broken, yes, it is true. The fix isn't on my hands. I could do something, but I simply don't dare.


I finally find out that after the PHP upgrades by SourceForge on late 2023, for whatever reason, UTF and binary data, is being sent/displayed/served as ANSI/ISO-8859-1/Windows-1252, causing corruption on decoding and presenting.


P.S.: If you don't add anything else, I'll have to edit your post as a quote 1:1 is unnecessary.



Edited 1 time(s). Last edit at 01/04/2024 09:53PM by JohnHell.

Options: ReplyQuote


K-Meleon forum is powered by Phorum.