Topic: Dark theme for this site?

[Arantor]

This is stunningly good work! I switched to Stylus from Stylish, the only issue being that I could not find many public templates for third sites (i.e. github, linkedin).

They’re the same thing, except for one being a fork of the other with all the “report on all your browsing” removed.

[Antechinus]

Ok, here's an update of the theme that was posted back here.

Updated version is about as good as I can make it, given what I have to work with. Should be free of bugs (the earlier version had a few) and is a bit more refined in general. Contains even more cunning trickery and eye candy, and even more rampant abuse of !important to shortcut horrendous strings of selectors.

Zip contains a fully formatted CSS file (if you want to mess around with it) and a minified CSS file (if you just want to use the thing) and a readme (which you should read*).

Code can be dropped into Stylus (for Chrome, Firefox and Opera) or Stylem (for Pale Moon).

*(...but probably won't ).

[spiros]

I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

[Kindred]

... ... ... already explained why not.

[Bloc]

Ok, here's an update of the theme that was posted back here.

Updated version is about as good as I can make it, given what I have to work with. Should be free of bugs (the earlier version had a few) and is a bit more refined in general. Contains even more cunning trickery and eye candy, and even more rampant abuse of !important to shortcut horrendous strings of selectors.

Zip contains a fully formatted CSS file (if you want to mess around with it) and a minified CSS file (if you just want to use the thing) and a readme (which you should read*).

Code can be dropped into Stylus (for Chrome, Firefox and Opera) or Stylem (for Pale Moon).

*(...but probably won't ).

Darn. Now you got me hooked too.

Very nice indeed, genuine dark(ish) version of the site..and even with the distinct top/bottom links added. I will need to study the css abit but already tried the target-anywhere option.

[Bloc]

I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

Its a little work to setup to begin with - but start using Stylus/Stylish and you won't regret it. Used it on some sites that need quick fixes(and using to develop new sites even)..or just for the fun of it. But its always going to be a manual affair, I doubt any site will promote any use of styling their content.

[Antechinus]

Target anywhere? Maybe I need more coffee, but I don't understand that at the moment.

You won't stay hooked. Trust me on that. The code here is bloody horrible. But turning it into a stand-alone custom theme is going to be fun. That's the pay-off. I figured out most of the detailing I want while doing this thing, so the theme is 99% sorted.

Hey funny thing about board index layout. The Mutant Curve uses a max-width of 88em, simply because that suits my preference for a post content area around 1000px max on desktop. I find once it starts getting over that sentences start getting irritatingly long. You can still read them just fine, but there's a subtle niggle compared to shorter ones.

So Mutant's board index layout was developed for that width (and for ease of stacking on narrower screens) and it looks well-balanced at that width. This one uses 104em max-width, because I was using a more traditional board and message index layout (due to not wanting to go full bananas on the CSS) and that looks most balanced around 104em wide. At 88em it looks a tad stunted, while at 104em the Mutant layout looks a tad lost in space.

Sentences in posts are still ok at 104em wrapper width, but are definitely nudging the outer limits. Not that most people will notice, because they're used to it being stupid wide* so will regard the annoyance as a normal web experience.

*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite.

[Antechinus]

I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

I can always add the thing to the downloads for my Mutant Curve. Or I suppose (if you can talk the team into it) there could even be a sticky in this board for in-browser dark variants, or even for any variants at all. If anyone wants to promote the flexibility of SMF theming this wouldn't be such a bad way of doing it. Provided, of course, that support for said variants was not dumped on the SMF team (who wouldn't want to know about it).

I have even considered using something like Greasemonkey to inject a viewport meta tag into the DOM. That would open up scope for doing genuinely responsive variants on smf.org, although obviously running a custom script is an extra hoop for newbies to jump through, so probably a tad too scary.

[Bloc]

Target anywhere? Maybe I need more coffee, but I don't understand that at the moment.

You won't stay hooked. Trust me on that. The code here is bloody horrible. But turning it into a stand-alone custom theme is going to be fun. That's the pay-off. I figured out most of the detailing I want while doing this thing, so the theme is 99% sorted.

Hey funny thing about board index layout. The Mutant Curve uses a max-width of 88em, simply because that suits my preference for a post content area around 1000px max on desktop. I find once it starts getting over that sentences start getting irritatingly long. You can still read them just fine, but there's a subtle niggle compared to shorter ones.

So Mutant's board index layout was developed for that width (and for ease of stacking on narrower screens) and it looks well-balanced at that width. This one uses 104em max-width, because I was using a more traditional board and message index layout (due to not wanting to go full bananas on the CSS) and that looks most balanced around 104em wide. At 88em it looks a tad stunted, while at 104em the Mutant layout looks a tad lost in space.

Sentences in posts are still ok at 104em wrapper width, but are definitely nudging the outer limits. Not that most people will notice, because they're used to it being stupid wide* so will regard the annoyance as a normal web experience.

*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite.

target-anywhere as in targeting any attribute of a node..but yes, agreed on 90% width is just plain silly on wide displays. I actually gone another route of applying a padding at the sides of 10vw, going down to 5vw below 1400px and finally staying with 1rem below 1200px, that seems to work out fine for me.

Yes, the code is difficult..but we know that from starting every new theme copying the default code, nothing new under the sun and for me at least, its a code I know very well having mangled it so many times Yes, I am still hooked, as in nearly finishing my first ever SMF-site styling for Stylus/Stylish.

I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

I can always add the thing to the downloads for my Mutant Curve. Or I suppose (if you can talk the team into it) there could even be a sticky in this board for in-browser dark variants, or even for any variants at all. If anyone wants to promote the flexibility of SMF theming this wouldn't be such a bad way of doing it. Provided, of course, that support for said variants was not dumped on the SMF team (who wouldn't want to know about it).

I have even considered using something like Greasemonkey to inject a viewport meta tag into the DOM. That would open up scope for doing genuinely responsive variants on smf.org, although obviously running a custom script is an extra hoop for newbies to jump through, so probably a tad too scary.

Thats a great idea..well, maybe a tad bit off the top for most users to add in Greasemonkey(or Tampermonkey) to add the needed meta tag..and I guess its a whole new level to tackle when making it phone-friendly.. I think I'll rather change the template too then and then its out of scope for this particular project anyway.

[Gwenwyfar]

*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite.

Finally, someone that understands

Honestly, this is why we should start using some of that space to add menus or other such things, instead of stacking everything vertically then stretching a 100% width ON-YOUR-FACE image and then adding a title with 3 words that occupies all that space.

People, a site isn't a ******ing billboard. I have taken to using things at 80% size lately to make it more bearable.


And btw, this is looking quite good

[Antechinus]

Even 80% is too much, IMO. My 2c is max-width is the one to use and % is irrelevant, since what I am primarily wanting to do is keep lines of text to a reasonable length. This is basic typography stuff. Lines of text five miles long are a PITA to read, so size content to a reasonable maximum line length. The most logical unit to use is em (or rem, if you prefer) since that relates to number of characters, which is the relevant thing to measure against.

And yes, it is looking quite good. I knew that. Icons are a tad sucky, but for general distribution I thought I should stick with default icons (although I did consider loading a folder of custom ones online and calling those).

[spiros]

Just an idea to reduce image use in the themes proper you are working on, replacing blockquote image, I implemented FA on Timeless theme:

Code: [Select]

.bbc_standard_quote::before {
    content: "\f10d";
    font-family: 'Font Awesome 5 Free';
    color: gray;
    position: absolute;
    font-weight: 900;
    left: 4px;
    top: 2px;
}
You could use pure css of course:

Code: [Select]

.bbc_standard_quote::before {
    content: "\201C";
    font-family: 'Georgia';
    color: gray;
    position: absolute;
    left: 4px;
    top: 10px;
    font-size: 30px;
}

[Antechinus]

That requires calling Font Awesome, which is not part of this site. The idea with these is to run CSS-only on top of this site's code. FA is a whole 'nother ball game. Sure, you can use FA for a custom theme if you want to, but that's not the same thing as these overrides.

And frankly you don't even need FA for basic things like a quote mark. You could do it just with html.
See: https://www.toptal.com/designers/htmlarrows/punctuation/

(TBH I only left the quote mark image in because it was already there. I've never liked it much, and would probably ditch it for my own use.)

[spiros]

The 2nd version is pure css. I used FA well, because it was already there as part of the theme.

[Antechinus]

Fair enough.

[Gwenwyfar]

Even 80% is too much, IMO. My 2c is max-width is the one to use and % is irrelevant, since what I am primarily wanting to do is keep lines of text to a reasonable length. This is basic typography stuff. Lines of text five miles long are a PITA to read, so size content to a reasonable maximum line length. The most logical unit to use is em (or rem, if you prefer) since that relates to number of characters, which is the relevant thing to measure against.

And yes, it is looking quite good. I knew that. Icons are a tad sucky, but for general distribution I thought I should stick with default icons (although I did consider loading a folder of custom ones online and calling those).

Oh, I mean I'm scaling sites down to 80% scale, not the max width. Got confusing there. I think the readability limit is somewhere around 1200px, which is what I set 2.1 to. I'd prefer smaller, myself.

But pretty much. Not to mention when one thing is in one side and the equivalent thing is on the other side riiiiiight there and you have this effing huge white space in the middle

[Antechinus]

Yup. My preference is around 1000px max for actual post content, but I'm even perfectly happy with 800px. El Darko Magnifico is set to 1200px post content, which as you say is about the upper limit for anything approaching sanity.

[Gwenwyfar]

Pretty much.

I wish cm/mm was a usable unit sometime soon, it would make sense to measure some things according to their (approximate as it may be) real size. Specially as px is getting out of hand with every monitor having a different size.

But it would require screens to report their physical size, and that the browser somehow knows that size and the resolution to calculate it against. So who knows how that's gonna go.

Maybe if it could be made into a manual input... but who's gonna be arsed to grab out a ruler and configure their screen size?

[Arantor]

It'll go badly because the Windows display API can't get this right. Better on Linux, incidentally.

[Antechinus]

I can't see anything wrong with using em and rem. Things on the web are generally sized around making them readable, so em and rem seem like the logical units to use.