Dark Theme

[durangod]

Hi, can you please provide a dark theme option so we can select a dark theme for this forum view.  I am sensitive to the bright white and i look at the screen alot during my work.  I would love it if you could just give us that option to choose a dark theme. 

Thanks

[Deaks]

most modern browsers can force a dark theme without needing one why not have a look to see if your browser can.

[durangod]

most modern browsers can force a dark theme without needing one why not have a look to see if your browser can.

Yes of course, i have such a setup on my other computer.  However all of those have and cause conflicts both js conflicts and so on.  This is my development computer and so i need the output on the pages to be as pure as possible so i can develope correct css code and mobile css code.   So i need a dark theme without any browser filters.   Does that make sense

[Steve]

Have you seen this topic?

Dark SMF

Don't know if it'll help but thought I'd make you aware of it.

[durangod]

Have you seen this topic?

Dark SMF

Don't know if it'll help but thought I'd make you aware of it.

Yes i currently use that on FF and have for over a year.  But since i code for both chrome and FF i have to have something for chrome and they all suck.  So that is why i was thinking it would be easier to just ask if SMF might offer a dark theme for the live forum so that we would not have to jump through hoops to save our eyes. 

[Steve]

I know what you mean. I have the same issue with light themes. 

However, since we have a policy of keeping the support forum as close to what you get out of the box as possible, that means a dark theme's chances are essentially zero.

If a future version of SMF offers a dark theme, it'll be made available here.

[Antechinus]

Check my sig.

[durangod]

Keeping my fingers crossed it gets approved and loaded...  thank you so much... your selfless efforts will save so many eyes... :]

[Steve]

Check my sig.

And those css files go where?

[Antechinus]

For desktop (also available for Chrome and Opera): https://addons.mozilla.org/en-GB/firefox/addon/styl-us/

For Firefox on Android (has just been made available): https://addons.mozilla.org/en-GB/android/addon/styl-us/

NB: Firefox has just revamped the range of allowed extensions in Firefox for Android. There are now hundreds available, instead of the meagre range that was available for Android previously. Stylus is one of them. I have not got around to testing it on Android yet, but will soon. It works brilliantly on desktop.

[Antechinus]

Keeping my fingers crossed it gets approved and loaded...  thank you so much... your selfless efforts will save so many eyes... :]

To keep things sane I would have to do a cleaner version as a stand alone theme, or as a theme variant running alongside the default. The code in the current version includes a lot of "hit it with a large hammer" overrides for default code, which makes it a bit of a mongrel. It still works fine though.

[Tyrsson]

@Antechinus awesome work

[Antechinus]

It's the only theme I use on this site, for over 2 years.

[Steve]

Thanks Ant!

[Tyrsson]

One thing I noticed is in chrome there is no like icon. Just figured I would mention it.

[Steve]

Now that you mention it, not one in Firefox either.

[Antechinus]

That seems to be because I hid it deliberately, presumably because I never use it and liked the cleaner look (honestly can't remember).

Code Select Expand

/* -------------------------- */
/* Hide likes stuff in posts. */
.under_message .floatleft {
    display: none;
}

[Steve]

Cool beans!

[durangod]

So how soon can we expect this can be on option here on SMF community?

[Aleksi "Lex" Kilpinen]

Generally, we have strived to keep the forum here as vanilla as possible, while still fulfilling the needs of the team.
I would not be opposed to seeing a dark theme built in to SMF, not at all, but since one isn't there right now...

[Antechinus]

So how soon can we expect this can be on option here on SMF community?

It has been an option here on SMF community since September 2021.

[durangod]

Well my apology, i guess i should have checked the options before i insert foot in mouth lol

[durangod]

Actually no its not there..

You cannot view this attachment.

[Steve]

He means it's been an option in his signature ...

[durangod]

Oh ok..... well thats makes sense now....

Well i hope one day they do add one to SMF.  Means i can take off my sunglasses to view the community hee hee

[Antechinus]

Dude, seriously: if you want a dark theme here, and you want it now, just install Stylus on your browser and drop the content of that CSS file into Stylus. That's what I did, over 2 years ago. I have been merrily using said dark theme here ever since.

But if you don't want to do that, and prefer to grumble about there being no dark theme option available, feel free to continue grumbling.

[Tyrsson]

I mean you can literally turn the styling on and off with two clicks in chrome, which I do not use for dev anyway. Just for browsing and general testing, like hey does that page load or blow up if I click refresh lol.

[durangod]

If you consider what i have said so far to be grumbling wow you have not met some of the people i have dealt with in my life.  I am a pussy cat compared to even some on this forum....  I ask a question and i misunderstood what you meant by your reply before about a new dark theme.  I guess i thought you were working to get it approved.  But i was wrong in my thinking and i said so.

Grumbling!  I think not...

As far as using chrome to change things, sorry this is a developer station and it has to be pure so i know what my customers will see, i cant have it masked by some hack manipulation, sorry.   That is why i just dont do that trick..

[SleePy]

I suspect we will have it someday after it shows up in SMF.  As mentioned, we try not to deviate too far from what is built into SMF.  As to ensure the community what they see is what SMF has.  We have to change a little to wrap a site navigation contextual menu and helpful tools for those who provide support.

SMF 3.0 has a Pull Request open that updates and modernizes the current theme.  One aspect is that it now uses CSS variables, which will make a dark theme relatively simple.  3.0 is a ways away from being used on the site here.  Typically we do not move until the second or 3rd release candidate for our site, ensuring that any release is ready for prime time on large sites and complex scenarios.

[durangod]

Thanks SleePy, im happy with that, i really appreciate you taking the time to explain.  Good stuff

[Antechinus]

As far as using chrome to change things, sorry this is a developer station and it has to be pure so i know what my customers will see, i cant have it masked by some hack manipulation, sorry.  That is why i just dont do that trick..

It's no more a "hack" than any other theme. All it does is add a custom stylesheet after the default stylesheets. A lot of themes do this anyway, or effectively do the same thing by tacking custom CSS onto the end of the default index.css.

Essentially it's using the CSS cascade as it was meant to be used: with later and/or more specific declarations being able to override earlier and/or less specific ones. All themes that I am aware of do this.

So, you will not be "hacking" anything if you use this theme via Stylus. Also, as Tyrsson mentioned, you can switch it on or off via the address bar icon with a couple of clicks. If it is switched off you get the default theme with default CSS, so it's easy to view the default when you need to check that, and use the dark theme for preference when you can. I often do this myself, on a range of sites that I have written custom stylesheets for.

tl:dr; - It will not wreck anything you already have.

[Antechinus]

Oh: the other point is that the stylesheet is set by domain, or even by specific page url if you like. So, even if you do run it while using this site it will have absolutely no effect on any of your customers' sites. On their sites you will see exactly what they are running, so no problem.