Topic: Dark theme for this site?

[Kindred]

well, the specific background images and brand images would be custom.

I may make it available at some point.   It's a port of Bloc's 2.0 Studio003 theme look/feel

but it would probably not make much sense to use that theme here on simplemachines.org...

[live627]

smsite2

Party like it's 2009!

[Arantor]

Because I'm a nerd.

[Antechinus]

I'd forgotten that one existed.

It did occur to me that it wouldn't be that difficult to grab the CSS for Prince of Darkness or Chocolate Curvaceous and throw it into Stylem (or Stylus or Stylish, as you prefer). Anyone could do that if they really want a dark theme for this site. You could even add some basic responsive bits.

Meh. I might do it just for fun. I have been idly thinking of updating those themes.

[Gwenwyfar]

Cards are always fun

[Antechinus]

I am not talking about the main theme being a dark theme, I am talking of having the option to select a dark theme as a user. In all honesty, I cannot see why this could not happen.

I use browser add-ons for dark theme, but current themes do not look good in them due to heavy image use. You are correct, this is an important accessibility issue, SMF should be accessible.

You can try this. I did a quick revamp of one of my old dark themes (Chocolate Curvaceous) and I'm running it in Stylem at the moment.  Stylish or Stylus would also work, of course. I'm quite liking it, now that you got me motivated. It gives a rather nice dark theme here, still in the Curve style, without dumping extra maintenance responsibilities on the SMF team.

The CSS could still do with a bit of cleaning up, but is pretty decent considering it has to run on top of what is here. Most images have been ditched, with only a few essential ones remaining, and those have been tweaked with CSS filters so they don't look too bad.

It has basic responsive behavior on desktop, but I suspect that the site's lack of a viewport meta tag may screw with the responsiveness on mobile (have not tested this, as I don't use mobile for browsing). Also note that at the moment it has only been tested on this domain (home & forum). I haven't yet tried to make it compatible with the downloads/customize sites, but that would obviously be feasible.

Anyway, feel free to throw the CSS in a browser add-on and see what you think.

PS: I also made the drop menus less twitchy.

[spiros]

Looks amazing! I added it here as well https://userstyles.org/styles/185187/dark-smf (Stylish for Chrome - https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en)

[Arantor]

Huh, did they rerelease Stylish without the nasty tracking everything you do and phoning home with it?

[Antechinus]

Stylish has the tracking.
Stylus doesn't. You can get that here: https://add0n.com/stylus.html
Neither does Stylem (for Pale Moon). Which obviously is my favourite: https://addons.palemoon.org/addon/stylem/

I wouldn't have gone as far as adding it to userstyles quite yet, because I can see it getting more tweaking (and basic code clean up) but I'm fine with you doing it anyway as long as I don't have to support that version.

It's a bit off though, because the new.gif's are the wrong color. This could be because of your language selection. There's a site bug at the moment in that the old (blue) new.gif somehow got uploaded for English. The filter in the CSS was set for that, so would look wrong with an orange gif. Easy to fix. Just remove this from the CSS:

Code: [Select]

  img[src*="new.gif"] {
    filter: hue-rotate(160deg) brightness(1.1);
    border: 1px solid blue;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px blue;
 }

[Bloc]

Nowadays I do all my CSS editing in Stylus, its just sooo easier to see changes right away. Combined with Vivaldi's option to show 2 windows side by side its a killer setup for doing any css work IMHO.

[Antechinus]

I do a fair bit in Stylem (or Stylus when I'm using another browser) but for testing on local it's better in some ways to still use Notepad++. Page reloads are near enough to instant anyway, and you get the benefit of extra functionality in the editor. But I do have quite a few WIP theme ideas sacked up in Stylem, which I switch on and off as the mood takes me.

[Bloc]

Yes, Editplus, my long time writing pal is always open so its just nice to have Stylus side by side with the live page, especially when I also use the inspector to find out what went wrong..I also use a small extension for Chrome/Vivaldi called Hard Refresh - you can set what to erase, cache, cookies, just css files etc. Often a regular hard refresh will log you out, but not with this one. Very helpful for javascript file changes.

Speaking of localhost...and since we are on the subject anyway I've used Xampp for years but recently switched to Laragon. Its faster, can do SSL(ish) and custom domains(at least xxx.test sites) on localhost and can switch PHP versions as well if the need arise. But best of all is the automation where you create a blank site "mysite" whereby database "mysite" and domain "mysite.test" + a folder in the www folder called "mysite" is created. I am sure devs around here know this already, but for me its real gem to have in my toolbox.

[Antechinus]

Haven't tried it. I'm still using Vertrigo for local. It was idiot-proof back when I started coding, and still seems to be.

[lurkalot]

Speaking of localhost...and since we are on the subject anyway I've used Xampp for years but recently switched to Laragon. Its faster, can do SSL(ish) and custom domains(at least xxx.test sites) on localhost and can switch PHP versions as well if the need arise. But best of all is the automation where you create a blank site "mysite" whereby database "mysite" and domain "mysite.test" + a folder in the www folder called "mysite" is created. I am sure devs around here know this already, but for me its real gem to have in my toolbox.

Thanks for the heads up on this, I'm just giving Laragon a try.  Only been playing for a few minutes very impressed already.  Starts a lot faster than Xampp, and the clone project feature is great.  Within a few minutes had my first Laragon test site up, and cloned a working copy of it.  Obviously had to run repair settings on the clone but it did everything else for me in a couple of clicks.  Nice. 

[Bloc]

Yes, it takes away the boring chore of setting things up.

[Antechinus]

Ok, got another one. This has turned into one of my all-time favourites, so I'll also be doing it as an installable custom theme on the Theme Site. IOW, the whole kaboodle, with templates and language files and all the usual stuff that themes have. I'm thinking I'll make it a three variant dark theme: this one (Blue Steel) + Chocolate Curvaceous (the dark brown one I posted earlier) + Prince of Darkness, all updated to the style of this variant.

In the meantime it's CSS only, on this site's markup, so it can be dropped into Stylus or Stylem for browsing on smf.org. It handles the non-forum areas as well as the forum. In other words, it works fairly well with everything in the site menu (at the top right of the forum header).

Do note that this is a pile of overrides for this site's code and should not, this means NOT, be taken as a guide for how to write good CSS in general. Lots of it is seriously horrible, because it had to be to work on top of what is in this site's files. If being done from scratch, as a pure custom theme, it could be done a lot cleaner and simpler.

The CSS file has been minified, so formatting is not particularly friendly, but it all works AFAICT. Code allows for basic responsiveness, but I can't guarantee how that will behave with this site's lack of the usual viewport meta tag.

I have implemented pure CSS "New" icons because I hated the old new.gif. This means it can't pick up the default language strings, so if you don't want it to say "New" in English you'll have to edit the CSS to your preferred language. I have put this at the end of the file so it's easy to find and edit.

 

Code: [Select]

/* Pure CSS "New" icons: board index, message index, unread. */
/* English default. Examples provided for French and German. */
/* Edit content text to suit your preferred language. */
/*
content:'nouveau';
content:'neu';
*/
.children .new_posts+a::after,.topic_table a[id*=newicon]::after{content:'new';background:#55677b;color:#ffe3ad;font-weight:700;font-size:1rem;padding:0 4px;text-transform:uppercase;text-shadow:0 0 1px #000}.children .new_posts+a:hover,.topic_table a[id*=newicon]:hover{text-decoration:none;border-color:#55677b;transition:border-color .1s step-end}}
The only part you have to change if you do not want English is where it says content;'new';

The screenshots show how the theme looks when running live in Pale Moon with the Stylem add-on. Do note that at this stage there is no support for RTL languages.

[Bloc]

Looks very nice Tested in Stylus, no problems reported.

This actually looks like fun - styling up this site like that.

[Antechinus]

It has been quite good fun, although the code you have to work with is pretty damned horrendous in places. It gets you thinking though, because you are forced to use what's there and can't do any of the usual stunts like rewriting anything that's a PITA.

I came up with a range of handy little tricks, including such things as declaring a 50% border-radius on the default smiley gif's to make them look decent on a dark background. And then there's the playing with filters to re-style existing icons. That's quite handy. I remember when we were first talking about CSS filters and we thought there wouldn't be much use for them in practice. Turns out there is.

[spiros]

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).

[Antechinus]

The same code will run in any of these add-ons. It's all just CSS with an @document header to define the domain(s) you want it to work on. You can grab the guts out of any user style and apply it to any domain (although obviously it may not look good on the wrong sites).